diff --git a/install/index.html b/install/index.html index 51c408f..c822777 100644 --- a/install/index.html +++ b/install/index.html @@ -369,16 +369,132 @@ } .fade-in.visible { opacity: 1; transform: translateY(0); } + /* ===== INTERACTIVE TERMINAL DOTS ===== */ + .terminal-bar-dots span:first-child, + .install-dots span:first-child { + cursor: pointer; + transition: transform 0.15s, box-shadow 0.15s; + } + .terminal-bar-dots span:first-child:hover, + .install-dots span:first-child:hover { + transform: scale(1.3); + box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); + } + + /* Terminal closing animation */ + .terminal-closing { + animation: terminalClose 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards; + } + @keyframes terminalClose { + 0% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.5; transform: scale(0.98, 0.5); } + 100% { opacity: 0; transform: scale(0.95, 0.01); } + } + .terminal-opening { + animation: terminalOpen 0.5s cubic-bezier(0, 0.55, 0.45, 1) forwards; + } + @keyframes terminalOpen { + 0% { opacity: 0; transform: scale(0.95, 0.01); } + 50% { opacity: 0.7; transform: scale(0.98, 0.5); } + 100% { opacity: 1; transform: scale(1); } + } + + /* ===== CONTRIBUTE SECTION ===== */ + .contribute-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 16px; + } + .contribute-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + padding: 24px; + transition: all 0.3s; + position: relative; + overflow: hidden; + } + .contribute-card::after { + content: ''; + position: absolute; + inset: 0; + border-radius: 12px; + opacity: 0; + transition: opacity 0.3s; + } + .contribute-card:hover { + border-color: var(--border-hover); + background: var(--bg-card-hover); + transform: translateY(-2px); + } + .contribute-card:hover::after { opacity: 1; } + .contribute-card .card-number { + font-family: 'JetBrains Mono', monospace; + font-size: 48px; + font-weight: 700; + line-height: 1; + margin-bottom: 16px; + background: linear-gradient(135deg, var(--green), transparent); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + opacity: 0.25; + } + + /* ===== FLOATING PARTICLES ===== */ + .particles { + position: fixed; + inset: 0; + pointer-events: none; + z-index: 0; + overflow: hidden; + } + .particle { + position: absolute; + width: 2px; + height: 2px; + border-radius: 50%; + background: var(--green); + opacity: 0; + animation: floatUp linear infinite; + } + @keyframes floatUp { + 0% { opacity: 0; transform: translateY(100vh) scale(0); } + 10% { opacity: 0.3; } + 90% { opacity: 0.1; } + 100% { opacity: 0; transform: translateY(-10vh) scale(1); } + } + + /* ===== GLOW CURSOR FOLLOWER ===== */ + .cursor-glow { + position: fixed; + width: 300px; + height: 300px; + border-radius: 50%; + background: radial-gradient(circle, rgba(34,197,94,0.06) 0%, transparent 70%); + pointer-events: none; + z-index: 1; + transform: translate(-50%, -50%); + transition: left 0.3s ease-out, top 0.3s ease-out; + } + /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { - .features-grid, .docs-grid { grid-template-columns: 1fr; } + .features-grid, .docs-grid, .contribute-grid { grid-template-columns: 1fr; } .hero { padding: 130px 24px 60px; } .hero p { font-size: 16px; } + .cursor-glow { display: none; } } + +
+ + +
+