/* ============================================================ Nimbly AI — /nimbly-ai landing page Vanilla rebuild of the Lovable mockup (React → static Hugo). Design tokens & component styles ported from src/index.css. ============================================================ */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; border: 0 solid hsl(var(--border)); } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } img, svg, video { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; cursor: pointer; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ============================================================ Design tokens ============================================================ */ :root { /* ---- LIGHT MODE ---- */ --background: 0 0% 100%; --foreground: 220 15% 12%; --card: 0 0% 100%; --card-foreground: 220 15% 12%; --primary: 146 100% 34%; /* green #00ab4e */ --primary-foreground: 0 0% 100%; --secondary: 244 58% 56%; /* purple #574fcf */ --secondary-foreground: 0 0% 100%; --accent: 47 100% 50%; /* yellow #ffc800 */ --accent-foreground: 220 15% 12%; --muted: 220 14% 96%; --muted-foreground: 220 10% 38%; --border: 220 13% 88%; --ring: 146 100% 34%; --radius: 1.25rem; --aurora-1: 146 100% 34%; --aurora-2: 244 58% 56%; --aurora-3: 47 100% 50%; --aurora-4: 146 80% 45%; --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ---- Type scale — one shared hierarchy, reused by every section instead of each one picking its own clamp(). Sizing only; color/weight stay local. ---- */ --fs-display: clamp(2.25rem, 6vw, 4.5rem); /* page-level hero H1 (hero, sub-hero) */ --fs-h2: clamp(2.25rem, 5vw, 4rem); /* section headline (H2) */ --fs-h3: clamp(1.5rem, 2.5vw, 2.25rem); /* card/detail sub-heading (H3) */ --fs-card-title: 1.25rem; /* fixed-size title inside a dense card/tile */ --fs-lead: clamp(1.125rem, 2vw, 1.25rem); /* subheadline / lead paragraph under a headline */ --fs-body: 1.05rem; /* standard paragraph */ --fs-body-sm: .875rem; /* secondary/detail paragraph, captions */ --fs-label: .875rem; /* uppercase eyebrow label */ /* Shared vertical rhythm — every full section uses the same top/bottom breathing room so the page reads as one consistent system. */ --section-py: 6rem; } html.dark { /* ---- DARK MODE ---- */ --background: 0 0% 0%; --foreground: 210 20% 96%; --card: 220 18% 10%; --card-foreground: 210 20% 96%; --primary: 146 85% 45%; --primary-foreground: 220 20% 7%; --secondary: 244 70% 68%; --secondary-foreground: 220 20% 7%; --accent: 47 100% 55%; --accent-foreground: 220 20% 7%; --muted: 220 15% 15%; --muted-foreground: 220 10% 68%; --border: 220 15% 20%; --ring: 146 85% 45%; --aurora-1: 146 85% 45%; --aurora-2: 244 70% 68%; --aurora-3: 47 100% 55%; --aurora-4: 146 70% 55%; } /* ============================================================ Base ============================================================ */ html, body { font-family: var(--font-sans); color: hsl(var(--foreground)); } /* Page background lives on only: an opaque body background would paint OVER the fixed z-index:-1 particle field (negative layers render before in-flow backgrounds), hiding it everywhere. */ html { background: hsl(var(--background)); } body { font-weight: 400; font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; transition: background-color .4s ease, color .4s ease; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); letter-spacing: -0.03em; color: hsl(var(--foreground)); line-height: 1.05; } h1 { font-weight: 900; font-size: var(--fs-display); } h2 { font-weight: 800; font-size: var(--fs-h2); } h3 { font-weight: 800; font-size: var(--fs-h3); } h4 { font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.75rem); } h5 { font-weight: 700; } h6 { font-weight: 600; } p, li { font-weight: 400; } /* ---------- Layout ---------- */ .na-container { width: 100%; margin-inline: auto; padding-inline: 1.5rem; } .na-max-6xl { max-width: 72rem; } .na-text-center { text-align: center; } .na-relative { position: relative; } .na-z10 { z-index: 10; } /* ---------- Utilities ---------- */ .na-eyebrow { display: block; color: hsl(var(--primary)); font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; } .text-gradient { background-clip: text; -webkit-background-clip: text; color: transparent; background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)) 60%, hsl(var(--accent))); } .na-lead { font-size: var(--fs-lead); color: hsl(var(--muted-foreground)); max-width: 42rem; margin-inline: auto; } /* ---------- Reveal-on-scroll ---------- */ .na-reveal { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; } .na-reveal.is-visible { opacity: 1; transform: none; } /* ============================================================ Buttons ============================================================ */ .btn-glow { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 2rem; border-radius: 9999px; font-weight: 600; transition: all .3s ease; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)), hsl(var(--accent))); color: hsl(var(--primary-foreground)); box-shadow: 0 0 30px hsl(var(--primary) / 0.35); isolation: isolate; } .btn-glow:hover { box-shadow: 0 0 50px hsl(var(--primary) / 0.55), 0 0 80px hsl(var(--secondary) / 0.3); transform: translateY(-2px); } .btn-glow::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--btn-angle, 0deg), transparent 0%, hsl(var(--accent)) 8%, hsl(0 0% 100% / 0.9) 15%, hsl(var(--primary)) 24%, transparent 40%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 1; } .btn-glow:hover::before { opacity: 1; animation: btnStrokeRotate 1.8s linear infinite; } .btn-glow::after { content: ""; position: absolute; inset: -40%; border-radius: 50%; opacity: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle, hsl(var(--primary) / 0.55) 0%, hsl(var(--accent) / 0.35) 35%, hsl(var(--primary) / 0.15) 60%, transparent 75%); } .btn-glow.is-pulsing::after { animation: btnClickPulse .2s ease-out; } .btn-glow > * { position: relative; z-index: 2; } .btn-outline-glow { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 2rem; border-radius: 9999px; font-weight: 600; transition: all .3s ease; border: 2px solid hsl(var(--primary) / 0.5); color: hsl(var(--primary)); } .btn-outline-glow:hover { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.08); box-shadow: 0 0 30px hsl(var(--primary) / 0.25); } .na-icon { width: 1.25rem; height: 1.25rem; flex: none; } .na-icon-sm { width: 1rem; height: 1rem; flex: none; } /* ============================================================ Navbar ============================================================ */ .na-nav { position: fixed; inset: 0 0 auto 0; z-index: 100; } .na-nav-pad { transition: padding .35s cubic-bezier(.2,.8,.2,1); padding: 0; } .na-nav.is-floating .na-nav-pad { padding: 20px; } .na-nav.is-open .na-nav-pad { padding: 20px; } .na-nav-card { position: relative; overflow: hidden; max-width: 4000px; margin-inline: auto; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid hsl(var(--border) / 0); background: hsl(var(--card) / 0); border-radius: 0; transition: background-color .35s ease, border-color .35s ease, border-radius .35s ease; } .na-nav.is-floating .na-nav-card, .na-nav.is-open .na-nav-card { background: hsl(var(--card) / 0.55); border-color: hsl(var(--border) / 0.5); border-radius: 16px; } /* Open state: stretch the card to fill the viewport (minus the 20px inset on every side from .na-nav-pad) instead of sizing to content — otherwise a short menu leaves a gap between the card's bottom edge and the viewport edge while top/left/right stay flush. */ .na-nav.is-open .na-nav-card { display: flex; flex-direction: column; height: calc(100vh - 40px); } .na-nav-bar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.5rem; } .na-logo { display: flex; align-items: center; gap: .55rem; } .na-logo img { height: 38.4px; width: auto; } /* Animated wordmark: fixed box sized to the source animation's 1348:400 aspect ratio at the same 38.4px height the static logo used. */ .na-logo-anim { display: inline-block; height: 38.4px; width: 129.6px; } .na-logo-anim svg { display: block; } .na-logo-fallback { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em; } .na-logo-badge { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; color: hsl(var(--primary-foreground)); background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))); box-shadow: 0 6px 20px -6px hsl(var(--primary) / .6); } /* Hamburger */ .na-burger { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; } .na-burger span { position: absolute; left: 13px; width: 18px; height: 2px; border-radius: 2px; background: hsl(var(--primary)); transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s ease; } .na-burger span:nth-child(1) { transform: translateY(-6px); } .na-burger span:nth-child(2) { transform: none; } .na-burger span:nth-child(3) { transform: translateY(6px); } .na-nav.is-open .na-burger span:nth-child(1) { transform: rotate(45deg); } .na-nav.is-open .na-burger span:nth-child(2) { transform: scaleX(0); opacity: 0; } .na-nav.is-open .na-burger span:nth-child(3) { transform: rotate(-45deg); } /* Menu panel */ .na-menu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease; opacity: 0; } .na-nav.is-open .na-menu { grid-template-rows: 1fr; opacity: 1; flex: 1; min-height: 0; } .na-menu-inner { overflow: hidden; } .na-menu-scroll { overflow-y: auto; max-height: calc(100vh - 124px); } .na-nav.is-open .na-menu-scroll { height: 100%; max-height: none; } .na-menu-grid { display: grid; grid-template-columns: 1fr; min-height: 100%; } .na-menu-col { padding: 2.5rem 2rem; display: flex; flex-direction: column; } /* Nav-links column sits above a divider on mobile (stacked), and gets a left divider instead once the two columns sit side by side (below). */ .na-menu-col-links { border-bottom: 1px solid hsl(var(--border) / .5); } .na-menu-links { display: flex; flex-direction: column; gap: 1rem; margin-top: .5rem; } .na-menu-links a { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1.1; color: hsl(var(--foreground) / .8); transition: color .25s ease; } .na-menu-links a:hover { color: hsl(var(--primary)); } .na-menu-cta { margin-top: 2.5rem; display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; height: 40px; padding: 0 1.25rem; border-radius: 9999px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: .875rem; font-weight: 500; align-self: flex-start; min-width: 220px; transition: background-color .25s ease; } .na-menu-cta:hover { background: hsl(var(--primary) / .9); } .na-expertise { display: grid; grid-template-columns: 1fr; gap: 1.5rem; flex: 1; } .na-exp-card { display: flex; flex-direction: column; height: 100%; } .na-exp-thumb { position: relative; aspect-ratio: 4/3; width: 100%; border-radius: 1rem; overflow: hidden; margin-bottom: 1.25rem; border: 1px solid hsl(var(--border) / .5); } .na-exp-thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, hsl(var(--background) / .25), transparent 60%); } .na-exp-arrow { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border-radius: 9999px; background: hsl(var(--background) / .8); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s ease; z-index: 2; } .na-exp-card:hover .na-exp-arrow { opacity: 1; } .na-exp-head { margin-bottom: .75rem; } .na-exp-name { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 700; transition: color .25s ease; } .na-exp-card:hover .na-exp-name { color: hsl(var(--primary)); } .na-exp-tag { font-size: var(--fs-body-sm); color: hsl(var(--muted-foreground)); line-height: 1.6; } .na-menu-tools { margin-top: auto; padding-top: 2.5rem; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; } .na-pill { display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 1.25rem; border-radius: 9999px; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--background) / .6); font-size: .875rem; font-weight: 500; color: hsl(var(--foreground)); transition: color .25s ease, border-color .25s ease; } .na-pill:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); } /* Theme toggle icon/label swap — shown pair depends on active theme. .na-th-dark → visible in DARK mode (Sun icon + "Light") .na-th-light → visible in LIGHT mode (Moon icon + "Dark") */ .na-th-dark, .na-th-light { display: inline-flex; align-items: center; gap: .5rem; } .na-th-light { display: none; } html:not(.dark) .na-th-dark { display: none; } html:not(.dark) .na-th-light { display: inline-flex; } @media (min-width: 768px) { .na-menu-grid { grid-template-columns: 1fr 2fr; } .na-menu-col { padding: 3.5rem 3rem; } /* Side by side now — divider moves from under the links to between the two columns. */ .na-menu-col-links { border-bottom: none; border-right: 1px solid hsl(var(--border) / .5); } /* Exactly 2 expertise cards — 2 even columns instead of 3 with a gap. */ .na-expertise { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ Hero ============================================================ */ .na-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 5rem 1.5rem 0; overflow: hidden; } /* Dot-particle field — fixed to the viewport so the scroll exit plays out across the whole page instead of being clipped at the hero boundary. z-index -1 keeps it above the html background paint but below content. */ .na-particle-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; } .na-particle-bg canvas { width: 100%; height: 100%; display: block; } .na-hero-inner { position: relative; z-index: 10; max-width: 72rem; margin-inline: auto; text-align: center; } .na-hero h1 { /* Ceiling matches --fs-display (same hero tier as .na-sub-hero h1); the lower floor here is intentional — it's what keeps the two-line layout from wrapping to three lines on narrower screens. */ font-size: clamp(1.75rem, 6vw, 4.5rem); font-weight: 700; margin-bottom: 1.5rem; line-height: 1.05; letter-spacing: -.02em; max-width: 56rem; margin-inline: auto; } .na-hero h1 .na-hero-line { display: block; white-space: nowrap; } @media (max-width: 480px) { .na-hero h1 { font-size: clamp(1.35rem, 7.2vw, 4.5rem); } } .na-hero-sub { font-size: var(--fs-lead); color: hsl(var(--muted-foreground)); margin-inline: auto; margin-bottom: 2.5rem; } @media (min-width: 768px) { .na-hero-sub { white-space: nowrap; } } .na-hero-anim { opacity: 0; transform: translateY(30px); animation: heroRise .8s ease forwards; } .na-hero-anim.d1 { animation-delay: .1s; } .na-hero-anim.d2 { animation-delay: .2s; } .na-hero-anim.d3 { animation-delay: .3s; } .na-hero-num { position: relative; display: inline-block; background-size: 200% 200%; transition: filter .3s ease; cursor: default; } .na-hero-num:hover { background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)), hsl(var(--accent))); -webkit-background-clip: text; background-clip: text; color: transparent; background-position: 100% 100%; } .na-hero-num::after { content: ""; position: absolute; inset: -.35em -.2em; z-index: -1; border-radius: .5em; opacity: 0; background: radial-gradient(circle, hsl(var(--primary) / 0.5) 0%, hsl(var(--secondary) / 0.4) 40%, hsl(var(--accent) / 0.35) 70%, transparent 85%); filter: blur(18px); transition: opacity .3s ease; pointer-events: none; } .na-hero-num:hover { background-position: 100% 100%; } .na-hero-num:hover::after { opacity: 1; animation: heroNumPulse 1.4s ease-in-out infinite; } @keyframes heroNumPulse { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } } @keyframes heroRise { to { opacity: 1; transform: none; } } /* ============================================================ Walk Your Store — scroll-scrubbed wireframe walkthrough ============================================================ */ .na-walk { position: relative; padding: var(--section-py) 0; } .na-walk-intro { max-width: 56rem; margin-inline: auto; padding: 0 1.5rem 3rem; text-align: center; } .na-walk-intro h2 { font-size: var(--fs-h2); font-weight: 700; margin-bottom: 1.5rem; line-height: 1.08; letter-spacing: -.02em; } .walk-pin { position: relative; } .walk-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; } .walk-stage { position: relative; width: 100%; height: 100vh; overflow: hidden; background: hsl(var(--background)); } /* Video/image simulation stack — one layer per beat. All layers occupy the same box; only the active one is visible. Switched instantly (no crossfade) so there is never a moment where two partially-transparent layers overlap and dim the frame. */ .walk-media { position: absolute; inset: 0; } .walk-media-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; } .walk-media-layer.is-active { opacity: 1; } /* Source clips are white line-art on black — inverted in light mode so the simulation reads as dark ink on a light ground instead of a jarring black rectangle sitting inside an otherwise white page. */ html:not(.dark) .walk-media-layer { filter: invert(1) hue-rotate(180deg); } /* Station info: Problem → Product (solution) hugs the right edge; Telemetry mirrors it on the left. Splitting the two keeps the simulation between them clear instead of boxed in by one tall card column. Same glass-card language as the rest of the site (1rem radius, card/.75 + blur, tinted borders). */ .walk-cards, .walk-telemetry-host { position: absolute; top: 50%; transform: translateY(-50%); width: min(19rem, 42vw); display: grid; } .walk-cards { right: 1.5rem; } .walk-telemetry-host { left: 1.5rem; } .walk-card-pair { grid-area: 1 / 1; display: flex; flex-direction: column; gap: .75rem; opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; } .walk-card-pair.is-active { opacity: 1; transform: none; } .walk-card { border-radius: 1rem; padding: 1rem 1.25rem; backdrop-filter: blur(20px); background: hsl(var(--card) / .75); border: 1px solid transparent; } .walk-card p { color: hsl(var(--foreground)); font-size: var(--fs-body-sm); line-height: 1.6; margin: 0; font-family: var(--font-sans); } .walk-card-label { display: flex; align-items: center; gap: .4rem; font-family: var(--font-sans); font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem; } .walk-card-label::before { content: ""; width: .4rem; height: .4rem; border-radius: 9999px; background: currentColor; } .walk-card-problem { border-color: hsl(var(--secondary) / .4); } .walk-card-problem .walk-card-label { color: hsl(var(--secondary)); } .walk-card-solution { border-color: hsl(var(--primary) / .4); box-shadow: 0 0 40px -10px hsl(var(--primary) / .5); } .walk-card-solution .walk-card-label { color: hsl(var(--primary)); } /* Telemetry item overlaps the same grid cell as its siblings and crossfades the same way as .walk-card-pair. */ .walk-card-telemetry { grid-area: 1 / 1; border-color: hsl(var(--accent) / .35); padding-block: .75rem; opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; } .walk-card-telemetry.is-active { opacity: 1; transform: none; } .walk-card-telemetry .walk-card-label { color: hsl(var(--accent)); margin-bottom: .35rem; } .walk-telemetry-val { color: hsl(var(--accent)); font-size: .7rem; font-weight: 600; letter-spacing: .02em; } /* Step label + progress + dots, consolidated bottom-center so the stage stays unobstructed everywhere else. */ .walk-bottom-bar { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .75rem; pointer-events: none; } .walk-rail { display: flex; align-items: center; gap: .65rem; background: hsl(var(--card) / .55); backdrop-filter: blur(10px); padding: .4rem .9rem; border-radius: 9999px; border: 1px solid hsl(var(--border) / .5); text-transform: uppercase; font-size: .65rem; font-weight: 600; white-space: nowrap; } .walk-rail-step { color: hsl(var(--primary)); } .walk-rail-dot { color: hsl(var(--muted-foreground)); } .walk-rail-title { color: hsl(var(--secondary)); } .walk-progress { width: 18rem; max-width: 80vw; height: 3px; background: hsl(var(--border) / .5); border-radius: 9999px; overflow: hidden; } .walk-progress-fill { height: 100%; width: 0%; background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary)), hsl(var(--accent))); } .walk-dots { display: flex; align-items: center; gap: .6rem; } .walk-dot { width: 10px; height: 10px; border-radius: 50%; padding: 0; background: hsl(var(--card)); border: 2px solid hsl(var(--border)); pointer-events: auto; cursor: pointer; transition: transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease; } .walk-dot:hover { transform: scale(1.25); border-color: hsl(var(--primary)); } .walk-dot.is-active { background: hsl(var(--primary)); border-color: hsl(var(--primary)); box-shadow: 0 0 12px hsl(var(--primary) / .8); transform: scale(1.15); } .walk-scanline { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .2; background-image: repeating-linear-gradient(0deg, hsl(var(--foreground) / .06) 0 1px, transparent 1px 3px); } @media (max-width: 640px) { .walk-telemetry-host { display: none; } /* keep the mobile view short — telemetry is a desktop garnish */ /* Cards move to a full-width strip above the bottom bar instead of pinning to the right edge — at this width there isn't room for a side column without covering the scene. */ .walk-cards { top: auto; right: .75rem; left: .75rem; bottom: 5.5rem; transform: none; width: auto; } .walk-bottom-bar { bottom: .75rem; } } /* ============================================================ Roles & Impact — team tabs on top, before/after side rail, photo board ============================================================ */ .na-roles { position: relative; padding: var(--section-py) 1.5rem; } .na-roles-head { max-width: 72rem; margin-inline: auto; padding: 0 1.5rem; text-align: center; margin-bottom: 3rem; } .na-roles-head h2 { font-size: var(--fs-h2); font-weight: 700; margin-bottom: 1.5rem; } .na-roles-board { display: flex; flex-direction: column; border-radius: 1.5rem; overflow: hidden; border: 1px solid hsl(var(--border) / .6); box-shadow: 0 30px 80px -30px hsl(var(--primary) / .35); } /* Team tabs — standalone pill nav that sits above the board (not attached to it), rounded to match the board's own curve family. */ .na-roles-tabs { display: flex; flex-wrap: nowrap; justify-content: center; gap: .5rem; padding: .6rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: hsl(var(--card) / .6); backdrop-filter: blur(20px); border: 1px solid hsl(var(--border) / .5); border-radius: 9999px; width: fit-content; max-width: 100%; margin: 0 auto 1.25rem; } .na-roles-tabs::-webkit-scrollbar { display: none; } .na-roles-tabs button { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .375rem; padding: .5rem 1rem; border-radius: 9999px; white-space: nowrap; font-size: .8125rem; font-weight: 500; color: hsl(var(--muted-foreground)); transition: all .2s ease; } .na-roles-tabs button svg { width: .95rem; height: .95rem; } .na-roles-tabs button:hover { color: hsl(var(--foreground)); } .na-roles-tabs button.is-active { color: #fff; background: #00ab4e; box-shadow: 0 4px 12px hsl(0 0% 0% / .15); } /* Body: before/after accordion rail + photo stage */ .na-roles-body { display: grid; grid-template-columns: 280px 1fr; min-height: 420px; } /* Before/After accordion rail — each item is a trigger button + a collapsible detail panel; flex-grow on the active item makes it fill the remaining height automatically, no explicit height math needed. */ .na-roles-side { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem; background: hsl(var(--card) / .6); backdrop-filter: blur(20px); border-right: 1px solid hsl(var(--border) / .5); } .na-roles-acc { display: flex; flex-direction: column; border-radius: 1.5rem; overflow: visible; flex: 0 0 auto; transition: flex-grow .35s ease, background-color .3s ease, box-shadow .3s ease; position: relative; isolation: isolate; } .na-roles-acc.is-active { flex: 1 1 auto; } /* Promote the hovered item above its sibling so a glow that spills past its own box isn't painted over by the next accordion item in DOM order. */ .na-roles-acc:hover { z-index: 2; } .na-roles-acc-btn { display: flex; flex-direction: column; gap: .15rem; text-align: left; padding: 1rem 1.1rem; font-weight: 700; border-radius: 1.5rem; border: 1px solid hsl(var(--border) / .5); background: hsl(var(--muted) / .35); color: hsl(var(--muted-foreground)); transition: all .25s ease; position: relative; } .na-roles-acc-btn:hover { border-color: hsl(var(--primary) / .5); box-shadow: 0 0 24px hsl(var(--primary) / .35); } /* When the item is active, the whole accordion (not the inner button) owns the hover glow — suppress the button's own so only one ring ever shows. */ .na-roles-acc.is-active .na-roles-acc-btn:hover { border-color: transparent; box-shadow: none; } /* Before, active: dark-grey surface. No glow at rest — the green ring only appears while hovering, and turns off the moment the pointer leaves. */ .na-roles-acc[data-acc="before"].is-active { background: hsl(220 8% 22%); box-shadow: 0 12px 30px -12px hsl(0 0% 0% / .55); } .na-roles-acc[data-acc="before"].is-active:hover { box-shadow: 0 12px 30px -12px hsl(0 0% 0% / .55), 0 0 36px hsl(var(--primary) / .5); } .na-roles-acc[data-acc="before"].is-active .na-roles-acc-btn, .na-roles-acc[data-acc="before"].is-active .na-roles-acc-detail-inner { background: transparent; border-color: transparent; color: #fff; } .na-roles-acc[data-acc="before"].is-active .na-roles-value { color: #fff; } .na-roles-acc[data-acc="before"].is-active .na-roles-unit, .na-roles-acc[data-acc="before"].is-active .na-roles-metric { color: hsl(0 0% 100% / .7); } /* Click-pulse: a green ring that expands outward from the button the moment it's clicked, matching the hero .btn-glow's click feedback. */ .na-roles-acc[data-acc="before"]::after { content: ""; position: absolute; inset: -40%; z-index: -1; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(circle, hsl(var(--primary) / .55) 0%, transparent 70%); } .na-roles-acc[data-acc="before"].is-pulsing::after { animation: btnClickPulse .5s ease-out; } /* After, active: the trigger and its expanded detail share the same glow effect as the hero's .btn-glow */ .na-roles-acc[data-acc="after"].is-active { background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)), hsl(var(--accent))); box-shadow: 0 0 30px hsl(var(--primary) / .35); } .na-roles-acc[data-acc="after"].is-active:hover { box-shadow: 0 0 45px hsl(var(--primary) / .5), 0 0 70px hsl(var(--secondary) / .3); } .na-roles-acc[data-acc="after"].is-active .na-roles-acc-btn, .na-roles-acc[data-acc="after"].is-active .na-roles-acc-detail-inner { background: transparent; border-color: transparent; color: hsl(var(--primary-foreground)); } .na-roles-acc[data-acc="after"].is-active .na-roles-value { color: hsl(var(--primary-foreground)); } .na-roles-acc[data-acc="after"].is-active .na-roles-unit, .na-roles-acc[data-acc="after"].is-active .na-roles-metric { color: hsl(var(--primary-foreground) / .75); } .na-roles-acc[data-acc="after"].is-active::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--btn-angle, 0deg), transparent 0%, hsl(var(--accent)) 8%, hsl(0 0% 100% / .9) 15%, hsl(var(--primary)) 24%, transparent 40%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: btnStrokeRotate 1.8s linear infinite; } .na-roles-side-tag { display: flex; flex-direction: column; } .na-roles-side-line { font-size: 1.05rem; font-weight: 700; line-height: 1.25; } /* Collapsible detail beneath each accordion trigger */ .na-roles-acc-detail { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease; } .na-roles-acc.is-active .na-roles-acc-detail { grid-template-rows: 1fr; opacity: 1; flex: 1 1 auto; min-height: 0; } .na-roles-acc-detail-inner { overflow: hidden; } .na-roles-acc.is-active .na-roles-acc-detail-inner { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: .75rem 1.1rem 1.25rem; } .na-roles-value { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; font-size: clamp(1.75rem, 3.2vw, 2.35rem); font-weight: 800; letter-spacing: -.02em; color: hsl(var(--foreground)); margin-bottom: .35rem; transition: opacity .2s ease, transform .2s ease; } .na-roles-value.is-swapping { opacity: 0; transform: translateY(6px); } .na-roles-unit { font-size: .85rem; font-weight: 500; color: hsl(var(--muted-foreground)); } .na-roles-metric { color: hsl(var(--muted-foreground)); font-size: var(--fs-body-sm); } /* Stage with placement photo (text now lives in the sidebar accordion) */ .na-roles-stage { position: relative; overflow: hidden; min-height: 420px; } .na-roles-stage-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; /* "Before" photos read as a dull grayscale record shot; "after" photos get their full color back — each layer tracks whichever state's photo it currently holds, so a wipe transition crossfades tone along with the image itself. */ filter: grayscale(1); transition: opacity .4s ease, filter .5s ease; } /* Disables the filter transition for one instant handoff — see setBg() in script.js — so the base layer's tone snaps rather than animating from its previous (wrong) state when it takes over from the wipe layer. */ .na-roles-stage-bg.is-snapping { transition: none; } .na-roles-stage-bg.is-color { filter: grayscale(0); } .na-roles-stage-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, hsl(var(--background) / .25), hsl(var(--background) / .05)); } /* Before/After swap: the incoming photo sits on a second layer clipped to zero width, then wipes open left-to-right; a glowing gradient line (same family as .btn-glow / the walk progress rail) rides the wipe edge. */ .na-roles-stage-next { z-index: 1; clip-path: inset(0 100% 0 0); } .na-roles-stage-next.is-wiping { clip-path: inset(0 0 0 0); transition: clip-path .6s cubic-bezier(.4, 0, .2, 1); } .na-roles-wipe { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(to bottom, hsl(var(--primary)), hsl(var(--secondary)), hsl(var(--accent))); box-shadow: 0 0 18px hsl(var(--primary) / .9), 0 0 44px hsl(var(--primary) / .45); } .na-roles-wipe.is-wiping { animation: rolesWipeLine .6s cubic-bezier(.4, 0, .2, 1) forwards; } @keyframes rolesWipeLine { 0% { left: 0; opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 3px); opacity: 0; } } @media (max-width: 767px) { .na-roles-tabs { justify-content: flex-start; } /* left-align so the first pill isn't clipped when the row scrolls */ .na-roles-body { grid-template-columns: 1fr; min-height: 0; } .na-roles-side { border-right: none; border-bottom: 1px solid hsl(var(--border) / .5); } .na-roles-stage { min-height: 220px; } } /* ============================================================ Industries ============================================================ */ .na-industries { position: relative; padding: var(--section-py) 0; overflow: hidden; } .na-industries-head { max-width: 72rem; margin-inline: auto; padding: 0 1.5rem; text-align: center; margin-bottom: 3rem; } .na-industries-head h2 { font-size: var(--fs-h2); font-weight: 700; margin-bottom: 1.5rem; } .na-scene { /* Taller than before purely to give the docked detail panel its own room at the bottom — the 3D canvas itself still just fills this box, so nothing about the camera/scene changes, it simply gets more headroom. */ position: relative; width: 100%; height: clamp(760px, 108vh, 1180px); border-bottom: 1px solid hsl(var(--border) / .6); box-shadow: 0 30px 80px -30px hsl(var(--primary) / 0.35); overflow: hidden; } .na-scene canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; } .na-scene-fallback { background: radial-gradient(circle at 50% 35%, hsl(var(--primary) / .18), transparent 55%), radial-gradient(circle at 20% 80%, hsl(var(--secondary) / .12), transparent 50%), radial-gradient(circle at 80% 75%, hsl(var(--accent) / .1), transparent 50%), hsl(var(--card)); } .na-scene-fallback .na-scene-hint { display: none; } .na-scene-label { position: absolute; top: 0; left: 0; z-index: 15; pointer-events: none; padding: .25rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; white-space: nowrap; background: hsl(var(--card) / .75); backdrop-filter: blur(12px); color: hsl(var(--muted-foreground)); border: 1px solid #00ab4e66; box-shadow: inset 2px 2px 4px hsl(0 0% 0% / .2); transition: background-color .2s ease, color .2s ease; } /* Active label matches the hero's .btn-glow treatment: same gradient + glow */ .na-scene-label.is-active { background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)), hsl(var(--accent))); color: hsl(var(--primary-foreground)); border-color: transparent; box-shadow: 0 0 20px hsl(var(--primary) / .45); } .na-scene-hint { pointer-events: none; position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: .5rem; padding: .375rem .75rem; border-radius: 9999px; background: hsl(var(--background) / .8); backdrop-filter: blur(20px); border: 1px solid hsl(var(--border) / .6); font-size: .75rem; color: hsl(var(--muted-foreground)); transition: opacity .3s ease; } .na-scene-hint.is-hidden { opacity: 0; } .na-scene-hint .dot { width: .5rem; height: .5rem; border-radius: 9999px; background: hsl(var(--primary)); animation: pulseGlow 2s ease-in-out infinite; } /* Floating glass card docked low in the scene — same container width (72rem), radius, border, and primary-glow shadow as the other boards so it reads as part of the same design system. */ .na-detail { position: absolute; left: 50%; bottom: 1.25rem; z-index: 20; width: min(72rem, calc(100% - 2rem)); height: 400px; display: flex; align-items: center; border-radius: 1.5rem; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .7); backdrop-filter: blur(24px) saturate(2); padding: 1.5rem clamp(1.5rem, 3vw, 2.5rem); box-shadow: 0 30px 80px -30px hsl(var(--primary) / .35); opacity: 0; pointer-events: none; transform: translate(-50%, 30px); transition: opacity .35s ease, transform .35s ease; } .na-detail.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } .na-detail-close { position: absolute; top: .75rem; right: .75rem; width: 32px; height: 32px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: hsl(var(--muted-foreground)); transition: all .2s ease; } .na-detail-close:hover { color: hsl(var(--foreground)); background: hsl(var(--muted)); } .na-detail-body { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; height: 100%; justify-content: center; } /* Icon on top, title below, centered — no single-line truncation, so a longer name like "Home and Living" always renders in full. */ .na-detail-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; } .na-detail-ico { width: 64px; height: 64px; border-radius: 1.15rem; display: flex; align-items: center; justify-content: center; color: #fff; background: #00ab4e; flex: none; box-shadow: 0 8px 20px -6px #00ab4e88; } .na-detail-ico svg { width: 32px; height: 32px; } .na-detail h3 { font-size: var(--fs-card-title); font-weight: 700; line-height: 1.2; word-break: break-word; } /* Clamped to 2 lines so descriptions of different lengths never change the panel's height — every store renders the exact same box. */ .na-detail p { font-size: var(--fs-body-sm); color: hsl(var(--muted-foreground)); line-height: 1.6; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.6em * 2); } .na-detail-cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: 1rem; } .na-detail-cases div { padding: .5rem .75rem; border-radius: .75rem; background: hsl(var(--muted) / .6); font-size: .75rem; text-align: center; display: flex; align-items: center; justify-content: center; min-height: 2.75rem; } @media (min-width: 768px) { /* Compact row layout, docked low so it covers as little of the 3D scene above it as possible. */ .na-detail { height: 200px; } .na-detail-body { flex-direction: row; align-items: center; gap: 2rem; } /* Fixed width (not min-width) so the icon+title column never resizes to fit a longer/shorter industry name — every panel lines up identically. The divider + stretch makes it read as a proper column, like the Roles & Impact sidebar. */ .na-detail-head { flex: 0 0 200px; width: 200px; align-self: stretch; justify-content: center; border-right: 1px solid hsl(var(--border) / .4); padding-right: 1.5rem; } .na-detail-cases { grid-template-columns: repeat(4, 1fr); } } /* ============================================================ CTA ============================================================ */ .na-cta { position: relative; padding: var(--section-py) 1.5rem; overflow: hidden; } .na-cta-bg { position: absolute; inset: 0; overflow: hidden; } .na-cta-blob1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 800px; border-radius: 9999px; background: radial-gradient(circle, hsl(187 85% 53% / 0.15) 0%, transparent 60%); animation: ctaPulse 8s ease-in-out infinite; } .na-cta-blob2 { position: absolute; top: 25%; right: 25%; width: 400px; height: 400px; border-radius: 9999px; background: radial-gradient(circle, hsl(270 60% 60% / 0.1) 0%, transparent 60%); animation: ctaDrift 12s ease-in-out infinite; } .na-cta-inner { position: relative; z-index: 10; max-width: 56rem; margin-inline: auto; text-align: center; } .na-cta h2 { font-size: var(--fs-h2); font-weight: 700; margin-bottom: 1.5rem; } .na-cta-lead { font-size: var(--fs-lead); color: hsl(var(--muted-foreground)); max-width: 42rem; margin: 0 auto 3rem; } .na-cta-actions { display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center; } .na-cta-trust { margin-top: 4rem; padding-top: 3rem; } .na-cta-trust p { font-size: var(--fs-lead); color: hsl(var(--muted-foreground)); margin-bottom: 1.5rem; } /* Auto-sliding client logo marquee. Track holds the logo list twice back to back; animating it exactly -50% loops seamlessly. Logos are transparent PNGs — light theme shows them as-is, dark theme just inverts the mark (no background box to worry about, since there isn't one). */ .na-logo-marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); } .na-logo-track { display: flex; align-items: center; gap: 3.5rem; width: max-content; animation: naLogoScroll 30s linear infinite; } .na-logo-marquee:hover .na-logo-track { animation-play-state: paused; } .na-logo-track img { height: 32px; width: auto; object-fit: contain; flex: none; filter: grayscale(1); opacity: .55; transition: opacity .25s ease; } .na-logo-track img:hover { opacity: .9; } html.dark .na-logo-track img { filter: grayscale(1) invert(1); } /* Track holds the logo list twice; sliding it from -50% back to 0 moves the logos left-to-right (always plays — not gated behind reduced-motion, same as the hero particle field and site-wide smooth scroll). */ @keyframes naLogoScroll { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (min-width: 640px) { .na-cta-actions { flex-direction: row; } } /* ============================================================ Footer ============================================================ */ .na-footer { position: relative; padding: var(--section-py) 1.5rem; } .na-footer-grid { max-width: 72rem; margin-inline: auto; display: grid; grid-template-columns: 1fr; margin-bottom: 4rem; } .na-footer-brand-full { width: 100%; text-align: center; } .na-footer-brand-row { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .na-footer-brand img { height: 38.4px; width: auto; } /* Footer brand lockup runs much larger than the nav's own logo instance — scoped to this row so the nav bar logo is unaffected. */ .na-footer-brand-row .na-logo-anim { height: clamp(48px, 7vw, 72px); width: calc(clamp(48px, 7vw, 72px) * 3.375); } .na-footer-brand-by { font-size: var(--fs-lead); color: hsl(var(--muted-foreground)); } .na-footer-brand-parent { height: clamp(38px, 5.5vw, 56px); width: auto; } .na-footer-brand p { font-size: var(--fs-lead); color: hsl(var(--muted-foreground)); max-width: 48rem; margin-inline: auto; } .na-footer-bottom { max-width: 72rem; margin-inline: auto; display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between; padding-top: 2rem; border-top: 1px solid hsl(var(--border) / .3); } .na-footer-bottom p { font-size: var(--fs-body-sm); color: hsl(var(--muted-foreground)); } .na-footer-legal { display: flex; align-items: center; gap: 1.5rem; } .na-footer-legal a, .na-footer-legal span { font-size: .875rem; color: hsl(var(--muted-foreground)); transition: color .2s ease; cursor: pointer; } .na-footer-legal a:hover, .na-footer-legal span:hover { color: hsl(var(--primary)); } @media (min-width: 768px) { .na-footer-bottom { flex-direction: row; } } /* Theme toggle button (footer) */ .na-theme-toggle { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: 9999px; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .7); backdrop-filter: blur(6px); transition: border-color .2s ease, background-color .2s ease; } .na-theme-toggle:hover { border-color: hsl(var(--primary) / .6); background: hsl(var(--primary) / .05); } .na-theme-toggle svg { width: 1rem; height: 1rem; color: hsl(var(--primary)); } .na-theme-toggle span { font-size: .75rem; font-weight: 600; color: hsl(var(--muted-foreground)); } /* ============================================================ Aurora background (subpages) + particle field ============================================================ */ .na-aurora-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .na-aurora-bg .blob { position: absolute; border-radius: 9999px; filter: blur(80px); opacity: .5; } .na-aurora-bg .b1 { top: -10%; left: -5%; width: 40vw; height: 40vw; background: hsl(var(--primary) / .15); animation: float 8s ease-in-out infinite; } .na-aurora-bg .b2 { bottom: -10%; right: -5%; width: 45vw; height: 45vw; background: hsl(var(--secondary) / .12); animation: float 10s ease-in-out infinite reverse; } .na-aurora-bg .b3 { top: 40%; left: 50%; width: 30vw; height: 30vw; background: hsl(var(--accent) / .08); animation: float 9s ease-in-out infinite; } /* Subpage hero + feature grid */ .na-sub-hero { padding: 8rem 1.5rem 4rem; } .na-sub-hero .na-container { max-width: 72rem; } .na-badge { display: inline-block; padding: .375rem 1rem; border-radius: 9999px; font-size: .875rem; font-weight: 500; margin-bottom: 1.5rem; } .na-badge.primary { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); } .na-badge.secondary { background: hsl(var(--secondary) / .1); color: hsl(var(--secondary)); } .na-sub-hero h1 { font-size: var(--fs-display); font-weight: 700; margin-bottom: 1.5rem; } .na-feature-grid { max-width: 72rem; margin-inline: auto; display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 5rem 0; } .na-feature-card { padding: 2rem; border-radius: 1rem; background: hsl(var(--card) / .5); backdrop-filter: blur(20px); border: 1px solid hsl(var(--border) / .5); } .na-feature-card .ico { width: 48px; height: 48px; border-radius: .75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .na-feature-card .ico.primary { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); } .na-feature-card .ico.secondary { background: hsl(var(--secondary) / .1); color: hsl(var(--secondary)); } .na-feature-card .ico svg { width: 24px; height: 24px; } .na-feature-card h3 { font-size: var(--fs-card-title); font-weight: 600; margin-bottom: .5rem; } .na-feature-card p { color: hsl(var(--muted-foreground)); } @media (min-width: 768px) { .na-feature-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ Schedule Demo modal — same floating-card language as the expanded nav menu (.na-nav-card): blurred translucent card, soft border, pill buttons matching .btn-glow. ============================================================ */ /* Same inset formula as .na-nav-pad when the nav is open (20px gap to the viewport edge on every side) and the same height fill as .na-nav-card (calc(100vh - 40px)) — so the popup reads as the same "expanded panel" weight as the nav menu, not a small centered dialog. */ .na-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .na-modal.is-open { opacity: 1; pointer-events: auto; } .na-modal-overlay { position: absolute; inset: 0; background: hsl(var(--background) / .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .na-modal-card { /* max-width: 4000px to match .na-nav-card exactly — the card itself spans the full viewport width (minus the 20px inset), same as the expanded nav menu. The form content is capped/centered inside .na-modal-scroll instead, so fields don't stretch edge-to-edge on wide screens. */ position: relative; width: 100%; max-width: 4000px; height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; background: hsl(var(--card) / .92); border: 1px solid hsl(var(--border) / .6); border-radius: 1.25rem; box-shadow: 0 30px 80px -20px hsl(var(--primary) / .3), 0 0 0 1px hsl(var(--border) / .3); transform: translateY(16px) scale(.97); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease; } .na-modal.is-open .na-modal-card { transform: translateY(0) scale(1); opacity: 1; } /* Form + cover photo side by side on wider screens (same breakpoint as the nav menu's own two-column split) for a more balanced composition instead of a lone form floating in a wide empty card. Single column on mobile, where the photo is dropped entirely to keep the form front and center. */ .na-modal-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; } .na-modal-scroll { /* order: 2 (with .na-modal-visual at 1) puts the form in the second grid track — image on the left, form on the right. min-width: 0 overrides the grid item default of min-width: auto — without it, the form's natural content width can force this column wider than its assigned share, overflowing into (and getting clipped under) the photo column instead of actually shrinking to fit. */ order: 2; min-width: 0; min-height: 0; overflow-y: auto; padding: 2.25rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Explicit radius + clip on the visual column itself (matching the card's own top-left/bottom-left rounding, now that it's the left column) rather than relying only on .na-modal-card's overflow:hidden — keeps the photo/panel's own corners flush with the card's outer edge regardless of what sits inside. */ .na-modal-visual { display: none; order: 1; } .na-modal-visual, .na-modal-visual img { border-radius: 1.25rem 0 0 1.25rem; } .na-modal-visual { overflow: hidden; } .na-modal-visual img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 768px) { .na-modal-body { grid-template-columns: 1fr 1.1fr; } .na-modal-visual { display: block; position: relative; } .na-modal-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to left, hsl(var(--card) / .25), transparent 18%); } } /* Concern panel — swapped in over the photo in the same visual column once an industry is picked. Bento-style: distinct rounded tiles rather than a plain radio list, matching the card language used elsewhere on the site. */ /* A floating glass bubble over the (still-visible) photo, not a full-bleed panel — the photo shows through blurred around and behind it via backdrop-filter. Inset from the column edges so the blurred photo peeks around all four sides, reinforcing that it's a popup, not a replacement. Scales in from the right (transform-origin + a translateX start offset) since that's the side the Industry field sits on. */ .na-concern-panel { position: absolute; inset: 1.5rem; display: flex; flex-direction: column; border-radius: 1.5rem; background: hsl(var(--card) / .5); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 1px solid hsl(var(--border) / .5); box-shadow: 0 25px 60px -20px rgba(0, 0, 0, .45); opacity: 0; transform: scale(.92) translateX(-8px); transform-origin: right center; transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); pointer-events: none; } .na-concern-panel.is-active { opacity: 1; transform: scale(1) translateX(0); pointer-events: auto; } /* Small diamond clipped to two edges — a classic speech-bubble tail — pointing right, toward the Industry field the bubble "popped up" from. script.js sets its vertical position to that field's exact center. */ .na-concern-tail { position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; background: hsl(var(--card) / .5); border-right: 1px solid hsl(var(--border) / .5); border-top: 1px solid hsl(var(--border) / .5); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); transform: translateY(-50%) rotate(45deg); } .na-concern-scroll { height: 100%; overflow-y: auto; padding: 2.25rem 2rem; } .na-concern-scroll h4 { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 1rem; } .na-concern-scroll h4 span { color: hsl(0 72% 55%); margin-left: .15rem; } /* Bento: a dense 2-column grid of tiles instead of one long single-column list — "Others" (and its textarea, once revealed) spans both columns since it's a different kind of tile (free text, not a fixed statement). */ .na-concern-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; } .na-concern-item { display: flex; align-items: flex-start; gap: .5rem; padding: .7rem .75rem; border-radius: .875rem; background: hsl(var(--muted) / .4); border: 1px solid hsl(var(--border) / .7); font-size: .75rem; line-height: 1.45; color: hsl(var(--foreground) / .85); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; } .na-concern-item:hover { border-color: hsl(var(--primary) / .5); } .na-concern-item input { margin-top: .15rem; accent-color: hsl(var(--primary)); flex: none; } .na-concern-item:has(input:checked) { border-color: hsl(var(--primary) / .8); background: hsl(var(--primary) / .1); color: hsl(var(--foreground)); } .na-concern-item-other { grid-column: 1 / -1; font-weight: 700; } .na-concern-other-input { grid-column: 1 / -1; width: 100%; min-height: 4rem; padding: .7rem .9rem; border-radius: .875rem; border: 1px solid hsl(var(--border) / .8); background: hsl(var(--muted) / .5); color: hsl(var(--foreground)); font: inherit; font-size: .75rem; resize: vertical; } .na-concern-other-input:focus { outline: none; border-color: hsl(var(--primary) / .7); box-shadow: 0 0 0 3px hsl(var(--primary) / .15); background: hsl(var(--card)); } /* At least one tile must be checked — flagged only after a failed submit attempt (same .was-validated-gated approach as the form fields), so it doesn't read as an error before the visitor has done anything. */ .na-concern-grid.is-invalid .na-concern-item { border-color: hsl(0 72% 55% / .6); } .na-concern-error { display: none; grid-column: 1 / -1; font-size: .75rem; color: hsl(0 72% 60%); margin: -.15rem 0 .1rem; } .na-concern-grid.is-invalid .na-concern-error { display: block; } .na-modal-head, .na-demo-form, .na-demo-success { width: 100%; max-width: 30rem; min-width: 0; } .na-modal-close { position: absolute; top: .9rem; right: .9rem; z-index: 2; width: 32px; height: 32px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: hsl(var(--muted-foreground)); transition: all .2s ease; } .na-modal-close svg { width: 1rem; height: 1rem; } .na-modal-close:hover { color: hsl(var(--foreground)); background: hsl(var(--muted)); } .na-modal-head { text-align: center; margin-bottom: 1.75rem; } .na-modal-head h3 { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .4rem; } .na-modal-head p { color: hsl(var(--muted-foreground)); font-size: var(--fs-body-sm); } .na-demo-form { display: flex; flex-direction: column; gap: 1.1rem; } .na-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .na-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; } .na-field label { font-size: .8125rem; font-weight: 600; } .na-field label span { color: hsl(0 72% 55%); margin-left: .15rem; } .na-field input, .na-field select { /* width: 100% matters here — inputs/selects aren't block-level, so without it they size to their own content (a