/* ================================================================ Vechtron Theme — Shared design-system utilities Derived from Stitch design exports. Tailwind config in default.hbs provides color/type tokens; this file layers effects/components that can't be expressed as Tailwind utilities. ================================================================ */ body { min-height: 100vh; overflow-x: hidden; } /* ------------------------- Icon defaults --------------------------- */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } /* ------------------------- Frosted glass --------------------------- */ .glass-panel { background: rgba(53, 52, 58, 0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* ------------------------- Neural glow / gradients ----------------- */ .neural-gradient { background: linear-gradient(135deg, #d8b9ff 0%, #7f13ec 100%); } .neural-glow { box-shadow: 0 0 20px rgba(127, 19, 236, 0.3); } .glow-primary { filter: drop-shadow(0 0 12px #7f13ec); } .glow-secondary { filter: drop-shadow(0 0 8px #4edea3); } .pulse-secondary, .pulse-glow { box-shadow: 0 0 15px rgba(78, 222, 163, 0.4); } .pulse-dot { box-shadow: 0 0 8px #4edea3; } .health-glow { box-shadow: 0 0 15px rgba(78, 222, 163, 0.3); } .hero-gradient { background: radial-gradient(circle at 50% 50%, rgba(127, 19, 236, 0.15) 0%, transparent 70%); } /* ------------------------- Text effects ---------------------------- */ .text-glow-purple { text-shadow: 0 0 15px rgba(216, 185, 255, 0.4); } .text-glow-green { text-shadow: 0 0 15px rgba(78, 222, 163, 0.4); } .text-gradient { background: linear-gradient(to right, #d8b9ff, #7f13ec); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .shimmer-text { background: linear-gradient(90deg, #d8b9ff, #ffffff, #d8b9ff); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; animation: shimmer 5s infinite linear; } @keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* ------------------------- Gradient borders ------------------------ */ .gradient-border-top { position: relative; } .gradient-border-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #7f13ec, transparent); } /* ------------------------- Scroll reveal --------------------------- */ .scroll-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .scroll-reveal.active { opacity: 1; transform: translateY(0); } /* ------------------------- Scrollbars ------------------------------ */ .hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .custom-scrollbar::-webkit-scrollbar { height: 4px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #7f13ec; border-radius: 10px; } /* ------------------------- Code block glow ------------------------- */ .code-glow { text-shadow: 0 0 10px rgba(216, 185, 255, 0.3); } /* ------------------------- Mobile nav drawer ----------------------- */ /* Toggle target: reveals the drawer */ .site-nav-drawer { background-color: #0e0e13; /* surface-container-lowest — explicit opaque fallback */ background-image: linear-gradient(180deg, #131318 0%, #0e0e13 100%); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6); transform: translateX(100%); transition: transform 0.3s ease; } body[data-menu-open="true"] .site-nav-drawer { transform: translateX(0); } body[data-menu-open="true"] { overflow: hidden; } /* Dim backdrop behind the drawer so page content doesn't bleed through */ .site-nav-backdrop { position: fixed; inset: 0; background: rgba(10, 10, 15, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 40; } body[data-menu-open="true"] .site-nav-backdrop { opacity: 1; pointer-events: auto; } /* ------------------------- FAQ accordion --------------------------- */ [data-faq-item] [data-faq-body] { display: none; } [data-faq-item][data-open="true"] [data-faq-body] { display: block; } [data-faq-item][data-open="true"] [data-faq-icon] { transform: rotate(45deg); } [data-faq-icon] { transition: transform 0.2s ease; } /* ------------------------- Ghost prose (post body) ----------------- */ .prose-ghost { color: #cec2d8; line-height: 1.7; } .prose-ghost h1, .prose-ghost h2, .prose-ghost h3, .prose-ghost h4, .prose-ghost h5, .prose-ghost h6 { font-family: 'Space Grotesk', sans-serif; color: #e4e1e9; letter-spacing: -0.02em; margin-top: 2rem; margin-bottom: 1rem; } .prose-ghost h1 { font-size: 2.25rem; font-weight: 700; } .prose-ghost h2 { font-size: 1.875rem; font-weight: 700; } .prose-ghost h3 { font-size: 1.5rem; font-weight: 600; } .prose-ghost h4 { font-size: 1.25rem; font-weight: 600; } .prose-ghost p { margin-bottom: 1.25rem; } .prose-ghost a { color: #d8b9ff; text-decoration: underline; text-decoration-color: rgba(216,185,255,0.3); text-underline-offset: 3px; } .prose-ghost a:hover { text-decoration-color: #d8b9ff; } .prose-ghost strong { color: #fff; font-weight: 600; } .prose-ghost blockquote { border-left: 3px solid #7f13ec; padding: 1rem 1.5rem; margin: 1.5rem 0; background: #1f1f25; border-radius: 0.5rem; font-style: italic; color: #e4e1e9; } .prose-ghost ul, .prose-ghost ol { margin: 1rem 0 1.25rem 1.5rem; } .prose-ghost ul { list-style: disc; } .prose-ghost ol { list-style: decimal; } .prose-ghost li { margin-bottom: 0.5rem; } .prose-ghost code { font-family: 'ui-monospace', 'SFMono-Regular', monospace; background: #2a292f; color: #d8b9ff; padding: 0.1rem 0.35rem; border-radius: 0.25rem; font-size: 0.9em; } .prose-ghost pre { background: #0e0e13; border: 1px solid rgba(255,255,255,0.05); padding: 1rem 1.25rem; border-radius: 0.75rem; overflow-x: auto; margin: 1.5rem 0; } .prose-ghost pre code { background: transparent; padding: 0; color: #e4e1e9; } .prose-ghost img { border-radius: 0.75rem; margin: 1.5rem 0; max-width: 100%; } .prose-ghost hr { border: 0; border-top: 1px solid rgba(255,255,255,0.08); margin: 2.5rem 0; } /* ------------------------- Active nav link ------------------------- */ /* Works against body[class*="page-template-page-{slug}"] + nav[data-nav] a[href="/{slug}/"] */ .nav-link-active, nav[data-nav] a[aria-current="page"] { color: #d8b9ff; border-bottom: 2px solid #7f13ec; padding-bottom: 0.25rem; } /* ------------------------- Form controls --------------------------- */ .newsletter-input { background: #1b1b20; border: 1px solid #4c4355; color: #e4e1e9; padding: 0.875rem 1rem; border-radius: 0.5rem; width: 100%; outline: none; transition: border-color 0.2s; } .newsletter-input::placeholder { color: #978da1; } .newsletter-input:focus { border-color: #d8b9ff; } .newsletter-success, .newsletter-error { display: none; font-size: 0.875rem; margin-top: 0.5rem; } .newsletter-success { color: #4edea3; } .newsletter-error { color: #ffb4ab; } form.success .newsletter-success { display: block; } form.error .newsletter-error { display: block; }