/* Shared app-shell chrome for the SSR marketing/docs pages — the single source of truth for the icon rail, editor header, and mobile drawer so the home page (home.html/home.css) and the docs page (docs.html/docs.css) can't drift apart. Page-specific note-body styling lives in each page's own CSS, which is loaded *after* this file. Light + dark "note in the editor" palettes mirror the SPA themes (client/src/styles.css). A .dark/.light class on selects one; the no-flash script in each page's sets it (defaulting to dark). */ :root { --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f1f2f5; --fg: #1a1b1e; --muted: #6b7280; --subtle: #9ca3af; --rule: #b6b7be; --accent: #ff5a1f; --accent-soft: #fff1ea; --code-bg: #f1f2f5; --pre-bg: #f7f8fa; --pre-fg: #1a1b1e; --th-bg: #f7f8fa; --editor-bg: #ffffff; --rail-bg: #e9eaef; --rail-fg: #3d3f4a; --rail-muted: #82868f; --rail-active: #dcdde4; /* Syntax highlighting (light) */ --hl-keyword: #cf222e; --hl-string: #116329; --hl-title: #8250df; --hl-type: #0e7490; --hl-comment: #6e7781; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; color-scheme: light; } .dark { --bg: #0a0a0a; --surface: #141414; --surface-2: #1f1f1f; --fg: #f0f0f0; --muted: #888888; --subtle: #555555; --rule: #3b3b40; --accent: #ff5a1f; --accent-soft: #2a1810; --code-bg: #1c1c1c; --pre-bg: #121212; --pre-fg: #e6e6e6; --th-bg: #1c1c1c; --editor-bg: #0a0a0a; --rail-bg: #000000; --rail-fg: #f0f0f0; --rail-muted: #888888; --rail-active: #1f1f1f; /* Syntax highlighting (dark) */ --hl-keyword: #c678dd; --hl-string: #98c379; --hl-title: #61afef; --hl-type: #e5c07b; --hl-comment: #7f848e; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } /* === Brutalist pass: hard square corners everywhere. Overrides every component radius on purpose — squared edges read as structural, not decorative. === */ *, *::before, *::after { border-radius: 0 !important; } html, body { margin: 0; padding: 0; height: 100%; /* Lock the document so only the inner .scroll scrolls. Without this, the app shell's height overflows the (smaller) mobile-Safari visual viewport and the body scrolls too — dragging the fixed header out of view. */ overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---- App shell: icon rail + editor pane (notes panel collapsed) ---- */ /* 100dvh (not 100vh) so the shell fits the *visible* viewport on mobile Safari — the URL bar's area isn't counted, so the header isn't pushed off-screen. */ .app { display: flex; height: 100dvh; overflow: hidden; } .rail { width: 60px; flex: 0 0 60px; background: var(--rail-bg); border-right: 1px solid var(--rule); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 0; } .rail .logo { width: 36px; height: 36px; margin-bottom: 8px; border-radius: 12px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; letter-spacing: -0.02em; text-decoration: none; } .rail .ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--rail-muted); cursor: pointer; text-decoration: none; transition: background 120ms ease, color 120ms ease; } .rail .ico:hover { background: var(--rail-active); color: var(--rail-fg); text-decoration: none; } .rail .ico.active { background: var(--rail-active); color: var(--rail-fg); } /* Theme toggle button: reset native chrome; show the icon for the action it performs (moon in light -> go dark, sun in dark -> go light). */ button.ico { border: 0; background: transparent; padding: 0; font: inherit; -webkit-appearance: none; appearance: none; } .theme-toggle .sun { display: none; } .theme-toggle .moon { display: block; } .dark .theme-toggle .sun { display: block; } .dark .theme-toggle .moon { display: none; } .rail .spacer { margin-top: auto; } .rail .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--rail-active); color: var(--rail-fg); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: filter 120ms ease; } .rail a.avatar:hover { background: var(--fg); color: var(--bg); text-decoration: none; } .editor { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--editor-bg); } .editor-head { height: 56px; flex: 0 0 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--rule); } .crumb { display: flex; align-items: center; gap: 8px; min-width: 0; } .tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 2px solid currentColor; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #2f9e44; background: transparent; } .tag .dot { width: 7px; height: 7px; background: currentColor; } .crumb .chev { color: var(--subtle); display: inline-flex; } .crumb .crumb-title { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .publish { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 12px; border: 2px solid var(--fg); background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; transition: background 80ms ease, color 80ms ease; } .publish:hover { background: var(--fg); color: var(--bg); text-decoration: none; } .scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .col { max-width: 720px; margin: 0 auto; padding: 40px 24px 0; } /* ---- Mobile nav (mirrors the SPA's MobileNav, App.jsx) ---- Below 767px the icon rail is replaced by a floating hamburger that opens a slide-in drawer, exactly like the app. Hidden (display:none) on desktop. */ .menu-btn { display: none; } .drawer, .drawer-backdrop { display: none; } @media (max-width: 767px) { .rail { display: none; } /* Clear the floating hamburger (top-left) so the breadcrumb sits beside it. */ .editor-head { padding-left: 64px; } .menu-btn { position: fixed; z-index: 40; left: 12px; top: calc(10px + env(safe-area-inset-top)); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--fg); background: var(--surface); color: var(--fg); cursor: pointer; transition: background 80ms ease, color 80ms ease; } .menu-btn:hover { background: var(--fg); color: var(--bg); } .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 200ms ease; } .drawer-backdrop.open { opacity: 1; pointer-events: auto; } .drawer { display: flex; flex-direction: column; position: fixed; left: 0; top: 0; z-index: 50; height: 100dvh; width: 86vw; max-width: 360px; background: var(--bg); border-right: 2px solid var(--fg); transform: translateX(-100%); transition: transform 200ms ease-out; } .drawer.open { transform: translateX(0); } } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: calc(20px + env(safe-area-inset-top)) 20px 16px; } .drawer .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .drawer .brand:hover { text-decoration: none; } .drawer .brand .badge { width: 36px; height: 36px; border-radius: 12px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; letter-spacing: -0.02em; } .drawer .brand .name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); } .drawer-close { width: 36px; height: 36px; border-radius: 8px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .drawer-close:hover { background: var(--surface-2); color: var(--fg); } .drawer-actions { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 16px; } .drawer-new { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; background: var(--accent); color: #fff; padding: 10px 16px; font-size: 14px; font-weight: 600; text-decoration: none; transition: filter 120ms ease; } .drawer-new:hover { background: var(--fg); color: var(--bg); text-decoration: none; } .drawer-search { display: flex; align-items: center; gap: 8px; border: 2px solid var(--fg); background: var(--surface); padding: 10px 12px; font-size: 14px; color: var(--subtle); text-decoration: none; } .drawer-search:hover { text-decoration: none; } .drawer-label { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 8px; } .drawer-label .t { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--subtle); } .drawer-label .c { font-size: 12px; color: var(--subtle); } .drawer-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 12px 12px; } .drawer-list .note-card { display: block; width: 100%; text-align: left; border: 2px solid var(--fg); background: var(--surface); padding: 12px; text-decoration: none; } .drawer-list .note-card:hover { text-decoration: none; box-shadow: 4px 4px 0 var(--fg); } .note-card .nc-title { font-weight: 500; color: var(--fg); } .note-card .nc-preview { margin-top: 4px; font-size: 14px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .note-card .nc-foot { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; } .nc-tag { display: inline-flex; align-items: center; gap: 6px; border: 2px solid currentColor; padding: 1px 7px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #2f9e44; background: transparent; } .nc-tag .dot { width: 7px; height: 7px; background: currentColor; } .note-card .nc-when { font-size: 12px; color: var(--subtle); } .drawer-tools { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--rule); padding: 10px 12px; } .drawer-tool { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: transparent; border-radius: 12px; padding: 8px 0; font-size: 12px; font-weight: 500; color: var(--muted); text-decoration: none; cursor: pointer; font-family: inherit; -webkit-appearance: none; appearance: none; transition: background 120ms ease, color 120ms ease; } .drawer-tool:hover { background: var(--surface-2); color: var(--fg); text-decoration: none; } /* Theme tool label tracks the action it performs, like the rail's icon swap. */ .drawer-tool .lbl-light { display: none; } .drawer-tool .lbl-dark { display: inline; } .dark .drawer-tool .lbl-light { display: inline; } .dark .drawer-tool .lbl-dark { display: none; } .drawer-acct { border-top: 1px solid var(--rule); padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); } .drawer-signin { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 2px solid var(--fg); background: var(--surface); padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--fg); text-decoration: none; transition: border-color 120ms ease, color 120ms ease; } .drawer-signin:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }