/* * Reachform OS visual overrides for Puter. * * This file is loaded INTO Puter's HTML by an nginx sub_filter that * injects a `` * tag at the end of . Because we're layered on top of Puter's * own /css/style.css and /css/theme.css, every rule here either rides * on standard cascade weight (later in the document wins) or uses * `!important` for the few cases where Puter sets things via inline * style at runtime. * * Goal: take the upstream alpha Puter desktop and give it a plausible * Reachform skin without forking the codebase. We touch: * 1. The CSS custom properties Puter defines on :root (hues, alphas). * 2. The login/signup screens — replace the logo and headline copy. * 3. Public-facing strings (Puter Pro upsells, "Get the Puter desktop * app" banners, Puter logo on About) hidden via display:none. * 4. Polished taskbar so it reads like the Reachform OS dock. * * Anything Puter renders dynamically that we can't catch from CSS is * handled separately by `nginx sub_filter` rewrites in the puter * site config (titles, meta tags, etc.). */ /* ── 1. Brand palette ────────────────────────────────────────────── * Puter exposes its theme as HSL components on :root so users can * pick a hue at runtime. We pin them to a Reachform-friendly cool * neutral with a subtle indigo lift; the taskbar/window-head colors * derive from these so the whole shell shifts in one go. */ :root { /* Near-black with a hint of cool blue, matches /os mockups. */ --primary-hue: 222; --primary-saturation: 18%; --primary-lightness: 12%; --primary-alpha: 1; /* The translucent dock — a touch lighter than default for the * "frosted glass" look the Reachform OS reference uses. */ --taskbar-alpha: 0.55; } /* ── 2. Reachform brand watermark on the login/signup screens ────── * Puter shows "Puter" wordmark + tagline on the auth modal. Hide the * default brand block and inject ours via ::before on the form * container. We use the Reachform logo hosted on reachform.app so * we don't need to ship binary assets in this CSS file. */ .login-c .puter-logo, .signup-c .puter-logo, .login-c .terms, .signup-c .terms { display: none !important; } .login-c::before, .signup-c::before { content: ""; display: block; width: 220px; height: 56px; margin: 0 auto 18px auto; background-image: url("https://reachform.app/brand/reachform-logo.png"); background-repeat: no-repeat; background-position: center; background-size: contain; } .login-c h2, .signup-c h2 { font-weight: 600 !important; letter-spacing: -0.01em !important; } /* Tighten the auth card so it reads like a Reachform sheet. */ .login-c .form, .signup-c .form { border-radius: 18px !important; box-shadow: 0 24px 60px -30px rgba(15, 23, 42, 0.45) !important; } /* ── 3. Hide Puter-specific upsells and external CTAs ───────────── * The alpha image still ships pointers to puter.com pricing and the * "Download Puter Desktop" promo. Those don't apply to Reachform OS. */ [href*="puter.com/pricing" i], [href*="puter.com/download" i], [href*="puter.com/blog" i], [href*="puter.com/help" i], .puter-pro-banner, .refer-banner, .upgrade-button, .upgrade-link { display: none !important; } /* ── 4. Replace Puter's bottom taskbar with a top-center dock ───── * The Reachform OS reference puts the app launcher at the top of * the screen as a small glass pill (Sheets, Home, LinkedIn, ...). * Puter's stock taskbar sits at the bottom and contains its own * Apps, so we hide the entire .taskbar and let reachform-overlay.js * mount our own .rf-topdock at the top. The bottom of the screen * is reserved for the rf-bottom row (people · Ask · you). */ .taskbar, .taskbar-active-devs, .taskbar-sortable, .active-taskbar-indicator, #clock { display: none !important; } /* ── 5. Window chrome ───────────────────────────────────────────── * Soften the window header gradient. Puter's default is a flat * dark bar; we go with a subtle vertical gradient so windows feel * a touch more current. */ .window-head { background: linear-gradient( 180deg, hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 4%)) 0%, var(--primary-color) 100% ) !important; } /* ── 6. Selection rectangle on the desktop ──────────────────────── * A barely-perceptible Reachform-ink outline when users marquee- * select files on the desktop. Defaults to a high-contrast blue * which fights the Reachform palette. */ .selection-box { background-color: rgba(91, 108, 255, 0.10) !important; border: 1px solid rgba(91, 108, 255, 0.55) !important; } /* ── 7. Faux brand strip on the about/help screens ──────────────── * If Puter shows "Puter version x.y.z. Made with love..." we keep * the version number but rebrand the heading. The exact selector * here will likely be off for one or two future Puter releases — * that's fine, it just means the text falls back to upstream. */ .about-puter h1, .about-puter h2:first-of-type { font-size: 0 !important; /* hide the original */ } .about-puter h1::after, .about-puter h2:first-of-type::after { content: "Reachform OS"; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--primary-color); } /* ── 8. Hide upstream Puter buttons we don't surface ────────────── * Puter ships a top-right toolbar with: Puter logo, refer-a-friend, * GitHub star, fullscreen, QR launch, search, profile. For Reachform * OS we only want the profile menu (and only via our own "you" chip * at the bottom-right). Hide the rest so the top of the screen is * empty save for our automation rail. */ .toolbar .toolbar-puter-logo, .toolbar .refer-btn, .toolbar .qr-btn, .toolbar .fullscreen-btn, .toolbar .search-btn, .toolbar a.toolbar-btn[href*="github.com"], .toolbar .user-options-create-account-btn { display: none !important; } /* Puter pins the Trash icon to the top-left of the desktop. The * Reachform mockups don't show one — files are managed from the * Files app + the Workspace canvas, so the desktop stays clean. * Trash items are addressed by data-path ending in /Trash. */ .desktop .item[data-path$="/Trash" i], .desktop .item[data-path$="/trash" i] { display: none !important; } /* Soften the toolbar background so it disappears against the * scenic wallpaper — only the right-aligned profile/fullscreen * sit visible. */ .toolbar { background: transparent !important; border-bottom: 0 !important; box-shadow: none !important; } /* The taskbar is hidden via the rule in section 4. Anything else * Puter mounts in the dock area (popups, hover-previews) inherits * display:none from its container so we don't need to enumerate. */ /* (Section 10 — top-left automation rail — removed at user request. * The Reachform OS chrome is now: top dock, bottom row, and * draggable Reachform-windows for every app.) */ /* ── 11. Bottom chrome: people · Ask · you ──────────────────────── * Mounted by reachform-overlay.js. Pinned 16px from the floor so it * sits just below the dock pill. */ .rf-bottom { position: fixed; left: 0; right: 0; bottom: 16px; z-index: 8500; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; pointer-events: none; /* children re-enable */ } .rf-bottom > * { pointer-events: auto; } /* People pill (left). Three overlapping circles + one-line caption. */ .rf-people { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; background: rgba(255, 255, 255, 0.66); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 999px; backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); box-shadow: 0 10px 28px -14px rgba(15, 23, 42, 0.35); cursor: pointer; color: #1e293b; font: 500 12.5px/1 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.01em; transition: transform 120ms ease, box-shadow 120ms ease; } .rf-people:hover { transform: translateY(-1px); box-shadow: 0 14px 36px -16px rgba(15, 23, 42, 0.45); } /* The .rf-people pill was removed from the OS chrome at user * request. The selectors stay below as a defensive `display: none` * in case any cached overlay JS tries to mount it. */ .rf-people, .rf-people__avatar, .rf-people__caption { display: none !important; } .rf-people__caption { white-space: nowrap; } /* Ask bar (center). Glass pill with text input + magenta submit. */ .rf-ask { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; width: min(420px, 60vw); padding: 6px 6px 6px 18px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 999px; backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); box-shadow: 0 14px 36px -16px rgba(15, 23, 42, 0.35); } /* * Ask input. Puter ships a global `input:focus { border-color: ...; * box-shadow: 0 0 0 2px ... }` rule that paints a heavy blue ring * the moment the input gains focus. We override every focus state * (`:focus`, `:focus-visible`, `:focus-within` on the parent pill, * and the `-webkit-focus-ring-color` user-agent style) so the input * is invisible chrome inside the glass pill, exactly like the * mockup. `!important` is required here — Puter's selectors are * higher-specificity (`body input:focus`). */ .rf-ask__input, .rf-ask__input:focus, .rf-ask__input:focus-visible, .rf-ask__input:active { flex: 1; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; -webkit-appearance: none !important; appearance: none !important; -webkit-tap-highlight-color: transparent !important; font: 500 14px/1 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color: #1e293b; padding: 8px 0; } /* Belt-and-braces: the Ask pill itself never gets a focus ring, * even when its child input is focused. Some browsers paint * `:focus-within` differently and Puter's reset enables that. */ .rf-ask, .rf-ask:focus, .rf-ask:focus-within { outline: 0 !important; box-shadow: 0 14px 36px -16px rgba(15, 23, 42, 0.35) !important; } .rf-ask__input::placeholder { color: rgba(15, 23, 42, 0.45); } .rf-ask__submit { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #ec4899; /* Reachform-magenta accent (matches mockup). */ cursor: pointer; position: relative; box-shadow: 0 6px 14px -6px rgba(236, 72, 153, 0.6); transition: transform 120ms ease, box-shadow 120ms ease; } .rf-ask__submit:hover { transform: scale(1.04); box-shadow: 0 10px 22px -8px rgba(236, 72, 153, 0.7); } /* Plane/send glyph drawn with a triangle — keeps us asset-free. */ .rf-ask__submit::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: translateX(2px); } /* "You" chip (right). Initial bubble that re-opens Puter's menu. */ .rf-you { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); background: linear-gradient(135deg, #4f46e5, #312e81); color: #fff; font: 700 15px/1 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.45); display: inline-flex; align-items: center; justify-content: center; } /* The initial is set via JS as text content (see overlay), so we * don't render anything via ::after; left over from the early * mock and removed to avoid a stale "J" if JS is slow to run. */ /* The people pill in the mockup is just two overlapping avatars — * the descriptive caption sits in a tooltip on hover, not visible * by default. Hide the caption + drop the third avatar to match. */ .rf-people { padding: 4px; background: rgba(255, 255, 255, 0.78); border-radius: 999px; } .rf-people__caption, .rf-people__avatar--c { display: none !important; } .rf-people__avatar { width: 26px; height: 26px; border-width: 1.5px; } /* ── 12. Wallpaper override — Reachform pink/mauve mountain look ── * Puter sets the wallpaper inline on `.desktop`. We paint the photo * on `html, body` so it always covers the full viewport regardless * of how tall Puter renders `.desktop` — previously a non-full-height * `.desktop` left a band of the gradient fallback showing along the * bottom (next to the Ask bar). The fixed attachment also prevents * the image from scrolling away when a tall window is opened. * * Drop a wallpaper file at /var/www/puter/customize/wallpaper.jpg * (nginx serves it as /wallpaper.jpg). The gradient stays as a * fallback if the file is missing or slow to load. */ html, body { min-height: 100vh !important; background-image: url("/wallpaper.jpg"), linear-gradient( 180deg, #f4d6dc 0%, #ebbacf 22%, #d8a4c1 48%, #b894b6 72%, #8e8ab2 100% ) !important; background-size: cover, cover !important; background-position: center center, center !important; background-repeat: no-repeat, no-repeat !important; background-attachment: fixed, fixed !important; background-color: #d4b1c4 !important; } /* The desktop element itself becomes transparent so the html/body * wallpaper shows through without being doubled. Puter's inline * `style="background-image: …"` on .desktop is overridden by these * !important declarations. */ .desktop { background: transparent !important; } /* ── 13. Top-center mini dock (Reachform launcher) ──────────────── * Mounted by reachform-overlay.js. Replaces Puter's bottom dock. * Six brand-coloured app tiles + a "+" button to add more apps. */ .rf-topdock { position: fixed; /* 42px gives a clean macOS-style breathing room above the dock * on a standard 16:9 viewport while still leaving headroom for * the wallpaper's snowy peaks above. Was 18px which clipped the * dock visually against the top of the screen. */ top: 42px; left: 50%; transform: translateX(-50%); z-index: 9000; display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 18px; background: rgba(20, 24, 32, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 14px 30px -12px rgba(15, 23, 42, 0.45); } .rf-topdock__icon { width: 36px; height: 36px; border-radius: 10px; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.45); transition: transform 100ms ease, box-shadow 100ms ease; padding: 0; overflow: hidden; } .rf-topdock__icon:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.55); } .rf-topdock__icon svg { width: 22px; height: 22px; display: block; } /* Per-app brand colours, tuned to the mockup palette. */ .rf-topdock__icon--sheets { background: linear-gradient(135deg, #34a853, #1e7e34); } .rf-topdock__icon--home { background: linear-gradient(135deg, #f97316, #c64f2a); } .rf-topdock__icon--linkedin { background: linear-gradient(135deg, #0a66c2, #0a4a8a); } .rf-topdock__icon--spotify { background: linear-gradient(135deg, #1ed760, #0f9d4a); } .rf-topdock__icon--chrome { background: #fff; } /* Reachform Engine — uses the brand R-mark on a clean white tile so * the black mark reads cleanly against the dark dock pill. The image * itself sits inside `.rf-topdock__icon` and is sized by the * `.rf-topdock__img` rule below so it fills the tile and inherits * its rounded corners. */ .rf-topdock__icon--openai { background: #fff; /* Subtle ring so the white tile separates from the dock backdrop. */ box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(15, 23, 42, 0.08); } /* Raster icon (currently only Reachform Engine). The tile already * has a 10px radius + overflow:hidden, so the image clips to match. * We pad slightly so the R doesn't crowd the tile edge. */ .rf-topdock__img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; display: block; /* Match the tile's radius so the asset never looks square-cornered * if the surrounding overflow:hidden is ever overridden by Puter. */ border-radius: 8px; } .rf-topdock__icon--add { background: rgba(15, 23, 42, 0.92); color: rgba(255, 255, 255, 0.95); font: 700 22px/1 "Inter", system-ui, -apple-system, sans-serif; } /* ── 14. In-OS app windows (Reachform window manager) ───────────── * Mounted by reachform-overlay.js. Each dock app opens a draggable * Reachform-styled window with an iframe to a Reachform embeddable * route (or Reachform's agent browser proxy when the third-party * site refuses framing). We deliberately don't reuse Puter's * UIWindow API — keeping the chrome fully Reachform-native is * easier here than skinning Puter's window-frame on every release. */ .rf-window { position: fixed; /* The window starts close to fullscreen so iframes — Reachform's * own pages and the agent browser in particular — get viewport * height and don't crop their cookie banner / chat panes. The * top inset accounts for the OS dock at the top of the screen. */ top: 70px; left: 3vw; width: 94vw; height: calc(100vh - 160px); background: #0f1115; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 36px 80px -28px rgba(0, 0, 0, 0.65), 0 12px 24px -12px rgba(0, 0, 0, 0.4); overflow: hidden; display: flex; flex-direction: column; z-index: 9100; color: #f8fafc; font: 500 13px/1.4 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } /* Maximised state — true fullscreen window over the OS desktop. */ .rf-window--max { top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; border-radius: 0 !important; border: 0 !important; } .rf-window__head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px 9px 16px; background: linear-gradient(180deg, #1c2230 0%, #151a24 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.08); cursor: grab; user-select: none; flex-shrink: 0; } .rf-window__head:active { cursor: grabbing; } .rf-window__title { font-weight: 600; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.92); font-size: 13px; } .rf-window__actions { display: inline-flex; align-items: center; gap: 6px; } .rf-window__btn { width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); font: 600 13px/1 "Inter", system-ui, sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background 100ms ease; } .rf-window__btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; } .rf-window__close { /* Inherits .rf-window__btn shape; the red hover is reserved for * the destructive action so users can identify it at a glance. */ } .rf-window__close:hover { background: #ef4444 !important; color: #fff !important; } .rf-window__body { flex: 1; min-height: 0; background: #fff; position: relative; } .rf-window__frame { border: 0; width: 100%; height: 100%; display: block; background: #fff; } /* On narrow screens, shrink the Ask bar and drop the rail label. */ @media (max-width: 720px) { .rf-ask { width: min(280px, 60vw); } .rf-rail__label { display: none; } .rf-topdock__icon { width: 32px; height: 32px; } }