/* REVR Documentation Site — theme Dark-mode token values are copied directly from public-listings/revr-home.html's :root block (--brand/--brand-hover/--accent/--ink/--mid/--paper/--bg/--border/ --paper-2) so this site reads as the same product family. Light mode is a new, matching palette (this site defaults to light, same as the main CRM app). Toggle uses the same convention as the rest of the platform: a `dark-mode` class on , persisted under the SAME localStorage key the CRM app uses (`revr-dark-mode`, '1'/'0') -- so a person who's already switched the CRM to dark mode in this browser sees the docs site open in dark mode too, and vice versa. This is a fully separate static repo (siloing rule) so the key is duplicated here on purpose, not imported -- see docs.js. */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root{ --brand:#3B4FC4; --brand-hover:#2E3FA0; --accent:#18E9D9; --accent-ink:#0E7A70; --ink:#171A2B; --mid:#5B6472; --paper:#FFFFFF; --bg:#F7F8FC; --border:#E1E4EE; --paper-2:#F0F2FA; --code-bg:#EEF0F8; --warn-bg:#FFF7E6; --warn-border:#F0D48A; } body.dark-mode{ --ink:#E7EEF5; --mid:#8A97A5; --paper:#1A1A38; --bg:#14142B; --border:#333E5A; --paper-2:#20204A; --code-bg:#20204A; --warn-bg:#2A2410; --warn-border:#4A3E12; } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.6; transition:background .15s ease,color .15s ease; } a{color:var(--brand);text-decoration:none;} body.dark-mode a{color:var(--accent);} a:hover{text-decoration:underline;} h1,h2,h3,h4,.display{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.01em;line-height:1.25;} code,.mono{font-family:'JetBrains Mono',monospace;font-size:0.88em;} code{background:var(--code-bg);padding:0.1em 0.4em;border-radius:4px;} pre{background:var(--code-bg);padding:0.9rem 1rem;border-radius:8px;overflow-x:auto;margin:0.9rem 0;} pre code{background:none;padding:0;} /* ---------- layout shell ---------- */ .site-header{ position:sticky;top:0;z-index:60; display:flex;align-items:center;justify-content:space-between; height:64px;padding:0 1.25rem; background:rgba(var(--paper-rgb,255,255,255),0.9); background:var(--paper);border-bottom:1px solid var(--border); backdrop-filter:blur(10px); } .site-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;} .site-logo-mark{ width:30px;height:30px;border-radius:8px; background:linear-gradient(135deg,var(--brand),var(--accent)); display:flex;align-items:center;justify-content:center; font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.85rem;color:#0c0c1e; } .header-right{display:flex;align-items:center;gap:0.75rem;} .theme-toggle{ background:none;border:1px solid var(--border);border-radius:7px; width:36px;height:36px;cursor:pointer;color:var(--ink);font-size:1rem; display:flex;align-items:center;justify-content:center; } .theme-toggle:hover{border-color:var(--accent);} .back-to-app{ font-size:0.85rem;color:var(--mid);border:1px solid var(--border); border-radius:7px;padding:0.4rem 0.8rem; } .back-to-app:hover{color:var(--ink);text-decoration:none;border-color:var(--brand);} .site-body{display:flex;max-width:1320px;margin:0 auto;min-height:calc(100vh - 64px);} /* ---------- left nav ---------- */ .site-nav{ width:270px;flex:0 0 270px;border-right:1px solid var(--border); padding:1.25rem 1rem 3rem;position:sticky;top:64px; height:calc(100vh - 64px);overflow-y:auto; } .nav-search{ width:100%;padding:0.5rem 0.7rem;border:1px solid var(--border);border-radius:7px; background:var(--paper-2);color:var(--ink);font-size:0.85rem;margin-bottom:1.1rem; } .nav-search:focus{outline:none;border-color:var(--brand);} #navSearchResults{margin-bottom:1rem;} #navSearchResults .search-hit{ display:block;padding:0.45rem 0.6rem;border-radius:6px;font-size:0.82rem; } #navSearchResults .search-hit:hover{background:var(--paper-2);} #navSearchResults .search-hit .hit-section{display:block;font-size:0.7rem;color:var(--mid);text-transform:uppercase;letter-spacing:0.04em;} .nav-section-title{ font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--mid); font-weight:700;margin:1.1rem 0 0.4rem; } .nav-section-title:first-child{margin-top:0;} .site-nav ul{list-style:none;} .site-nav li a{ display:block;padding:0.38rem 0.6rem;border-radius:6px;font-size:0.86rem;color:var(--ink); } .site-nav li a:hover{background:var(--paper-2);text-decoration:none;} .site-nav li a.active{background:var(--paper-2);color:var(--brand);font-weight:600;} body.dark-mode .site-nav li a.active{color:var(--accent);} /* ---------- main content ---------- */ .site-main{flex:1;min-width:0;padding:2rem 2.5rem 4rem;} .breadcrumbs{font-size:0.8rem;color:var(--mid);margin-bottom:1rem;} .breadcrumbs a{color:var(--mid);} .breadcrumbs a:hover{color:var(--brand);} .page-content h1{font-size:1.9rem;margin-bottom:0.4rem;} .page-content h2{font-size:1.35rem;margin:1.8rem 0 0.7rem;padding-top:0.4rem;border-top:1px solid var(--border);} .page-content h2:first-of-type{border-top:none;padding-top:0;} .page-content h3{font-size:1.08rem;margin:1.3rem 0 0.5rem;} .page-content p{margin:0.7rem 0;} .page-content ul,.page-content ol{margin:0.6rem 0 0.9rem 1.4rem;} .page-content li{margin:0.3rem 0;} .page-content blockquote{ border-left:3px solid var(--accent);background:var(--paper-2); padding:0.7rem 1rem;border-radius:0 6px 6px 0;margin:0.9rem 0;color:var(--mid); } .screenshot-placeholder{ border:1.5px dashed var(--border);border-radius:8px;background:var(--paper-2); padding:2.2rem 1rem;text-align:center;color:var(--mid);font-size:0.85rem;margin:1rem 0; } .screenshot-placeholder .mono{display:block;margin-top:0.3rem;font-size:0.72rem;} .troubleshooting{ margin-top:2rem;padding:1rem 1.2rem;border-radius:8px; background:var(--warn-bg);border:1px solid var(--warn-border); } .troubleshooting h2{border-top:none;padding-top:0;margin-top:0;} .on-screen-cue{ display:inline-block;font-family:'JetBrains Mono',monospace;font-size:0.7rem; color:var(--accent-ink);background:rgba(24,233,217,0.12);border:1px solid rgba(24,233,217,0.35); border-radius:4px;padding:0.1rem 0.45rem;margin-left:0.5rem;vertical-align:middle; } body.dark-mode .on-screen-cue{color:var(--accent);} .video-embed-placeholder{ margin-top:2rem;padding:1rem 1.2rem;border:1px dashed var(--border);border-radius:8px; color:var(--mid);font-size:0.82rem; } .page-nav{ display:flex;justify-content:space-between;gap:1rem;margin-top:2.5rem; padding-top:1.2rem;border-top:1px solid var(--border); } .page-nav a{ flex:1;border:1px solid var(--border);border-radius:8px;padding:0.7rem 0.9rem; font-size:0.85rem;color:var(--ink); } .page-nav a:hover{border-color:var(--brand);text-decoration:none;} .page-nav .dir{display:block;font-size:0.68rem;text-transform:uppercase;color:var(--mid);letter-spacing:0.04em;} .page-nav .next{text-align:right;} @media (max-width:900px){ .site-nav{ position:fixed;left:0;top:64px;bottom:0;background:var(--paper);z-index:55; transform:translateX(-100%);transition:transform .18s ease;width:80vw;max-width:320px; box-shadow:2px 0 16px rgba(0,0,0,0.15); } .site-nav.open{transform:translateX(0);} .nav-toggle{display:flex;} .site-main{padding:1.5rem 1.25rem 3rem;} } .nav-toggle{ display:none;background:none;border:1px solid var(--border);border-radius:7px; width:36px;height:36px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink); }