mirror of
https://github.com/ION606/ion606.github.io.git
synced 2026-05-14 14:06:59 +00:00
:root {
--primary: #7c3aed;
--secondary: #4f46e5;
--dark: #0f172a;
--light: #f8fafc;
--space-black: #0a0e29;
--neon-purple: #7c3aed;
--star-twinkle: #fffac2;
--ufo-color: #ff4081;
--console-bg: rgba(15, 23, 42, 0.9);
--day-bg: linear-gradient(160deg, #87CEEB 0%, #E0F6FF 100%);
--day-text: #1e293b;
--day-primary: #4f46e5;
--day-secondary: #6366f1;
--day-section-bg: rgba(255, 255, 255, 0.9);
--command-color: var(--primary);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Segoe UI", sans-serif;
}
body {
background: var(--space-black);
color: var(--light);
line-height: 1.6;
overflow-x: hidden;
position: relative;
transition: background 0.5s ease, color 0.3s ease;
}
body[data-theme="day"] {
background: var(--day-bg);
color: var(--day-text);
--command-color: var(--day-primary);
}
body[data-theme="day"] nav a {
color: var(--day-primary);
}
body[data-theme="day"] nav a:hover {
color: var(--day-secondary);
}
body[data-theme="day"] .section {
background: var(--day-section-bg);
color: var(--day-text);
}
body[data-theme="day"] #dev-console {
background: rgba(0, 0, 0, 0.3);
}
body[data-theme="day"] #dev-console .consoleout {
color: var(--day-text);
}
/* navigation bar from readme.md */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: transparent;
z-index: 1000;
padding: 0.5rem 1rem;
display: flex;
justify-content: center;
gap: 2rem;
}
nav a {
color: var(--primary);
text-decoration: none;
font-weight: bold;
}
nav a:hover {
color: var(--secondary);
}
.typewriter {
font-family: monospace;
white-space: nowrap;
overflow: hidden;
width: 0;
}
.typing-anim {
border-right: 0.15em solid var(--primary);
animation: typing 3.5s steps(30, end) forwards, blink-caret 0.75s step-end infinite;
}
.typing-text {
position: relative;
display: inline-block;
margin: 0 auto;
font-size: 1.25rem;
white-space: nowrap;
overflow: hidden;
}
.typing-cursor {
display: inline-block;
width: 0.1em;
height: 1em;
background-color: var(--primary);
animation: blink-caret-cursor 0.75s step-end infinite;
vertical-align: text-bottom;
}
@keyframes blink-caret-cursor {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
.typing-text::after {
display: none !important;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: var(--primary);
}
}
.container {
max-width: 1200px;
margin: 3rem auto 0 auto;
padding: 2rem;
position: relative;
z-index: 1;
}
.hero {
text-align: center;
overflow: hidden;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
background: linear-gradient(45deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200%;
animation: shimmer 2s linear infinite;
}
@keyframes shimmer {
0% {
background-position: 0%;
}
100% {
background-position: 200%;
}
}
li {
margin: 10px 0;
}
.category-title {
margin-top: 2em;
}
/* cosmic button style */
.cosmic-button {
background: linear-gradient(45deg, var(--primary), var(--secondary));
border: none;
padding: 0.75rem 1.5rem;
border-radius: 50px;
color: var(--light);
cursor: pointer;
transition: transform 0.3s ease;
margin: 1rem;
}
.support-buttons img {
width: 30px;
}
.cosmic-button:hover {
transform: scale(1.05);
}
/* section styling */
.section {
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(10px);
border-radius: 1rem;
padding: 2rem;
margin: 2rem 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transform: translateY(20px);
opacity: 0;
animation: slideUp 0.5s ease forwards;
}
@keyframes slideUp {
to {
transform: translateY(0);
opacity: 1;
}
}
/* tech grid styles */
.tech-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.tech-card {
background: rgba(79, 70, 229, 0.1);
padding: 1rem;
border-radius: 0.5rem;
text-align: center;
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
}
.tech-card:hover {
transform: translateY(-5px);
}
.tech-card img {
width: 50px;
height: 50px;
margin-bottom: 0.5rem;
object-fit: contain;
}
/* starfield styles */
.star {
position: absolute;
background: var(--star-twinkle);
border-radius: 50%;
animation: twinkle 3s infinite ease-in-out;
}
@keyframes twinkle {
0%,
100% {
opacity: 0.3;
}
50% {
opacity: 1;
}
}
/* ufo styles */
.ufo {
position: fixed;
top: 20%;
left: -100px;
width: 100px;
height: 50px;
background: var(--ufo-color);
border-radius: 50px / 25px;
box-shadow: 0 0 20px var(--ufo-color);
z-index: 2000;
animation: fly 5s ease-in-out forwards;
}
@keyframes fly {
0% {
transform: translateX(0);
}
100% {
transform: translateX(110vw);
}
}
/* hidden developer console */
#dev-console {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: var(--console-bg);
padding: 1rem;
display: none;
z-index: 3000;
}
#dev-console input {
width: 100%;
padding: 0.5rem;
border: none;
outline: none;
background: #222;
color: var(--light);
}
/* responsive design */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.container {
padding: 1rem;
}
}
.connect-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
margin: 20px 0;
}
.stats-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
margin: 20px 0;
}
#dev-console .consoleout {
color: #fff;
margin-top: 10px;
font-family: monospace;
max-height: 40vh;
margin-bottom: 20px;
overflow-y: scroll;
position: relative;
}
#dev-console li {
list-style: none;
position: relative;
padding-left: 20px;
word-wrap: break-word;
margin-left: 20px;
}
#dev-console li::before {
content: ">";
position: absolute;
left: 0;
color: var(--bullet-color, var(--primary));
}
body[data-theme="day"] #dev-console li::before {
color: var(--day-primary);
}
.content {
text-align: center;
line-height: 50px;
}
.disco-mode {
animation: disco 0.5s infinite;
}
@keyframes disco {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
/* Active modules styles */
.active-modules {
font-family: monospace;
text-align: center;
margin-top: 2rem;
}
.module {
display: inline-block;
margin: 0 5px;
padding: 2px 5px;
transition: transform 0.2s ease, color 0.2s ease;
cursor: pointer;
font-family: monospace;
}
.active-modules,
.active-modules * {
user-select: none;
-webkit-user-select: none;
/* Safari */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE10+ */
}
#moduleTitle {
cursor: pointer;
}
.module.hovered {
transform: scale(1.2);
}
.active-modules .module:nth-child(1).hovered {
color: #ff4081;
}
.active-modules .module:nth-child(2).hovered {
color: #7c3aed;
}
.active-modules .module:nth-child(3).hovered {
color: #4f46e5;
}
.active-modules .module:nth-child(4).hovered {
color: #00ff88;
}
.active-modules .module:nth-child(5).hovered {
color: #feb47b;
}
.active-modules .module:nth-child(6).hovered {
color: #ff7e5f;
}
.consolerrdiv {
color: #ff4d4d;
background: rgba(0, 0, 0, 0.8);
padding: 0.5rem 1rem;
margin: 0.5rem 0;
font-family: monospace;
border-left: 3px solid #ff4d4d;
}
/* lower-case comment: stage 2 shake */
@keyframes shake-anim {
0%,
100% {
transform: translate(0, 0);
}
20% {
transform: translate(-5px, 5px);
}
40% {
transform: translate(5px, -5px);
}
60% {
transform: translate(-5px, -5px);
}
80% {
transform: translate(5px, 5px);
}
}
body.shake {
animation: shake-anim 0.2s infinite;
}
@keyframes flicker-anim {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
body.flicker {
animation: flicker-anim 0.1s infinite;
}
#virusHex {
color: #0f0;
background: black;
}
/* glitching text effect */
@keyframes text-glitch {
0% {
opacity: 1;
clip: rect(0, 9999px, 0, 0);
}
10% {
clip: rect(5px, 9999px, 10px, 0);
}
20% {
clip: rect(15px, 9999px, 20px, 0);
}
30% {
clip: rect(25px, 9999px, 30px, 0);
}
40% {
clip: rect(35px, 9999px, 40px, 0);
}
50% {
clip: rect(45px, 9999px, 50px, 0);
}
60% {
clip: rect(55px, 9999px, 60px, 0);
}
70% {
clip: rect(65px, 9999px, 70px, 0);
}
80% {
clip: rect(75px, 9999px, 80px, 0);
}
90% {
clip: rect(85px, 9999px, 90px, 0);
}
100% {
clip: rect(0, 9999px, 0, 0);
}
}
#virusMsg {
text-align: center;
}
/* vi editor overlay styles */
.vi-editor-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(20, 20, 30, 0.97);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.vi-editor-box {
background: #181825;
border-radius: 10px;
box-shadow: 0 4px 32px #000a;
padding: 2rem;
width: min(90vw, 600px);
max-width: 100vw;
display: flex;
flex-direction: column;
align-items: stretch;
}
.vi-editor-title {
color: #7c3aed;
font-family: monospace;
font-size: 1.2rem;
margin-bottom: 1rem;
text-align: center;
}
.vi-editor-textarea {
width: 100%;
height: 250px;
resize: vertical;
background: #232136;
color: #fff;
border: none;
border-radius: 6px;
padding: 1rem;
font-family: monospace;
font-size: 1rem;
outline: none;
margin-bottom: 1rem;
}
.vi-editor-btnrow {
display: flex;
gap: 1rem;
justify-content: flex-end;
}
.vi-editor-savebtn {
background: #7c3aed;
color: #fff;
border: none;
padding: 0.5rem 1.2rem;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
}
.vi-editor-cancelbtn {
background: #232136;
color: #fff;
border: none;
padding: 0.5rem 1.2rem;
border-radius: 5px;
cursor: pointer;
}
.projects-table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
.projects-table th,
.projects-table td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid rgba(124, 58, 237, 0.3);
}
.projects-table th {
color: var(--primary);
font-weight: 600;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.05em;
}
.projects-table tr:hover td {
background: rgba(124, 58, 237, 0.08);
}
.projects-table a {
color: #b76e79;
text-decoration: none;
font-weight: 500;
}
.projects-table a:hover {
color: var(--primary);
text-decoration: underline;
}