/* ⚠️ Assumptions Made in This File 1) This stylesheet is shared by ALL pages in the /nsvr-investor-site project. 2) Color palette is inferred from your NSVR / AlphaGlow branding (deep space blues + neon accents). 3) Font stack uses system fonts; you can later swap for a brand font via @import or local files. 4) All HTML files include in . 5) Image paths (assets/img/...) are placeholders and should be replaced with final imagery when ready. */ :root { --bg-main: #020617; --bg-alt: #02091f; --bg-elevated: #050b23; --bg-card: #070f2a; --accent: #38bdf8; --accent-soft: rgba(56, 189, 248, 0.16); --accent-strong: #22d3ee; --text-main: #e5e7eb; --text-soft: #9ca3af; --text-muted: #6b7280; --text-strong: #f9fafb; --border-subtle: rgba(148, 163, 184, 0.35); --radius-lg: 18px; --radius-md: 12px; --radius-pill: 999px; --shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.85); --shadow-glow: 0 0 60px rgba(56, 189, 248, 0.28); --container-max: 1160px; --nav-height: 76px; --transition-fast: 180ms ease-out; --transition-med: 260ms ease-out; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif; background: radial-gradient(circle at top, #020617 0, #020617 30%, #020617 60%, #020617 100%); color: var(--text-main); -webkit-font-smoothing: antialiased; } /* Layout */ .page { min-height: 100vh; background: radial-gradient(circle at 10% 0%, rgba(59, 130, 246, 0.32) 0, transparent 50%), radial-gradient(circle at 90% 80%, rgba(56, 189, 248, 0.24) 0, transparent 55%), linear-gradient(to bottom, #020617 0, #020617 60%, #020617 100%); } .page-inner { max-width: var(--container-max); margin: 0 auto; padding: calc(var(--nav-height) + 32px) 20px 64px; } /* Header / Nav */ .site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); z-index: 40; backdrop-filter: blur(14px); background: linear-gradient( to bottom, rgba(2, 6, 23, 0.96), rgba(2, 6, 23, 0.75), transparent ); border-bottom: 1px solid rgba(148, 163, 184, 0.18); } .site-header-inner { max-width: var(--container-max); margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .brand-logo { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 30% 0, #f97316, transparent 58%), radial-gradient(circle at 70% 100%, #38bdf8, transparent 60%), radial-gradient(circle at 15% 80%, #a855f7, transparent 55%), #020617; box-shadow: var(--shadow-glow); position: relative; overflow: hidden; } .brand-logo::after { content: ""; position: absolute; inset: 6px; border-radius: inherit; border: 1px solid rgba(248, 250, 252, 0.32); opacity: 0.8; } /* Custom image logo for NeuroScope VR brand */ .brand-logo-img { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; box-shadow: var(--shadow-glow); } /* Small icon for AlphaGlow within the brand subline */ .brand-sub .alpha-icon { width: 16px; height: 16px; margin-right: 4px; vertical-align: middle; } .brand-text-main { display: flex; flex-direction: column; gap: 2px; } .brand-name { font-size: 0.88rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-strong); } .brand-sub { font-size: 0.76rem; color: var(--text-soft); } /* Nav */ .nav { display: flex; align-items: center; gap: 24px; } .nav-links { display: flex; align-items: center; gap: 18px; } .nav-link { position: relative; font-size: 0.85rem; color: var(--text-soft); text-decoration: none; letter-spacing: 0.03em; text-transform: uppercase; transition: color var(--transition-fast); } .nav-link::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; border-radius: 999px; background: linear-gradient(to right, #38bdf8, #a855f7); transition: width var(--transition-med); } .nav-link:hover { color: var(--text-strong); } .nav-link:hover::after { width: 100%; } .nav-link--primary { padding: 8px 16px; border-radius: var(--radius-pill); background: radial-gradient(circle at 0 0, rgba(248, 250, 252, 0.25), transparent 60%), linear-gradient(135deg, #22d3ee, #a855f7); color: #020617; font-size: 0.82rem; font-weight: 600; box-shadow: 0 12px 28px rgba(56, 189, 248, 0.35); } .nav-link--primary::after { display: none; } /* Mobile nav */ .nav-toggle { display: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.5); background: radial-gradient(circle at 0 0, rgba(148, 163, 184, 0.35), transparent 55%), rgba(15, 23, 42, 0.95); align-items: center; justify-content: center; cursor: pointer; } .nav-toggle-bar { width: 18px; height: 2px; border-radius: 999px; background: var(--text-main); position: relative; } .nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; border-radius: 999px; background: inherit; transition: transform var(--transition-med), top var(--transition-med), opacity var(--transition-med); } .nav-toggle-bar::before { top: -6px; } .nav-toggle-bar::after { top: 6px; } .nav-toggle--open .nav-toggle-bar { background: transparent; } .nav-toggle--open .nav-toggle-bar::before { top: 0; transform: rotate(45deg); } .nav-toggle--open .nav-toggle-bar::after { top: 0; transform: rotate(-45deg); } .nav--mobile-open { position: absolute; inset: calc(var(--nav-height)) 12px auto 12px; padding: 14px 16px 16px; border-radius: var(--radius-lg); background: rgba(15, 23, 42, 0.96); border: 1px solid rgba(148, 163, 184, 0.35); box-shadow: var(--shadow-soft); flex-direction: column; align-items: flex-start; gap: 10px; } /* Hero */ .hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2.4fr); gap: 40px; align-items: center; margin-bottom: 56px; } .hero-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: var(--radius-pill); background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(148, 163, 184, 0.45); box-shadow: 0 18px 36px rgba(15, 23, 42, 0.85); margin-bottom: 16px; } .hero-kicker-pill { padding: 4px 10px; border-radius: inherit; background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(129, 140, 248, 0.35)); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-strong); } .hero-kicker-text { font-size: 0.78rem; color: var(--text-soft); } .hero-title { font-size: clamp(2.4rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.04em; color: var(--text-strong); margin-bottom: 14px; } .hero-highlight { background-image: linear-gradient(120deg, #38bdf8, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-body { font-size: 0.98rem; color: var(--text-soft); max-width: 520px; margin-bottom: 20px; } .hero-tagline { font-size: 0.86rem; color: var(--text-muted); margin-bottom: 22px; } .hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-pill); border: none; cursor: pointer; font-size: 0.88rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); } .btn-primary { background: radial-gradient(circle at 0 0, rgba(248, 250, 252, 0.25), transparent 60%), linear-gradient(135deg, #22d3ee, #a855f7); color: #020617; box-shadow: var(--shadow-glow); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 22px 42px rgba(56, 189, 248, 0.45); } .btn-ghost { background: rgba(15, 23, 42, 0.85); color: var(--text-main); border: 1px solid rgba(148, 163, 184, 0.55); } .btn-ghost:hover { background: rgba(15, 23, 42, 0.98); transform: translateY(-1px); } /* Hero metrics */ .hero-metrics { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.8rem; color: var(--text-muted); } .hero-metric { display: flex; flex-direction: column; gap: 4px; } .hero-metric-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; } .hero-metric-value { font-size: 0.95rem; color: var(--text-main); } /* Hero visual */ .hero-logos { display: flex; justify-content: flex-end; margin-top: 24px; } .hero-portrait-img { max-width: 320px; width: 100%; height: auto; border-radius: 24px; box-shadow: var(--shadow-glow-strong); } /* Responsive tweaks for hero portrait */ @media (max-width: 960px) { .hero-logos { justify-content: center; } .hero-portrait-img { max-width: 260px; margin-top: 12px; } } .hero-visual { position: relative; border-radius: 32px; padding: 18px; background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.18), transparent 65%), radial-gradient(circle at 100% 100%, rgba(168, 85, 247, 0.24), transparent 65%), var(--bg-elevated); border: 1px solid rgba(148, 163, 184, 0.45); box-shadow: var(--shadow-soft); overflow: hidden; } .hero-visual-img { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid rgba(148, 163, 184, 0.55); } .hero-visual-img img { width: 100%; height: 260px; object-fit: cover; display: block; } .hero-visual-pill { position: absolute; right: 22px; top: 20px; padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(15, 23, 42, 0.94); border: 1px solid rgba(56, 189, 248, 0.5); font-size: 0.74rem; color: var(--text-soft); } .hero-visual-card { position: absolute; left: 20px; bottom: 20px; padding: 10px 12px; border-radius: 18px; background: rgba(15, 23, 42, 0.96); border: 1px solid rgba(148, 163, 184, 0.7); font-size: 0.75rem; max-width: 210px; color: var(--text-soft); } /* Sections */ .section { margin-bottom: 60px; } .section-header { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: 18px; } .section-title { font-size: 1.32rem; letter-spacing: -0.03em; color: var(--text-strong); } .section-tag { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); } .section-subtitle { font-size: 0.9rem; color: var(--text-soft); max-width: 520px; } /* Cards / grids */ .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .card { border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), #020617); border: 1px solid rgba(148, 163, 184, 0.35); box-shadow: var(--shadow-soft); padding: 16px 18px 18px; position: relative; overflow: hidden; transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med), background var(--transition-med); } .card::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.18), transparent 50%); opacity: 0; transition: opacity var(--transition-med); } .card:hover { transform: translateY(-4px); border-color: rgba(56, 189, 248, 0.7); box-shadow: 0 22px 50px rgba(15, 23, 42, 0.96); } .card:hover::before { opacity: 1; } .card-eyebrow { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .card-title { font-size: 1.02rem; color: var(--text-strong); margin-bottom: 6px; } .card-body { font-size: 0.88rem; color: var(--text-soft); margin-bottom: 12px; } .card-meta { font-size: 0.78rem; color: var(--text-muted); } /* Image placeholders */ .image-placeholder { border-radius: 20px; background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.18), transparent 55%), radial-gradient(circle at 100% 100%, rgba(168, 85, 247, 0.3), transparent 55%), #020617; border: 1px dashed rgba(148, 163, 184, 0.6); min-height: 190px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.86rem; text-align: center; padding: 16px; } /* Custom image box for inserted photos (sensor band, VR user) */ .image-placeholder.custom-image { border: none; background: none; padding: 0; min-height: unset; } .image-placeholder.custom-image img { width: 100%; height: 220px; /* Use cover so that the image fills the box; we'll provide pre-cropped assets with correct aspect ratio */ object-fit: cover; object-position: center; border-radius: 20px; display: block; } /* Banner, forms, footer, etc. */ .banner { border-radius: 24px; padding: 18px 20px 20px; background: radial-gradient(circle at 0 0, rgba(34, 211, 238, 0.22), transparent 60%), radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.24), transparent 60%), #020617; border: 1px solid rgba(148, 163, 184, 0.4); box-shadow: var(--shadow-soft); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; } .banner-text-main { max-width: 520px; } .banner-title { font-size: 1.08rem; margin-bottom: 6px; color: var(--text-strong); } .banner-body { font-size: 0.88rem; color: var(--text-soft); } .banner-actions { display: flex; flex-wrap: wrap; gap: 10px; } .form-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .input { min-width: 220px; padding: 9px 12px; border-radius: var(--radius-pill); border: 1px solid rgba(148, 163, 184, 0.7); background: rgba(15, 23, 42, 0.9); color: var(--text-main); font-size: 0.86rem; } .input::placeholder { color: var(--text-muted); } .checkbox-row { margin-top: 10px; display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-muted); } /* Footer */ .site-footer { border-top: 1px solid rgba(148, 163, 184, 0.28); margin-top: 48px; padding-top: 24px; padding-bottom: 12px; font-size: 0.8rem; color: var(--text-muted); } .footer-grid { display: grid; grid-template-columns: 2.2fr 1.6fr 1.2fr; gap: 24px; margin-bottom: 18px; } .footer-heading { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-main); margin-bottom: 8px; } .footer-list { list-style: none; padding: 0; margin: 0; } .footer-link { color: var(--text-soft); text-decoration: none; font-size: 0.84rem; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; } .footer-link:hover { color: var(--accent-strong); } .footer-meta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; } .footer-copy { color: var(--text-muted); } .footer-meta-links { display: flex; flex-wrap: wrap; gap: 10px; } /* Page headers */ .page-header { margin-bottom: 36px; } .page-kicker { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted); margin-bottom: 8px; } .page-title { font-size: 2rem; letter-spacing: -0.04em; color: var(--text-strong); margin-bottom: 10px; } .page-lede { font-size: 0.98rem; color: var(--text-soft); max-width: 620px; } /* Content blocks */ .two-column { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2.2fr); gap: 26px; align-items: flex-start; } .rich-block { padding: 18px 18px 20px; border-radius: var(--radius-lg); background: rgba(15, 23, 42, 0.94); border: 1px solid rgba(148, 163, 184, 0.35); box-shadow: var(--shadow-soft); } .rich-block h3 { margin-top: 0; margin-bottom: 8px; font-size: 1.02rem; color: var(--text-strong); } .rich-block p { font-size: 0.9rem; color: var(--text-soft); margin: 0 0 8px 0; } .rich-list { padding-left: 18px; margin: 10px 0; font-size: 0.9rem; color: var(--text-soft); } /* Contact */ .contact-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2.2fr); gap: 24px; } .contact-form .input, .contact-form textarea { width: 100%; } .contact-form textarea { resize: vertical; min-height: 120px; border-radius: 18px; padding: 10px 12px; border: 1px solid rgba(148, 163, 184, 0.7); background: rgba(15, 23, 42, 0.9); color: var(--text-main); font-size: 0.9rem; } .contact-detail { font-size: 0.9rem; color: var(--text-soft); } /* Animations / scroll-in */ .fade-in-up { opacity: 0; transform: translateY(16px); transition: opacity 420ms ease-out, transform 420ms ease-out; } .fade-in-up.in-view { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* Responsive */ @media (max-width: 960px) { .hero { grid-template-columns: minmax(0, 1fr); } .hero-visual { max-width: 440px; margin: 0 auto; } .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .two-column, .contact-grid { grid-template-columns: minmax(0, 1fr); } .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr); } .site-header-inner { padding-inline: 14px; } } @media (max-width: 780px) { .nav { display: none; } .nav.nav--mobile-open { display: flex; } .nav-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .nav-toggle { display: flex; } .footer-grid { grid-template-columns: minmax(0, 1fr); } .page-inner { padding-inline: 16px; } } @media (max-width: 640px) { .card-grid { grid-template-columns: minmax(0, 1fr); } .banner { flex-direction: column; align-items: flex-start; } .hero-title { font-size: 2.1rem; } } /* Scientific research section */ .research-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin-top: 2rem; } .research-card { background: rgba(8, 20, 40, 0.9); border-radius: 16px; padding: 1.75rem; border: 1px solid rgba(122, 199, 255, 0.25); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45); } .research-card h3 { margin-bottom: 0.75rem; font-size: 1.1rem; } .research-card p { margin-bottom: 0.75rem; } .research-meta { font-size: 0.85rem; opacity: 0.8; } .section-footnote { margin-top: 2.5rem; font-size: 0.9rem; opacity: 0.85; } /* Show nav links when mobile menu is open */ .nav--mobile-open .nav-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }