/* Protocol-style docs chrome — sidebar / header / theme toggle / search bar. Loaded after ui.css so it can override component defaults for the docs shell. Component CSS in ui.css is unaffected. Color scheme: zinc (neutrals) + emerald (accent), per the Tailwind Plus Protocol template. Dark mode is toggled via a `dark` class on ; ./bluestack-protocol.js wires up the toggle and persists choice to localStorage. */ /* ===== Base body ===== */ html { background: var(--proto-bg, #fff); color-scheme: light; } html.dark { background: var(--proto-bg-dark, #18181b); color-scheme: dark; } body.proto-shell { color: rgb(63 63 70); /* zinc-700 */ font-family: 'Inter', 'Nunito Sans', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } html.dark body.proto-shell { color: rgb(161 161 170); /* zinc-400 */ } /* ===== Sidebar ===== */ .proto-sidebar { position: fixed; inset: 0 auto 0 0; width: 18rem; /* 288px = lg:w-72 */ background: rgb(255 255 255); border-right: 1px solid rgb(24 24 27 / 0.1); /* zinc-900/10 */ overflow-y: auto; padding: 1rem 1.5rem 2rem; z-index: 40; display: none; } @media (min-width: 1024px) { .proto-sidebar { display: block; } } @media (min-width: 1280px) { .proto-sidebar { width: 20rem; } /* xl:w-80 */ } html.dark .proto-sidebar { background: rgb(24 24 27); /* zinc-900 */ border-right-color: rgb(255 255 255 / 0.1); } .proto-sidebar-logo { display: flex; align-items: center; gap: 0.625rem; height: 2.5rem; margin-bottom: 0.5rem; } .proto-sidebar-logo .mark { width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; background: linear-gradient(135deg, rgb(52 211 153), rgb(16 185 129)); /* emerald-400 → 500 */ flex-shrink: 0; } .proto-sidebar-logo .word { font-weight: 600; font-size: 1rem; color: rgb(24 24 27); /* zinc-900 */ letter-spacing: -0.01em; } html.dark .proto-sidebar-logo .word { color: rgb(255 255 255); } /* ===== Sidebar navigation ===== */ .proto-nav { margin-top: 2.5rem; } .proto-nav-group { margin-top: 1.5rem; position: relative; } .proto-nav-group:first-child { margin-top: 0; } .proto-nav-group-title { font-size: 0.75rem; font-weight: 600; color: rgb(24 24 27); /* zinc-900 */ margin-bottom: 0.75rem; } html.dark .proto-nav-group-title { color: rgb(255 255 255); } .proto-nav-list { position: relative; padding-left: 0.5rem; list-style: none; margin: 0; } .proto-nav-list::before { /* Vertical guide line on the left of the nav group */ content: ''; position: absolute; left: 0.5rem; top: 0; bottom: 0; width: 1px; background: rgb(24 24 27 / 0.1); } html.dark .proto-nav-list::before { background: rgb(255 255 255 / 0.05); } .proto-nav-link { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0.75rem 0.25rem 1rem; font-size: 0.875rem; line-height: 1.5rem; color: rgb(82 82 91); /* zinc-600 */ text-decoration: none; transition: color 0.15s ease; position: relative; } .proto-nav-link:hover { color: rgb(24 24 27); /* zinc-900 */ } html.dark .proto-nav-link { color: rgb(161 161 170); /* zinc-400 */ } html.dark .proto-nav-link:hover { color: rgb(255 255 255); } .proto-nav-link.active { color: rgb(24 24 27); } html.dark .proto-nav-link.active { color: rgb(255 255 255); } .proto-nav-link.active::before { /* Emerald vertical bar — sits on top of the gray guide line at left:0 */ content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 1.5rem; background: rgb(16 185 129); /* emerald-500 */ } /* ===== Header (top bar over main area) ===== */ .proto-header { position: fixed; top: 0; right: 0; left: 0; height: 3.5rem; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding: 0 1rem; background: rgb(255 255 255 / 0.85); backdrop-filter: blur(8px); border-bottom: 1px solid rgb(24 24 27 / 0.075); } @media (min-width: 640px) { .proto-header { padding: 0 1.5rem; } } @media (min-width: 1024px) { .proto-header { left: 18rem; padding: 0 2rem; } } @media (min-width: 1280px) { .proto-header { left: 20rem; } } html.dark .proto-header { background: rgb(24 24 27 / 0.8); border-bottom-color: rgb(255 255 255 / 0.075); } /* ===== Search bar ===== */ .proto-search { flex: 1; max-width: 28rem; position: relative; } .proto-search input { width: 100%; height: 2.25rem; padding: 0 5rem 0 2.5rem; border: 1px solid rgb(24 24 27 / 0.1); border-radius: 0.5rem; background: rgb(244 244 245); /* zinc-100 */ color: rgb(24 24 27); font-size: 0.875rem; transition: border-color 0.15s ease, background 0.15s ease; } .proto-search input:focus { outline: none; border-color: rgb(16 185 129); background: rgb(255 255 255); } .proto-search input::placeholder { color: rgb(113 113 122); } html.dark .proto-search input { background: rgb(39 39 42); /* zinc-800 */ border-color: rgb(255 255 255 / 0.1); color: rgb(255 255 255); } html.dark .proto-search input:focus { background: rgb(24 24 27); } .proto-search .icon-search { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: rgb(113 113 122); pointer-events: none; } .proto-search .kbd-hint { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 0.75rem; color: rgb(113 113 122); background: rgb(255 255 255); border: 1px solid rgb(24 24 27 / 0.1); border-radius: 0.25rem; padding: 0.125rem 0.375rem; pointer-events: none; line-height: 1; } html.dark .proto-search .kbd-hint { background: rgb(24 24 27); border-color: rgb(255 255 255 / 0.1); color: rgb(161 161 170); } /* ===== Top-level header nav (right side) ===== */ .proto-top-nav { display: none; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; } @media (min-width: 768px) { .proto-top-nav { display: flex; } } .proto-top-nav a { font-size: 0.875rem; color: rgb(82 82 91); text-decoration: none; transition: color 0.15s ease; } .proto-top-nav a:hover { color: rgb(24 24 27); } html.dark .proto-top-nav a { color: rgb(161 161 170); } html.dark .proto-top-nav a:hover { color: rgb(255 255 255); } .proto-header-divider { display: none; width: 1px; height: 1.25rem; background: rgb(24 24 27 / 0.1); } @media (min-width: 768px) { .proto-header-divider { display: block; } } html.dark .proto-header-divider { background: rgb(255 255 255 / 0.15); } /* ===== Theme toggle ===== */ .proto-theme-toggle { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; background: transparent; border: 0; cursor: pointer; color: rgb(24 24 27); transition: background 0.15s ease; } .proto-theme-toggle:hover { background: rgb(24 24 27 / 0.05); } html.dark .proto-theme-toggle { color: rgb(255 255 255); } html.dark .proto-theme-toggle:hover { background: rgb(255 255 255 / 0.05); } .proto-theme-toggle svg { width: 1.125rem; height: 1.125rem; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; } .proto-theme-toggle .icon-sun { display: block; } .proto-theme-toggle .icon-moon { display: none; } html.dark .proto-theme-toggle .icon-sun { display: none; } html.dark .proto-theme-toggle .icon-moon { display: block; } /* ===== Mobile menu button ===== */ .proto-mobile-toggle { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: transparent; border: 0; cursor: pointer; color: rgb(24 24 27); } @media (min-width: 1024px) { .proto-mobile-toggle { display: none; } } html.dark .proto-mobile-toggle { color: rgb(255 255 255); } /* ===== Sign-in button ===== */ .proto-signin { display: none; padding: 0.375rem 0.875rem; background: rgb(24 24 27); color: rgb(255 255 255); font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; text-decoration: none; transition: background 0.15s ease; } @media (min-width: 416px) { .proto-signin { display: inline-flex; } } .proto-signin:hover { background: rgb(39 39 42); } html.dark .proto-signin { background: rgb(255 255 255); color: rgb(24 24 27); } html.dark .proto-signin:hover { background: rgb(228 228 231); } /* ===== Main content area ===== */ .proto-main-wrapper { min-height: 100vh; padding-top: 3.5rem; } @media (min-width: 1024px) { .proto-main-wrapper { padding-left: 18rem; } } @media (min-width: 1280px) { .proto-main-wrapper { padding-left: 20rem; } } .proto-main { padding: 2rem 1rem; max-width: 56rem; margin: 0 auto; } @media (min-width: 640px) { .proto-main { padding: 2rem 1.5rem; } } @media (min-width: 1024px) { .proto-main { padding: 3rem 2rem; max-width: 64rem; } } .proto-page-title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: rgb(24 24 27); text-transform: capitalize; margin-bottom: 0.5rem; } html.dark .proto-page-title { color: rgb(255 255 255); } .proto-page-subtitle { font-size: 0.875rem; color: rgb(113 113 122); /* zinc-500 */ margin-bottom: 2.5rem; } html.dark .proto-page-subtitle { color: rgb(161 161 170); } /* ===== On this page (right rail) ===== */ .proto-toc { position: fixed; top: 3.5rem; right: 0; bottom: 0; width: 16rem; overflow-y: auto; padding: 2rem 1.5rem; display: none; border-left: 1px solid rgb(24 24 27 / 0.075); } @media (min-width: 1280px) { .proto-toc { display: block; } } html.dark .proto-toc { border-left-color: rgb(255 255 255 / 0.075); } .proto-toc-title { font-size: 0.75rem; font-weight: 600; color: rgb(24 24 27); margin-bottom: 0.75rem; } html.dark .proto-toc-title { color: rgb(255 255 255); } .proto-toc nav a { display: block; font-size: 0.8125rem; line-height: 1.5; color: rgb(113 113 122); text-decoration: none; padding: 0.25rem 0; transition: color 0.15s ease; } .proto-toc nav a:hover { color: rgb(24 24 27); } .proto-toc nav a.active { color: rgb(16 185 129); font-weight: 500; } /* emerald */ html.dark .proto-toc nav a { color: rgb(161 161 170); } html.dark .proto-toc nav a:hover { color: rgb(255 255 255); } @media (min-width: 1280px) { .proto-main-wrapper { padding-right: 16rem; } } /* ===== Mobile sidebar overlay ===== */ .proto-mobile-overlay { position: fixed; inset: 0; background: rgb(24 24 27 / 0.5); z-index: 50; display: none; } .proto-mobile-overlay.active { display: block; } .proto-mobile-sidebar { position: fixed; inset: 0 auto 0 0; width: 18rem; max-width: 80vw; background: rgb(255 255 255); z-index: 60; overflow-y: auto; padding: 1rem 1.5rem 2rem; transform: translateX(-100%); transition: transform 0.2s ease; } .proto-mobile-sidebar.active { transform: translateX(0); } html.dark .proto-mobile-sidebar { background: rgb(24 24 27); }