/* * Needlewatch website. * * Tokens come from stitch_needlewatch_stylus_tracker/DESIGN.md. The design * shipped as Tailwind-via-CDN; this is hand-written CSS instead, so the site * has no build step and no third-party runtime. */ :root { --surface: #131315; --surface-container-lowest: #0e0e10; --surface-container-low: #1b1b1d; --surface-container: #1f1f21; --surface-container-high: #2a2a2c; --surface-container-highest: #353437; --surface-bright: #39393b; --on-surface: #e4e2e4; --on-surface-variant: #bfcaba; --outline: #899486; --outline-variant: #40493e; --primary: #83da85; --primary-container: #66bb6a; --on-primary: #00390e; --secondary: #9ecaff; --tertiary: #ffb961; --error: #ffb4ab; --edge: rgba(255, 255, 255, 0.12); --xs: 4px; --sm: 8px; --md: 16px; --lg: 24px; --xl: 32px; --margin-window: 20px; --radius: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; --header-h: 64px; --maxw: 1120px; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } *, *::before, *::after { box-sizing: border-box; } /* * Fallback for anchor jumps when there's no JavaScript. * * It must be off once site.js is running: the browser would re-animate every * per-frame scrollTo() the tween makes, and the two fight each other into a * stutter. */ html { scroll-behavior: smooth; } html.js { scroll-behavior: auto; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--surface); color: var(--on-surface); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { max-width: 100%; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: var(--primary-container); color: var(--on-primary); } :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--xs); } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--margin-window); } /* ---------------------------------------------------------------- reveal * * Sections ease up as they enter the viewport. Gated on `.js` — set by an * inline script in — so that without JavaScript nothing is ever hidden, * and there's no flash of content disappearing after load. * * site.js picks the same selectors and staggers siblings. */ .js :is(.hero__reveal, .stage, .section__head, .card, .step, .split > *, .cta) { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--reveal-delay, 0ms); } .js :is(.hero__reveal, .stage, .section__head, .card, .step, .split > *, .cta).is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js :is(.hero__reveal, .stage, .section__head, .card, .step, .split > *, .cta) { opacity: 1; transform: none; transition: none; } } /* Anchored sections must clear the fixed header. */ section[id] { scroll-margin-top: calc(var(--header-h) + var(--md)); } /* ---------------------------------------------------------------- header */ .header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 50; background: rgba(19, 19, 21, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(64, 73, 62, 0.4); } .header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .brand { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; } .brand:hover { text-decoration: none; } .brand__mark { width: 30px; height: 30px; } /* The footer wordmark sits quieter than the header's. */ .footer .brand { font-size: 16px; } .footer .brand__mark { width: 24px; height: 24px; } /* Desktop nav sits right, as a classic bar. */ .nav { display: flex; align-items: center; gap: var(--lg); } .nav__link { color: var(--on-surface-variant); font-size: 14px; font-weight: 500; transition: color 0.2s ease; } .nav__link:hover { color: var(--on-surface); text-decoration: none; } .nav__link.is-active { color: var(--primary); } .nav__cta { margin-left: var(--sm); } /* ------------------------------------------------------------ hamburger */ .burger { display: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--surface-container); cursor: pointer; } .burger__box { position: relative; display: block; width: 18px; height: 12px; margin: 0 auto; } .burger__bar { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--on-surface); transition: transform 0.28s ease, opacity 0.2s ease; } .burger__bar:nth-child(1) { top: 0; } .burger__bar:nth-child(2) { top: 5px; } .burger__bar:nth-child(3) { top: 10px; } /* Bars fold into an X while the menu is open. */ .burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(5px) rotate(45deg); } .burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } .mobile-nav { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 49; padding: var(--sm) var(--margin-window) var(--lg); background: var(--surface-container-lowest); border-bottom: 1px solid var(--outline-variant); display: flex; flex-direction: column; /* Collapsed by default; opacity+transform keeps it off the a11y tree via hidden. */ transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform 0.24s ease, opacity 0.24s ease, visibility 0.24s; } .mobile-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; } .mobile-nav a { padding: var(--md) 0; color: var(--on-surface); font-size: 16px; font-weight: 500; border-bottom: 1px solid rgba(64, 73, 62, 0.35); } .mobile-nav a:last-of-type { border-bottom: 0; } .mobile-nav a:hover { text-decoration: none; color: var(--primary); } .mobile-nav .btn { margin-top: var(--md); justify-content: center; } /* --------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; gap: var(--sm); padding: 12px 22px; border: 1px solid transparent; border-radius: var(--radius-full); font-family: var(--sans); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--primary-container); color: #06240c; } .btn--primary:hover { background: var(--primary); } .btn--ghost { background: var(--surface-container); color: var(--on-surface); border-color: var(--edge); } .btn--ghost:hover { background: var(--surface-container-high); } .btn--sm { padding: 9px 16px; font-size: 13px; } /* ----------------------------------------------------------------- hero */ .hero { padding: calc(var(--header-h) + 72px) 0 72px; text-align: center; } .chip { display: inline-flex; align-items: center; gap: var(--sm); padding: 6px 14px; border: 1px solid var(--edge); border-radius: var(--radius-full); background: var(--surface-container); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--on-surface-variant); } .dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--primary); } .dot--amber { background: var(--tertiary); } .dot--red { background: var(--error); } .hero h1 { margin: var(--lg) 0 0; font-size: clamp(34px, 6vw, 52px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; } .hero h1 span { color: var(--primary); } .hero p { max-width: 560px; margin: var(--md) auto 0; color: var(--on-surface-variant); font-size: 17px; } .hero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sm); margin-top: var(--xl); } .hero__note { margin-top: var(--md); font-size: 13px; color: var(--outline); } /* --------------------------------------------------- app mockup (popover) */ .stage { margin-top: 56px; padding: var(--xl) var(--md); border: 1px solid var(--edge); border-radius: var(--radius-xl); background: radial-gradient(120% 120% at 50% 0%, rgba(131, 218, 133, 0.10), transparent 60%), var(--surface-container-lowest); } .popover { width: 100%; max-width: 330px; margin: 0 auto; padding: 14px; border: 1px solid var(--edge); border-radius: var(--radius-md); background: var(--surface-container-high); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); text-align: left; } .popover__head { display: flex; align-items: center; gap: var(--sm); padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .popover__mark { width: 22px; height: 22px; color: var(--on-surface); } .popover__title { font-size: 14px; font-weight: 600; } .popover__spacer { margin-left: auto; color: var(--outline); } .popover__row { display: flex; align-items: center; gap: 6px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .select { display: flex; align-items: center; justify-content: space-between; flex: 1; padding: 6px 10px; border: 1px solid var(--edge); border-radius: 6px; background: var(--surface-container-highest); font-family: var(--mono); font-size: 12px; } .icon-btn { display: grid; place-items: center; width: 30px; height: 28px; border: 1px solid var(--edge); border-radius: 6px; background: var(--surface-container-highest); color: var(--on-surface-variant); font-size: 13px; } .stat { display: flex; align-items: baseline; gap: var(--sm); padding-top: var(--md); } .stat__value { font-size: 36px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; } .stat__unit { color: var(--on-surface-variant); font-size: 14px; } .badge { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--primary); font-size: 12px; font-weight: 600; } .gauge { position: relative; height: 10px; margin-top: 12px; border-radius: var(--radius-full); background: var(--surface-container-lowest); overflow: hidden; } .gauge__fill { height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--primary-container), var(--primary)); } .gauge__tick { position: absolute; top: 0; bottom: 0; width: 1.5px; background: rgba(255, 255, 255, 0.55); } .scale { display: flex; justify-content: space-between; margin-top: 6px; color: var(--outline); font-size: 11px; } .popover__hint { margin: 12px 0 0; color: var(--on-surface-variant); font-size: 12px; } .popover__cta { display: flex; align-items: center; justify-content: center; gap: var(--sm); width: 100%; margin-top: 12px; padding: 10px; border-radius: var(--radius-full); background: var(--primary-container); color: #06240c; font-size: 13px; font-weight: 600; } .popover__foot { display: flex; justify-content: space-between; margin-top: 12px; color: var(--outline); font-size: 11px; } /* -------------------------------------------------------------- sections */ .section { padding: 88px 0; border-top: 1px solid rgba(64, 73, 62, 0.3); } .section__head { max-width: 640px; margin: 0 auto 56px; text-align: center; } .section__head h2 { margin: 0; font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: -0.02em; } .section__head p { margin: var(--sm) 0 0; color: var(--on-surface-variant); } .eyebrow { display: block; margin-bottom: 12px; color: var(--primary); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; } .grid { display: grid; gap: var(--md); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .card { padding: var(--lg); border: 1px solid var(--edge); border-radius: var(--radius-lg); background: var(--surface-container-low); transition: background 0.2s ease, border-color 0.2s ease; } .card:hover { background: var(--surface-container); border-color: rgba(255, 255, 255, 0.2); } .card__icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: var(--md); border: 1px solid var(--edge); border-radius: var(--radius); background: var(--surface-container-high); color: var(--primary); font-size: 18px; } .card h3 { margin: 0 0 var(--sm); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .card p { margin: 0; color: var(--on-surface-variant); font-size: 14px; } /* Steps */ .steps { counter-reset: step; } .step__num { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto var(--md); border: 1px solid var(--edge); border-radius: var(--radius-full); background: var(--surface-container-high); color: var(--primary); font-family: var(--mono); font-size: 14px; } .step { text-align: center; } .step h3 { margin: 0 0 var(--sm); font-size: 17px; font-weight: 600; } .step p { margin: 0 auto; max-width: 280px; color: var(--on-surface-variant); font-size: 14px; } /* Split (precision) */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .split h2 { margin: 0; font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: -0.02em; } .split p { color: var(--on-surface-variant); } .checks { margin: var(--lg) 0 0; padding: 0; list-style: none; } .checks li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(64, 73, 62, 0.4); } .checks svg { flex: none; margin-top: 2px; color: var(--primary); } .checks strong { display: block; font-size: 15px; font-weight: 600; } .checks span { color: var(--on-surface-variant); font-size: 14px; } /* Editor mockup */ .window { border: 1px solid var(--edge); border-radius: var(--radius-md); background: var(--surface-container); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); overflow: hidden; } .window__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--surface-container-high); border-bottom: 1px solid var(--edge); } .window__dot { width: 11px; height: 11px; border-radius: var(--radius-full); background: var(--surface-bright); } .window__title { margin-left: var(--sm); color: var(--on-surface-variant); font-size: 12px; } .window__body { padding: var(--lg); } .field { display: flex; align-items: center; justify-content: space-between; gap: var(--md); padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .field:last-child { border-bottom: 0; } .field__label { color: var(--on-surface-variant); font-size: 13px; } .field__input { min-width: 128px; padding: 6px 10px; border: 1px solid var(--edge); border-radius: 6px; background: var(--surface-container-lowest); font-family: var(--mono); font-size: 12px; text-align: right; } .field__input--focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(131, 218, 133, 0.25); } /* CTA */ .cta { position: relative; padding: 72px var(--lg); border: 1px solid var(--edge); border-radius: var(--radius-xl); background: radial-gradient(90% 140% at 50% 0%, rgba(131, 218, 133, 0.12), transparent 65%), var(--surface-container-low); text-align: center; overflow: hidden; } .cta h2 { margin: 0; font-size: clamp(26px, 4vw, 38px); font-weight: 700; letter-spacing: -0.02em; } .cta p { max-width: 480px; margin: var(--md) auto 0; color: var(--on-surface-variant); } .cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sm); margin-top: var(--xl); } /* An can't be tinted by `color`, so fade the whole mark instead. */ .cta__mark { position: absolute; right: -40px; bottom: -50px; width: 240px; opacity: 0.05; pointer-events: none; } /* --------------------------------------------------------------- footer */ .footer { padding: var(--xl) 0; border-top: 1px solid rgba(64, 73, 62, 0.4); background: var(--surface-container-lowest); } .footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--md); flex-wrap: wrap; } .footer__links { display: flex; gap: var(--lg); flex-wrap: wrap; } .footer__links a { color: var(--on-surface-variant); font-size: 13px; } .footer__links a:hover { color: var(--on-surface); text-decoration: none; } .footer__copy { color: var(--outline); font-size: 13px; } /* ------------------------------------------------------------- doc pages */ .doc { max-width: 760px; padding: calc(var(--header-h) + 64px) var(--margin-window) 88px; margin: 0 auto; } .doc h1 { margin: 0 0 var(--sm); font-size: clamp(28px, 5vw, 40px); font-weight: 800; letter-spacing: -0.02em; } .doc__meta { margin: 0 0 var(--xl); color: var(--outline); font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; } .doc h2 { margin: var(--xl) 0 var(--sm); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } .doc h3 { margin: var(--lg) 0 var(--xs); font-size: 16px; font-weight: 600; } .doc p, .doc li { color: var(--on-surface-variant); } .doc li { margin-bottom: var(--sm); } .doc code { padding: 2px 6px; border: 1px solid var(--edge); border-radius: var(--xs); background: var(--surface-container); font-family: var(--mono); font-size: 12px; color: var(--on-surface); } .callout { margin: var(--lg) 0; padding: var(--md); border: 1px solid var(--edge); border-left: 3px solid var(--primary); border-radius: var(--radius); background: var(--surface-container-low); } .callout p { margin: 0; } .faq { border-top: 1px solid rgba(64, 73, 62, 0.4); } .faq__item { border-bottom: 1px solid rgba(64, 73, 62, 0.4); padding: var(--md) 0; } .faq__item summary { cursor: pointer; font-weight: 600; color: var(--on-surface); list-style: none; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; float: right; color: var(--primary); font-family: var(--mono); } .faq__item[open] summary::after { content: "\2212"; } .faq__item p { margin: var(--sm) 0 0; } /* ------------------------------------------------------------ responsive */ @media (max-width: 900px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: 1fr; gap: var(--xl); } .section { padding: 64px 0; } } @media (max-width: 720px) { .nav { display: none; } .burger { display: block; } .grid--3 { grid-template-columns: 1fr; } .grid--4 { grid-template-columns: 1fr; } .hero { padding-top: calc(var(--header-h) + 48px); } .footer__inner { flex-direction: column; align-items: flex-start; } }