/* PlantStar Panorama Help Website — shared styles */ :root { --sky-0: #EAF4FA; --sky-1: #BCE5FA; --sky-2: #8CD3F7; --sky-3: #4CBCF4; --sky-4: #0B9BE3; --sky-5: #007bc4; --sky-6: #026596; --sky-7: #054C6F; --sky-8: #093852; --sky-9: #0B2836; --bg: #ffffff; --bg-alt: var(--sky-0); --text: var(--sky-9); --text-muted: #55707d; --border: #d7e6ee; --header-bg: var(--sky-8); --header-text: #ffffff; --accent: var(--sky-5); --accent-strong: var(--sky-6); --link: var(--sky-6); --sidebar-bg: #f7fafc; --sidebar-active-bg: var(--sky-0); --card-shadow: 0 1px 3px rgba(9, 56, 82, 0.12), 0 1px 2px rgba(9, 56, 82, 0.08); --font-body: "Noto Sans", "Barlow Semi Condensed", "Caveat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --sidebar-width: 300px; --topbar-height: 60px; } /* Dark palette: applied automatically by system preference, unless the user's explicit choice (stored in localStorage, stamped onto by assets/app.js) says otherwise. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--sky-9); --bg-alt: var(--sky-8); --text: #eaf4fa; --text-muted: #9fc2d3; --border: #1c4356; --header-bg: #05202f; --header-text: #eaf4fa; --accent: var(--sky-3); --accent-strong: var(--sky-2); --link: var(--sky-3); --sidebar-bg: #0e3247; --sidebar-active-bg: #123a52; --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); } } :root[data-theme="dark"] { --bg: var(--sky-9); --bg-alt: var(--sky-8); --text: #eaf4fa; --text-muted: #9fc2d3; --border: #1c4356; --header-bg: #05202f; --header-text: #eaf4fa; --accent: var(--sky-3); --accent-strong: var(--sky-2); --link: var(--sky-3); --sidebar-bg: #0e3247; --sidebar-active-bg: #123a52; --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.55; font-size: 16px; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { color: var(--accent-strong); line-height: 1.25; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) h2, :root:not([data-theme="light"]) h3, :root:not([data-theme="light"]) h4 { color: var(--accent); } } :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4 { color: var(--accent); } .skip-link { position: absolute; left: -999px; top: auto; } .skip-link:focus { left: 8px; top: 8px; background: var(--bg); padding: 8px 12px; border-radius: 4px; z-index: 1000; } /* Topbar */ .topbar { position: sticky; top: 0; z-index: 20; background: var(--header-bg); color: var(--header-text); height: var(--topbar-height); display: flex; align-items: center; } .topbar-inner { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 20px; } .sidebar-toggle { display: none; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); color: var(--header-text); font-size: 20px; line-height: 1; padding: 6px 10px; border-radius: 6px; cursor: pointer; } .theme-toggle { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); color: var(--header-text); font-size: 16px; line-height: 1; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; flex-shrink: 0; } /* On pages without a search box (e.g. the 404 page) this is the item that needs pushed to the far right; on pages with a search box, .search-box already claims that free space first, so this margin resolves to zero there and stays a no-op. */ .theme-toggle:last-child { margin-left: auto; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.12); } .brand { color: var(--header-text); font-weight: 700; font-size: 19px; letter-spacing: 0.02em; white-space: nowrap; } .brand span { font-weight: 400; opacity: 0.85; margin-left: 6px; } .brand:hover { text-decoration: none; opacity: 0.9; } .section-switch { display: flex; gap: 4px; flex: 1; } .section-switch a { color: var(--header-text); opacity: 0.75; padding: 8px 12px; border-radius: 6px; font-size: 14px; white-space: nowrap; } .section-switch a:hover { opacity: 1; text-decoration: none; background: rgba(255, 255, 255, 0.08); } .section-switch a.active { opacity: 1; background: rgba(255, 255, 255, 0.15); font-weight: 600; } .search-box { position: relative; margin-left: auto; width: 280px; } #site-search { width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.12); color: var(--header-text); font-size: 14px; font-family: var(--font-body); } #site-search::placeholder { color: rgba(255, 255, 255, 0.65); } #site-search:focus { outline: 2px solid var(--sky-3); background: rgba(255, 255, 255, 0.95); color: var(--sky-9); } .search-results { position: absolute; top: calc(100% + 6px); right: 0; width: 420px; max-height: 70vh; overflow-y: auto; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--card-shadow); padding: 6px; } .search-result { display: block; padding: 8px 10px; border-radius: 6px; color: var(--text); } .search-result:hover { background: var(--bg-alt); text-decoration: none; } .search-result-title { display: block; font-weight: 600; } .search-result-badge { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-strong); margin-top: 2px; } .search-result-snippet { display: block; font-size: 13px; color: var(--text-muted); margin-top: 2px; } .search-empty { padding: 10px; margin: 0; color: var(--text-muted); font-size: 14px; } /* App shell / sidebar */ .app-shell { display: flex; max-width: 1400px; margin: 0 auto; min-height: calc(100vh - var(--topbar-height)); } .sidebar { width: var(--sidebar-width); flex-shrink: 0; background: var(--sidebar-bg); border-right: 1px solid var(--border); padding: 16px 10px 40px; overflow-y: auto; height: calc(100vh - var(--topbar-height)); position: sticky; top: var(--topbar-height); } .sidebar-utility { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--border); } .sidebar-utility a { font-size: 13px; padding: 4px 8px; border-radius: 4px; color: var(--text-muted); } .sidebar-utility a:hover { background: var(--sidebar-active-bg); text-decoration: none; color: var(--link); } .sidebar-loading, .sidebar-error { font-size: 13px; color: var(--text-muted); padding: 4px 8px; } #nav-tree ul { list-style: none; margin: 0; padding-left: 14px; } #nav-tree > ul { padding-left: 0; } #nav-tree li { margin: 1px 0; } #nav-tree a { display: block; padding: 5px 8px; border-radius: 4px; font-size: 14px; color: var(--text); } #nav-tree a:hover { background: var(--sidebar-active-bg); text-decoration: none; } #nav-tree a.active { background: var(--sidebar-active-bg); color: var(--accent-strong); font-weight: 600; border-left: 3px solid var(--accent); padding-left: 5px; } #nav-tree summary { cursor: pointer; border-radius: 4px; font-size: 14px; padding: 2px 0; } #nav-tree summary a { display: inline; padding: 3px 4px; } .nav-group-label { display: block; padding: 5px 8px; font-size: 14px; font-weight: 600; color: var(--text-muted); } /* Content */ .content { flex: 1; min-width: 0; padding: 28px 36px 60px; max-width: 900px; } .page-content h1 { margin-top: 0; font-size: 26px; } .page-content img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 4px; margin: 6px 0; } .page-content table.content-table { border-collapse: collapse; margin: 14px 0; max-width: 100%; } .page-content table.content-table td, .page-content table.content-table th { padding: 5px 12px; vertical-align: top; border: 1px solid var(--border); } .page-content table.content-table tr:nth-child(even) { background: var(--bg-alt); } .page-nav { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; } .page-nav.bottom { border-bottom: none; border-top: 1px solid var(--border); margin-top: 20px; margin-bottom: 0; } .page-nav a { padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); } .page-nav a:hover { background: var(--bg-alt); text-decoration: none; } .page-nav .top-link { color: var(--accent-strong); } .landing-list { padding-left: 20px; } .landing-list li { margin: 6px 0; } .all-topics-list, .browse-index-list { columns: 2; column-gap: 32px; list-style: none; padding-left: 0; } .browse-index-list li { break-inside: avoid; } /* Home page */ .home-content { max-width: 1000px; margin: 0 auto; padding: 60px 24px; } .hero { text-align: center; margin-bottom: 48px; } .hero h1 { font-size: 36px; margin-bottom: 8px; } .hero p { color: var(--text-muted); font-size: 17px; } .landing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .landing-card { display: block; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; padding: 26px; color: var(--text); box-shadow: var(--card-shadow); transition: transform 0.12s ease, box-shadow 0.12s ease; } .landing-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(9, 56, 82, 0.18); text-decoration: none; } .landing-card h2 { margin-top: 0; } .landing-card p { color: var(--text-muted); } .card-link { color: var(--accent-strong); font-weight: 600; } /* Footer */ .site-footer { text-align: center; font-size: 13px; color: var(--text-muted); padding: 24px; border-top: 1px solid var(--border); } /* Responsive */ @media (max-width: 900px) { .sidebar-toggle { display: inline-flex; align-items: center; } .search-box { width: 180px; } .section-switch { display: none; } .sidebar { position: fixed; left: 0; top: var(--topbar-height); height: calc(100vh - var(--topbar-height)); z-index: 15; transform: translateX(-100%); transition: transform 0.15s ease; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); } body.sidebar-open .sidebar { transform: translateX(0); } .content { padding: 20px 18px 48px; } .landing-cards { grid-template-columns: 1fr; } .search-results { width: calc(100vw - 24px); right: -60px; } .all-topics-list, .browse-index-list { columns: 1; } }