/* ============================================================================ Nodestra web — the shared skin for nodestra.net and account.nodestra.net. ---------------------------------------------------------------------------- CANONICAL SOURCE: apps/_shared/nodestra.css Copied into each site by `node apps/sync-shared.mjs` before deploying, because the two sites are separate Cloudflare Pages projects on separate domains and cannot import from one another at runtime. Colours mirror the app's own dark theme (packages/ui/src/theme.css) so the site, the account area and the product look like one thing. ========================================================================== */ :root { --bg: #0a0d12; --surface: #11151c; --surface2: #151b23; --border: rgba(148, 163, 184, 0.10); --border-strong: rgba(148, 163, 184, 0.20); --text: #e6ecf4; --muted: #8fa0b5; --dim: #5b6b80; --accent: #5b9bd1; --accent-strong: #85b9e4; --accent-soft: rgba(91, 155, 209, 0.14); --accent-contrast: #070a0f; --ok: #4ade80; --danger: #f87171; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Inter", "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; /* `overflow-x: hidden` here USED to be the rule, and it silently broke the sticky header: hiding overflow on turns it into a scroll container, and a sticky child then scrolls away instead of pinning. `clip` cuts the same overflow WITHOUT creating that container, so the header stays put. The `hidden` line below is only a fallback for browsers without `clip`. */ overflow-x: hidden; overflow-x: clip; /* Belt and braces on phones: nothing may push the page sideways. */ max-width: 100vw; } a { color: inherit; text-decoration: none; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; position: relative; z-index: 1; } /* Blurred auras, the same treatment as the app's sign-in screen. */ .aura { position: fixed; border-radius: 50%; filter: blur(120px); opacity: .45; pointer-events: none; z-index: 0; } .aura1 { width: 520px; height: 520px; background: radial-gradient(circle, #5b9bd1, transparent 70%); top: -180px; left: -100px; } .aura2 { width: 460px; height: 460px; background: radial-gradient(circle, #2b5780, transparent 70%); top: 240px; right: -140px; } /* ── Buttons ──────────────────────────────────────────────────────────────*/ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: transform .12s ease, background .12s ease, border-color .12s ease; } .btn:hover { transform: translateY(-1px); } .btn:disabled { opacity: .55; cursor: default; transform: none; } .btn-primary { background: var(--accent); color: var(--accent-contrast); } .btn-primary:hover:not(:disabled) { background: var(--accent-strong); } .btn-ghost { border-color: var(--border-strong); color: var(--text); background: rgba(255,255,255,0.02); } .btn-ghost:hover { border-color: var(--accent); } .btn-sm { padding: 8px 16px; font-size: 14px; } .btn-block { width: 100%; } /* ── Header shared by both sites ─────────────────────────────────────────*/ header.site { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); /* Opaque enough that content scrolling underneath never shows through as a smear, which is the other thing that reads as "buggy" on a blurred bar. */ background: rgba(10, 13, 18, 0.88); border-bottom: 1px solid var(--border); } @supports (backdrop-filter: blur(1px)) { header.site { background: rgba(10, 13, 18, 0.72); } } .nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; } /* The logo is always a link home — on both sites. */ .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--text); border-radius: var(--radius); padding: 4px 8px; margin-inline-start: -8px; transition: background .12s ease; } .brand:hover { background: rgba(255,255,255,0.04); } .brand img { width: 30px; height: 30px; object-fit: contain; } .nav-links { display: flex; align-items: center; gap: 22px; } .nav-links a { color: var(--muted); font-size: 14.5px; font-weight: 500; } .nav-links a:hover { color: var(--text); } /* ── Mobile navigation ───────────────────────────────────────────────────*/ /* The hamburger only exists on small screens; the drawer slides under the header so the header itself never moves. */ /* `hide-sm` thins out the horizontal bar on small screens; inside the open drawer it is overridden, because that is where those links live. */ @media (max-width: 860px) { .hide-sm { display: none !important; } } .navtoggle { display: none; width: 42px; height: 42px; flex: 0 0 42px; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: var(--radius); background: rgba(255,255,255,.03); color: var(--text); cursor: pointer; } .navtoggle span, .navtoggle span::before, .navtoggle span::after { content: ""; display: block; width: 17px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s ease, opacity .18s ease; } .navtoggle span { position: relative; } .navtoggle span::before { position: absolute; top: -6px; } .navtoggle span::after { position: absolute; top: 6px; } .navtoggle[aria-expanded="true"] span { background: transparent; } .navtoggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); } .navtoggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 860px) { .navtoggle { display: inline-flex; } /* Links move into a drawer that pushes nothing and moves nothing. */ .nav-links { position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 18px 16px; /* Fully opaque. A translucent drawer lets the page show through its own menu, which reads as a rendering fault rather than a design. */ background: var(--bg); border-bottom: 1px solid var(--border-strong); box-shadow: 0 24px 50px -20px rgba(0,0,0,.95); max-height: calc(100dvh - 64px); overflow-y: auto; } .nav-links[data-open="false"] { display: none; } /* The drawer is exactly where these links belong, so `hide-sm` — which exists to thin out a cramped horizontal bar — must not apply inside it. */ .nav-links > a.hide-sm { display: block !important; } .nav-links > a { padding: 12px 4px; font-size: 16px; border-bottom: 1px solid var(--border); } .nav-links > a:last-of-type { border-bottom: 0; } /* The account/CTA slot stacks its buttons full-width. */ .nav-links > span { display: flex !important; flex-direction: column; gap: 8px; margin-top: 8px; } .nav-links .btn { width: 100%; } .nav { position: relative; } .acct { width: 100%; } .acct-btn { width: 100%; justify-content: flex-start; } .acct-menu { position: static; width: auto; margin-top: 8px; box-shadow: none; } } /* Back link — small, quiet, always in the same place. */ .backlink { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; padding: 6px 2px; } .backlink:hover { color: var(--text); } /* ── The signed-in avatar menu ───────────────────────────────────────────*/ .acct { position: relative; } .acct-btn { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(255,255,255,0.03); color: var(--text); cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; } .acct-btn:hover { border-color: var(--accent); } .avatar { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--accent); color: var(--accent-contrast); text-transform: uppercase; } .acct-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 10px); z-index: 50; width: 290px; padding: 8px; border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: var(--surface); box-shadow: 0 24px 60px -20px rgba(0,0,0,.75); } .acct-menu[hidden] { display: none; } .acct-menu .who { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .acct-menu .who b { display: block; font-size: 15px; } .acct-menu .who span { color: var(--dim); font-size: 13px; word-break: break-all; } .acct-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--radius); background: none; color: var(--text); font: inherit; font-size: 14.5px; text-align: start; cursor: pointer; } .acct-item:hover { background: rgba(255,255,255,0.05); } .acct-item small { color: var(--dim); font-size: 12.5px; margin-inline-start: auto; } .acct-sep { height: 1px; background: var(--border); margin: 6px 4px; } /* ── Cards, forms, chips ─────────────────────────────────────────────────*/ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px; } .field { display: block; margin-bottom: 14px; } .field > span { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .input { width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: rgba(255,255,255,0.03); color: var(--text); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--accent-soft); color: var(--accent-strong); } .chip-ok { background: rgba(74,222,128,.14); color: var(--ok); } .chip-dim { background: rgba(148,163,184,.12); color: var(--muted); } .msg { font-size: 14px; margin: 10px 0 0; min-height: 20px; } .msg.err { color: var(--danger); } .msg.ok { color: var(--ok); } .muted { color: var(--muted); } .dim { color: var(--dim); } .center { text-align: center; } footer.site { border-top: 1px solid var(--border); margin-top: 40px; padding: 26px 0; color: var(--dim); font-size: 13.5px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } footer.site a { color: var(--muted); } footer.site a:hover { color: var(--text); } /* ── Phones ──────────────────────────────────────────────────────────────*/ @media (max-width: 620px) { .wrap { padding: 0 16px; } .brand { font-size: 18px; } .brand img { width: 26px; height: 26px; } /* Anything that could scroll the page sideways is contained instead. */ img, video, canvas, svg { max-width: 100%; height: auto; } pre, code.key { overflow-x: auto; } .card { padding: 18px; border-radius: var(--radius-lg); } .btn { padding: 12px 18px; font-size: 15px; } /* Comfortable tap targets — 44px is the accessibility floor. */ .btn, .acct-item, .navtoggle { min-height: 44px; } .input { font-size: 16px; } /* 16px stops iOS zooming the page on focus */ footer.site { flex-direction: column; gap: 8px; text-align: center; } .aura { opacity: .3; } .aura1 { width: 300px; height: 300px; } .aura2 { width: 260px; height: 260px; } } /* Respect a user who has asked for less motion. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }