/* * trynodus.com — the whole stylesheet for the marketing site. * * Hand-rolled, like webapp/src/styles.css: no framework, no reset library, no * external font, no build step. The difference is where the tokens come from — * the webapp injects them from src/theme.ts at runtime, and there is no runtime * here, so §1 below is a HAND PORT of the values this page actually uses. Same * names, same numbers. When a token changes in webapp/src/theme.ts it changes * here too; nothing else in this file may hold a second copy of one. * * The marketing-only steps (--fs-hero, --fs-h2, --ls-eyebrow, the reading * measures) are additions, not overrides: the app's display step tops out at * 28px, which is a screen title, not a headline. They are marked as such. * * Structure: * 1. tokens (ported) + marketing steps * 2. reset + page * 3. backdrop (starry navy — CSS only, zero image files) * 4. glass material + its two fallbacks * 5. layout shell (nav, wrap, sections, footer) * 6. hero * 7. the beta form * 8. how it works (cards + phone frames) * 9. privacy list + second CTA * 10. prose pages (privacy.html, terms.html) * 11. reduced motion */ /* ---------- 1. tokens ---------- */ :root { /* base — webapp/src/theme.ts colors + backdrop */ --bg-base: #07080d; --opaque-glass: rgba(22, 23, 31, 0.88); --void: #04050a; --navy-deep: #101a33; --navy-mid: #1d3a6e; /* accents — never colour alone (§4.2 pairing rule) */ --accent-todo: #38e8ff; --accent-goal: #9b7cff; --accent-idea: #ffc46b; --success: #4ade80; /* text ramp — hierarchy via lightness, never via surface transparency */ --text-1: rgba(255, 255, 255, 0.95); --text-2: rgba(255, 255, 255, 0.62); --text-3: rgba(255, 255, 255, 0.4); /* glass, regular tier (§4.6) — the only tier this page needs */ --glass-reg-blur: 22px; --glass-reg-sat: 1.2; --glass-reg-bg: rgba(255, 255, 255, 0.1); --glass-reg-border: rgba(255, 255, 255, 0.3); --glass-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.4); /* nested surfaces — inverted ratio, never their own blur */ --nested-bg: rgba(255, 255, 255, 0.07); --nested-border: rgba(255, 255, 255, 0.45); /* radii — concentric scale */ --r-hero: 34px; --r-sheet: 26px; --r-card: 16px; --r-tile: 15px; --r-pill: 999px; /* spacing — 4px scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; /* motion — the Nodus ease */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --t-fast: 180ms; --t-med: 260ms; /* type scale (§4.3) — weights run heavy by design: glass legibility */ --fs-body: 16px; --fw-body: 600; --lh-body: 23px; --fs-second: 14px; --fw-second: 600; --lh-second: 20px; --fs-caption: 13px; --fw-caption: 700; --lh-caption: 18px; --fs-label: 12px; --fw-label: 800; --lh-label: 14px; --ls-label: 0.08em; --ls-torus: 0.18em; /* * MARKETING STEPS — additions, not ports. The app's display step is 28px, * which is a screen title; a landing page needs a headline above it. They are * fluid so the two breakpoints below never have to restate a font size. */ --fs-hero: clamp(34px, 6.4vw, 56px); --fs-h2: clamp(26px, 3.8vw, 38px); --fs-h3: 19px; --fs-lead: clamp(17px, 1.6vw, 19px); --ls-eyebrow: 0.14em; /* ≥ --ls-label: caps need more air at 12px than a UI label does */ /* layout measures */ --w-page: 1040px; /* the content column */ --w-hero: 640px; /* the hero's text measure — shorter, so the H1 breaks well */ --w-prose: 68ch; /* privacy + terms reading measure */ } /* ---------- 2. reset + page ---------- */ *, *::before, *::after { box-sizing: border-box; } html { /* the very first paint is already dark — see the inline style on too */ background-color: var(--void); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100%; background-color: transparent; color: var(--text-1); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif; font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); font-feature-settings: "kern" 1, "liga" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, p, ul, ol, dl, figure { margin: 0; hyphens: none; } ul, ol { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } a { color: inherit; } button, input { font: inherit; color: inherit; } /* Present to a screen reader, absent to the eye. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* one focus ring for every control on the site — the cyan the app already wears */ a:focus-visible, button:focus-visible, input:focus-visible { outline: none; border-radius: var(--r-tile); box-shadow: 0 0 0 3px rgba(56, 232, 255, 0.24); } /* ---------- 3. backdrop ---------- */ /* * Four fixed layers behind everything, none of them a downloaded file — the * approach ported from webapp/src/styles.css §2: * .backdrop the navy dome + three accent glows over the page black * .backdrop__stars two tiled radial-gradient star fields (near + far) * .backdrop__noise one inline SVG feTurbulence grain, at 3.5% opacity * They are inert (`pointer-events: none`) and never move in the layout. `fixed` * matters more here than in the webapp: this page scrolls for several screens, * and a scrolling starfield would read as parallax nobody asked for. * * The one change from the webapp's copy: the glows are placed for a TALL page — * cyan low-left behind the hero form, violet high-right behind the mark, and a * mid wash so the glass cards further down still have something to bend. */ .backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-color: var(--void); background-image: /* a cool droplet glow low-left — the TODO accent, heavily diluted */ radial-gradient( 66% 42% at 12% 74%, rgba(56, 232, 255, 0.13), transparent 64% ), /* the GOAL violet, high-right, quieter still */ radial-gradient( 56% 36% at 94% 8%, rgba(155, 124, 255, 0.12), transparent 60% ), /* a wash behind the fold — glass only looks like glass when there is something behind it to bend */ radial-gradient( 60% 30% at 50% 40%, rgba(120, 170, 255, 0.07), transparent 72% ), /* the navy dome — the same band colour the sign-in email wears, so a person who arrives from that email lands on the colour they just looked at */ radial-gradient( 124% 62% at 50% -12%, var(--navy-mid) 0%, var(--navy-deep) 44%, transparent 92% ); } .backdrop__layer { position: absolute; inset: 0; } /* * Stars. One tile of hand-placed dots, repeated. Two layers at different tile * sizes and brightnesses so the repeat never resolves into a visible grid. */ .backdrop__stars { background-repeat: repeat; background-size: 380px 380px; background-image: radial-gradient( 1.4px 1.4px at 18% 22%, rgba(255, 255, 255, 0.9), transparent 60% ), radial-gradient( 1.1px 1.1px at 74% 11%, rgba(255, 255, 255, 0.7), transparent 60% ), radial-gradient( 1.6px 1.6px at 41% 63%, rgba(255, 255, 255, 0.8), transparent 60% ), radial-gradient( 1px 1px at 88% 46%, rgba(255, 255, 255, 0.55), transparent 60% ), radial-gradient( 1.2px 1.2px at 9% 78%, rgba(255, 255, 255, 0.65), transparent 60% ), radial-gradient( 1px 1px at 61% 88%, rgba(255, 255, 255, 0.5), transparent 60% ), radial-gradient( 1.5px 1.5px at 33% 6%, rgba(56, 232, 255, 0.55), transparent 60% ), radial-gradient( 1.1px 1.1px at 96% 74%, rgba(255, 255, 255, 0.6), transparent 60% ); opacity: 0.62; animation: nodus-twinkle 7.5s var(--ease) infinite alternate; } .backdrop__stars--far { background-size: 610px 610px; background-image: radial-gradient( 1px 1px at 55% 30%, rgba(255, 255, 255, 0.5), transparent 60% ), radial-gradient( 0.9px 0.9px at 24% 47%, rgba(255, 255, 255, 0.4), transparent 60% ), radial-gradient( 1.2px 1.2px at 80% 82%, rgba(155, 124, 255, 0.45), transparent 60% ), radial-gradient( 0.9px 0.9px at 12% 12%, rgba(255, 255, 255, 0.35), transparent 60% ), radial-gradient( 1px 1px at 68% 58%, rgba(255, 255, 255, 0.42), transparent 60% ); opacity: 0.5; animation: none; } @keyframes nodus-twinkle { from { opacity: 0.42; } to { opacity: 0.72; } } /* Grain: an inline SVG turbulence, so the "no external requests" rule holds. */ .backdrop__noise { opacity: 0.035; background-repeat: repeat; background-size: 180px 180px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- 4. glass ---------- */ /* * The regular tier (§4.6). Two pseudo-elements carry the material's light: * ::before is the single top-left specular sweep, ::after the edge-lensing ring * INSIDE the border. Identical to the webapp's, so the two surfaces are the * same material. */ .glass { position: relative; background: var(--glass-reg-bg); backdrop-filter: blur(var(--glass-reg-blur)) saturate(var(--glass-reg-sat)); -webkit-backdrop-filter: blur(var(--glass-reg-blur)) saturate(var(--glass-reg-sat)); border: 1px solid var(--glass-reg-border); border-radius: var(--r-sheet); box-shadow: var(--glass-shadow); } .glass::before, .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } .glass::before { background: linear-gradient( 115deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 22%, transparent 46% ); } .glass::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 24px rgba(255, 255, 255, 0.06); } /* everything inside a .glass surface must clear its ::before/::after light */ .glass > * { position: relative; z-index: 1; } /* * Fallback 1 — no backdrop-filter support at all. Without this a card would be * a 10%-white wash over the stars: unreadable. Same box, opaque fill, no layout * shift, and the light pseudo-elements go away because there is no material for * them to sit on. */ @supports not ( (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) ) { .glass { background: var(--opaque-glass); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgba(255, 255, 255, 0.12); } .glass::before, .glass::after { display: none; } } /* Fallback 2 — the user asked the OS for less transparency (§4.5/§4.6). */ @media (prefers-reduced-transparency: reduce) { .glass { background: var(--opaque-glass); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgba(255, 255, 255, 0.12); } .glass::before, .glass::after { display: none; } } /* ---------- 5. shell ---------- */ .wrap { width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 0 var(--s-6); } /* everything above the backdrop */ .nav, .main, .foot { position: relative; z-index: 1; } /* * The nav. Deliberately NOT sticky: this page is short enough to scroll in one * gesture, and a bar that follows the reader down is chrome competing with the * one thing on the page that matters (the form). */ .nav { padding: var(--s-6) 0; } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); } .nav__brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; } /* the official Nodus mark at header size — no float animation here (a bobbing logo in a header reads as a spinner) */ .nav__mark { width: 26px; height: 26px; } .nav__word { font-size: 19px; font-weight: 800; letter-spacing: 0.01em; color: var(--text-1); } .nav__link { color: var(--text-2); font-size: var(--fs-second); font-weight: 700; text-decoration: none; padding: var(--s-2) var(--s-3); transition: color var(--t-fast) var(--ease); } .nav__link:hover { color: var(--text-1); } /* the generous whitespace this page is mostly made of */ .section { padding: clamp(64px, 9vw, 112px) 0; } .section__head { max-width: var(--w-hero); display: flex; flex-direction: column; gap: var(--s-4); } /* * Section eyebrows — with the Torus mark in the footer, the ONLY all-caps runs * on the site. The caps are applied in CSS, not typed into the markup, so a * screen reader says "the problem", not "T H E". */ .eyebrow { font-size: var(--fs-label); font-weight: var(--fw-label); line-height: var(--lh-label); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-3); } .h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.12; letter-spacing: -0.018em; color: var(--text-1); } .lead { font-size: var(--fs-lead); font-weight: var(--fw-body); line-height: 1.6; color: var(--text-2); } .foot { padding: var(--s-8) 0 var(--s-9); border-top: 1px solid rgba(255, 255, 255, 0.07); } .foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); } .foot__links a { color: var(--text-2); font-size: var(--fs-second); font-weight: 600; text-decoration: none; transition: color var(--t-fast) var(--ease); } .foot__links a:hover { color: var(--text-1); } .foot__sep { color: var(--text-3); font-size: var(--fs-second); } /* * The Torus family mark — a signature, not a UI label, which is why it is * wider than --ls-label. Caps in CSS again, so it is read as words. */ .foot__mark { margin-top: var(--s-5); color: rgba(255, 255, 255, 0.28); font-size: 10px; font-weight: var(--fw-label); line-height: var(--lh-label); letter-spacing: var(--ls-torus); text-transform: uppercase; } /* ---------- 6. hero ---------- */ .hero { padding: clamp(28px, 5vw, 56px) 0 clamp(56px, 8vw, 96px); } .hero__col { max-width: var(--w-hero); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); } /* the mark at hero size, with the app's gentle float — the one animated thing above the fold */ .hero__mark { width: 72px; height: 72px; filter: drop-shadow(0 10px 34px rgba(56, 232, 255, 0.28)); animation: nodus-float 5.5s var(--ease) infinite alternate; margin-bottom: var(--s-2); } @keyframes nodus-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-3px, -3px, 0); } } .hero__title { font-size: var(--fs-hero); font-weight: 800; line-height: 1.04; letter-spacing: -0.025em; color: var(--text-1); text-wrap: balance; } .hero__sub { font-size: var(--fs-lead); font-weight: var(--fw-body); line-height: 1.6; color: var(--text-2); } .hero__quiet { color: var(--text-3); font-size: var(--fs-second); font-weight: var(--fw-second); line-height: var(--lh-second); } .hero__quiet a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.22); transition: color var(--t-fast) var(--ease); } .hero__quiet a:hover { color: var(--text-1); } /* ---------- 7. the beta form ---------- */ .beta { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: var(--s-3); } .beta__row { display: flex; gap: var(--s-2); } /* the app's input pill, to the pixel: 46px tall, nested fill, nested border */ .beta__input { flex: 1; min-width: 0; height: 46px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--nested-border); background: rgba(255, 255, 255, 0.06); color: var(--text-1); font-size: 15px; font-weight: var(--fw-body); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .beta__input::placeholder { color: var(--text-3); font-weight: var(--fw-second); } .beta__input:focus-visible { outline: none; border-radius: var(--r-pill); border-color: rgba(56, 232, 255, 0.65); box-shadow: 0 0 0 3px rgba(56, 232, 255, 0.16); } .beta__input:disabled { opacity: 0.45; } /* the committing control — the app's white Save pill */ .beta__btn { flex: none; height: 46px; padding: 0 var(--s-5); border: none; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.92); color: #12233b; font-size: 15px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); } .beta__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 1); } .beta__btn:active:not(:disabled) { transform: translateY(1px); } .beta__btn:focus-visible { border-radius: var(--r-pill); } .beta__btn:disabled { opacity: 0.5; cursor: default; } .beta__micro { color: var(--text-3); font-size: var(--fs-caption); font-weight: var(--fw-caption); line-height: var(--lh-caption); } /* * Every failure on this page is a line of copy under the field the person is * already looking at — no alert(), no toast, no modal. Same rule the webapp * follows. */ .beta__msg { color: var(--accent-idea); font-size: var(--fs-second); font-weight: var(--fw-second); line-height: var(--lh-second); } .beta__msg[hidden] { display: none; } /* success replaces the whole form (beta.js) — the field has no job left */ .beta__done { width: 100%; max-width: 480px; padding: var(--s-4) var(--s-5); border-radius: var(--r-tile); background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.3); color: var(--text-1); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); } /* ---------- 8. how it works ---------- */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-8); } .step { padding: var(--s-5) var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); } .step__num { color: var(--text-3); font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-label); font-variant-numeric: tabular-nums; } .step__title { font-size: var(--fs-h3); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--text-1); } .step__body { color: var(--text-2); font-size: var(--fs-second); font-weight: var(--fw-second); line-height: 1.55; } /* * The phone frame. A rounded rect with a thin lit border over a nested fill — * the same geometry language as the app's cards, one radius step up. The 9:19.5 * aspect ratio is the iPhone's, so a real capture drops in without cropping. */ .phone { position: relative; aspect-ratio: 9 / 19.5; border-radius: var(--r-hero); border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 44px rgba(0, 0, 0, 0.28); overflow: hidden; } /* * The placeholder underneath. It ships visible and the screenshot covers it; * when a capture is missing the hides the image and this is what * the page shows — so the site is presentable before the real captures exist. * Documented in site/README.md → "Dropping in the screenshots". */ .phone__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient( 160deg, rgba(56, 232, 255, 0.1) 0%, rgba(155, 124, 255, 0.09) 52%, rgba(255, 255, 255, 0.03) 100% ); color: var(--text-3); font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; } .phone__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .phone__shot[hidden] { display: none; } /* ---------- 9. privacy list + second CTA ---------- */ .points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); } .point { display: flex; gap: var(--s-3); color: var(--text-2); font-size: var(--fs-body); font-weight: var(--fw-second); line-height: 1.55; } /* the type-accent dot, borrowed from the app's rows — decorative, so the copy beside it never depends on the colour to be understood */ .point__dot { flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: var(--r-pill); background: var(--accent-todo); box-shadow: 0 0 10px rgba(56, 232, 255, 0.45); } .point:nth-child(2) .point__dot { background: var(--accent-goal); box-shadow: 0 0 10px rgba(155, 124, 255, 0.45); } .point:nth-child(3) .point__dot { background: var(--accent-idea); box-shadow: 0 0 10px rgba(255, 196, 107, 0.45); } .quietLink { display: inline-block; margin-top: var(--s-7); color: var(--text-2); font-size: var(--fs-second); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.22); transition: color var(--t-fast) var(--ease); } .quietLink:hover { color: var(--text-1); } .cta { padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); } /* ---------- 10. prose pages ---------- */ .prose { max-width: var(--w-prose); padding: clamp(32px, 5vw, 56px) 0 clamp(56px, 8vw, 88px); display: flex; flex-direction: column; gap: var(--s-6); } .prose h1 { font-size: clamp(30px, 4.4vw, 42px); font-weight: 800; line-height: 1.1; letter-spacing: -0.022em; color: var(--text-1); } .prose__effective { color: var(--text-3); font-size: var(--fs-caption); font-weight: var(--fw-caption); line-height: var(--lh-caption); } .prose section { display: flex; flex-direction: column; gap: var(--s-3); } .prose h2 { margin-top: var(--s-4); font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -0.012em; color: var(--text-1); } .prose p, .prose li { color: var(--text-2); font-size: var(--fs-body); font-weight: var(--fw-second); line-height: 1.65; } .prose ul { display: flex; flex-direction: column; gap: var(--s-2); padding-left: var(--s-5); list-style: disc; } .prose li::marker { color: var(--text-3); } .prose a { color: var(--text-1); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.28); } .prose a:hover { border-bottom-color: rgba(56, 232, 255, 0.65); } /* ---------- breakpoints ---------- */ /* ~900px: the three-across grids become one column — two-across pinches both the phone frames and the privacy lines before it helps anything. */ @media (max-width: 900px) { .steps, .points { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } .step { /* a full-width card would show a phone frame the height of a wall */ display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; column-gap: var(--s-5); } .phone { grid-row: span 3; } } /* ~560px: single column everywhere, and the form stacks so the button keeps a comfortable tap target instead of shrinking to fit beside the field. */ @media (max-width: 560px) { .wrap { padding: 0 var(--s-5); } .beta__row { flex-direction: column; } .beta__btn { width: 100%; } .step { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); } .phone { grid-row: auto; max-width: 172px; } .foot__links { gap: var(--s-2) var(--s-3); } } /* ---------- 11. reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .backdrop__stars, .hero__mark { animation: none; } * { transition-duration: 1ms !important; } }