/* Reset margins and paddings for html and body to ensure consistent viewport sizing */
html, body {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important; /* Ensure no unwanted scrollbars on the main document */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
/* Professional Deep Space Color Scheme */
--bg: #0a0b10; /* Deep Navy/Black background */
--bg-secondary: #0f1117; /* Slightly lighter navy */
--bg-terminal: #0a0b10; /* Terminal deep navy */
--text: #f8fafc; /* Off-white text */
--text-secondary: #cbd5e1; /* Light gray secondary text */
--text-muted: #64748b; /* Muted slate gray */
--text-terminal: #3b82f6; /* Vivid blue terminal text */
--border: #3b82f6; /* Vivid blue borders */
--border-bright: #10b981; /* Success green accent borders */
--border-terminal: #3b82f6; /* Terminal vivid blue border */
--accent: #3b82f6; /* Vivid blue accent */
--accent-gold: #10b981; /* Success green accents */
--accent-terminal: #3b82f6; /* Terminal vivid blue accent */
--success: #10b981; /* Success green for success states */
/* Brutalist Typography - System fonts for raw appearance */
--font: 'Courier New', 'Monaco', 'Consolas', monospace;
--font-terminal: 'Courier New', 'Monaco', monospace;
--font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, monospace;
--font-size-base: 14px; /* Smaller, more brutalist */
--line-height: 1.4; /* Tighter line spacing */
/* Effects */
--glow: 0 0 8px rgba(255, 69, 0, 0.5);
--glow-gold: 0 0 8px rgba(255, 215, 0, 0.4);
--shadow-terminal: 0 0 15px rgba(255, 69, 0, 0.2);
}
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
font-size: var(--font-size-base);
line-height: var(--line-height);
overflow: hidden; /* Keep hidden for fixed layout */
height: 100vh;
width: 100vw;
/* Brutalist: Raw, functional styling */
text-rendering: optimizeSpeed;
-webkit-font-smoothing: auto;
font-variant-numeric: tabular-nums;
}
/* ENCOM Boardroom Grid Overlay Effects */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
/* Primary ENCOM Grid - Horizontal */
repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(255, 69, 0, 0.03) 2px,
rgba(255, 69, 0, 0.03) 4px
),
/* Secondary Grid - Vertical */
repeating-linear-gradient(
90deg,
transparent,
transparent 25px,
rgba(255, 215, 0, 0.02) 25px,
rgba(255, 215, 0, 0.02) 26px
),
/* ENCOM Diagonal Pattern */
repeating-linear-gradient(
45deg,
transparent,
transparent 50px,
rgba(255, 69, 0, 0.005) 50px,
rgba(255, 69, 0, 0.005) 51px
);
pointer-events: none;
z-index: 9999;
animation: encom-grid-pulse 8s ease-in-out infinite;
}
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(
circle at 20% 30%,
rgba(255, 69, 0, 0.03) 0%,
transparent 50%
),
radial-gradient(
circle at 80% 70%,
rgba(255, 215, 0, 0.02) 0%,
transparent 50%
);
pointer-events: none;
z-index: 9998;
animation: encom-ambient-glow 12s ease-in-out infinite alternate;
}
@keyframes encom-grid-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
@keyframes encom-ambient-glow {
0% { transform: scale(1) rotate(0deg); }
100% { transform: scale(1.1) rotate(2deg); }
}
/* Terminal Window Chrome - Brutalist Raw Style */
.terminal-window {
position: absolute; /* Changed to absolute to not take up space in the document flow */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-terminal);
border: 3px solid var(--border-terminal);
border-radius: 0; /* Brutalist: No rounded corners */
box-shadow:
var(--shadow-terminal),
0 0 0 1px var(--border-terminal),
5px 5px 0 var(--accent-gold); /* Brutalist: Raw offset shadow */
overflow: hidden; /* Contains children, but doesn't cause external scroll */
box-sizing: border-box; /* Include padding and border in element's total width and height */
/* margin: 0 auto; Removed as it's now absolute positioned */
display: flex;
flex-direction: column;
/* Brutalist: Functional and imposing */
outline: none !important;
}
/* Terminal Title Bar – canonical (match index.html on all pages) */
.terminal-titlebar {
position: sticky;
top: 0;
z-index: 1000;
height: 48px;
padding: 10px 14px;
font-size: 0.95rem;
background: rgba(10, 11, 16, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(59, 130, 246, 0.2);
display: flex;
align-items: center;
justify-content: space-between;
color: var(--text-terminal);
box-sizing: border-box;
}
.terminal-titlebar .title {
font-weight: bold;
color: #ffffff;
text-shadow: 0 0 5px #ffffff;
display: flex;
align-items: center;
gap: 8px;
}
.terminal-titlebar .circle-square-symbol {
margin: 0;
vertical-align: baseline;
}
.terminal-email {
display: inline;
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
cursor: pointer;
user-select: none;
}
.terminal-email:hover {
text-decoration: underline;
}
/* Copy-on-click (e.g. footer phone/email) */
.copy-on-click {
cursor: pointer;
user-select: none;
}
.copy-on-click:hover {
text-decoration: underline;
}
.crimson-o {
color: crimson;
text-shadow: 0 0 5px crimson;
display: inline;
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
line-height: inherit;
letter-spacing: inherit;
}
/* Social Icons */
.social-icons {
display: flex;
align-items: center;
gap: 12px;
}
.social-icon {
color: var(--text);
text-decoration: none;
min-width: 44px;
min-height: 44px;
padding: 12px;
border-radius: 2px;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.8;
box-sizing: border-box;
}
.social-icon:hover {
color: var(--accent-gold);
background: rgba(255, 69, 0, 0.1);
opacity: 1;
transform: translateY(-1px);
box-shadow: 0 0 8px rgba(255, 69, 0, 0.3);
}
.social-icon svg {
width: 20px;
height: 20px;
fill: currentColor;
}
/* Brutalist Prompt */
.brutalist-prompt {
color: var(--accent-gold);
font-weight: bold;
font-family: var(--font-terminal);
text-shadow: 0 0 3px var(--accent-gold);
margin-right: 15px;
}
.terminal-titlebar .controls {
display: flex;
gap: 8px;
}
.control-btn {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid var(--border-terminal);
background: var(--bg-secondary);
cursor: pointer;
transition: all 0.2s ease;
}
.control-btn:hover {
box-shadow: 0 0 8px var(--accent-terminal);
}
.control-btn.close { background: #ff605c; }
.control-btn.minimize { background: #ffbd44; }
.control-btn.maximize { background: #00ca4e; }
.dashboard {
padding: 20px;
height: calc(100vh - 60px); /* Fixed height minus titlebar */
background: var(--bg);
position: relative;
overflow: hidden; /* No internal scrolling */
display: flex;
flex-direction: column;
}
/* Terminal Content Area */
.terminal-content {
background: var(--bg-terminal);
padding: 20px;
position: relative;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Terminal Glow Effects */
.terminal-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(255, 69, 0, 0.03) 0%, transparent 70%);
pointer-events: none;
}
/* ENCOM Hero Section */
.encom-hero-section {
text-align: center;
margin-bottom: 80px;
padding: 80px 20px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* Hero CTA Section */
.hero-cta {
margin-top: 25px;
position: relative;
z-index: 5;
width: 100%;
display: flex;
justify-content: center;
}
.button-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.start-now-btn {
background: linear-gradient(135deg, var(--bg-terminal) 0%, rgba(255, 69, 0, 0.1) 100%);
border: 2px solid var(--accent-terminal);
color: var(--text);
padding: 20px 40px;
font-family: var(--font-terminal);
font-size: 1.3rem;
font-weight: bold;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 3px;
border-radius: 0;
box-shadow:
0 0 20px rgba(255, 69, 0, 0.4),
inset 0 0 15px rgba(255, 69, 0, 0.05);
display: inline-block;
min-width: 250px;
}
.start-now-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 69, 0, 0.3), transparent);
transition: left 0.6s ease;
}
.start-now-btn:hover {
border-color: var(--accent-gold);
color: var(--accent-gold);
box-shadow:
0 0 30px rgba(255, 215, 0, 0.6),
inset 0 0 20px rgba(255, 215, 0, 0.1);
transform: translateY(-2px);
text-shadow: 0 0 10px var(--accent-gold);
}
.start-now-btn:hover::before {
left: 100%;
}
.start-now-btn:active {
transform: translateY(0);
box-shadow:
0 0 20px rgba(255, 69, 0, 0.7),
inset 0 0 15px rgba(255, 69, 0, 0.2);
}
.btn-text {
position: relative;
z-index: 2;
display: block;
}
.btn-glow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(255, 69, 0, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 1;
}
.start-now-btn:hover .btn-glow {
opacity: 1;
}
.hero-tagline {
position: relative;
display: block;
max-width: 900px;
margin: 0 auto;
}
/* Hyperspace Effects */
.hyperspace-container {
position: absolute;
top: 300px;
left: -50px;
right: -50px;
bottom: 0;
pointer-events: none;
overflow: visible;
z-index: 1;
}
.hyperspace-particle {
position: absolute;
background: var(--accent-gold);
border-radius: 50%;
opacity: 0;
left: 50%;
top: 50%;
box-shadow: 0 0 8px var(--accent-gold), 0 0 16px rgba(255, 215, 0, 0.3);
}
.hyperspace-particle.particle-1 {
width: 4px;
height: 4px;
animation: hyperspace-particle-1 4.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation-delay: 0s;
}
.hyperspace-particle.particle-2 {
width: 3px;
height: 3px;
animation: hyperspace-particle-2 4.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation-delay: 0.6s;
}
.hyperspace-particle.particle-3 {
width: 6px;
height: 6px;
animation: hyperspace-particle-3 4.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation-delay: 1.2s;
}
.hyperspace-particle.particle-4 {
width: 2px;
height: 2px;
animation: hyperspace-particle-4 3.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation-delay: 1.8s;
}
.hyperspace-particle.particle-5 {
width: 5px;
height: 5px;
animation: hyperspace-particle-5 4.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation-delay: 2.4s;
}
.hyperspace-particle.particle-6 {
width: 3px;
height: 3px;
animation: hyperspace-particle-6 4.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation-delay: 3.0s;
}
.hyperspace-particle.particle-7 {
width: 4px;
height: 4px;
animation: hyperspace-particle-7 4.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation-delay: 3.6s;
}
.hyperspace-particle.particle-8 {
width: 2px;
height: 2px;
animation: hyperspace-particle-8 4.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation-delay: 4.2s;
}
.hyperspace-particle.particle-9 {
width: 7px;
height: 7px;
animation: hyperspace-particle-9 5.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation-delay: 4.8s;
}
.hyperspace-particle.particle-10 {
width: 3px;
height: 3px;
animation: hyperspace-particle-10 4.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation-delay: 0.5s;
}
.hyperspace-particle.particle-11 {
width: 5px;
height: 5px;
animation: hyperspace-particle-11 4.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation-delay: 1.5s;
}
.hyperspace-particle.particle-12 {
width: 2px;
height: 2px;
animation: hyperspace-particle-12 3.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation-delay: 2.7s;
}
.hyperspace-particle.particle-13 {
width: 4px;
height: 4px;
animation: hyperspace-particle-13 4.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation-delay: 3.8s;
}
.hyperspace-particle.particle-14 {
width: 3px;
height: 3px;
animation: hyperspace-particle-14 4.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation-delay: 1.1s;
}
.hyperspace-particle.particle-15 {
width: 6px;
height: 6px;
animation: hyperspace-particle-15 5.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation-delay: 2.2s;
}
@keyframes hyperspace-particle-1 {
0% { opacity: 0; transform: translateX(0) translateY(0) scale(0); }
20% { opacity: 0.8; transform: translateX(200px) translateY(150px) scale(1); }
80% { opacity: 0.8; transform: translateX(400px) translateY(300px) scale(1.1); }
100% { opacity: 0; transform: translateX(600px) translateY(450px) scale(0); }
}
@keyframes hyperspace-particle-2 {
0% { opacity: 0; transform: translateX(0) translateY(0) scale(0); }
20% { opacity: 0.8; transform: translateX(-200px) translateY(150px) scale(1); }
80% { opacity: 0.8; transform: translateX(-400px) translateY(300px) scale(1.0); }
100% { opacity: 0; transform: translateX(-600px) translateY(450px) scale(0); }
}
@keyframes hyperspace-particle-3 {
0% { opacity: 0; transform: translateX(0) translateY(0) scale(0); }
20% { opacity: 0.8; transform: translateX(180px) translateY(-140px) scale(1); }
80% { opacity: 0.8; transform: translateX(360px) translateY(-280px) scale(1.2); }
100% { opacity: 0; transform: translateX(540px) translateY(-420px) scale(0); }
}
@keyframes hyperspace-particle-4 {
0% { opacity: 0; transform: translateX(0) translateY(0) scale(0); }
20% { opacity: 0.8; transform: translateX(-180px) translateY(-140px) scale(1); }
80% { opacity: 0.8; transform: translateX(-360px) translateY(-280px) scale(1.1); }
100% { opacity: 0; transform: translateX(-540px) translateY(-420px) scale(0); }
}
@keyframes hyperspace-particle-5 {
0% { opacity: 0; transform: translateX(0) translateY(0) scale(0); }
20% { opacity: 0.8; transform: translateX(220px) translateY(180px) scale(1); }
80% { opacity: 0.8; transform: translateX(440px) translateY(360px) scale(1.1); }
100% { opacity: 0; transform: translateX(660px) translateY(540px) scale(0); }
}
@keyframes hyperspace-particle-6 {
0% { opacity: 0; transform: translateX(0) translateY(0) scale(0); }
20% { opacity: 0.8; transform: translateX(-220px) translateY(180px) scale(1); }
80% { opacity: 0.8; transform: translateX(-440px) translateY(360px) scale(1.0); }
100% { opacity: 0; transform: translateX(-660px) translateY(540px) scale(0); }
}
@keyframes hyperspace-particle-7 {
0% { opacity: 0; transform: translateX(0) translateY(0) scale(0); }
20% { opacity: 0.8; transform: translateX(160px) translateY(-200px) scale(1); }
80% { opacity: 0.8; transform: translateX(320px) translateY(-400px) scale(1.1); }
100% { opacity: 0; transform: translateX(480px) translateY(-600px) scale(0); }
}
@keyframes hyperspace-particle-8 {
0% { opacity: 0; transform: translateX(0) translateY(0) scale(0); }
20% { opacity: 0.8; transform: translateX(-160px) translateY(-200px) scale(1); }
80% { opacity: 0.8; transform: translateX(-320px) translateY(-400px) scale(1.0); }
100% { opacity: 0; transform: translateX(-480px) translateY(-600px) scale(0); }
}
@keyframes hyperspace-particle-9 {
0% { opacity: 0; transform: translateX(0) translateY(0) scale(0); }
20% { opacity: 0.8; transform: translateX(250px) translateY(120px) scale(1); }
80% { opacity: 0.8; transform: translateX(500px) translateY(240px) scale(1.2); }
100% { opacity: 0; transform: translateX(750px) translateY(360px) scale(0); }
}
@keyframes hyperspace-particle-10 {
0% { opacity: 0; transform: translateX(0) translateY(0) scale(0); }
20% { opacity: 0.8; transform: translateX(-250px) translateY(120px) scale(1); }
80% { opacity: 0.8; transform: translateX(-500px) translateY(240px) scale(1.0); }
100% { opacity: 0; transform: translateX(-750px) translateY(360px) scale(0); }
}
@keyframes hyperspace-particle-11 {
0% { opacity: 0; transform: translateX(0) translateY(0) scale(0); }
20% { opacity: 0.8; transform: translateX(200px) translateY(-160px) scale(1); }
80% { opacity: 0.8; transform: translateX(400px) translateY(-320px) scale(1.1); }
100% { opacity: 0; transform: translateX(600px) translateY(-480px) scale(0); }
}
@keyframes hyperspace-particle-12 {
0% { opacity: 0; transform: translateX(0) translateY(0) scale(0); }
20% { opacity: 0.8; transform: translateX(-200px) translateY(-160px) scale(1); }
80% { opacity: 0.8; transform: translateX(-400px) translateY(-320px) scale(1.0); }
100% { opacity: 0; transform: translateX(-600px) translateY(-480px) scale(0); }
}
@keyframes hyperspace-particle-13 {
0% { opacity: 0; transform: translateX(0) translateY(0) scale(0); }
20% { opacity: 0.8; transform: translateX(140px) translateY(220px) scale(1); }
80% { opacity: 0.8; transform: translateX(280px) translateY(440px) scale(1.1); }
100% { opacity: 0; transform: translateX(420px) translateY(660px) scale(0); }
}
@keyframes hyperspace-particle-14 {
0% { opacity: 0; transform: translateX(0) translateY(0) scale(0); }
20% { opacity: 0.8; transform: translateX(-140px) translateY(220px) scale(1); }
80% { opacity: 0.8; transform: translateX(-280px) translateY(440px) scale(1.0); }
100% { opacity: 0; transform: translateX(-420px) translateY(660px) scale(0); }
}
@keyframes hyperspace-particle-15 {
0% { opacity: 0; transform: translateX(0) translateY(0) scale(0); }
20% { opacity: 0.8; transform: translateX(300px) translateY(-100px) scale(1); }
80% { opacity: 0.8; transform: translateX(600px) translateY(-200px) scale(1.2); }
100% { opacity: 0; transform: translateX(900px) translateY(-300px) scale(0); }
}
.tagline-text {
font-family: var(--font-terminal);
font-size: 3.8rem;
font-weight: bold;
color: var(--accent-gold);
text-shadow:
0 0 10px var(--accent-gold),
0 0 20px rgba(255, 215, 0, 0.5),
0 0 30px rgba(255, 215, 0, 0.3);
letter-spacing: 3px;
animation: hero-glow 3s ease-in-out infinite alternate;
position: relative;
z-index: 2;
}
.tagline-text.speed-effect {
animation: hero-glow 3s ease-in-out infinite alternate,
speed-flicker 0.2s linear infinite;
}
.tagline-underline {
height: 3px;
background: linear-gradient(90deg, transparent, var(--accent-terminal), var(--accent-gold), var(--accent-terminal), transparent);
margin-top: 10px;
border-radius: 2px;
box-shadow: 0 0 10px var(--accent-terminal);
animation: underline-flow 2s linear infinite;
}
@keyframes hero-glow {
0% {
text-shadow:
0 0 10px var(--accent-gold),
0 0 20px rgba(255, 215, 0, 0.5),
0 0 30px rgba(255, 215, 0, 0.3);
}
100% {
text-shadow:
0 0 15px var(--accent-gold),
0 0 25px rgba(255, 215, 0, 0.7),
0 0 35px rgba(255, 215, 0, 0.5);
}
}
@keyframes underline-flow {
0% { transform: scaleX(0.8); opacity: 0.8; }
50% { transform: scaleX(1.2); opacity: 1; }
100% { transform: scaleX(0.8); opacity: 0.8; }
}
@keyframes speed-flicker {
0%, 95% { opacity: 1; }
96%, 97% { opacity: 0.95; }
98%, 100% { opacity: 1; }
}
/* Speed Lines Effect - Contained */
.speed-lines {
position: absolute;
top: 0;
left: -10px;
right: -10px;
bottom: 0;
background: repeating-linear-gradient(
90deg,
transparent,
transparent 2px,
rgba(255, 69, 0, 0.15) 2px,
rgba(255, 69, 0, 0.15) 3px,
transparent 3px,
transparent 12px
);
animation: speed-rush 0.8s linear infinite;
z-index: 1;
pointer-events: none;
}
@keyframes speed-rush {
0% { transform: translateX(-50px); }
100% { transform: translateX(50px); }
}
/* Data Glitch Effect - Subtle */
.data-glitch {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 69, 0, 0.08) 25%,
rgba(255, 215, 0, 0.1) 50%,
rgba(255, 69, 0, 0.08) 75%,
transparent 100%
);
animation: data-scan 2.5s linear infinite;
z-index: 1;
pointer-events: none;
}
@keyframes data-scan {
0% { transform: translateX(-120%); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateX(120%); opacity: 0; }
}
/* Second Layer Speed Lines - Subtle */
.speed-lines-2 {
position: absolute;
top: 0;
left: -5px;
right: -5px;
bottom: 0;
background: repeating-linear-gradient(
90deg,
transparent,
transparent 1px,
rgba(255, 215, 0, 0.1) 1px,
rgba(255, 215, 0, 0.1) 1.5px,
transparent 1.5px,
transparent 8px
);
animation: speed-rush-2 1.2s linear infinite;
z-index: 1;
pointer-events: none;
}
@keyframes speed-rush-2 {
0% { transform: translateX(-30px); }
100% { transform: translateX(30px); }
}
/* Velocity Blur Effect - Gentle */
.velocity-blur {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 69, 0, 0.03) 30%,
rgba(255, 215, 0, 0.05) 50%,
rgba(255, 69, 0, 0.03) 70%,
transparent 100%
);
animation: velocity-sweep 4s linear infinite;
z-index: 0;
pointer-events: none;
filter: blur(0.5px);
}
@keyframes velocity-sweep {
0% { transform: translateX(-100px); opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { transform: translateX(100px); opacity: 0; }
}
/* Subtle Scroll Hints - ENCOM Style */
.scroll-hint {
position: absolute;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
text-align: center;
opacity: 0.6;
transition: opacity 0.5s ease;
z-index: 10;
pointer-events: none;
}
.scroll-hint-hero {
bottom: 20px;
opacity: 0.8;
}
.scroll-hint-indicator {
display: flex;
justify-content: center;
gap: 4px;
align-items: center;
}
.scroll-dot {
width: 4px;
height: 4px;
background: linear-gradient(135deg, var(--accent-terminal), var(--accent-gold));
border-radius: 50%;
opacity: 0.5;
animation: scroll-dot-bounce 2s ease-in-out infinite;
box-shadow: 0 0 3px rgba(255, 69, 0, 0.4);
}
.scroll-dot:nth-child(1) {
animation-delay: 0s;
}
.scroll-dot:nth-child(2) {
animation-delay: 0.3s;
}
.scroll-dot:nth-child(3) {
animation-delay: 0.6s;
}
/* Hide scroll hints when user has scrolled or interacted */
.scroll-hint.hidden {
opacity: 0;
pointer-events: none;
}
/* Show scroll hints only when relevant content is below */
.scroll-hint.show {
opacity: 1;
}
@keyframes scroll-dot-bounce {
0%, 100% {
transform: translateY(0);
opacity: 0.5;
}
50% {
transform: translateY(-3px);
opacity: 0.8;
}
}
/* Test Controls Styling */
.test-controls {
text-align: center;
margin-top: 30px;
padding: 20px;
position: relative;
z-index: 100;
}
.encom-test-button {
background: linear-gradient(135deg, var(--bg-terminal) 0%, rgba(255, 69, 0, 0.1) 100%);
border: 2px solid var(--accent-terminal);
color: var(--text);
padding: 12px 24px;
font-family: var(--font-terminal);
font-size: 0.9rem;
font-weight: bold;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow:
0 0 15px rgba(255, 69, 0, 0.3),
inset 0 0 10px rgba(255, 69, 0, 0.05);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin: 0 auto;
width: 200px;
}
.encom-test-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 69, 0, 0.2), transparent);
transition: left 0.5s ease;
}
.encom-test-button:hover {
border-color: var(--accent-gold);
color: var(--accent-gold);
box-shadow:
0 0 25px rgba(255, 215, 0, 0.5),
inset 0 0 15px rgba(255, 215, 0, 0.1);
transform: translateY(-2px);
}
.encom-test-button:hover::before {
left: 100%;
}
.encom-test-button:active {
transform: translateY(0);
box-shadow:
0 0 15px rgba(255, 69, 0, 0.6),
inset 0 0 10px rgba(255, 69, 0, 0.2);
}
.button-text {
font-size: 0.9rem;
text-shadow: 0 0 3px currentColor;
}
.button-status {
font-size: 0.7rem;
color: var(--accent-gold);
text-shadow: 0 0 2px var(--accent-gold);
border: 1px solid var(--accent-gold);
padding: 2px 8px;
background: rgba(255, 215, 0, 0.1);
border-radius: 2px;
}
.test-instructions {
color: var(--text-muted);
font-family: var(--font-terminal);
font-size: 0.8rem;
margin-top: 15px;
text-shadow: 0 0 1px var(--text-muted);
opacity: 0.8;
}
/* ENCOM Unified Grid Layout - Fixed position with instant switching */
.encom-unified-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
padding: 0 20px;
align-items: stretch;
position: absolute;
top: 61%;
left: 0;
right: 0;
width: 100%;
height: 350px;
transform: translateY(-50%);
/* No transitions - instant switching */
opacity: 1;
visibility: visible;
}
/* Fallback visibility for panels - ensure they're visible even if JS fails */
.data-panel {
opacity: 1 !important; /* Fallback */
transform: rotateY(0deg) !important; /* Fallback */
filter: blur(0px) !important; /* Fallback */
}
/* First panel grid - visible by default */
#first-panel-grid {
transform: translateY(-50%);
z-index: 10;
opacity: 1;
visibility: visible;
}
/* Second panel grid - hidden by default with distinct styling */
#second-panel-grid {
transform: translateY(-50%);
z-index: 5;
opacity: 0;
visibility: hidden;
}
/* Second panel grid maintains consistent styling with subtle differences */
#second-panel-grid .data-panel {
/* Keeps same styling as first panel for continuity */
}
#second-panel-grid .panel-status {
/* Slightly different status colors to indicate different state */
color: var(--accent-gold);
border-color: var(--accent-gold);
background: rgba(255, 215, 0, 0.1);
text-shadow: 0 0 3px var(--accent-gold);
}
#second-panel-grid .progress-fill {
/* Slightly different progress percentage to show variation */
background: linear-gradient(90deg,
#dc143c 0%, /* Crimson red */
#ff4500 20%, /* Orange-red */
#ff6347 40%, /* Tomato */
#ffd700 60%, /* Gold */
#ffb347 80%, /* Light gold */
#ffd700 100% /* Gold */
);
box-shadow: 0 0 15px rgba(220, 20, 60, 0.6), 0 0 25px rgba(255, 215, 0, 0.4);
}
/* Active panel state - no rolling animation */
.encom-unified-grid.active {
opacity: 1 !important;
visibility: visible !important;
display: grid !important;
transform: translateY(-50%);
z-index: 10;
}
/* Hidden panel state - fades out without rolling */
.encom-unified-grid.hidden {
opacity: 0 !important;
visibility: hidden !important;
display: none !important;
transform: translateY(-50%);
z-index: 5;
}
/* Portfolio panel now uses data-panel styling for consistency */
.data-panel.portfolio {
/* Override specific portfolio styling while maintaining data-panel base */
}
/* ENCOM Data Panels */
.data-panel {
background: var(--bg-terminal);
border: 2px solid #ffffff;
border-radius: 0;
position: relative;
overflow: hidden;
font-family: var(--font-terminal);
box-shadow:
0 0 15px rgba(255, 255, 255, 0.2),
inset 0 0 20px rgba(255, 255, 255, 0.02);
}
.data-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, #ffffff, transparent);
box-shadow: 0 0 10px #ffffff;
animation: data-flow 3s linear infinite;
}
.data-panel.primary::before {
background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
box-shadow: 0 0 10px var(--accent-gold);
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
border-bottom: 1px solid #ffffff;
background: rgba(255, 255, 255, 0.05);
}
.panel-title {
color: #ffffff;
font-weight: bold;
font-size: 0.9rem;
text-shadow: 0 0 8px #ffffff, 0 0 15px rgba(255, 255, 255, 0.8);
letter-spacing: 1px;
}
.panel-status {
color: var(--accent-gold);
font-size: 0.7rem;
font-weight: bold;
text-shadow: 0 0 3px var(--accent-gold);
padding: 2px 6px;
border: 1px solid var(--accent-gold);
background: rgba(255, 215, 0, 0.1);
animation: status-blink 2s ease-in-out infinite alternate;
}
/* Regular data-visualization styling for other panels */
.data-visualization {
padding: 12px;
min-height: 260px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 10px;
}
/* Infrastructure monitoring panel specific scrolling */
.data-panel.primary .data-visualization {
padding: 8px;
height: 200px;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 2px;
}
/* Custom scrollbar for infrastructure monitoring panel */
.data-panel.primary .data-visualization {
scrollbar-width: thin;
scrollbar-color: rgba(255, 215, 0, 0.6) rgba(255, 255, 255, 0.1);
}
.data-panel.primary .data-visualization::-webkit-scrollbar {
width: 0px;
transition: width 0.3s ease;
}
.data-panel.primary .data-visualization:hover::-webkit-scrollbar {
width: 12px;
}
.data-panel.primary .data-visualization::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
.data-panel.primary .data-visualization::-webkit-scrollbar-thumb {
background: rgba(255, 215, 0, 0.7);
border-radius: 6px;
box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.data-panel.primary .data-visualization::-webkit-scrollbar-thumb:hover {
background: rgba(255, 215, 0, 0.9);
box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}
.metric-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1px;
padding: 0px 0;
}
.metric-label {
color: #ffffff;
font-size: 0.7rem;
text-shadow: 0 0 2px #ffffff;
font-weight: bold;
}
.metric-value {
color: #ffffff;
font-weight: bold;
font-size: 0.75rem;
text-shadow: 0 0 3px #ffffff;
font-variant-numeric: tabular-nums;
}
.active-status {
animation: value-pulse 1.5s ease-in-out infinite;
}
.progress-bar {
position: relative;
height: 18px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid #ffffff;
margin-bottom: 8px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg,
#dc143c 0%, /* Crimson red */
#ff4500 20%, /* Orange-red */
#ff6347 40%, /* Tomato */
#ffd700 60%, /* Gold */
#ffb347 80%, /* Light gold */
#ffd700 100% /* Gold */
);
box-shadow: 0 0 15px rgba(220, 20, 60, 0.6), 0 0 25px rgba(255, 215, 0, 0.4);
animation: progress-glow 2s ease-in-out infinite alternate, iridescent-shift 3s linear infinite;
transition: width 3s ease;
}
.progress-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 0.7rem;
font-weight: bold;
text-shadow: 0 0 3px #000;
z-index: 1;
}
.system-time {
color: #ffffff;
font-size: 1.1rem;
font-weight: bold;
text-shadow: 0 0 5px #ffffff;
margin-bottom: 8px;
font-variant-numeric: tabular-nums;
}
.location-info {
color: var(--text-terminal);
font-size: 0.7rem;
text-shadow: 0 0 2px var(--text-terminal);
opacity: 0.8;
margin-top: 2px;
}
/* Telemetry Metrics Styles */
.telemetry-metrics {
margin: 2px 0 1px 0;
font-family: 'Inter', monospace;
}
.metric-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3px;
padding: 1px 0;
}
.metric-label {
color: var(--text-terminal);
font-size: 0.7rem;
font-weight: 500;
opacity: 0.8;
}
.metric-value {
color: #00ff88;
font-size: 0.75rem;
font-weight: bold;
font-variant-numeric: tabular-nums;
text-shadow: 0 0 3px #00ff88;
animation: value-pulse 4s ease-in-out infinite;
}
/* Node Status Grid - Optimized for horizontal layout */
.node-status-grid {
display: flex;
justify-content: space-between;
gap: 6px;
margin: 8px 0 5px 0;
flex-wrap: wrap;
}
.node-status {
padding: 4px 6px;
border-radius: 2px;
font-size: 0.65rem;
font-weight: bold;
text-align: center;
font-family: 'Inter', monospace;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
flex: 1;
min-width: 0;
}
.node-status.online {
background: rgba(0, 255, 136, 0.1);
color: #00ff88;
border-color: #00ff88;
box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}
.node-status.warning {
background: rgba(255, 193, 7, 0.1);
color: #ffc107;
border-color: #ffc107;
box-shadow: 0 0 8px rgba(255, 193, 7, 0.3);
animation: status-blink 2s ease-in-out infinite alternate;
}
.node-status.offline {
background: rgba(220, 53, 69, 0.1);
color: #dc3545;
border-color: #dc3545;
box-shadow: 0 0 8px rgba(220, 53, 69, 0.3);
}
@keyframes data-flow {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes status-blink {
0% { opacity: 1; }
100% { opacity: 0.6; }
}
@keyframes value-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes progress-glow {
0% {
box-shadow: 0 0 15px rgba(220, 20, 60, 0.6), 0 0 25px rgba(255, 215, 0, 0.4);
}
100% {
box-shadow: 0 0 25px rgba(220, 20, 60, 0.8), 0 0 35px rgba(255, 215, 0, 0.6);
}
}
@keyframes iridescent-shift {
0% {
filter: hue-rotate(0deg) saturate(1.2) brightness(1.1);
}
25% {
filter: hue-rotate(10deg) saturate(1.3) brightness(1.15);
}
50% {
filter: hue-rotate(20deg) saturate(1.1) brightness(1.2);
}
75% {
filter: hue-rotate(10deg) saturate(1.3) brightness(1.15);
}
100% {
filter: hue-rotate(0deg) saturate(1.2) brightness(1.1);
}
}
@keyframes matrix-rain {
0% {
transform: translateY(-100%);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(100vh);
opacity: 0;
}
}
@keyframes encom-scan-line {
0% { transform: translateX(-100%); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateX(100%); opacity: 0; }
}
/* ENCOM Scan Line Effect */
.terminal-window::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(
to bottom,
transparent,
var(--accent-gold),
transparent
);
box-shadow: 0 0 10px var(--accent-gold);
animation: encom-scan-line 4s linear infinite;
z-index: 1000;
pointer-events: none;
}
.container { max-width: 1200px; margin: 0 auto; }
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
@keyframes terminal-cursor {
0%, 50% {
opacity: 1;
box-shadow: 0 0 4px var(--accent-terminal);
}
51%, 100% {
opacity: 0.3;
box-shadow: none;
}
}
@keyframes type {
from { width: 0; }
to { width: 100%; }
}
@keyframes glow-pulse {
0%, 100% { text-shadow: 0 0 5px var(--accent-terminal); }
50% { text-shadow: 0 0 10px var(--accent-terminal), 0 0 15px var(--accent-terminal); }
}
.btn {
padding: 8px 16px;
border: 1px solid var(--border);
background: transparent;
color: var(--text);
cursor: pointer;
font-size: 0.9rem;
border-radius: 4px;
transition: all 0.3s ease;
font-family: var(--font);
}
.btn:hover {
border-color: var(--accent);
color: var(--accent);
background: rgba(196, 30, 58, 0.1);
transform: translateY(-1px);
}
.btn-primary {
border-color: var(--accent);
color: var(--accent);
background: rgba(139, 21, 56, 0.1);
}
.btn-primary:hover {
background: rgba(139, 21, 56, 0.2);
box-shadow: 0 4px 8px rgba(139, 21, 56, 0.3);
}
.dashboard-grid {
display: grid; grid-template-columns: 2fr 1fr; gap: 15px; margin-bottom: 20px;
}
.portfolio-only-grid {
margin-bottom: 20px;
}
.main-content {
display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 15px; margin-bottom: 20px;
}
.content-panel {
border: 3px solid var(--border-terminal);
padding: 20px;
background: var(--bg-terminal); /* Brutalist: Solid color, no gradients */
box-shadow:
var(--glow),
0 0 0 1px var(--border-terminal),
3px 3px 0 var(--accent-gold); /* Brutalist: Offset shadow */
border-radius: 0; /* Brutalist: Sharp edges */
transition: none; /* Brutalist: No smooth transitions */
position: relative;
overflow: hidden;
font-family: var(--font-terminal);
/* Brutalist: Raw geometric styling */
outline: 1px solid var(--accent-terminal);
outline-offset: 1px;
}
.content-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--accent-terminal), transparent);
box-shadow: 0 0 8px var(--accent-terminal);
}
.content-panel::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-terminal), transparent);
opacity: 0.5;
}
.content-panel h3 {
font-size: 1.2rem;
margin-bottom: 12px;
color: var(--text);
font-weight: bold;
}
.content-panel p {
color: var(--text-terminal);
margin-bottom: 12px;
font-size: 0.9rem;
font-family: var(--font-terminal);
text-shadow: 0 0 1px var(--text-terminal);
}
/* Portfolio panel now matches other data panels perfectly */
.data-panel.portfolio .sub-commands {
gap: 8px;
}
.command-line {
color: var(--text-terminal) !important;
font-size: 1.1rem;
font-family: var(--font-terminal);
font-weight: normal;
text-shadow: 0 0 3px var(--text-terminal);
}
.cursor {
color: var(--text-terminal);
animation: encom-cursor 1.2s infinite;
display: inline-block;
width: 8px;
height: 1.2em;
background: var(--text-terminal);
margin-left: 2px;
vertical-align: text-bottom;
box-shadow:
0 0 8px var(--text-terminal),
0 0 15px rgba(255, 69, 0, 0.5),
inset 0 0 5px rgba(255, 215, 0, 0.3);
border: 1px solid var(--accent-gold);
}
@keyframes encom-cursor {
0%, 50% {
opacity: 1;
background: var(--text-terminal);
box-shadow:
0 0 8px var(--text-terminal),
0 0 15px rgba(255, 69, 0, 0.7),
inset 0 0 5px rgba(255, 215, 0, 0.5);
transform: scale(1);
}
51%, 100% {
opacity: 0.3;
background: var(--accent-gold);
box-shadow:
0 0 4px var(--accent-gold),
0 0 8px rgba(255, 215, 0, 0.3);
transform: scale(0.95);
}
}
.sub-commands {
display: flex;
flex-direction: column;
gap: 3px;
padding: 8px 0;
}
.sub-command {
display: flex;
align-items: center;
gap: 6px;
line-height: 1.3;
margin-bottom: 2px;
padding: 1px 0;
}
.sub-command.folder {
margin-top: 6px;
margin-bottom: 2px;
cursor: pointer;
}
.sub-command.folder:hover {
background: rgba(255, 69, 0, 0.05);
}
.sub-prefix {
color: var(--text-terminal);
font-size: 0.9rem;
font-family: var(--font-terminal);
text-shadow: 0 0 2px var(--text-terminal);
flex-shrink: 0;
min-width: 32px;
}
.sub-link {
color: #ffffff;
text-decoration: none;
font-size: 0.95rem;
font-family: var(--font-terminal);
transition: none; /* Brutalist: No smooth transitions */
position: relative;
text-shadow: 0 0 2px #ffffff;
font-weight: bold; /* Brutalist: Bold, functional text */
}
.sub-link:hover {
color: var(--accent-gold); /* Gold on hover */
text-decoration: none;
transform: none; /* Brutalist: No smooth animations */
text-shadow: 0 0 4px var(--accent-gold);
}
.sub-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: linear-gradient(90deg, var(--accent-terminal), var(--text-terminal));
transition: width 0.3s ease;
}
.sub-link:hover::after {
width: 100%;
}
.sub-desc {
color: var(--text-muted);
font-size: 0.8rem;
font-family: var(--font-terminal);
text-shadow: 0 0 1px var(--text-muted);
opacity: 0.8;
margin-left: 8px;
}
.coming-soon {
color: var(--text-muted);
font-size: 0.85rem;
font-family: var(--font-terminal);
font-style: italic;
opacity: 0.7;
text-shadow: 0 0 1px var(--text-muted);
}
/* Enhanced folder styling */
.folder-name {
color: #ffffff;
font-weight: bold;
font-size: 0.95rem;
font-family: var(--font-terminal);
text-shadow: 0 0 3px #ffffff;
user-select: none;
}
/* Collapsible folder styling - Ultra fast */
.folder-items {
max-height: 1000px;
overflow: hidden;
transition: max-height 0.05s ease-out;
opacity: 1;
}
.folder-items.collapsed {
max-height: 0;
transition: max-height 0.05s ease-in;
}
.folder-toggle::before {
content: '▼ ';
color: var(--accent-gold);
font-size: 0.7rem;
margin-right: 4px;
transition: transform 0.05s ease;
}
.folder-toggle.collapsed::before {
transform: rotate(-90deg);
content: '▶ ';
}
/* Back to top button */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
background: var(--bg-secondary);
border: 1px solid var(--border);
color: var(--text-secondary);
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
font-family: var(--font);
font-size: 0.8rem;
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
border-color: var(--accent);
color: var(--accent);
background: rgba(196, 30, 58, 0.1);
transform: translateY(-2px);
}
/* Breadcrumb navigation */
.breadcrumb {
margin-bottom: 20px;
font-size: 0.9rem;
color: var(--text-muted);
}
.breadcrumb a {
color: var(--text-terminal);
text-decoration: none;
transition: color 0.3s ease;
font-family: var(--font-terminal);
text-shadow: 0 0 1px var(--text-terminal);
}
.breadcrumb a:hover {
color: var(--accent-terminal);
text-shadow: 0 0 2px var(--accent-terminal);
}
.breadcrumb .separator {
margin: 0 8px;
color: var(--text-muted);
}
/* Responsive Design */
@media (max-width: 768px) {
.dashboard { padding: 15px; }
.dashboard-grid { grid-template-columns: 1fr; gap: 15px; }
.main-content { grid-template-columns: 1fr; gap: 15px; }
.social-icons { gap: 8px; }
.content-panel { padding: 15px; }
.back-to-top { bottom: 15px; right: 15px; }
.command-line { font-size: 1.2rem; }
.sub-link { font-size: 1.1rem; }
.header-title { font-size: 1.8rem; }
.portfolio-section { margin-top: 20px; }
.breadcrumb { font-size: 0.8rem; }
/* ENCOM Mobile Adjustments */
.encom-unified-grid {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 15px;
}
.tagline-text {
font-size: 2.8rem;
letter-spacing: 2px;
}
.encom-hero-section {
padding: 20px 15px;
margin-bottom: 30px;
}
.encom-status-panel {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.data-visualization {
padding: 12px;
min-height: 220px;
}
.panel-header {
padding: 10px 12px;
}
.panel-title {
font-size: 0.8rem;
}
.system-time {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.dashboard { padding: 10px; }
.content-panel { padding: 12px; }
.btn { padding: 6px 12px; font-size: 0.8rem; }
.command-line { font-size: 1.1rem; }
.sub-link { font-size: 1rem; }
.header-title { font-size: 1.6rem; }
.tagline-text {
font-size: 2.2rem;
letter-spacing: 1px;
}
.encom-hero-section {
padding: 15px 10px;
margin-bottom: 20px;
}
.encom-unified-grid {
padding: 0 10px;
gap: 15px;
}
.sub-link {
font-size: 0.9rem;
}
.sub-desc {
font-size: 0.75rem;
margin-left: 6px;
}
.command-line {
font-size: 1rem;
}
.folder-name {
font-size: 0.9rem;
}
.social-icons {
gap: 6px;
}
.social-icon {
padding: 2px;
}
}
/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* Focus styles for keyboard navigation */
.btn:focus,
.sub-link:focus,
.terminal-contact a:focus {
outline: 2px solid var(--accent-terminal);
outline-offset: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
:root {
--text: #ffffff;
--text-secondary: #cccccc;
--bg: #000000;
--border: #ffffff;
}
}
.terminal-command {
font-family: var(--font-terminal);
font-size: 0.9rem;
line-height: 1.4;
}
.terminal-command .command-line {
color: var(--text-terminal) !important;
margin-bottom: 8px;
font-weight: normal;
text-shadow: 0 0 3px var(--text-terminal);
font-family: var(--font-terminal);
}
.command-output {
color: var(--text-terminal);
background: linear-gradient(135deg, var(--bg-terminal) 0%, rgba(255, 69, 0, 0.02) 100%);
border: 1px solid var(--border-terminal);
padding: 15px;
font-family: var(--font-terminal);
font-size: 0.85rem;
line-height: 1.5;
border-radius: 4px;
position: relative;
box-shadow: var(--glow);
}
.command-output::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent-terminal), transparent);
box-shadow: 0 0 6px var(--accent-terminal);
}
.command-output div {
margin-bottom: 6px;
}
.command-output div:empty {
height: 8px;
}
.command-output div:first-child {
font-weight: bold;
color: var(--text-terminal);
margin-bottom: 10px;
text-shadow: 0 0 2px var(--text-terminal);
}
/* Project pages: compact layout so nav (home | back | specs | ...) stays in frame */
.dashboard:has(.terminal-contact) {
padding: 10px 20px;
}
.dashboard:has(.terminal-contact) .header-section {
margin-bottom: 12px;
}
.dashboard:has(.terminal-contact) .dashboard-grid {
margin-bottom: 10px;
}
.dashboard:has(.terminal-contact) .content-panel {
padding: 12px;
}
.dashboard:has(.terminal-contact) .command-output {
padding: 10px;
line-height: 1.35;
}
.dashboard:has(.terminal-contact) .command-output div {
margin-bottom: 3px;
}
.dashboard:has(.terminal-contact) .command-output div:first-child {
margin-bottom: 6px;
}
/* Highlight Features and tech_stack labels */
.highlighted-label {
font-weight: bold !important;
color: var(--text-terminal) !important;
text-shadow: 0 0 3px var(--text-terminal) !important;
margin-bottom: 8px;
}
/* Logo link: always goes to index (home) */
.logo-home-link {
display: inline-flex;
align-items: center;
text-decoration: none;
color: inherit;
}
.logo-home-link:hover {
color: inherit;
}
.logo-home-link:focus {
outline: none;
}
/* Three-circles logo (hero-style blue, 3 circles with diagonal dots) */
.three-circles-logo {
display: inline-block;
vertical-align: middle;
line-height: 0;
filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.6));
transition: transform 0.2s ease;
}
.three-circles-logo svg {
display: block;
width: 100%;
height: 100%;
}
.three-circles-logo.small {
width: 32px;
height: 32px;
margin: 0;
vertical-align: middle;
}
.three-circles-logo.large {
width: 40px;
height: 40px;
margin: -6px 1px 0 14px;
}
.three-circles-logo:hover {
transform: scale(1.1);
}
.three-circles-logo:hover svg {
filter: drop-shadow(0 0 6px #3b82f6);
}
/* Titlebar: logo and email on same horizontal line, vertically centered */
.terminal-titlebar .title {
display: flex;
align-items: center;
gap: 10px;
}
.terminal-titlebar .three-circles-logo.small {
margin: 0;
flex-shrink: 0;
}
/* Canonical site titlebar – same on every page (blog, index, pricing, etc.). Use class site-titlebar-canonical to force. */
html body .terminal-titlebar.site-titlebar-canonical,
.terminal-titlebar.site-titlebar-canonical {
flex-shrink: 0 !important;
min-height: 48px !important;
height: 48px !important;
padding: 10px 14px !important;
font-size: 15px !important;
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
background: rgba(10, 11, 16, 0.95) !important;
backdrop-filter: blur(10px) !important;
border-bottom: 1px solid rgba(59, 130, 246, 0.2) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
}
.terminal-titlebar.site-titlebar-canonical .title {
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-shrink: 0 !important;
}
.terminal-titlebar.site-titlebar-canonical .three-circles-logo.small {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
flex-shrink: 0 !important;
}
.terminal-titlebar.site-titlebar-canonical .social-icons {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-shrink: 0 !important;
}
.terminal-titlebar.site-titlebar-canonical .social-icon {
min-width: 44px !important;
min-height: 44px !important;
width: 44px !important;
height: 44px !important;
padding: 12px !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
.terminal-titlebar.site-titlebar-canonical .social-icon svg {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
}
.terminal-titlebar.site-titlebar-canonical .terminal-email {
font-size: 15px !important;
}
/* Terminal symbol - Brutalist Design (legacy) */
.circle-square-symbol {
position: relative;
display: inline-block;
width: 28px;
height: 28px;
margin: -3px 6px 0 2px;
vertical-align: middle;
box-sizing: border-box;
filter: drop-shadow(0 0 3px var(--accent-terminal));
}
/* Outer Circle - Orange-Red */
.circle-square-symbol::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 28px;
border: 2px solid var(--accent-terminal);
border-radius: 50%;
background: transparent;
box-shadow:
0 0 6px var(--accent-terminal),
inset 0 0 3px rgba(255, 69, 0, 0.2);
box-sizing: border-box;
}
/* Inner Square - Red */
.circle-square-symbol::after {
content: '';
position: absolute;
top: 14px;
left: 14px;
width: 14px;
height: 14px;
background: var(--accent-terminal);
margin: -7px 0 0 -7px;
box-shadow:
0 0 4px var(--accent-terminal),
inset 0 0 2px rgba(255, 69, 0, 0.3);
box-sizing: border-box;
border: 1px solid var(--accent-terminal);
}
/* Central Black Circular Dot */
.circle-square-symbol .black-dot {
position: absolute;
top: 14px;
left: 14px;
width: 5px;
height: 5px;
background: #000000;
border-radius: 50%; /* Circular dot */
margin: -2.5px 0 0 -2.5px;
z-index: 10;
}
/* Variations for different sizes */
.circle-square-symbol.small {
width: 20px;
height: 20px;
}
.circle-square-symbol.small::before {
width: 20px;
height: 20px;
}
.circle-square-symbol.small::after {
top: 10px;
left: 10px;
width: 10px;
height: 10px;
margin: -5px 0 0 -5px;
}
.circle-square-symbol.small .black-dot {
top: 10px;
left: 10px;
width: 3px;
height: 3px;
margin: -1.5px 0 0 -1.5px;
}
.circle-square-symbol.large {
width: 32px;
height: 32px;
}
.circle-square-symbol.large::before {
width: 32px;
height: 32px;
}
.circle-square-symbol.large::after {
top: 16px;
left: 16px;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
}
.circle-square-symbol.large .black-dot {
top: 16px;
left: 16px;
width: 5px;
height: 5px;
margin: -2.5px 0 0 -2.5px;
}
/* Asset screener and portfolio analyzer page specific adjustments */
.circle-square-symbol.large {
margin: -6px 1px 0 14px; /* Maximum ultra aggressive: moved insanely close to text */
}
/* Hover effects */
.circle-square-symbol:hover {
transform: scale(1.1);
transition: transform 0.2s ease;
}
.circle-square-symbol:hover::before {
box-shadow: 0 0 10px var(--text-terminal);
}
.circle-square-symbol:hover::after {
box-shadow: 0 0 6px var(--text-terminal);
}
/* Asset Screener Page Header */
.header-section {
text-align: center;
margin-bottom: 30px;
}
.header-title {
font-size: 2rem;
margin-bottom: 10px;
color: var(--text-terminal) !important;
font-family: var(--font-terminal);
text-shadow: 0 0 3px var(--text-terminal);
}
.header-subtitle {
font-size: 1.1rem;
color: var(--text-terminal) !important;
margin-bottom: 20px;
font-family: var(--font-terminal);
text-shadow: 0 0 2px var(--text-terminal);
}
/* 3D Panel Expand Button */
.expand-btn {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(100, 255, 218, 0.1);
border: 1px solid rgba(100, 255, 218, 0.3);
border-radius: 4px;
color: #64ffda;
padding: 6px;
cursor: pointer;
transition: all 0.3s ease;
z-index: 1000;
/* Ensure button is always clickable */
pointer-events: auto;
}
.expand-btn:hover {
background: rgba(100, 255, 218, 0.2);
border-color: #64ffda;
transform: scale(1.1);
}
.expand-btn svg {
display: block;
width: 16px;
height: 16px;
}
/* Simple canvas styling for normal state */
#portfolio-3d-container {
background: rgba(0, 0, 0, 0.2) !important;
border-radius: 8px;
}
#portfolio-3d-container canvas {
display: block !important;
width: 100% !important;
height: 100% !important;
background: transparent !important;
}
/* ==============================================
FUTURISTIC TRANSITION EFFECTS
============================================== */
/* Matrix Rain Effect for Panel Transitions */
.matrix-rain-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
}
.matrix-rain-overlay.active {
opacity: 0.6;
}
.matrix-rain-overlay::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 255, 0, 0.1) 2px,
rgba(0, 255, 0, 0.1) 4px
);
animation: matrix-rain 0.1s linear infinite;
}
@keyframes matrix-rain {
0% {
transform: translateY(-100%);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(100vh);
opacity: 0;
}
}
/* Holographic Scan Lines */
.holographic-scan {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9998;
opacity: 0;
transition: opacity 0.4s ease;
}
.holographic-scan.active {
opacity: 0.6;
}
.holographic-scan::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(100, 255, 218, 0.8) 25%,
rgba(255, 69, 0, 0.8) 50%,
rgba(100, 255, 218, 0.8) 75%,
transparent 100%
);
box-shadow:
0 0 10px rgba(100, 255, 218, 0.6),
0 0 20px rgba(255, 69, 0, 0.4),
0 0 30px rgba(100, 255, 218, 0.2);
animation: holographic-scan-line 2s ease-in-out infinite;
}
@keyframes holographic-scan-line {
0% {
transform: translateX(-100%);
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
transform: translateX(100%);
opacity: 0;
}
}
/* Digital Distortion Effect */
.digital-distortion {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9997;
opacity: 0;
transition: opacity 0.5s ease;
background:
repeating-linear-gradient(
45deg,
transparent,
transparent 2px,
rgba(255, 69, 0, 0.1) 2px,
rgba(255, 69, 0, 0.1) 4px
),
repeating-linear-gradient(
-45deg,
transparent,
transparent 2px,
rgba(100, 255, 218, 0.05) 2px,
rgba(100, 255, 218, 0.05) 4px
);
}
.digital-distortion.active {
opacity: 0.6;
animation: digital-flicker 0.1s ease-in-out infinite alternate;
}
@keyframes digital-flicker {
0% {
filter: hue-rotate(0deg) contrast(1);
}
25% {
filter: hue-rotate(5deg) contrast(1.1);
}
50% {
filter: hue-rotate(-5deg) contrast(0.9);
}
75% {
filter: hue-rotate(3deg) contrast(1.05);
}
100% {
filter: hue-rotate(0deg) contrast(1);
}
}
/* Energy Field Transition */
.energy-field {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9996;
opacity: 0;
transition: opacity 0.6s ease;
background: radial-gradient(
circle at center,
rgba(100, 255, 218, 0.1) 0%,
rgba(255, 69, 0, 0.05) 30%,
transparent 70%
);
}
.energy-field.active {
opacity: 0.6;
animation: energy-pulse 1.5s ease-in-out infinite;
}
@keyframes energy-pulse {
0% {
transform: scale(0.8);
opacity: 0;
}
50% {
transform: scale(1.2);
opacity: 0.8;
}
100% {
transform: scale(0.8);
opacity: 0;
}
}
/* Circuit Board Pattern */
.circuit-pattern {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9995;
opacity: 0;
transition: opacity 0.4s ease;
background:
linear-gradient(90deg, transparent 49%, rgba(100, 255, 218, 0.3) 50%, transparent 51%),
linear-gradient(0deg, transparent 49%, rgba(255, 69, 0, 0.2) 50%, transparent 51%);
background-size: 20px 20px;
}
.circuit-pattern.active {
opacity: 0.6;
animation: circuit-flow 0.5s linear infinite;
}
@keyframes circuit-flow {
0% {
background-position: 0 0, 0 0;
}
100% {
background-position: 20px 20px, 20px 20px;
}
}
/* Particle Burst Effect */
.particle-burst {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9994;
opacity: 0;
transition: opacity 0.3s ease;
}
.particle-burst.active {
opacity: 0.6;
}
.particle-burst::before,
.particle-burst::after {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: radial-gradient(circle, rgba(100, 255, 218, 1) 0%, transparent 70%);
border-radius: 50%;
box-shadow:
0 0 10px rgba(100, 255, 218, 0.8),
0 0 20px rgba(255, 69, 0, 0.6);
animation: particle-explosion 1s ease-out forwards;
}
.particle-burst::before {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-delay: 0s;
}
.particle-burst::after {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-delay: 0.2s;
}
@keyframes particle-explosion {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
50% {
opacity: 0.8;
}
100% {
transform: translate(-50%, -50%) scale(20);
opacity: 0;
}
}
/* Glitch Effect */
.glitch-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9993;
opacity: 0;
transition: opacity 0.2s ease;
overflow: hidden;
}
.glitch-overlay.active {
opacity: 0.6;
}
.glitch-overlay::before,
.glitch-overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 0, 0, 0.1) 20%,
transparent 40%,
rgba(0, 255, 0, 0.1) 60%,
transparent 80%,
rgba(0, 0, 255, 0.1) 100%
);
mix-blend-mode: multiply;
}
.glitch-overlay::before {
animation: glitch-1 0.3s ease-in-out infinite;
transform: translateX(-2px);
}
.glitch-overlay::after {
animation: glitch-2 0.3s ease-in-out infinite;
transform: translateX(2px);
}
@keyframes glitch-1 {
0%, 100% {
transform: translateX(-2px);
}
20% {
transform: translateX(-4px);
}
40% {
transform: translateX(0px);
}
60% {
transform: translateX(-2px);
}
80% {
transform: translateX(-4px);
}
}
@keyframes glitch-2 {
0%, 100% {
transform: translateX(2px);
}
20% {
transform: translateX(4px);
}
40% {
transform: translateX(0px);
}
60% {
transform: translateX(2px);
}
80% {
transform: translateX(4px);
}
}
/* Enhanced Panel Transitions */
.encom-unified-grid.transitioning {
animation: panel-warp 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}
@keyframes panel-warp {
0% {
filter: brightness(1) contrast(1);
}
25% {
filter: brightness(1.1) contrast(1.1);
}
50% {
filter: brightness(1.2) contrast(1.2) hue-rotate(10deg);
}
75% {
filter: brightness(1.1) contrast(1.1) hue-rotate(-5deg);
}
100% {
filter: brightness(1) contrast(1) hue-rotate(0deg);
}
}
/* Neon Glow Pulse */
.neon-glow-pulse {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9992;
opacity: 0;
transition: opacity 0.5s ease;
background: radial-gradient(
circle at 50% 50%,
rgba(100, 255, 218, 0.1) 0%,
transparent 50%
);
}
.neon-glow-pulse.active {
opacity: 0.6;
animation: neon-pulse 1s ease-in-out infinite alternate;
}
@keyframes neon-pulse {
0% {
filter: brightness(1) blur(0px);
transform: scale(1);
}
50% {
filter: brightness(1.2) blur(1px);
transform: scale(1.02);
}
100% {
filter: brightness(1.4) blur(2px);
transform: scale(1.05);
}
}
/* ==============================================
CONTOUR TRACING AND PANEL FORMATION EFFECTS
============================================== */
/* Contour Tracing Border Animation */
.data-panel {
position: relative;
overflow: hidden;
}
.data-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid transparent;
border-image: linear-gradient(45deg, transparent, #64ffda, #ff4500, transparent) 1;
z-index: 1;
pointer-events: none;
}
.data-panel.contour-tracing::before {
animation: contour-trace 0.8s ease-out forwards;
border: 2px solid;
border-image: linear-gradient(90deg, #64ffda 0%, #ff4500 50%, #64ffda 100%) 1;
}
@keyframes contour-trace {
0% {
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
border-color: transparent;
}
25% {
clip-path: polygon(0 0, 100% 0, 100% 5%, 0 5%);
border-color: #64ffda;
box-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
}
50% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
border-color: #ff4500;
box-shadow: 0 0 20px rgba(255, 69, 0, 0.5);
}
75% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
border-color: #64ffda;
box-shadow: 0 0 15px rgba(100, 255, 218, 0.3);
}
100% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
border-color: #ffffff;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
}
/* Panel Formation States */
.data-panel.forming {
opacity: 0;
transform: rotateY(45deg);
filter: blur(2px);
}
.data-panel.formed {
opacity: 1;
transform: rotateY(0deg);
filter: blur(0px);
/* No transitions - instant appearance */
}
/* Sequential Panel Formation */
.data-panel.formation-1 {
animation-delay: 0s;
}
.data-panel.formation-2 {
animation-delay: 0.3s;
}
.data-panel.formation-3 {
animation-delay: 0.6s;
}
.data-panel.formation-4 {
animation-delay: 0.9s;
}
.data-panel.formation-5 {
animation-delay: 1.2s;
}
.data-panel.formation-6 {
animation-delay: 1.5s;
}
/* Content Coalescing Effect */
.data-panel .panel-header,
.data-panel .data-visualization {
position: relative;
overflow: hidden;
}
/* Content coalescing - Instant appearance */
.data-panel.coalescing .panel-header,
.data-panel.coalescing .data-visualization {
/* No animation - instant coalescing */
}
/* Line Tracing Effect for Panel Borders */
.data-panel::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 48%, #64ffda 49%, #64ffda 51%, transparent 52%);
background-size: 20px 20px;
background-position: -20px 0;
z-index: 2;
pointer-events: none;
opacity: 0;
}
.data-panel.line-tracing::after {
animation: line-trace 0.5s linear forwards;
opacity: 1;
}
@keyframes line-trace {
0% {
background-position: -20px 0;
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
background-position: 20px 20px;
opacity: 0;
}
}
/* Panel Glow Formation */
.data-panel.glow-forming {
animation: panel-glow-form 1.2s ease-out forwards;
box-shadow:
0 0 0 rgba(255, 255, 255, 0),
inset 0 0 0 rgba(255, 255, 255, 0);
}
@keyframes panel-glow-form {
0% {
box-shadow:
0 0 0 rgba(100, 255, 218, 0),
inset 0 0 0 rgba(100, 255, 218, 0);
border-color: transparent;
}
25% {
box-shadow:
0 0 20px rgba(100, 255, 218, 0.3),
inset 0 0 10px rgba(100, 255, 218, 0.1);
border-color: #64ffda;
}
50% {
box-shadow:
0 0 30px rgba(255, 69, 0, 0.3),
inset 0 0 15px rgba(255, 69, 0, 0.1);
border-color: #ff4500;
}
75% {
box-shadow:
0 0 25px rgba(100, 255, 218, 0.4),
inset 0 0 12px rgba(100, 255, 218, 0.15);
border-color: #64ffda;
}
100% {
box-shadow:
0 0 15px rgba(255, 255, 255, 0.2),
inset 0 0 20px rgba(255, 255, 255, 0.02);
border-color: #ffffff;
}
}
/* Sequential Grid Formation - Instant */
.encom-unified-grid.sequential-forming {
/* No animation - instant formation */
}
/* Individual Panel Formation Delays for Sequential Effect */
.encom-unified-grid.sequential-forming .data-panel:nth-child(1) {
animation-delay: 0s;
}
.encom-unified-grid.sequential-forming .data-panel:nth-child(2) {
animation-delay: 0.4s;
}
.encom-unified-grid.sequential-forming .data-panel:nth-child(3) {
animation-delay: 0.8s;
}
/* Data Flow Tracing */
.data-panel.data-flow-tracing {
position: relative;
}
.data-panel.data-flow-tracing .panel-header::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.4), transparent);
animation: data-flow-trace 1.5s ease-in-out;
z-index: 10;
}
@keyframes data-flow-trace {
0% {
left: -100%;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
/* ==============================================
PERFORMANCE METRICS CAROUSEL STYLES
============================================== */
.metrics-carousel {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 320px;
position: relative;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
padding: 0 10px;
}
.metrics-container {
flex: 1;
height: 100%;
position: relative;
overflow: hidden;
margin: 0 8px;
min-width: 0;
}
.metrics-panel {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% - 10px);
height: calc(100% - 20px);
transform: translate(-50%, -50%) scale(0.9);
opacity: 0;
visibility: hidden;
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
padding: 12px;
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
filter: blur(1px);
}
.metrics-panel.active {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
filter: blur(0px);
}
.metrics-section {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.section-title {
font-size: 12px;
font-weight: 700;
color: #64ffda;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(100, 255, 218, 0.6);
padding-bottom: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 0 3px rgba(100, 255, 218, 0.3);
background: rgba(0, 0, 0, 0.1);
padding: 2px 4px;
border-radius: 1px;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.metric-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
padding: 3px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.metric-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.metric-label {
font-size: 11px;
color: #ffffff;
font-weight: 500;
flex: 1;
}
.metric-value {
font-size: 11px;
color: #64ffda;
font-weight: 700;
text-align: right;
font-family: 'Courier New', monospace;
background: rgba(100, 255, 218, 0.1);
padding: 3px 8px;
border-radius: 4px;
border: 1px solid rgba(100, 255, 218, 0.2);
}
.carousel-arrow {
background: rgba(100, 255, 218, 0.1);
border: 1px solid rgba(100, 255, 218, 0.3);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #64ffda;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
flex-shrink: 0;
position: relative;
align-self: center;
}
.carousel-arrow:hover {
background: rgba(100, 255, 218, 0.2);
border-color: rgba(100, 255, 218, 0.5);
color: #ffffff;
transform: scale(1.1);
}
.carousel-arrow:active {
transform: scale(0.95);
}
.indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid rgba(100, 255, 218, 0.4);
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
vertical-align: middle;
}
.indicator.active {
background: #64ffda !important;
box-shadow: 0 0 10px rgba(100, 255, 218, 0.5) !important;
}
.indicator:hover {
background: rgba(100, 255, 218, 0.7);
transform: scale(1.4);
box-shadow: 0 0 6px rgba(100, 255, 218, 0.4);
}
/* Methodology indicators use default styling */
.indicators-with-methodology {
display: flex !important;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 4px;
padding: 8px 0;
position: relative;
z-index: 10;
visibility: visible;
opacity: 1;
box-sizing: border-box;
line-height: 8px;
}
.indicators-left, .indicators-right, .indicators-center {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
line-height: 1;
}
.methodology-link {
text-align: center;
padding: 4px 8px;
position: relative;
z-index: 6;
visibility: visible;
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.methodology-text {
color: #64ffda;
text-decoration: none;
font-size: 9px;
font-weight: 600;
transition: all 0.3s ease;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.3px;
visibility: visible;
opacity: 1;
display: inline-block;
vertical-align: baseline;
line-height: 1;
margin: 0;
padding: 0;
transform: translateY(7px);
}
.methodology-text:hover {
color: #ffffff;
text-decoration: underline;
}
/* Ensure proper centering of carousel elements */
.metrics-carousel {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 220px;
position: relative;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
padding: 0 5px;
box-sizing: border-box;
margin-top: -10px;
}
.metrics-container {
flex: 1;
height: 100%;
position: relative;
overflow: hidden;
margin: 0 20px;
display: flex;
align-items: center;
justify-content: center;
}
/* Responsive adjustments for smaller panels */
@media (max-width: 1200px) {
.metrics-carousel {
height: 180px;
margin-top: -5px;
}
.metric-label, .metric-value {
font-size: 9px;
}
.section-title {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.4px;
margin-bottom: 3px;
padding-bottom: 2px;
text-shadow: 0 0 2px rgba(100, 255, 218, 0.2);
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.methodology-text {
font-size: 8px;
display: inline-block;
vertical-align: baseline;
line-height: 1;
transform: translateY(7px);
}
.methodology-link {
margin-top: 1px;
padding: 1px 2px;
}
.indicators-with-methodology {
gap: 6px;
padding: 4px 0;
min-height: auto;
align-items: center;
line-height: 7px;
}
.indicators-left, .indicators-right, .indicators-center {
gap: 6px;
align-items: center;
}
.methodology-link {
padding: 2px 4px;
align-items: center;
}
.methodology-text {
font-size: 8px;
display: inline-block;
vertical-align: baseline;
line-height: 1;
transform: translateY(7px);
}
.indicator {
width: 7px;
height: 7px;
display: inline-block;
vertical-align: middle;
}
.metrics-container {
margin: 0 5px;
}
}
/* ==============================================
PROJECT HIGHLIGHTS CAROUSEL STYLES
============================================== */
/* Highlights Carousel Styles */
.highlights-carousel {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 200px;
position: relative;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
padding: 0 5px;
box-sizing: border-box;
margin-bottom: 10px;
}
.highlights-container {
flex: 1;
height: 100%;
position: relative;
overflow: hidden;
margin: 0 8px;
}
.highlight-panel {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% - 20px);
height: calc(100% - 20px);
transform: translate(-50%, -50%) scale(0.9);
opacity: 0;
visibility: hidden;
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
padding: 15px;
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
filter: blur(1px);
}
.highlight-panel.active {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
filter: blur(0px);
}
.highlight-section {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.highlight-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3px;
padding: 2px 0;
border-bottom: 1px solid rgba(100, 255, 218, 0.1);
}
.highlight-label {
font-size: 9px;
color: #ffffff;
font-weight: 500;
flex: 1;
}
.highlight-value {
font-size: 9px;
color: #64ffda;
font-weight: 700;
text-align: right;
font-family: 'Courier New', monospace;
background: rgba(100, 255, 218, 0.1);
padding: 1px 4px;
border-radius: 2px;
border: 1px solid rgba(100, 255, 218, 0.2);
}
.highlight-indicators {
display: flex;
justify-content: center;
gap: 6px;
padding: 6px;
position: relative;
z-index: 5;
}
/* ==============================================
METHODOLOGY MODAL STYLES
============================================== */
.methodology-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
z-index: 10000;
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.methodology-overlay.active {
opacity: 1;
}
.methodology-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 700px;
max-height: 80vh;
background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #1a1a1a 100%);
border: 2px solid #64ffda;
border-radius: 12px;
box-shadow: 0 0 30px rgba(100, 255, 218, 0.3);
overflow: hidden;
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.methodology-modal.active {
opacity: 1;
}
.methodology-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 25px;
background: rgba(100, 255, 218, 0.1);
border-bottom: 1px solid rgba(100, 255, 218, 0.3);
}
.methodology-title {
font-size: 18px;
font-weight: 700;
color: #64ffda;
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.methodology-close {
background: none;
border: none;
color: #64ffda;
cursor: pointer;
padding: 8px;
border-radius: 4px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.methodology-close:hover {
background: rgba(100, 255, 218, 0.2);
color: #ffffff;
}
.methodology-content {
padding: 25px;
max-height: calc(80vh - 100px);
overflow-y: auto;
color: #ffffff;
}
.methodology-section {
margin-bottom: 25px;
}
.methodology-section:last-child {
margin-bottom: 0;
}
.section-heading {
font-size: 14px;
font-weight: 700;
color: #64ffda;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(100, 255, 218, 0.2);
padding-bottom: 6px;
}
.methodology-text {
font-size: 12px;
line-height: 1.6;
color: #e0e0e0;
margin-bottom: 15px;
}
.methodology-list {
list-style: none;
padding: 0;
margin: 0;
}
.methodology-list li {
font-size: 11px;
line-height: 1.5;
color: #e0e0e0;
margin-bottom: 8px;
padding-left: 15px;
position: relative;
}
.methodology-list li::before {
content: ">";
color: #64ffda;
position: absolute;
left: 0;
font-weight: bold;
}
.methodology-list li strong {
color: #64ffda;
font-weight: 600;
}
/* Scrollbar styling for methodology modal */
.methodology-content::-webkit-scrollbar {
width: 6px;
}
.methodology-content::-webkit-scrollbar-track {
background: rgba(100, 255, 218, 0.1);
border-radius: 3px;
}
.methodology-content::-webkit-scrollbar-thumb {
background: rgba(100, 255, 218, 0.4);
border-radius: 3px;
}
.methodology-content::-webkit-scrollbar-thumb:hover {
background: rgba(100, 255, 218, 0.6);
}
/* Responsive adjustments for methodology modal */
@media (max-width: 768px) {
.methodology-modal {
width: 95%;
max-height: 90vh;
}
.methodology-header {
padding: 15px 20px;
}
.methodology-title {
font-size: 16px;
}
.methodology-content {
padding: 20px;
}
.section-heading {
font-size: 13px;
}
.methodology-text {
font-size: 11px;
}
.methodology-list li {
font-size: 10px;
}
}
/* Documentation & Demos Project Selector Styles */
.project-selector {
display: flex;
flex-direction: column;
gap: 15px;
padding: 15px;
height: 100%;
}
.selector-group {
display: flex;
flex-direction: column;
gap: 5px;
}
.selector-group label {
color: var(--accent-gold);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.selector-group select {
background: rgba(0, 0, 0, 0.8);
border: 1px solid var(--border);
color: var(--text);
padding: 8px 12px;
border-radius: 4px;
font-family: var(--font);
font-size: 12px;
cursor: pointer;
transition: all 0.3s ease;
}
.selector-group select:hover {
border-color: var(--accent-gold);
box-shadow: var(--glow-gold);
}
.selector-group select:focus {
outline: none;
border-color: var(--accent-gold);
box-shadow: var(--glow-gold);
}
.selector-group select:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.project-links {
display: flex;
gap: 10px;
margin-top: 10px;
flex-wrap: wrap;
}
.project-link {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 12px;
background: rgba(255, 69, 0, 0.1);
border: 1px solid var(--border);
color: var(--text);
text-decoration: none;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
transition: all 0.3s ease;
flex: 1;
min-width: 120px;
justify-content: center;
}
.project-link:hover {
background: rgba(255, 69, 0, 0.2);
border-color: var(--accent-gold);
box-shadow: var(--glow);
transform: translateY(-1px);
}
.documents-link {
background: rgba(255, 215, 0, 0.1);
border-color: rgba(255, 215, 0, 0.3);
}
.documents-link:hover {
background: rgba(255, 215, 0, 0.2);
border-color: var(--accent-gold);
}
/* Title Toggle Button Styles */
.title-toggle-container {
position: absolute;
top: 8px;
right: 20px;
z-index: 1000;
}
.title-toggle-btn {
background: transparent;
border: none;
color: var(--text);
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
font-family: var(--font);
font-size: 20px;
font-weight: bold;
}
.title-toggle-btn:hover {
color: var(--accent-gold);
transform: scale(1.1);
}
.title-toggle-btn:active {
transform: scale(0.95);
}
.title-toggle-btn:focus {
outline: none;
}
.title-toggle-btn:focus-visible {
outline: none;
}
.toggle-icon {
line-height: 1;
user-select: none;
}
/* Hero Section Animation States */
.encom-hero-section {
transition: all 0.5s ease;
overflow: hidden;
}
.encom-hero-section.hidden {
opacity: 0;
max-height: 0;
margin: 0;
padding: 0;
transform: translateY(-20px);
}
/* Panel adjustments when hero is hidden - move panels UP */
.dashboard.hero-hidden .encom-unified-grid {
margin-top: -100px; /* Move panels upward to fill title space */
transition: all 0.5s ease;
}
.dashboard.hero-hidden .encom-unified-grid:first-of-type {
margin-top: -80px; /* Move first panel even higher */
}
/* Ensure panels expand to fill available space */
.dashboard.hero-hidden {
padding-top: 20px; /* Reduced to allow upward movement */
}
/* Smooth transitions for all grid elements */
.encom-unified-grid {
transition: margin-top 0.5s ease, padding 0.5s ease;
}
/* Adjust data panels height when hero is hidden - moderate increase since we're moving up */
.dashboard.hero-hidden .data-panel {
min-height: 360px; /* Moderate increase to fill upward space */
height: auto;
}
/* Specific height adjustments for different panel types when hero is hidden */
.dashboard.hero-hidden .data-panel.primary {
min-height: 380px;
}
.dashboard.hero-hidden .data-panel.portfolio {
min-height: 370px;
}
.dashboard.hero-hidden .data-panel.secondary {
min-height: 360px;
}
/* Ensure the terminal content expands properly */
.terminal-content {
position: relative;
transition: all 0.5s ease;
}
/* Add smooth height transitions to all data panels */
.data-panel {
transition: min-height 0.5s ease, height 0.5s ease;
}
/* Ensure data visualization content expands to fill the increased panel height */
.dashboard.hero-hidden .data-visualization {
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Adjust carousel containers to utilize the extra space */
.dashboard.hero-hidden .highlights-carousel,
.dashboard.hero-hidden .metrics-carousel {
min-height: 280px;
}
/* Make sub-commands sections taller when hero is hidden */
.dashboard.hero-hidden .sub-commands {
min-height: 290px;
}
/* ========================================
PRICING PAGE SPECIFIC STYLES
======================================== */
/* Enable regular scrolling for pricing page */
html.pricing-page,
body.pricing-page {
overflow: auto !important;
overflow-x: hidden;
overflow-y: auto;
height: auto;
}
body.pricing-page .terminal-content {
height: auto !important;
min-height: 100vh;
overflow: visible !important;
}
body.pricing-page .dashboard {
height: auto !important;
overflow: visible !important;
}
body.pricing-page .terminal-window {
position: relative !important;
height: auto !important;
min-height: 100vh;
}
/* Specs Page Scrolling */
body.specs-page {
overflow-y: auto !important;
overflow-x: hidden;
}
body.specs-page .terminal-content {
height: auto !important;
min-height: 100vh;
overflow: visible !important;
padding-bottom: 50px;
}
body.specs-page .dashboard {
height: auto !important;
overflow: visible !important;
padding-bottom: 100px;
}
body.specs-page .terminal-window {
position: relative !important;
height: auto !important;
min-height: 100vh;
overflow: visible !important;
}
/* Custom scrollbar for specs page */
body.specs-page ::-webkit-scrollbar {
width: 8px;
}
body.specs-page ::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.9);
}
body.specs-page ::-webkit-scrollbar-thumb {
background: rgba(255, 69, 0, 0.5);
border-radius: 4px;
}
body.specs-page ::-webkit-scrollbar-thumb:hover {
background: rgba(255, 69, 0, 0.7);
}
/* Pricing Hero Section */
.pricing-hero-section {
position: relative;
overflow: hidden;
text-align: center;
padding: 4rem 2rem 2rem;
margin-bottom: 3rem;
background: linear-gradient(135deg, rgba(100, 255, 218, 0.05) 0%, rgba(255, 215, 0, 0.02) 100%);
border-radius: 12px;
border: 1px solid var(--pricing-border);
backdrop-filter: blur(10px);
}
/* Pricing hero tagline: balanced—palette-friendly with restrained energy */
.pricing-hero-section .tagline-text {
font-size: 2rem;
font-weight: 600;
color: var(--pricing-accent);
text-shadow: 0 0 12px rgba(100, 255, 218, 0.35);
letter-spacing: 0.1em;
animation: pricing-tagline-glow 4s ease-in-out infinite alternate;
}
.pricing-hero-section .tagline-text.speed-effect {
animation: pricing-tagline-glow 4s ease-in-out infinite alternate;
}
@keyframes pricing-tagline-glow {
0% { text-shadow: 0 0 12px rgba(100, 255, 218, 0.35); }
100% { text-shadow: 0 0 18px rgba(100, 255, 218, 0.5); }
}
.pricing-hero-section .tagline-underline {
height: 2px;
background: linear-gradient(90deg, transparent, var(--pricing-accent), var(--pricing-border), var(--pricing-accent), transparent);
margin-top: 8px;
box-shadow: 0 0 8px rgba(100, 255, 218, 0.2);
animation: none;
}
.pricing-subtitle {
font-size: 1.2rem;
color: var(--pricing-text-secondary);
margin-top: 1rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
font-weight: 400;
}
/* Pricing Tiers */
.pricing-tiers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin: 3rem 0 4rem;
padding: 0 1rem;
}
.pricing-tier {
background: var(--bg-secondary);
border: 2px solid var(--border);
border-radius: 16px;
padding: 2rem;
position: relative;
transition: all 0.4s ease;
transform-style: preserve-3d;
}
.pricing-tier:hover {
transform: translateY(-8px);
box-shadow:
0 20px 40px rgba(255, 69, 0, 0.15),
0 0 20px rgba(255, 69, 0, 0.1);
border-color: var(--accent-gold);
}
.pricing-tier.featured {
border-color: var(--accent-gold);
background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(255, 215, 0, 0.05) 100%);
transform: scale(1.05);
}
.pricing-tier.featured .tier-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: var(--accent-gold);
color: var(--bg);
padding: 0.5rem 1.5rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.tier-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255, 69, 0, 0.2);
}
.tier-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--accent-gold);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
}
.tier-price {
font-size: 3rem;
font-weight: 900;
color: var(--text);
line-height: 1;
margin-bottom: 0.5rem;
}
.tier-period {
font-size: 1rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
}
.tier-features {
margin-bottom: 2rem;
}
.feature-item {
padding: 0.75rem 0;
border-bottom: 1px solid rgba(255, 69, 0, 0.1);
color: var(--text);
font-size: 1rem;
line-height: 1.5;
}
.feature-item:last-child {
border-bottom: none;
}
.tier-button {
width: 100%;
padding: 1rem 2rem;
background: var(--accent);
color: var(--text);
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
font-family: var(--font);
}
.tier-button:hover {
background: var(--accent-gold);
color: var(--bg);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 215, 0, 0.3);
}
.tier-button.featured {
background: var(--accent-gold);
color: var(--bg);
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
}
.tier-button.featured:hover {
background: var(--accent);
color: var(--text);
}
/* Pricing Color Variables */
:root {
/* Enhanced color palette for pricing page */
--pricing-text-primary: #ffffff;
--pricing-text-secondary: #cccccc;
--pricing-text-muted: #888888;
--pricing-accent: #64ffda; /* Aquamarine */
--pricing-accent-secondary: #ff4500;
--pricing-accent-gold: #ffd700;
--pricing-bg-card: rgba(0, 0, 0, 0.4);
--pricing-border: rgba(100, 255, 218, 0.2);
}
/* Compact Pricing Grid */
.pricing-grid-compact {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin: 3rem 0;
padding: 0 1rem;
align-items: stretch;
}
.report-domain {
background: var(--pricing-bg-card);
border: 1px solid var(--pricing-border);
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
min-height: 100%;
}
.report-domain:hover {
border-color: var(--pricing-accent);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(100, 255, 218, 0.15);
}
.domain-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--pricing-border);
flex-shrink: 0;
}
.domain-icon {
font-size: 0.8rem;
color: var(--pricing-accent);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
background: rgba(100, 255, 218, 0.1);
padding: 0.25rem 0.5rem;
border-radius: 4px;
border: 1px solid rgba(100, 255, 218, 0.2);
}
.domain-header h3 {
font-size: 1.1rem;
font-weight: 700;
color: var(--pricing-text-primary);
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.reports-list {
display: flex;
flex-direction: column;
gap: 1rem;
flex: 1;
}
.report-item {
padding: 1rem;
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
border: 1px solid rgba(100, 255, 218, 0.1);
transition: all 0.2s ease;
backdrop-filter: blur(5px);
flex: 1;
display: flex;
flex-direction: column;
}
.report-item:hover {
background: rgba(100, 255, 218, 0.05);
border-color: var(--pricing-accent);
transform: translateX(4px);
}
.report-main {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
flex-shrink: 0;
}
.report-main h4 {
font-size: 1rem;
font-weight: 600;
color: var(--pricing-text-primary);
margin: 0;
}
.report-main .stage-badge {
font-size: 0.65rem;
font-weight: 500;
font-style: italic;
font-family: Georgia, 'Times New Roman', serif;
color: #c53030;
margin-left: 0.35rem;
text-transform: none;
letter-spacing: 0.02em;
}
.report-main .price {
font-size: 1.1rem;
font-weight: 700;
color: var(--pricing-accent-gold);
background: rgba(255, 215, 0, 0.1);
padding: 0.25rem 0.5rem;
border-radius: 4px;
border: 1px solid rgba(255, 215, 0, 0.3);
}
.report-desc {
font-size: 0.85rem;
color: var(--pricing-text-secondary);
line-height: 1.4;
margin-bottom: 0.75rem;
flex: 1;
}
.report-tags {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
flex-shrink: 0;
}
.report-tags span {
background: rgba(100, 255, 218, 0.1);
color: var(--pricing-accent);
padding: 0.2rem 0.4rem;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 500;
border: 1px solid rgba(100, 255, 218, 0.2);
}
/* Quick Stats */
.quick-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
margin: 2rem 0;
padding: 1.5rem;
background: linear-gradient(135deg, rgba(100, 255, 218, 0.05) 0%, rgba(255, 215, 0, 0.02) 100%);
border-radius: 8px;
border: 1px solid var(--pricing-border);
backdrop-filter: blur(10px);
}
.stat-item {
text-align: center;
padding: 0.75rem;
background: rgba(0, 0, 0, 0.4);
border-radius: 6px;
border: 1px solid var(--pricing-border);
transition: all 0.3s ease;
}
.stat-item:hover {
border-color: var(--pricing-accent);
background: rgba(100, 255, 218, 0.05);
}
.stat-value {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: var(--pricing-accent);
margin-bottom: 0.25rem;
}
.stat-label {
font-size: 0.75rem;
color: var(--pricing-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Contact Actions Compact */
.contact-actions-compact {
text-align: center;
padding: 2rem;
margin: 2rem 0;
background: var(--pricing-bg-card);
border-radius: 12px;
border: 1px solid var(--pricing-border);
backdrop-filter: blur(10px);
}
.contact-actions-compact h2 {
font-size: 1.5rem;
color: var(--pricing-text-primary);
margin-bottom: 1rem;
text-transform: uppercase;
font-weight: 700;
}
.action-buttons {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.cta-button {
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
border: 2px solid;
display: inline-flex;
align-items: center;
gap: 0.5rem;
backdrop-filter: blur(5px);
}
.cta-button.primary {
background: var(--pricing-accent-gold);
color: var(--bg);
border-color: var(--pricing-accent-gold);
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}
.cta-button.primary:hover {
background: transparent;
color: var(--pricing-accent-gold);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}
.cta-button.secondary {
background: transparent;
color: var(--pricing-accent);
border-color: var(--pricing-accent);
box-shadow: 0 4px 15px rgba(100, 255, 218, 0.2);
}
.cta-button.secondary:hover {
background: var(--pricing-accent);
color: var(--bg);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(100, 255, 218, 0.3);
}
.contact-note {
font-size: 0.8rem;
color: var(--pricing-text-secondary);
margin: 0;
}
/* Testimonials Section */
.testimonials-section {
margin: 3rem 0;
padding: 2rem;
background: var(--pricing-bg-card);
border-radius: 12px;
border: 1px solid var(--pricing-border);
backdrop-filter: blur(10px);
}
.testimonials-section h2 {
font-size: 1.8rem;
color: var(--pricing-text-primary);
text-align: center;
margin-bottom: 2rem;
font-weight: 700;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.testimonial-card {
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--pricing-border);
border-radius: 8px;
padding: 1.5rem;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
.testimonial-card:hover {
border-color: var(--pricing-accent);
transform: translateY(-2px);
background: rgba(100, 255, 218, 0.05);
}
.testimonial-rating {
color: var(--pricing-accent-gold);
font-size: 1.1rem;
margin-bottom: 0.75rem;
letter-spacing: 2px;
}
.testimonial-text {
color: var(--pricing-text-secondary);
font-style: italic;
line-height: 1.5;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.testimonial-author strong {
color: var(--pricing-text-primary);
display: block;
font-weight: 600;
margin-bottom: 0.25rem;
}
.testimonial-author span {
color: var(--pricing-accent);
font-size: 0.8rem;
font-weight: 500;
}
/* Process Section */
.process-section {
margin: 3rem 0;
padding: 2rem;
background: var(--pricing-bg-card);
border-radius: 12px;
border: 1px solid var(--pricing-border);
backdrop-filter: blur(10px);
}
.process-section h2 {
font-size: 1.8rem;
color: var(--pricing-text-primary);
text-align: center;
margin-bottom: 2rem;
font-weight: 700;
}
.process-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.process-step {
text-align: center;
padding: 1.5rem;
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
border: 1px solid var(--pricing-border);
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
.process-step:hover {
border-color: var(--pricing-accent);
transform: translateY(-4px);
background: rgba(100, 255, 218, 0.05);
}
.step-number {
font-size: 2rem;
font-weight: 700;
color: var(--pricing-accent);
margin-bottom: 0.75rem;
display: block;
}
.process-step h4 {
color: var(--pricing-text-primary);
font-size: 1.1rem;
margin-bottom: 0.75rem;
font-weight: 600;
}
.process-step p {
color: var(--pricing-text-secondary);
font-size: 0.85rem;
line-height: 1.5;
margin: 0;
}
/* FAQ Section */
.faq-section {
margin: 3rem 0;
padding: 2rem;
background: rgba(0, 0, 0, 0.1);
border-radius: 12px;
border: 1px solid rgba(100, 255, 218, 0.1);
backdrop-filter: blur(10px);
}
.faq-section h2 {
font-size: 1.8rem;
color: var(--pricing-text-primary);
text-align: center;
margin-bottom: 2rem;
font-weight: 700;
}
.faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.faq-item {
background: var(--pricing-bg-card);
border: 1px solid var(--pricing-border);
border-radius: 8px;
padding: 1.5rem;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
.faq-item:hover {
border-color: var(--pricing-accent);
transform: translateY(-2px);
background: rgba(100, 255, 218, 0.05);
}
.faq-item h4 {
color: var(--pricing-text-primary);
font-size: 1rem;
margin-bottom: 0.75rem;
font-weight: 600;
}
.faq-item p {
color: var(--pricing-text-secondary);
font-size: 0.85rem;
line-height: 1.5;
margin: 0;
}
/* Credentials Section */
.credentials-section {
margin: 3rem 0;
padding: 2rem;
}
.credentials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.credential-item {
background: var(--pricing-bg-card);
border: 1px solid var(--pricing-border);
border-radius: 8px;
padding: 1.25rem;
text-align: center;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.credential-item:hover {
border-color: var(--pricing-accent);
transform: translateY(-2px);
background: rgba(100, 255, 218, 0.05);
}
.credential-icon {
font-size: 1.5rem;
margin-bottom: 0.75rem;
display: block;
}
.credential-item h4 {
color: var(--pricing-text-primary);
font-size: 0.9rem;
margin-bottom: 0.5rem;
font-weight: 600;
}
.credential-item p {
color: var(--pricing-text-secondary);
font-size: 0.75rem;
margin: 0;
font-weight: 500;
}
/* Value Grid Compact */
.value-grid-compact {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 2rem 0;
}
.value-card {
background: var(--pricing-bg-card);
border: 1px solid var(--pricing-border);
border-radius: 8px;
padding: 1rem;
text-align: center;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.value-card:hover {
border-color: var(--pricing-accent);
transform: translateY(-2px);
background: rgba(100, 255, 218, 0.05);
box-shadow: 0 8px 25px rgba(100, 255, 218, 0.15);
}
.value-card .value-icon {
font-size: 0.9rem;
font-weight: 600;
color: var(--pricing-accent);
margin-bottom: 0.5rem;
display: block;
background: rgba(100, 255, 218, 0.1);
padding: 0.25rem 0.5rem;
border-radius: 4px;
border: 1px solid rgba(100, 255, 218, 0.2);
}
.value-card h4 {
font-size: 0.9rem;
color: var(--pricing-text-primary);
margin: 0 0 0.5rem 0;
font-weight: 600;
}
.value-card p {
font-size: 0.8rem;
color: var(--pricing-text-secondary);
margin: 0;
line-height: 1.4;
}
/* Services Grid */
.services-grid {
margin: 4rem 0;
padding: 0 1rem;
}
.services-title {
font-size: 2.5rem;
font-weight: 900;
color: var(--accent-gold);
text-align: center;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 3px;
}
.services-subtitle {
font-size: 1.1rem;
color: var(--text-secondary);
text-align: center;
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
.service-category {
margin-bottom: 4rem;
}
.category-title {
font-size: 1.8rem;
font-weight: 700;
color: var(--accent);
margin-bottom: 2rem;
padding: 1rem 0;
border-bottom: 2px solid var(--accent);
display: flex;
align-items: center;
gap: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
}
.category-icon {
font-size: 2rem;
}
.service-item {
background: var(--bg-secondary);
border: 1px solid rgba(255, 69, 0, 0.2);
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
transition: all 0.3s ease;
}
.service-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(100, 255, 218, 0.15);
border-color: var(--accent-gold);
}
.service-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
flex-wrap: wrap;
gap: 1rem;
}
.service-name {
font-size: 1.5rem;
font-weight: 700;
color: var(--accent-gold);
margin: 0;
}
.service-price {
font-size: 1.8rem;
font-weight: 900;
color: var(--text);
background: rgba(255, 69, 0, 0.1);
padding: 0.5rem 1rem;
border-radius: 8px;
border: 1px solid var(--accent);
}
.service-description {
color: var(--text);
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 1rem;
}
.service-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.tag {
background: rgba(255, 215, 0, 0.1);
color: var(--accent-gold);
padding: 0.3rem 0.8rem;
border-radius: 16px;
font-size: 0.8rem;
font-weight: 600;
border: 1px solid rgba(255, 215, 0, 0.3);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.service-metrics {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
margin-top: 1rem;
}
.metric {
color: var(--accent);
font-size: 0.9rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Contact Section */
.contact-section {
background: linear-gradient(135deg, rgba(255, 69, 0, 0.08) 0%, rgba(255, 215, 0, 0.03) 100%);
border: 2px solid var(--accent);
border-radius: 16px;
padding: 3rem 2rem;
margin: 4rem 0;
text-align: center;
}
.contact-title {
font-size: 2.2rem;
font-weight: 900;
color: var(--accent-gold);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
}
.contact-description {
font-size: 1.1rem;
color: var(--text);
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.contact-actions {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.contact-button {
padding: 1rem 2rem;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font);
}
.contact-button.primary {
background: var(--accent-gold);
color: var(--bg);
border: 2px solid var(--accent-gold);
}
.contact-button.primary:hover {
background: transparent;
color: var(--accent-gold);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 215, 0, 0.2);
}
.contact-button.secondary {
background: transparent;
color: var(--accent);
border: 2px solid var(--accent);
}
.contact-button.secondary:hover {
background: var(--accent);
color: var(--text);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 69, 0, 0.2);
}
.contact-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 69, 0, 0.2);
}
.contact-detail {
color: var(--text-secondary);
font-size: 0.9rem;
}
.contact-detail strong {
color: var(--text);
display: block;
margin-bottom: 0.25rem;
}
/* Value Proposition */
.value-proposition {
margin: 4rem 0;
padding: 0 1rem;
}
.value-title {
font-size: 2.5rem;
font-weight: 900;
color: var(--accent-gold);
text-align: center;
margin-bottom: 3rem;
text-transform: uppercase;
letter-spacing: 3px;
}
.value-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.value-item {
background: var(--bg-secondary);
border: 1px solid rgba(255, 69, 0, 0.2);
border-radius: 12px;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
}
.value-item:hover {
transform: translateY(-4px);
border-color: var(--accent-gold);
box-shadow: 0 8px 25px rgba(255, 215, 0, 0.1);
}
.value-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
.value-item h4 {
font-size: 1.3rem;
font-weight: 700;
color: var(--accent-gold);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.value-item p {
color: var(--text);
line-height: 1.6;
font-size: 1rem;
}
/* Make sure START button works as a link */
.start-now-btn {
display: inline-block;
text-decoration: none;
color: inherit;
}
.start-now-btn:hover {
text-decoration: none;
}
/* Responsive Design for Pricing Page */
@media (max-width: 768px) {
.pricing-grid-compact {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 0.5rem;
}
.quick-stats {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
padding: 1rem;
}
.value-grid-compact {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.action-buttons {
flex-direction: column;
gap: 0.75rem;
}
.cta-button {
width: 100%;
max-width: 280px;
justify-content: center;
}
.contact-actions-compact {
padding: 1.5rem 1rem;
}
.pricing-hero-section {
padding: 2rem 1rem;
}
.pricing-hero-section .tagline-text {
font-size: 1.6rem;
}
.pricing-subtitle {
font-size: 1rem;
color: var(--pricing-text-secondary);
}
.report-main {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.report-main .price {
align-self: flex-end;
}
.testimonials-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.process-steps {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.faq-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.credentials-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
/* Legacy styles for old sections */
.pricing-tiers {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 0.5rem;
}
.pricing-tier.featured {
transform: none;
}
.tier-price {
font-size: 2.2rem;
}
.services-title,
.value-title,
.contact-title {
font-size: 2rem;
}
.category-title {
font-size: 1.4rem;
}
.service-header {
flex-direction: column;
align-items: flex-start;
}
.contact-actions {
flex-direction: column;
align-items: center;
}
.contact-button {
width: 100%;
max-width: 300px;
justify-content: center;
}
.service-metrics {
flex-direction: column;
gap: 0.5rem;
}
}
@media (max-width: 480px) {
.quick-stats {
grid-template-columns: 1fr;
padding: 0.75rem;
}
.value-grid-compact {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.report-domain {
padding: 1rem;
}
.report-item {
padding: 0.75rem;
}
.contact-actions-compact {
padding: 1rem;
}
.stat-item {
padding: 0.5rem;
}
.stat-value {
font-size: 1.2rem;
}
.pricing-grid-compact {
grid-template-columns: 1fr;
gap: 1rem;
margin: 2rem 0;
}
.testimonials-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.process-steps {
grid-template-columns: 1fr;
gap: 1rem;
}
.faq-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.credentials-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.testimonial-card,
.process-step,
.faq-item,
.credential-item {
padding: 1rem;
}
/* Legacy styles */
.pricing-tier {
padding: 1.5rem;
}
.service-item {
padding: 1.5rem;
}
.contact-section {
padding: 2rem 1rem;
}
.value-item {
padding: 1.5rem;
}
.tier-price {
font-size: 2rem;
}
}
/* Fullscreen Overlay Styles */
.fullscreen-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000000;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.3s ease-out;
overflow: hidden;
}
/* Swarm Particle Effects */
.fullscreen-overlay .particle {
position: absolute;
pointer-events: none;
z-index: 9999;
opacity: 0;
animation-timing-function: ease-in-out;
}
.fullscreen-overlay .particle.gold {
color: rgba(184, 134, 11, 0.6);
font-size: 1.2rem;
font-weight: bold;
}
.fullscreen-overlay .particle.crimson {
color: rgba(178, 34, 52, 0.6);
font-size: 1rem;
font-style: italic;
}
.fullscreen-overlay .particle.brown {
color: rgba(139, 69, 19, 0.5);
font-size: 0.9rem;
}
/* Individual particle animations */
.particle:nth-child(1) { animation: swarm-orbit-1 8s ease-in-out infinite; }
.particle:nth-child(2) { animation: swarm-orbit-2 10s ease-in-out infinite 1s; }
.particle:nth-child(3) { animation: swarm-orbit-3 12s ease-in-out infinite 2s; }
.particle:nth-child(4) { animation: swarm-orbit-4 9s ease-in-out infinite 0.5s; }
.particle:nth-child(5) { animation: swarm-orbit-5 11s ease-in-out infinite 1.5s; }
.particle:nth-child(6) { animation: swarm-orbit-6 13s ease-in-out infinite 3s; }
.particle:nth-child(7) { animation: swarm-orbit-7 7s ease-in-out infinite 0.8s; }
.particle:nth-child(8) { animation: swarm-orbit-8 15s ease-in-out infinite 2.2s; }
.particle:nth-child(9) { animation: swarm-orbit-9 9.5s ease-in-out infinite 1.8s; }
.particle:nth-child(10) { animation: swarm-orbit-10 11.5s ease-in-out infinite 0.3s; }
.particle:nth-child(11) { animation: swarm-orbit-11 14s ease-in-out infinite 2.7s; }
.particle:nth-child(12) { animation: swarm-orbit-12 8.5s ease-in-out infinite 1.2s; }
.particle:nth-child(13) { animation: swarm-orbit-13 12.5s ease-in-out infinite 3.2s; }
.particle:nth-child(14) { animation: swarm-orbit-14 6.5s ease-in-out infinite 0.9s; }
.particle:nth-child(15) { animation: swarm-orbit-15 10.5s ease-in-out infinite 2.1s; }
.particle:nth-child(16) { animation: swarm-orbit-16 9s ease-in-out infinite 0.7s; }
.particle:nth-child(17) { animation: swarm-orbit-17 11s ease-in-out infinite 1.9s; }
.particle:nth-child(18) { animation: swarm-orbit-18 13s ease-in-out infinite 2.8s; }
.particle:nth-child(19) { animation: swarm-orbit-19 7.5s ease-in-out infinite 1.1s; }
.particle:nth-child(20) { animation: swarm-orbit-20 12s ease-in-out infinite 3.1s; }
.particle:nth-child(21) { animation: swarm-orbit-21 8.5s ease-in-out infinite 0.6s; }
.particle:nth-child(22) { animation: swarm-orbit-22 14s ease-in-out infinite 2.4s; }
.particle:nth-child(23) { animation: swarm-orbit-23 10s ease-in-out infinite 1.7s; }
.particle:nth-child(24) { animation: swarm-orbit-24 6s ease-in-out infinite 0.4s; }
.particle:nth-child(25) { animation: swarm-orbit-25 16s ease-in-out infinite 3.3s; }
.particle:nth-child(26) { animation: swarm-orbit-26 9.5s ease-in-out infinite 1.3s; }
.particle:nth-child(27) { animation: swarm-orbit-27 12.5s ease-in-out infinite 2.6s; }
.particle:nth-child(28) { animation: swarm-orbit-28 8s ease-in-out infinite 0.9s; }
.particle:nth-child(29) { animation: swarm-orbit-29 11.5s ease-in-out infinite 2.1s; }
.particle:nth-child(30) { animation: swarm-orbit-30 7s ease-in-out infinite 1.4s; }
.particle:nth-child(31) { animation: swarm-orbit-31 15s ease-in-out infinite 2.9s; }
.particle:nth-child(32) { animation: swarm-orbit-32 9s ease-in-out infinite 0.8s; }
.particle:nth-child(33) { animation: swarm-orbit-33 13.5s ease-in-out infinite 3.0s; }
.particle:nth-child(34) { animation: swarm-orbit-34 6.5s ease-in-out infinite 1.0s; }
.particle:nth-child(35) { animation: swarm-orbit-35 10.5s ease-in-out infinite 2.3s; }
.particle:nth-child(36) { animation: swarm-orbit-36 8.5s ease-in-out infinite 1.6s; }
.overlay-content {
text-align: center;
color: white;
position: relative;
z-index: 10001;
}
.overlay-message {
font-family: 'Crimson Text', 'Times New Roman', serif;
font-size: 4rem;
font-weight: 600;
color: rgba(184, 134, 11, 0.95);
text-shadow:
0 0 20px rgba(178, 34, 52, 0.15),
0 0 40px rgba(184, 134, 11, 0.08),
3px 3px 6px rgba(139, 69, 19, 0.4),
0 2px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 2.5rem;
letter-spacing: 0.15em;
animation: alchemical-transformation 4s ease-in-out infinite;
position: relative;
text-transform: uppercase;
line-height: 1.1;
text-align: center;
}
.overlay-button {
font-family: 'Crimson Text', 'Times New Roman', serif;
font-size: 1.8rem;
font-weight: 400;
background: linear-gradient(145deg, rgba(139, 69, 19, 0.1), rgba(184, 134, 11, 0.05));
border: 1px solid rgba(178, 34, 52, 0.3);
padding: 1.2rem 3rem;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: all 0.4s ease;
box-shadow:
0 4px 15px rgba(139, 69, 19, 0.2),
inset 0 1px 0 rgba(184, 134, 11, 0.1);
position: relative;
overflow: hidden;
color: rgba(184, 134, 11, 0.9);
text-shadow: 0 1px 2px rgba(139, 69, 19, 0.3);
}
.overlay-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(178, 34, 52, 0.1),
rgba(184, 134, 11, 0.05),
transparent
);
transition: left 0.6s ease;
}
.overlay-button:hover {
background: linear-gradient(145deg, rgba(178, 34, 52, 0.08), rgba(184, 134, 11, 0.1));
border-color: rgba(178, 34, 52, 0.5);
box-shadow:
0 6px 20px rgba(178, 34, 52, 0.15),
0 0 40px rgba(184, 134, 11, 0.1),
inset 0 1px 0 rgba(184, 134, 11, 0.2);
transform: translateY(-2px);
color: rgba(184, 134, 11, 1);
}
.overlay-button:hover::before {
left: 100%;
}
.overlay-button:active {
transform: translateY(0);
box-shadow:
0 2px 10px rgba(139, 69, 19, 0.2),
inset 0 1px 0 rgba(184, 134, 11, 0.1);
}
@keyframes alchemical-transformation {
0%, 100% {
color: rgba(184, 134, 11, 0.9);
text-shadow:
0 0 30px rgba(178, 34, 52, 0.2),
0 0 60px rgba(184, 134, 11, 0.1),
2px 2px 4px rgba(139, 69, 19, 0.3);
}
50% {
color: rgba(178, 34, 52, 0.8);
text-shadow:
0 0 40px rgba(178, 34, 52, 0.3),
0 0 80px rgba(184, 134, 11, 0.2),
2px 2px 6px rgba(139, 69, 19, 0.4);
}
}
/* Swarm Orbit Animations */
@keyframes swarm-orbit-1 {
0%, 100% {
transform: translate(20vw, 20vh) rotate(0deg);
opacity: 0.2;
}
25% {
transform: translate(80vw, 30vh) rotate(90deg);
opacity: 0.8;
}
50% {
transform: translate(60vw, 70vh) rotate(180deg);
opacity: 0.6;
}
75% {
transform: translate(30vw, 60vh) rotate(270deg);
opacity: 0.4;
}
}
@keyframes swarm-orbit-2 {
0%, 100% {
transform: translate(80vw, 15vh) rotate(0deg);
opacity: 0.3;
}
33% {
transform: translate(25vw, 75vh) rotate(120deg);
opacity: 0.7;
}
66% {
transform: translate(70vw, 45vh) rotate(240deg);
opacity: 0.5;
}
}
@keyframes swarm-orbit-3 {
0%, 100% {
transform: translate(40vw, 10vh) rotate(0deg) scale(0.8);
opacity: 0.1;
}
20% {
transform: translate(90vw, 80vh) rotate(72deg) scale(1.2);
opacity: 0.9;
}
40% {
transform: translate(10vw, 50vh) rotate(144deg) scale(1);
opacity: 0.6;
}
60% {
transform: translate(85vw, 20vh) rotate(216deg) scale(0.9);
opacity: 0.4;
}
80% {
transform: translate(50vw, 85vh) rotate(288deg) scale(1.1);
opacity: 0.7;
}
}
@keyframes swarm-orbit-4 {
0%, 100% {
transform: translate(15vw, 80vh) rotate(0deg);
opacity: 0.4;
}
25% {
transform: translate(75vw, 25vh) rotate(90deg);
opacity: 0.8;
}
50% {
transform: translate(45vw, 80vh) rotate(180deg);
opacity: 0.3;
}
75% {
transform: translate(85vw, 40vh) rotate(270deg);
opacity: 0.6;
}
}
@keyframes swarm-orbit-5 {
0%, 100% {
transform: translate(70vw, 85vh) rotate(0deg) scale(0.9);
opacity: 0.2;
}
30% {
transform: translate(20vw, 30vh) rotate(108deg) scale(1.3);
opacity: 0.8;
}
60% {
transform: translate(80vw, 60vh) rotate(216deg) scale(1);
opacity: 0.5;
}
90% {
transform: translate(35vw, 15vh) rotate(324deg) scale(1.1);
opacity: 0.7;
}
}
@keyframes swarm-orbit-6 {
0%, 100% {
transform: translate(55vw, 5vh) rotate(0deg);
opacity: 0.3;
}
40% {
transform: translate(25vw, 85vh) rotate(144deg);
opacity: 0.9;
}
80% {
transform: translate(90vw, 35vh) rotate(288deg);
opacity: 0.4;
}
}
@keyframes swarm-orbit-7 {
0%, 100% {
transform: translate(5vw, 40vh) rotate(0deg) scale(0.8);
opacity: 0.1;
}
35% {
transform: translate(85vw, 70vh) rotate(126deg) scale(1.4);
opacity: 0.8;
}
70% {
transform: translate(40vw, 10vh) rotate(252deg) scale(1);
opacity: 0.5;
}
}
@keyframes swarm-orbit-8 {
0%, 100% {
transform: translate(95vw, 55vh) rotate(0deg);
opacity: 0.4;
}
20% {
transform: translate(30vw, 90vh) rotate(72deg);
opacity: 0.8;
}
40% {
transform: translate(65vw, 15vh) rotate(144deg);
opacity: 0.3;
}
60% {
transform: translate(15vw, 65vh) rotate(216deg);
opacity: 0.7;
}
80% {
transform: translate(75vw, 80vh) rotate(288deg);
opacity: 0.5;
}
}
@keyframes swarm-orbit-9 {
0%, 100% {
transform: translate(25vw, 50vh) rotate(0deg) scale(0.9);
opacity: 0.2;
}
45% {
transform: translate(80vw, 85vh) rotate(162deg) scale(1.2);
opacity: 0.9;
}
90% {
transform: translate(50vw, 20vh) rotate(324deg) scale(1);
opacity: 0.4;
}
}
@keyframes swarm-orbit-10 {
0%, 100% {
transform: translate(60vw, 90vh) rotate(0deg);
opacity: 0.3;
}
50% {
transform: translate(10vw, 25vh) rotate(180deg);
opacity: 0.8;
}
}
@keyframes swarm-orbit-11 {
0%, 100% {
transform: translate(35vw, 25vh) rotate(0deg) scale(0.8);
opacity: 0.1;
}
25% {
transform: translate(90vw, 50vh) rotate(90deg) scale(1.3);
opacity: 0.7;
}
50% {
transform: translate(20vw, 75vh) rotate(180deg) scale(1);
opacity: 0.4;
}
75% {
transform: translate(70vw, 10vh) rotate(270deg) scale(1.1);
opacity: 0.8;
}
}
@keyframes swarm-orbit-12 {
0%, 100% {
transform: translate(85vw, 75vh) rotate(0deg);
opacity: 0.4;
}
30% {
transform: translate(15vw, 45vh) rotate(108deg);
opacity: 0.8;
}
60% {
transform: translate(65vw, 90vh) rotate(216deg);
opacity: 0.3;
}
90% {
transform: translate(40vw, 15vh) rotate(324deg);
opacity: 0.6;
}
}
@keyframes swarm-orbit-13 {
0%, 100% {
transform: translate(10vw, 65vh) rotate(0deg) scale(0.9);
opacity: 0.2;
}
40% {
transform: translate(75vw, 30vh) rotate(144deg) scale(1.2);
opacity: 0.9;
}
80% {
transform: translate(45vw, 80vh) rotate(288deg) scale(1);
opacity: 0.4;
}
}
@keyframes swarm-orbit-14 {
0%, 100% {
transform: translate(50vw, 35vh) rotate(0deg);
opacity: 0.3;
}
35% {
transform: translate(95vw, 70vh) rotate(126deg);
opacity: 0.8;
}
70% {
transform: translate(5vw, 55vh) rotate(252deg);
opacity: 0.5;
}
}
@keyframes swarm-orbit-15 {
0%, 100% {
transform: translate(75vw, 40vh) rotate(0deg) scale(0.8);
opacity: 0.1;
}
20% {
transform: translate(25vw, 85vh) rotate(72deg) scale(1.4);
opacity: 0.7;
}
40% {
transform: translate(85vw, 20vh) rotate(144deg) scale(1);
opacity: 0.3;
}
60% {
transform: translate(35vw, 70vh) rotate(216deg) scale(1.1);
opacity: 0.8;
}
80% {
transform: translate(60vw, 5vh) rotate(288deg) scale(0.9);
opacity: 0.4;
}
}
@keyframes swarm-orbit-16 {
0%, 100% {
transform: translate(30vw, 15vh) rotate(0deg);
opacity: 0.3;
}
33% {
transform: translate(85vw, 75vh) rotate(120deg);
opacity: 0.8;
}
66% {
transform: translate(45vw, 35vh) rotate(240deg);
opacity: 0.4;
}
}
@keyframes swarm-orbit-17 {
0%, 100% {
transform: translate(90vw, 60vh) rotate(0deg) scale(0.9);
opacity: 0.2;
}
25% {
transform: translate(15vw, 25vh) rotate(90deg) scale(1.3);
opacity: 0.7;
}
50% {
transform: translate(70vw, 85vh) rotate(180deg) scale(1);
opacity: 0.3;
}
75% {
transform: translate(35vw, 50vh) rotate(270deg) scale(1.2);
opacity: 0.6;
}
}
@keyframes swarm-orbit-18 {
0%, 100% {
transform: translate(50vw, 90vh) rotate(0deg);
opacity: 0.4;
}
40% {
transform: translate(95vw, 15vh) rotate(144deg);
opacity: 0.9;
}
80% {
transform: translate(20vw, 70vh) rotate(288deg);
opacity: 0.3;
}
}
@keyframes swarm-orbit-19 {
0%, 100% {
transform: translate(10vw, 45vh) rotate(0deg) scale(0.8);
opacity: 0.1;
}
35% {
transform: translate(80vw, 30vh) rotate(126deg) scale(1.4);
opacity: 0.8;
}
70% {
transform: translate(55vw, 80vh) rotate(252deg) scale(1);
opacity: 0.4;
}
}
@keyframes swarm-orbit-20 {
0%, 100% {
transform: translate(75vw, 10vh) rotate(0deg);
opacity: 0.3;
}
20% {
transform: translate(25vw, 85vh) rotate(72deg);
opacity: 0.8;
}
40% {
transform: translate(90vw, 40vh) rotate(144deg);
opacity: 0.3;
}
60% {
transform: translate(40vw, 20vh) rotate(216deg);
opacity: 0.7;
}
80% {
transform: translate(65vw, 75vh) rotate(288deg);
opacity: 0.5;
}
}
@keyframes swarm-orbit-21 {
0%, 100% {
transform: translate(40vw, 30vh) rotate(0deg) scale(0.9);
opacity: 0.2;
}
45% {
transform: translate(85vw, 90vh) rotate(162deg) scale(1.2);
opacity: 0.9;
}
90% {
transform: translate(15vw, 10vh) rotate(324deg) scale(1);
opacity: 0.4;
}
}
@keyframes swarm-orbit-22 {
0%, 100% {
transform: translate(95vw, 50vh) rotate(0deg);
opacity: 0.4;
}
30% {
transform: translate(30vw, 95vh) rotate(108deg);
opacity: 0.8;
}
60% {
transform: translate(80vw, 25vh) rotate(216deg);
opacity: 0.3;
}
90% {
transform: translate(45vw, 75vh) rotate(324deg);
opacity: 0.6;
}
}
@keyframes swarm-orbit-23 {
0%, 100% {
transform: translate(20vw, 75vh) rotate(0deg) scale(0.8);
opacity: 0.1;
}
25% {
transform: translate(75vw, 20vh) rotate(90deg) scale(1.3);
opacity: 0.7;
}
50% {
transform: translate(35vw, 90vh) rotate(180deg) scale(1);
opacity: 0.4;
}
75% {
transform: translate(85vw, 45vh) rotate(270deg) scale(1.1);
opacity: 0.8;
}
}
@keyframes swarm-orbit-24 {
0%, 100% {
transform: translate(60vw, 20vh) rotate(0deg);
opacity: 0.3;
}
50% {
transform: translate(15vw, 80vh) rotate(180deg);
opacity: 0.8;
}
}
@keyframes swarm-orbit-25 {
0%, 100% {
transform: translate(85vw, 35vh) rotate(0deg) scale(0.9);
opacity: 0.2;
}
20% {
transform: translate(40vw, 5vh) rotate(72deg) scale(1.4);
opacity: 0.7;
}
40% {
transform: translate(95vw, 85vh) rotate(144deg) scale(1);
opacity: 0.3;
}
60% {
transform: translate(25vw, 50vh) rotate(216deg) scale(1.1);
opacity: 0.8;
}
80% {
transform: translate(70vw, 15vh) rotate(288deg) scale(0.9);
opacity: 0.4;
}
}
@keyframes swarm-orbit-26 {
0%, 100% {
transform: translate(45vw, 85vh) rotate(0deg);
opacity: 0.4;
}
33% {
transform: translate(90vw, 30vh) rotate(120deg);
opacity: 0.8;
}
66% {
transform: translate(20vw, 60vh) rotate(240deg);
opacity: 0.3;
}
}
@keyframes swarm-orbit-27 {
0%, 100% {
transform: translate(5vw, 55vh) rotate(0deg) scale(0.8);
opacity: 0.1;
}
35% {
transform: translate(85vw, 80vh) rotate(126deg) scale(1.4);
opacity: 0.8;
}
70% {
transform: translate(50vw, 15vh) rotate(252deg) scale(1);
opacity: 0.4;
}
}
@keyframes swarm-orbit-28 {
0%, 100% {
transform: translate(70vw, 70vh) rotate(0deg);
opacity: 0.3;
}
25% {
transform: translate(25vw, 35vh) rotate(90deg);
opacity: 0.8;
}
50% {
transform: translate(80vw, 10vh) rotate(180deg);
opacity: 0.3;
}
75% {
transform: translate(40vw, 85vh) rotate(270deg);
opacity: 0.6;
}
}
@keyframes swarm-orbit-29 {
0%, 100% {
transform: translate(55vw, 40vh) rotate(0deg) scale(0.9);
opacity: 0.2;
}
40% {
transform: translate(95vw, 75vh) rotate(144deg) scale(1.2);
opacity: 0.9;
}
80% {
transform: translate(30vw, 10vh) rotate(288deg) scale(1);
opacity: 0.4;
}
}
@keyframes swarm-orbit-30 {
0%, 100% {
transform: translate(15vw, 25vh) rotate(0deg);
opacity: 0.3;
}
50% {
transform: translate(80vw, 50vh) rotate(180deg);
opacity: 0.8;
}
}
@keyframes swarm-orbit-31 {
0%, 100% {
transform: translate(80vw, 65vh) rotate(0deg) scale(0.8);
opacity: 0.1;
}
20% {
transform: translate(35vw, 90vh) rotate(72deg) scale(1.3);
opacity: 0.7;
}
40% {
transform: translate(90vw, 25vh) rotate(144deg) scale(1);
opacity: 0.4;
}
60% {
transform: translate(45vw, 5vh) rotate(216deg) scale(1.2);
opacity: 0.8;
}
80% {
transform: translate(10vw, 70vh) rotate(288deg) scale(0.9);
opacity: 0.3;
}
}
@keyframes swarm-orbit-32 {
0%, 100% {
transform: translate(35vw, 50vh) rotate(0deg);
opacity: 0.4;
}
33% {
transform: translate(85vw, 85vh) rotate(120deg);
opacity: 0.8;
}
66% {
transform: translate(50vw, 15vh) rotate(240deg);
opacity: 0.3;
}
}
@keyframes swarm-orbit-33 {
0%, 100% {
transform: translate(65vw, 30vh) rotate(0deg) scale(0.9);
opacity: 0.2;
}
30% {
transform: translate(20vw, 75vh) rotate(108deg) scale(1.3);
opacity: 0.9;
}
60% {
transform: translate(85vw, 40vh) rotate(216deg) scale(1);
opacity: 0.4;
}
90% {
transform: translate(40vw, 85vh) rotate(324deg) scale(1.1);
opacity: 0.7;
}
}
@keyframes swarm-orbit-34 {
0%, 100% {
transform: translate(90vw, 45vh) rotate(0deg);
opacity: 0.3;
}
25% {
transform: translate(35vw, 90vh) rotate(90deg);
opacity: 0.8;
}
50% {
transform: translate(75vw, 10vh) rotate(180deg);
opacity: 0.3;
}
75% {
transform: translate(20vw, 60vh) rotate(270deg);
opacity: 0.6;
}
}
@keyframes swarm-orbit-35 {
0%, 100% {
transform: translate(25vw, 40vh) rotate(0deg) scale(0.8);
opacity: 0.1;
}
40% {
transform: translate(80vw, 20vh) rotate(144deg) scale(1.4);
opacity: 0.8;
}
80% {
transform: translate(55vw, 85vh) rotate(288deg) scale(1);
opacity: 0.4;
}
}
@keyframes swarm-orbit-36 {
0%, 100% {
transform: translate(50vw, 60vh) rotate(0deg);
opacity: 0.4;
}
35% {
transform: translate(95vw, 25vh) rotate(126deg);
opacity: 0.8;
}
70% {
transform: translate(10vw, 45vh) rotate(252deg);
opacity: 0.3;
}
}
/* Mobile responsiveness for overlay */
@media (max-width: 768px) {
.overlay-message {
font-size: 2.5rem;
margin-bottom: 2rem;
letter-spacing: 0.15em;
}
.overlay-button {
font-size: 1.8rem;
padding: 1.2rem 3rem;
letter-spacing: 0.2em;
}
}
@media (max-width: 480px) {
.overlay-message {
font-size: 1.8rem;
margin-bottom: 1.5rem;
letter-spacing: 0.1em;
padding: 0 1rem;
}
.overlay-button {
font-size: 1.4rem;
padding: 1rem 2rem;
letter-spacing: 0.15em;
}
}