/* File: wpmc-bh-docs/assets/css/docs.css */ /* Tokens aligned with wpmc-behavior-and-heatmap themes (brand + surfaces) */ .wpmc-bh-docs { --wpmc-orange: #ffa800; --wpmc-red: #fc432b; --wpmc-purple: #9e2d88; --wpmc-pink: #f43374; --wpmc-radius: 14px; --wpmc-shadow: 0 10px 25px rgba(0,0,0,.12); --wpmc-shadow-soft: 0 6px 18px rgba(0,0,0,.10); --wpmc-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; font-family: var(--wpmc-font); } .wpmc-bh-docs.wpmc-theme-dark { --wpmc-bg: rgba(18,18,18,0.95); --wpmc-bg-alt: rgba(26,26,26,0.95); --wpmc-surface: rgba(18,18,18,0.95); --wpmc-surface-2: rgba(30,30,30,0.95); --wpmc-text: rgba(240,240,240,0.85); --wpmc-text-strong: #f0f0f0; --wpmc-border: rgba(255,255,255,0.10); } .wpmc-bh-docs.wpmc-theme-light { --wpmc-bg: #ffffff; --wpmc-bg-alt: #f6f7fb; --wpmc-surface: #ffffff; --wpmc-surface-2: #fbfbfd; --wpmc-text: rgba(17,17,17,0.78); --wpmc-text-strong: #111111; --wpmc-border: rgba(17,17,17,0.10); } .wpmc-bh-docs { width: 95%; max-width: 1280px; margin: 20px auto; padding: 14px; border-radius: var(--wpmc-radius); background: linear-gradient(135deg, rgba(255,168,0,0.08), rgba(158,45,136,0.08)); } .wpmc-bh-docs__top { display: grid; gap: 10px; margin: 4px 2px 14px; } .wpmc-bh-docs__title { font-weight: 900; color: var(--wpmc-text-strong); font-size: 22px; letter-spacing: 0.2px; } .wpmc-bh-docs__search { position: relative; } .wpmc-bh-docs__search-input { width: 100%; padding: 12px 12px; border-radius: 12px; border: 1px solid var(--wpmc-border); background: var(--wpmc-bg-alt); color: var(--wpmc-text-strong); outline: none; box-shadow: var(--wpmc-shadow-soft); } .wpmc-bh-docs__search-input::placeholder { color: var(--wpmc-text); opacity: .75; } .wpmc-bh-docs__search-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); border-radius: 12px; background: var(--wpmc-bg-alt); border: 1px solid var(--wpmc-border); box-shadow: var(--wpmc-shadow); z-index: 9999; overflow: hidden; } /* Search popover is appended to so it will show even if the page container uses overflow clipping. */ .wpmc-bh-docs__search-popover { position: fixed; border-radius: 12px; background: var(--wpmc-bg-alt); border: 1px solid var(--wpmc-border); box-shadow: var(--wpmc-shadow); z-index: 999999; overflow: auto; max-height: min(320px, calc(100vh - 140px)); } .wpmc-bh-docs__search-results ul, .wpmc-bh-docs__search-popover ul { list-style: none; padding: 0; margin: 0; } .wpmc-bh-docs__search-results a, .wpmc-bh-docs__search-popover a { display: block; padding: 10px 12px; text-decoration: none; color: var(--wpmc-text); border-top: 1px solid var(--wpmc-border); } .wpmc-bh-docs__search-results li:first-child a, .wpmc-bh-docs__search-popover li:first-child a { border-top: 0; } .wpmc-bh-docs__search-results a:hover, .wpmc-bh-docs__search-popover a:hover { background: rgba(255,168,0,0.08); color: var(--wpmc-text-strong); } .wpmc-bh-docs__search-empty { padding: 10px 12px; color: var(--wpmc-text); } .wpmc-bh-docs__layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; } .wpmc-bh-docs__sidebar, .wpmc-bh-docs__content { border-radius: calc(var(--wpmc-radius) - 4px); background: var(--wpmc-bg-alt); border: 1px solid var(--wpmc-border); box-shadow: var(--wpmc-shadow-soft); overflow: hidden; } /* Invisible navigation: we keep real page loads (stable & SEO-friendly), but cover the right column with a same-surface overlay to avoid flicker. */ .wpmc-bh-docs__content { position: relative; } .wpmc-bh-docs__content::after { content: ''; position: absolute; inset: 0; background: var(--wpmc-bg-alt); opacity: 0; pointer-events: none; z-index: 5; } html.wpmc-bh-docs-nav .wpmc-bh-docs__content::after, body.wpmc-bh-docs-nav .wpmc-bh-docs__content::after { opacity: 1; } .wpmc-bh-docs__sidebar-inner { padding: 14px; } .wpmc-bh-docs__sidebar-title { font-weight: 800; color: var(--wpmc-text-strong); font-size: 18px; letter-spacing: 0.2px; padding: 8px 10px 12px; border-bottom: 1px solid var(--wpmc-border); margin-bottom: 10px; } .wpmc-bh-docs__tree { display: grid; gap: 10px; } .wpmc-bh-docs__cat { border: 1px solid var(--wpmc-border); border-radius: 12px; background: var(--wpmc-surface-2); overflow: hidden; } .wpmc-bh-docs__cat-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; background: transparent; border: 0; cursor: pointer; color: var(--wpmc-text-strong); font-weight: 800; text-align: left; } .wpmc-bh-docs__chev { width: 10px; height: 10px; border-right: 2px solid var(--wpmc-text); border-bottom: 2px solid var(--wpmc-text); transform: rotate(45deg); transition: transform .2s ease; } .wpmc-bh-docs__cat-btn[aria-expanded="true"] .wpmc-bh-docs__chev { transform: rotate(225deg); } .wpmc-bh-docs__cat-panel { padding: 8px 8px 10px; } .wpmc-bh-docs__doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .wpmc-bh-docs__doc-item { border-radius: 10px; } .wpmc-bh-docs__doc-link { display: block; padding: 10px 10px; border-radius: 10px; text-decoration: none; color: var(--wpmc-text); border: 1px solid transparent; background: rgba(255,255,255,0.0); transition: transform .08s ease, background .2s ease, border-color .2s ease; } .wpmc-bh-docs__doc-item.is-active .wpmc-bh-docs__doc-link { color: var(--wpmc-text-strong); border-color: rgba(255,168,0,0.55); background: linear-gradient(135deg, rgba(255,168,0,0.20), rgba(252,67,43,0.10)); } .wpmc-bh-docs__doc-link:hover { border-color: rgba(255,168,0,0.30); background: rgba(255,168,0,0.08); } .wpmc-bh-docs__content { padding: 22px 22px 26px; } .wpmc-bh-docs__h1 { margin: 0 0 14px; font-size: 28px; line-height: 1.2; color: var(--wpmc-text-strong); font-weight: 900; } .wpmc-bh-docs__article { color: var(--wpmc-text); font-size: 16px; line-height: 1.7; } .wpmc-bh-docs__article h2, .wpmc-bh-docs__article h3, .wpmc-bh-docs__article h4 { color: var(--wpmc-text-strong); margin-top: 22px; } .wpmc-bh-docs__article code, .wpmc-bh-docs__article pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .wpmc-bh-docs__article pre { padding: 14px; border-radius: 12px; overflow: auto; border: 1px solid var(--wpmc-border); background: rgba(0,0,0,0.05); } .wpmc-bh-docs.wpmc-theme-dark .wpmc-bh-docs__article pre { background: rgba(0,0,0,0.25); } .wpmc-bh-docs__empty, .wpmc-bh-docs__empty-list { padding: 10px 12px; color: var(--wpmc-text); opacity: .9; } @media (max-width: 980px) { .wpmc-bh-docs { padding: 10px; } .wpmc-bh-docs__layout { grid-template-columns: 1fr; } .wpmc-bh-docs__mobile-toggle { position: fixed; right: 0; top: 50vh; transform: translateY(-50%); z-index: 10001; width: 58px; height: 76px; border: 1px solid var(--wpmc-border); border-right: 0; border-radius: 14px 0 0 14px; background: var(--wpmc-bg-alt); box-shadow: var(--wpmc-shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--wpmc-text-strong); } .wpmc-bh-docs__mobile-toggle-label { display: grid; gap: 2px; font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: 0.2px; color: var(--wpmc-text-strong); text-align: center; user-select: none; } .wpmc-bh-docs__mobile-toggle-icon { font-size: 20px; line-height: 1; } .wpmc-bh-docs__mobile-backdrop { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.28); } .wpmc-bh-docs__sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(360px, 86vw); transform: translateX(-105%); transition: transform .18s ease; z-index: 10002; margin: 0; border-radius: 0 16px 16px 0; } .wpmc-bh-docs.is-sidebar-open .wpmc-bh-docs__sidebar { transform: translateX(0); } .wpmc-bh-docs__content { min-height: 50vh; } } @media (min-width: 981px) { .wpmc-bh-docs__mobile-toggle, .wpmc-bh-docs__mobile-backdrop { display: none !important; } } .wpmc-bh-docs__search-popover ul { list-style: none; margin: 0; padding: 6px; background: var(--wpmc-bg-alt); } .wpmc-bh-docs__search-popover li { margin: 0; padding: 0; } .wpmc-bh-docs__search-link { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--wpmc-text-strong); } .wpmc-bh-docs__search-link:hover { background: var(--wpmc-surface-2); } .wpmc-bh-docs__search-title { font-size: 14px; line-height: 1.25; font-weight: 600; } .wpmc-bh-docs__search-excerpt { margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--wpmc-text); } .wpmc-bh-docs__search-empty { padding: 10px 12px; background: var(--wpmc-bg-alt); color: var(--wpmc-text); border-radius: 12px; } /* Force solid white background for search popover */ .wpmc-bh-docs__search-popover { background: #ebe0cd !important; background-color: #ebe0cd !important; opacity: 1 !important; } .wpmc-bh-docs__search-popover ul, .wpmc-bh-docs__search-popover li, .wpmc-bh-docs__search-link { background: #ebe0cd !important; } /* Restore hover for search results */ .wpmc-bh-docs__search-popover .wpmc-bh-docs__search-link:hover { background: rgba(255,168,0,0.10) !important; }