/* ===================================================== NeuroHome shared design system - NeuroSage brand match Palette + typography sourced from neurosolutionlc.com ===================================================== */ :root { /* Surfaces */ --bg: #FAFAFA; /* matches --light-grey */ --bg-warm: #F2F2F2; /* matches --grey */ --bg-card: #FFFFFF; --bg-dark: #0E0E0E; /* matches --black */ --bg-dark-card: #1A1A1A; --bg-dark-warm: #31312E; /* matches --dark-grey */ /* Borders + text */ --border: rgba(14,14,14,0.08); --border-hover: rgba(14,14,14,0.16); --text: #0E0E0E; --text-2: #31312E; --text-3: #6B6B68; --text-inv: #FAFAFA; /* Brand colors */ --brand: #00CEFD; /* blue - primary accent on neurosolutionlc */ --brand-light: #E6F8FE; --brand-glow: rgba(0,206,253,0.18); --brand-deep: #0099C2; --grad-cta: linear-gradient(135deg, var(--ink-navy) 0%, #0a0f1c 100%); --grad-cta-hover: linear-gradient(135deg, #1f3a63 0%, #0e1528 100%); --brand-text: #0A7A99; /* darker cyan for TEXT on light backgrounds - WCAG AA ~4.7:1 */ --ink-navy: #16294a; /* display numbers + CTA gradient light stop (single source) */ --accent-red: #F10433; /* red - used sparingly, secondary CTA highlight */ --accent-green: #0BDA51; /* green - success / positive indicator */ /* Aliases kept for backwards-compat so we don't have to refactor every selector */ --teal: var(--brand); --teal-light: var(--brand-light); --teal-glow: var(--brand-glow); --blue: var(--brand); --purple: #6B5BD2; --amber: #F5A623; /* Geometry */ --radius: 20px; --radius-sm: 12px; --radius-lg: 28px; --radius-pill: 100px; /* Vertical section rhythm - one scale, not four ad hoc clamps */ --section-y: clamp(72px, 9vw, 112px); --section-y-tight: clamp(40px, 4.5vw, 64px); /* Shadows */ --shadow-sm: 0 1px 3px rgba(14,14,14,0.04), 0 1px 2px rgba(14,14,14,0.02); --shadow-md: 0 6px 24px rgba(14,14,14,0.06), 0 2px 6px rgba(14,14,14,0.03); --shadow-lg: 0 16px 56px rgba(14,14,14,0.10), 0 4px 12px rgba(14,14,14,0.04); --shadow-brand: 0 8px 32px rgba(0,206,253,0.22); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-card); color: var(--text); overflow-x: hidden; line-height: 1.55; font-feature-settings: 'cv11', 'ss01', 'ss03'; } /* Reveal animations Progressive enhancement: content is visible by DEFAULT. The hidden/animated state applies only when JS is confirmed live (html.js, set synchronously in ). If JS is blocked, errors, or is slow to parse (common in in-app social browsers and with content blockers), all content still renders. The above-fold hero is never gated on the observer. */ .reveal { opacity: 1; transform: none; } .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); } .js .reveal.visible { opacity: 1; transform: translateY(0); } .js .hero .reveal { opacity: 1; transform: none; transition: none; } .reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.16s; } .reveal-d3 { transition-delay: 0.24s; } .reveal-d4 { transition-delay: 0.32s; } .reveal-d5 { transition-delay: 0.40s; } .reveal-d6 { transition-delay: 0.48s; } /* Nav */ /* Nav content is pinned to the viewport edges rather than being centred inside a 1120px column, so the brand sits top left and the links and CTA top right at any width. The previous formula left ~470px of dead space either side on a 1512px screen. */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 3vw, 44px); background: rgba(250,250,250,0.82); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); border-bottom: 1px solid var(--border); transition: all 0.35s ease; } .nav.scrolled { box-shadow: var(--shadow-sm); } .nav-brand { font-family: 'Outfit', sans-serif; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 12px; line-height: 1.1; } .nav-brand-mark { display: block; flex-shrink: 0; width: 44px; height: 44px; } .nav-brand-wordmark { display: flex; flex-direction: column; gap: 2px; } .nav-brand-name { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; } .nav-brand-name span { color: var(--teal); } .nav-brand-tag { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500; color: var(--text-3); letter-spacing: 0.4px; text-transform: uppercase; } .nav-links { display: flex; align-items: center; gap: 32px; } .nav-link { font-size: 14px; font-weight: 500; color: var(--text-3); text-decoration: none; cursor: pointer; transition: color 0.2s; position: relative; } .nav-link:hover { color: var(--text); } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(--text-3); border-radius: 1px; transform: scaleX(0); transition: transform 0.25s cubic-bezier(0.22,1,0.36,1); } .nav-link:hover::after { transform: scaleX(1); } .nav-cta { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #fff; background: var(--grad-cta); padding: 10px 24px; border-radius: var(--radius-pill); border: none; cursor: pointer; text-decoration: none; transition: all 0.25s; letter-spacing: -0.1px; box-shadow: 0 8px 26px rgba(12,18,38,0.28); } .nav-cta:hover { background: var(--grad-cta-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 34px rgba(12,18,38,0.36); } .nav-mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } .nav-mobile-toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; border-radius: 2px; transition: all 0.3s; } /* This panel is a child of .nav, and .nav's backdrop-filter makes it the containing block for fixed-position descendants. So bottom:0 resolved against the 72px bar instead of the viewport: available height was 72 - 72 - 0 = 0, and box-sizing: border-box floored the box at padding plus border (65px) while every link overflowed onto the page with no background behind it. Broken since the first commit. Viewport units ignore the containing block, so the height is stated outright rather than inferred from top/bottom. dvh comes second so it wins where supported and vh covers the rest. The 72px here tracks .nav's height above. */ .nav-links.mobile-open { display: flex; flex-direction: column; position: fixed; top: 72px; left: 0; right: 0; bottom: auto; height: calc(100vh - 72px); height: calc(100dvh - 72px); overflow-y: auto; background: var(--bg); padding: 32px 24px; gap: 24px; z-index: 999; border-top: 1px solid var(--border); } .nav-links.mobile-open .nav-link { font-size: 18px; } .nav-links.mobile-open .nav-cta { text-align: center; padding: 14px 28px; font-size: 16px; } /* No-JavaScript notice Only start.html renders this, inside