From c2a5760808548c1d8fc03c9f349ccb262f8efb6b Mon Sep 17 00:00:00 2001 From: Z User Date: Fri, 8 May 2026 21:05:34 +0000 Subject: [PATCH] Add whitepaper popup card with navbar and hero CTA buttons --- index.html | 368 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 367 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index a414da5..b9e144a 100644 --- a/index.html +++ b/index.html @@ -47,6 +47,216 @@ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2); } + /* WHITEPAPER MODAL */ + .wp-modal-overlay { + position: fixed; + inset: 0; + z-index: 100; + background: rgba(2, 6, 23, 0.85); + backdrop-filter: blur(8px); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + pointer-events: none; + transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1); + } + .wp-modal-overlay.active { + opacity: 1; + pointer-events: auto; + } + .wp-modal-card { + background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%); + border: 1px solid rgba(52, 211, 153, 0.25); + border-radius: 2rem; + width: 94vw; + max-width: 820px; + max-height: 88vh; + overflow: hidden; + display: flex; + flex-direction: column; + box-shadow: 0 0 60px rgba(0, 240, 200, 0.12), 0 25px 50px rgba(0, 0, 0, 0.5); + transform: translateY(40px) scale(0.96); + transition: transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1); + } + .wp-modal-overlay.active .wp-modal-card { + transform: translateY(0) scale(1); + } + .wp-modal-header { + padding: 2rem 2.5rem 1.5rem; + border-bottom: 1px solid rgba(52, 211, 153, 0.15); + display: flex; + align-items: flex-start; + justify-content: space-between; + flex-shrink: 0; + } + .wp-modal-close { + background: rgba(52, 211, 153, 0.1); + border: 1px solid rgba(52, 211, 153, 0.2); + color: #34d399; + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 1.25rem; + transition: all 200ms ease; + flex-shrink: 0; + } + .wp-modal-close:hover { + background: rgba(52, 211, 153, 0.25); + border-color: rgba(52, 211, 153, 0.4); + } + .wp-modal-body { + padding: 2rem 2.5rem 2.5rem; + overflow-y: auto; + flex: 1; + } + .wp-modal-body::-webkit-scrollbar { + width: 6px; + } + .wp-modal-body::-webkit-scrollbar-track { + background: transparent; + } + .wp-modal-body::-webkit-scrollbar-thumb { + background: rgba(52, 211, 153, 0.3); + border-radius: 3px; + } + .wp-modal-body::-webkit-scrollbar-thumb:hover { + background: rgba(52, 211, 153, 0.5); + } + .wp-modal-body h2 { + font-family: 'Space Grotesk', sans-serif; + font-size: 1.5rem; + font-weight: 600; + color: #f8fafc; + margin-top: 2rem; + margin-bottom: 0.75rem; + padding-top: 1rem; + border-top: 1px solid rgba(148, 163, 184, 0.15); + } + .wp-modal-body h2:first-child { + margin-top: 0; + padding-top: 0; + border-top: none; + } + .wp-modal-body h3 { + font-size: 1.15rem; + font-weight: 600; + color: #e2e8f0; + margin-top: 1.5rem; + margin-bottom: 0.5rem; + } + .wp-modal-body p { + color: #94a3b8; + font-size: 0.95rem; + line-height: 1.75; + margin-bottom: 0.75rem; + } + .wp-modal-body strong { + color: #f1f5f9; + } + .wp-modal-body em { + color: #94a3b8; + font-style: italic; + } + .wp-modal-body ul { + list-style: none; + padding: 0; + margin-bottom: 0.75rem; + } + .wp-modal-body ul li { + color: #94a3b8; + font-size: 0.95rem; + line-height: 1.75; + padding-left: 1.25rem; + position: relative; + } + .wp-modal-body ul li::before { + content: ''; + position: absolute; + left: 0; + top: 0.7em; + width: 6px; + height: 6px; + border-radius: 50%; + background: #34d399; + } + .wp-modal-body blockquote { + border-left: 3px solid #34d399; + padding: 0.75rem 1.25rem; + margin: 1rem 0; + background: rgba(52, 211, 153, 0.05); + border-radius: 0 0.75rem 0.75rem 0; + } + .wp-modal-body blockquote p { + color: #6ee7b7; + margin-bottom: 0; + } + .wp-modal-body table { + width: 100%; + border-collapse: collapse; + margin: 1rem 0; + font-size: 0.9rem; + } + .wp-modal-body table th, + .wp-modal-body table td { + padding: 0.6rem 0.85rem; + text-align: left; + border-bottom: 1px solid rgba(148, 163, 184, 0.12); + } + .wp-modal-body table th { + color: #34d399; + font-weight: 600; + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.05em; + } + .wp-modal-body table td { + color: #94a3b8; + } + .wp-modal-body table tr:hover td { + background: rgba(52, 211, 153, 0.04); + } + .wp-modal-body hr { + border: none; + border-top: 1px solid rgba(148, 163, 184, 0.1); + margin: 1.5rem 0; + } + .wp-modal-body a { + color: #34d399; + text-decoration: underline; + text-underline-offset: 2px; + } + .wp-modal-body a:hover { + color: #6ee7b7; + } + + /* WHITEPAPER BTN GLOW */ + .wp-btn { + position: relative; + overflow: hidden; + } + .wp-btn::after { + content: ''; + position: absolute; + inset: -1px; + border-radius: 1.5rem; + background: conic-gradient(from var(--wp-btn-angle, 0deg), transparent, #34d399, transparent, transparent); + z-index: -1; + animation: wp-btn-spin 3s linear infinite; + } + @keyframes wp-btn-spin { + to { --wp-btn-angle: 360deg; } + } + @property --wp-btn-angle { + syntax: ''; + initial-value: 0deg; + inherits: false; + } + /* BALLOON + M STYLES (hero) */ .stage { position: relative; @@ -91,6 +301,10 @@
How It Works Moxie Demo + Licensing @@ -135,7 +349,7 @@ increasing efficiency of both inference and training by 10-100x.

-
+
@@ -313,6 +533,132 @@
+ + +