/* ============================================================================= oNeura Shared Design System Unified color palette, typography, nav, and component tokens. Usage: Pages import this FIRST, then layer page-specific overrides after. Dark pages: add class "dark-page" to or . ============================================================================= */ /* ---- Fonts ---- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Jacquard+24&display=swap'); /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ---- Themed scrollbars (blend into the dark page, no bright system bars) ---- NOTE: do NOT set the standard `scrollbar-color` globally. In WebKit (Safari / DuckDuckGo) specifying it SUPPRESSES ::-webkit-scrollbar and the browser falls back to the default bright system scrollbar. So WebKit/Chrome are styled via the ::-webkit-scrollbar pseudo-elements below, and the standard properties are scoped to engines that lack that pseudo (Firefox) via @supports. */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: #4a4236; /* warm brown, blends into #1b1712 / #232019 */ border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: #d5744f; } /* coral on hover */ ::-webkit-scrollbar-corner { background: transparent; } @supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: #4a4236 transparent; } } /* ============================================================================= TOKENS ============================================================================= */ :root { /* Fonts */ --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', 'Menlo', 'SF Mono', monospace; --font-jacquard:'Jacquard 24', 'Fraunces', Georgia, serif; /* Type Scale */ --text-xs: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem); --text-sm: clamp(0.88rem, 0.84rem + 0.2vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.15rem, 1.0rem + 0.6vw, 1.4rem); --text-xl: clamp(1.4rem, 1.1rem + 1vw, 2rem); --text-2xl: clamp(1.8rem, 1.1rem + 1.8vw, 2.8rem); --text-hero: clamp(2.8rem, 1rem + 5.5vw, 5.5rem); /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ── LIGHT THEME (default) — warm ivory / clay ── */ --bg: #faf8f3; --bg-alt: #f2ede3; --bg-dark: #1c1813; --bg-surface: #fffdf8; --border: rgba(28,24,19,0.10); --border-accent: rgba(194,96,63,0.26); --text-primary: #1c1813; --text-muted: #5f574a; --text-faint: #8a8174; --accent: #c2603f; --accent-dim: rgba(194,96,63,0.07); --accent-hover: #a64c2e; --green: #5f8a4f; --green-dim: rgba(95,138,79,0.08); --amber: #c2853f; --red: #c0492f; --purple: #8a6f4f; --teal: #4f8a7e; --teal-dim: rgba(79,138,126,0.1); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 100px; --transition: 160ms cubic-bezier(0.16, 1, 0.3, 1); --content-width: 1120px; --shadow-sm: 0 1px 3px rgba(50,50,93,0.06); --shadow-md: 0 4px 24px rgba(50,50,93,0.08); --shadow-lg: 0 8px 40px rgba(50,50,93,0.12); /* Nav height for page offset */ --nav-h: 56px; } /* ── DARK PAGE THEME — warm espresso / clay ── */ .dark-page { --bg: #1b1712; --bg-alt: #232019; --bg-dark: #14110c; --bg-surface: #29241d; --border: rgba(244,239,230,0.10); --border-accent: rgba(213,116,79,0.30); --text-primary: #f4efe6; --text-muted: #b0a698; --text-faint: #847b6d; --accent: #d5744f; --accent-dim: rgba(213,116,79,0.12); --accent-hover: #e69069; --green: #8fb079; --green-dim: rgba(143,176,121,0.12); --amber: #d9a85f; --red: #e0795f; --purple: #c2a07f; --teal: #6fbcab; --teal-dim: rgba(111,188,171,0.15); --shadow-sm: 0 1px 3px rgba(0,0,0,0.35); --shadow-md: 0 4px 24px rgba(0,0,0,0.45); --shadow-lg: 0 8px 40px rgba(0,0,0,0.55); } /* ============================================================================= BASE ============================================================================= */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); background-color: #14110c; } body { min-height: 100dvh; line-height: 1.7; font-family: var(--font-ui); font-size: var(--text-base); font-weight: 400; color: var(--text-muted); background-color: var(--bg); position: relative; } .dark-page, .dark-page body { background-color: var(--bg); } /* ============================================================================= SITE-WIDE ANIMATED AURORA BACKGROUND Two slowly drifting warm orbs anchored to the viewport, sitting behind every page so the dark theme is never flat. Subtle by design (low opacity) so content always reads clean on top. ============================================================================= */ body::before, body::after { content: ''; position: fixed; z-index: -1; pointer-events: none; filter: blur(100px); will-change: transform; } .dark-page body::before, body::before { width: 60vw; max-width: 800px; height: 60vw; max-height: 800px; left: -10vw; top: -8vw; background: radial-gradient(circle at center, rgba(213, 116, 79, 0.32), rgba(213, 116, 79, 0) 70%); animation: bgDriftA 28s ease-in-out infinite alternate; } .dark-page body::after, body::after { width: 55vw; max-width: 760px; height: 55vw; max-height: 760px; right: -12vw; bottom: -8vw; background: radial-gradient(circle at center, rgba(255, 140, 82, 0.26), rgba(255, 178, 122, 0) 70%); animation: bgDriftB 34s ease-in-out infinite alternate; } @keyframes bgDriftA { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6vw, 8vh, 0) scale(1.18); } 100% { transform: translate3d(-4vw, 4vh, 0) scale(0.95); } } @keyframes bgDriftB { 0% { transform: translate3d(0, 0, 0) scale(1.1); } 50% { transform: translate3d(-8vw, -6vh, 0) scale(0.92); } 100% { transform: translate3d(5vw, -2vh, 0) scale(1.2); } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } } @media (max-width: 720px) { body::before, body::after { filter: blur(70px); opacity: 0.85; } } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4 { text-wrap: balance; line-height: 1.12; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; color: var(--text-primary); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } p, li, figcaption { text-wrap: pretty; max-width: 72ch; } button { cursor: pointer; background: none; border: none; } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-hover); } code, .mono { font-family: var(--font-mono); font-size: 0.85em; background: var(--accent-dim); border: 1px solid var(--border-accent); padding: 0.1em 0.35em; border-radius: var(--radius-sm); color: var(--accent); } ::selection { background: rgba(213,116,79,0.22); color: var(--text-primary); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* ============================================================================= UNIFIED NAV ============================================================================= */ .oneura-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; padding: 0 var(--space-6); max-width: 100%; } /* Light-page nav */ .oneura-nav { background: rgba(250,248,243,0.82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--border); } /* Dark-page nav */ .dark-page .oneura-nav { background: rgba(23,19,15,0.82); border-bottom: 1px solid rgba(244,239,230,0.08); } .oneura-nav-inner { max-width: none; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: var(--space-6); } .oneura-nav-brand { font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; color: var(--text-primary); text-decoration: none; letter-spacing: -0.01em; flex-shrink: 0; } .dark-page .oneura-nav-brand { color: var(--text-primary); } .oneura-nav-brand span { font-style: italic; font-weight: 400; /* Flowing coral -> orange gradient with subtle glow */ background: linear-gradient( 100deg, #d5744f 0%, #ff8c52 25%, #ffb27a 50%, #ff8c52 75%, #d5744f 100% ); background-size: 220% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: brandFlow 6.5s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(213, 116, 79, 0.32)); } @keyframes brandFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (prefers-reduced-motion: reduce) { .oneura-nav-brand span { animation: none; } } /* "a BLACKWEB AI project" credit, left of the oNeura wordmark */ .oneura-brand-tag { /* First item in a full-width nav row, so it sits at the screen's left edge. */ display: inline-flex; align-items: baseline; gap: 0.35em; flex-shrink: 0; font-family: var(--font-ui); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); white-space: nowrap; text-decoration: none; line-height: 1; } .oneura-brand-tag b { font-family: var(--font-jacquard); font-weight: 400; font-size: 19px; text-transform: none; letter-spacing: 0.01em; /* Same flowing coral gradient + animation as the oNeura wordmark */ background: linear-gradient( 100deg, #d5744f 0%, #ff8c52 25%, #ffb27a 50%, #ff8c52 75%, #d5744f 100% ); background-size: 220% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: brandFlow 6.5s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(213, 116, 79, 0.32)); } @media (prefers-reduced-motion: reduce) { .oneura-brand-tag b { animation: none; } } /* Hidden only on small screens where the nav row gets crowded. */ @media (max-width: 720px) { .oneura-brand-tag { display: none; } } .oneura-nav-links { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; } /* Wordmark sits at the head of the centered link cluster, just left of "Home". */ .oneura-nav-links .oneura-nav-brand { margin-right: var(--space-5); } .oneura-nav-link { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--text-faint); padding: 6px 12px; border-radius: var(--radius-sm); transition: all var(--transition); white-space: nowrap; text-decoration: none; } .oneura-nav-link:hover { color: var(--text-primary); background: rgba(0,0,0,0.03); } .dark-page .oneura-nav-link:hover { background: rgba(255,255,255,0.06); } .oneura-nav-link.active { color: var(--accent); background: var(--accent-dim); } .oneura-nav-right { display: flex; gap: var(--space-3); flex-shrink: 0; margin-left: auto; align-items: center; } .oneura-nav-cta { font-family: var(--font-ui); font-size: 13px; font-weight: 500; padding: 8px 20px; background: var(--accent); color: #fff; border-radius: var(--radius-pill); transition: all var(--transition); text-decoration: none; white-space: nowrap; border: none; } .oneura-nav-cta:hover { background: var(--accent-hover); color: #fff; box-shadow: 0 4px 16px rgba(194,96,63,0.28); } /* ============================================================================= GLOSSARY TOOLTIP — little (i) that explains pharma/science jargon in plain English. Works on hover, keyboard focus, and tap (it's a real