@import url('./tokens.css'); *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--ns-white); color: var(--ns-dark-purple); font-family: 'Clash Grotesk', 'Clash Fallback', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.005em; overflow-x: hidden; } img { max-width: 100%; display: block; } button { font-family: inherit; } /* ───────────────────────────────────────────── Buttons — squared, Clash Grotesk Medium ───────────────────────────────────────────── */ .ns-btn { font-family: 'Clash Grotesk', 'Clash Fallback', sans-serif; font-weight: 500; font-size: 15px; letter-spacing: -0.005em; padding: 16px 24px; border: 0; border-radius: 0; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; gap: 10px; transition: all 220ms cubic-bezier(0.2, 0.8, 0.2, 1); text-decoration: none; position: relative; overflow: hidden; } .ns-btn .arrow { display: inline-block; transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1); } .ns-btn:hover .arrow { transform: translateX(4px); } .ns-btn:active { transform: translateY(1px); } .ns-btn-primary { background: var(--ns-dark-purple); color: var(--ns-light-purple); } .ns-btn-primary:hover { background: #2B1D2B; } .ns-btn-inverse { background: var(--ns-light-purple); color: var(--ns-dark-purple); } .ns-btn-inverse:hover { background: #B1A3E3; } .ns-btn-outline-dp { background: transparent; color: var(--ns-dark-purple); box-shadow: inset 0 0 0 1.5px var(--ns-dark-purple); } .ns-btn-outline-dp:hover { background: var(--ns-dark-purple); color: var(--ns-light-purple); } .ns-btn-outline-lp { background: transparent; color: var(--ns-light-purple); box-shadow: inset 0 0 0 1.5px var(--ns-light-purple); } .ns-btn-outline-lp:hover { background: var(--ns-light-purple); color: var(--ns-dark-purple); } a { color: inherit; } /* ───────────────────────────────────────────── Eyebrow / meta label ───────────────────────────────────────────── */ .eyebrow { font-family: 'Clash Grotesk', 'Clash Fallback', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; position: relative; } .eyebrow::before { content: ""; width: 8px; height: 8px; background: currentColor; display: inline-block; flex-shrink: 0; transition: width 360ms cubic-bezier(0.16, 1, 0.3, 1); } .eyebrow::after { content: ""; position: absolute; left: 18px; right: 0; bottom: -6px; height: 1px; background: currentColor; opacity: 0; transform: scaleX(0); transform-origin: left center; transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease; pointer-events: none; } .eyebrow:hover::before { width: 24px; } .eyebrow:hover::after { opacity: 0.65; transform: scaleX(1); } /* ───────────────────────────────────────────── Reveal-on-scroll — fail-open. Content visible by default. JS adds .js-reveal-ready to , then .reveal elements start hidden and animate in when observer adds .in. ───────────────────────────────────────────── */ .js-reveal-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .js-reveal-ready .reveal.in { opacity: 1; transform: translateY(0); } .reveal-stagger > * { transition-delay: var(--d, 0ms); } @media (prefers-reduced-motion: reduce) { .js-reveal-ready .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ───────────────────────────────────────────── Marquee ───────────────────────────────────────────── */ @keyframes ns-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee { display: flex; width: max-content; animation: ns-marquee 38s linear infinite; } .marquee:hover { animation-play-state: paused; } /* ───────────────────────────────────────────── Sparkle pulse ───────────────────────────────────────────── */ @keyframes ns-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spin-slow { animation: ns-spin-slow 22s linear infinite; } /* ───────────────────────────────────────────── Layout helpers ───────────────────────────────────────────── */ /* Spacing scale — fluid, one system for every section and breakpoint. Gutter steps match the nav's own padding so left edges align everywhere. */ :root { --ns-gutter: 48px; --ns-sp-section: clamp(64px, 8vw, 120px); /* standard section top/bottom */ --ns-sp-section-lg: clamp(88px, 11vw, 160px); /* feature sections (Pathway, page heros) */ --ns-sp-head: clamp(36px, 5vw, 64px); /* section heading → content */ --ns-sp-block: clamp(24px, 3vw, 40px); /* inside a block */ --ns-sp-footer: clamp(56px, 7vw, 88px); } @media (max-width: 880px) { :root { --ns-gutter: 24px; } } @media (max-width: 540px) { :root { --ns-gutter: 24px; } } .container { max-width: 1440px; margin: 0 auto; padding: 0 var(--ns-gutter); } .section { padding: var(--ns-sp-section) 0; } .section-lg { padding: var(--ns-sp-section-lg) 0; } .section-head { margin-bottom: var(--ns-sp-head); } /* ───────────────────────────────────────────── Section heading rhythm ───────────────────────────────────────────── */ .h-display { font-family: 'Clash Grotesk', 'Clash Fallback', sans-serif; font-weight: 500; font-size: clamp(48px, 8vw, 120px); line-height: 0.96; letter-spacing: -0.025em; margin: 0; color: var(--ns-dark-purple); } .h1 { font-family: 'Clash Grotesk', 'Clash Fallback', sans-serif; font-weight: 500; font-size: clamp(40px, 5.5vw, 80px); line-height: 1.0; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } .h2 { font-family: 'Clash Grotesk', 'Clash Fallback', sans-serif; font-weight: 500; font-size: clamp(32px, 4.2vw, 64px); line-height: 1.05; letter-spacing: -0.018em; margin: 0; text-wrap: balance; } .h3 { font-family: 'Clash Grotesk', 'Clash Fallback', sans-serif; font-weight: 500; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.01em; margin: 0; } .lede { font-family: 'Clash Grotesk', 'Clash Fallback', sans-serif; font-weight: 400; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; letter-spacing: -0.005em; text-wrap: pretty; } /* Form fields */ .field-input { font-family: 'Clash Grotesk', 'Clash Fallback', sans-serif; font-size: 16px; font-weight: 400; letter-spacing: -0.005em; color: var(--ns-dark-purple); background: transparent; border: 0; border-bottom: 1px solid rgba(58,40,57,0.25); border-radius: 0; padding: 14px 0; width: 100%; outline: none; transition: border-color 220ms cubic-bezier(0.2, 0.8, 0.2, 1); } .field-input:focus { border-bottom-color: var(--ns-dark-purple); } .field-input::placeholder { color: rgba(58,40,57,0.42); } /* Contact form sits on dark purple, so it needs its own light placeholder. */ .cf-input::placeholder { color: rgba(197,184,255,0.38); } /* Chrome/Safari paint autofilled fields with an opaque pale-blue background that cannot be overridden by `background` — the only lever is an inset shadow large enough to cover the field, plus -webkit-text-fill-color for the text itself. The long transition delay defeats Chrome re-applying its colour on blur. */ .cf-input:-webkit-autofill, .cf-input:-webkit-autofill:hover, .cf-input:-webkit-autofill:focus, .cf-input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #C5B8FF inset !important; box-shadow: 0 0 0 1000px #C5B8FF inset !important; -webkit-text-fill-color: var(--ns-dark-purple) !important; caret-color: var(--ns-dark-purple); transition: background-color 6000000s, color 6000000s; } /* A field with content flips to a solid lilac fill with dark-purple text — light purple on light purple was barely legible. */ .cf-input:not(:placeholder-shown) { background: #C5B8FF !important; color: var(--ns-dark-purple) !important; -webkit-text-fill-color: var(--ns-dark-purple); caret-color: var(--ns-dark-purple); border-bottom-color: #C5B8FF !important; } /* Keep text on the form's flush-left edge: the wash is inset with a shadow rather than padding, so nothing shifts against the label above it. */ .cf-input { border-radius: 3px 3px 0 0 !important; } /* Focus must outrank the filled state above, which is !important. */ .cf-input:focus { background: rgba(197,184,255,0.1) !important; border-bottom-color: #C5B8FF !important; } .cf-input:focus:not(:placeholder-shown) { background: #C5B8FF !important; } /* ── Contact form confirmation ────────────────────────────────────────── The panel lifts in, the ring scales up, the tick draws itself, then the three text lines stagger. Total ~1s, all transform/opacity + stroke-dash, so nothing triggers layout. */ @keyframes cfDoneIn { from { opacity: 0; transform: translateY(14px) scale(0.985) } to { opacity: 1; transform: none } } @keyframes cfRingIn { from { opacity: 0; transform: scale(0.4) } to { opacity: 0.35; transform: none } } @keyframes cfTickDraw { from { stroke-dashoffset: 34 } to { stroke-dashoffset: 0 } } @keyframes cfLineIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } } .cf-done { animation: cfDoneIn 520ms cubic-bezier(0.2,0.8,0.2,1) both } .cf-done-mark { overflow: visible } .cf-done-ring { transform-origin: 22px 22px; animation: cfRingIn 460ms cubic-bezier(0.2,0.8,0.2,1) 180ms both } .cf-done-tick { stroke-dasharray: 34; animation: cfTickDraw 420ms cubic-bezier(0.65,0,0.35,1) 340ms both } .cf-done-line { animation: cfLineIn 460ms cubic-bezier(0.2,0.8,0.2,1) both } /* Explicit element selectors, not nth-of-type: the three lines are an h3, a p and a button, so each would separately count as its own "type 1". */ .cf-done h3.cf-done-line { animation-delay: 420ms } .cf-done p.cf-done-line { animation-delay: 500ms } .cf-done .ns-btn.cf-done-line { animation-delay: 600ms } @media (prefers-reduced-motion: reduce) { .cf-done, .cf-done-ring, .cf-done-tick, .cf-done-line { animation: none !important } .cf-done-ring { opacity: 0.35 } .cf-done-tick { stroke-dashoffset: 0 } } /* Selection */ ::selection { background: var(--ns-dark-purple); color: var(--ns-light-purple); } /* ───────────────────────────────────────────── Global mobile guards — keep buttons tappable, kill stray overflow ───────────────────────────────────────────── */ @media (max-width: 540px) { .ns-btn { padding: 14px 18px; font-size: 14px; } } /* Nothing may exceed the viewport, and long words break rather than push. */ html, body { max-width: 100%; overflow-x: clip; } img, video, svg, iframe, canvas { max-width: 100%; } h1, h2, h3, h4, .h-display, .h1, .h2, .h3 { overflow-wrap: break-word; } @media (max-width: 780px) { /* Tap targets: 44px minimum on every control. */ .ns-btn, .nav-link, a.ns-btn, button.ns-btn { min-height: 44px; display: inline-flex; align-items: center; } .nav-burger { min-width: 44px; min-height: 44px; justify-content: center; } input, textarea, select { font-size: 16px; } /* Any wide fixed-layout table scrolls inside its own frame, never the page. */ table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Static prerendered copy inside #root. Visible to crawlers and no-JS visitors; React replaces it on load. Styled so that first paint is on-brand, not raw. */ .js .ns-static, .js .ns-prerender{display:none} .ns-static{background:#3A2839;color:#C5B8FF;padding:150px 0 90px;min-height:100vh} .ns-static h1{font-family:'Clash Grotesk','Clash Fallback',sans-serif;font-weight:500;font-size:clamp(34px,5vw,64px);line-height:1.02;letter-spacing:-.025em;margin:0 0 28px;text-wrap:balance} .ns-static h2{font-family:'Clash Grotesk','Clash Fallback',sans-serif;font-weight:500;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.015em;margin:44px 0 12px} .ns-static h3{font-family:'Clash Grotesk','Clash Fallback',sans-serif;font-weight:500;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.01em;margin:26px 0 6px} .ns-static p{font-family:'Clash Grotesk','Clash Fallback',sans-serif;font-size:17px;line-height:1.55;color:rgba(197,184,255,.82);margin:0 0 12px;max-width:760px;text-wrap:pretty} .ns-static ul{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px} .ns-static a{color:#C5B8FF} .ns-static a:hover{color:#FFEDC5} .ns-static nav{margin-top:56px;padding:0;display:flex;flex-wrap:wrap;gap:10px;font-size:15px}