How can we help?

/* ============================================================ DirectoryHelpdesk — Shared Page Shell Layout: [left sidebar] [article content] [right floating TOC] Plan (b): 3 levels visible — brand → tier → article Category as a chip on each brand (not a tree node) Simplero-safe: real divs only, no positioned pseudos for layout ============================================================ */ :root { --hd-primary: #06B6D4; /* Entrepreneur cyan = parent helpdesk hue */ --hd-primary-dark: #0891B2; --hd-primary-light: #E0F7FA; --hd-text: #1E293B; --hd-text-muted: #64748B; --hd-text-soft: #94A3B8; --hd-bg: #FFFFFF; --hd-bg-alt: #F8FAFC; --hd-bg-active: #F1F5F9; --hd-border: #E2E8F0; --hd-border-soft: #F1F5F9; --hd-radius: 6px; --hd-sidebar-w: 280px; --hd-toc-w: 220px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--hd-text); line-height: 1.6; background: var(--hd-bg); } a { color: var(--hd-primary-dark); } /* ─── PAGE LAYOUT ─── */ .hd-page { display: grid; grid-template-columns: var(--hd-sidebar-w) 1fr var(--hd-toc-w); width: 100%; min-height: 100vh; } /* ─── LEFT SIDEBAR ─── */ .hd-sidebar { border-right: 1px solid var(--hd-border); background: var(--hd-bg-alt); padding: 24px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .hd-sidebar-brand { font-size: 15px; font-weight: 700; color: var(--hd-primary-dark); padding: 0 12px 12px; border-bottom: 1px solid var(--hd-border); margin-bottom: 12px; } .hd-sidebar-home { display: block; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--hd-text); text-decoration: none; border-radius: var(--hd-radius); margin-bottom: 8px; } .hd-sidebar-home:hover { background: var(--hd-bg-active); } .hd-sidebar-home-active { background: var(--hd-primary-light); color: var(--hd-primary-dark); } .hd-sidebar-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hd-text-soft); padding: 12px 12px 4px; } /* ─── SIDEBAR FILTER (type-ahead at top of nav) ─── */ .hd-sidebar-filter-wrap { position: sticky; top: 0; z-index: 10; background: var(--hd-bg); display: flex; align-items: center; gap: 6px; padding: 8px 8px 6px; margin: -8px -8px 6px; border-bottom: 1px solid var(--hd-border-soft); } .hd-sidebar-filter-icon { font-size: 11px; opacity: 0.55; flex-shrink: 0; } .hd-sidebar-filter { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12px; padding: 5px 8px; border: 1px solid var(--hd-border); border-radius: var(--hd-radius); background: #fff; color: var(--hd-text); outline: none; -webkit-appearance: none; appearance: none; } .hd-sidebar-filter::-webkit-search-cancel-button { display: none; } .hd-sidebar-filter:focus { border-color: var(--hd-primary); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18); } .hd-sidebar-filter-clear { width: 18px; height: 18px; flex-shrink: 0; border: 0; background: var(--hd-bg-active); color: var(--hd-text-soft); border-radius: 50%; font: inherit; font-size: 14px; line-height: 1; padding: 0; cursor: pointer; } .hd-sidebar-filter-clear:hover { background: var(--hd-border); color: var(--hd-text); } .hd-sidebar-results { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--hd-border); } .hd-sidebar-results-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--hd-text-soft); padding: 0 12px 4px; } .hd-sidebar-results-list { list-style: none; margin: 0; padding: 0; } .hd-sidebar-result-item { margin: 0; } .hd-sidebar-result-link { display: flex; flex-direction: column; gap: 1px; padding: 5px 10px; text-decoration: none; color: var(--hd-text); border-radius: var(--hd-radius); font-size: 12px; } .hd-sidebar-result-link:hover { background: var(--hd-bg-active); } .hd-sidebar-result-title { font-weight: 500; line-height: 1.25; } .hd-sidebar-result-crumb { font-size: 10px; color: var(--hd-text-soft); text-transform: capitalize; } .hd-sidebar-empty { padding: 12px; font-size: 11px; color: var(--hd-text-soft); font-style: italic; text-align: center; } /* ─── COLLAPSIBLE BRAND BLOCKS ─── */ .hd-brand-block { margin-bottom: 2px; } /* Use

/

for keyboard-accessible collapse without JS */ .hd-brand-block summary { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 13px; font-weight: 500; color: var(--hd-text); cursor: pointer; border-radius: var(--hd-radius); list-style: none; user-select: none; } .hd-brand-block summary::-webkit-details-marker { display: none; } .hd-brand-block summary:hover { background: var(--hd-bg-active); } .hd-brand-arrow { display: inline-block; width: 10px; font-size: 9px; color: var(--hd-text-soft); transition: transform 0.15s; } .hd-brand-block[open] .hd-brand-arrow { transform: rotate(90deg); } .hd-brand-swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .hd-brand-name { flex: 1; font-weight: 600; } .hd-brand-block[data-active="true"] .hd-brand-name { color: var(--hd-primary-dark); } /* Category chip (Plan b — category becomes a label, not a tree level) */ .hd-cat-chip { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hd-text-soft); background: var(--hd-bg); border: 1px solid var(--hd-border); padding: 1px 6px; border-radius: 3px; flex-shrink: 0; } /* ─── TIER LIST (inside expanded brand) ─── */ .hd-tier-list { margin: 4px 0 8px 18px; border-left: 1px solid var(--hd-border); } .hd-tier-item { margin: 0; } .hd-tier-link { display: flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; color: var(--hd-text); text-decoration: none; border-radius: var(--hd-radius); --tier-color: var(--hd-primary); /* default — overridden inline per tier */ transition: background 0.12s, color 0.12s; } /* Per-tier hover — uses the locked tier color from the matrix (set inline via --tier-color) AND --tier-text (computed at build time from luminance) so dark tier colors get white text. */ .hd-tier-link:hover { background: var(--tier-color); color: var(--tier-text, #1E293B); } .hd-tier-link-active { background: var(--tier-color); color: var(--tier-text, #1E293B); font-weight: 600; } /* Overview link (first item in each brand's expanded list) — slightly emphasized */ .hd-tier-link-overview { font-weight: 600; font-style: normal; color: var(--hd-text); } .hd-tier-link-overview > span { font-size: 11.5px; } /* ─── PILLAR / GROUP / COURSE NESTING (University only) ─── */ .hd-pillar-block { margin: 0; } .hd-group-block { margin: 0 0 0 18px; } /* nest groups one level deeper than their pillar */ .hd-pillar-summary, .hd-group-summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; user-select: none; border-radius: var(--hd-radius); } .hd-pillar-summary::-webkit-details-marker, .hd-group-summary::-webkit-details-marker { display: none; } .hd-pillar-summary { padding: 4px 10px 4px 26px; margin: 2px 0 2px 18px; font-size: 12px; font-weight: 600; color: var(--hd-text); border-left: 2px solid var(--pillar-color, var(--hd-border)); } .hd-pillar-summary:hover { background: var(--hd-bg-active); } .hd-pillar-arrow { display: inline-block; width: 9px; font-size: 8px; color: var(--hd-text-soft); transition: transform 0.15s; } .hd-pillar-block[open] > .hd-pillar-summary .hd-pillar-arrow { transform: rotate(90deg); } .hd-pillar-num { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: var(--pillar-color, var(--hd-text-soft)); background: var(--hd-bg-active); padding: 1px 4px; border-radius: 3px; flex-shrink: 0; } .hd-pillar-name { flex: 1; } .hd-group-summary { padding: 3px 8px 3px 38px; font-size: 11.5px; font-weight: 500; color: var(--hd-text-soft); } .hd-group-summary:hover { background: var(--hd-bg-active); color: var(--hd-text); } .hd-group-arrow { display: inline-block; width: 8px; font-size: 7px; color: var(--hd-text-soft); transition: transform 0.15s; } .hd-group-block[open] > .hd-group-summary .hd-group-arrow { transform: rotate(90deg); } .hd-group-num { font-size: 8.5px; font-weight: 700; color: var(--hd-text-soft); flex-shrink: 0; opacity: 0.7; } .hd-group-name { flex: 1; } .hd-course-list { list-style: none; margin: 0 0 4px 38px; padding: 0; border-left: 1px solid var(--hd-border); } .hd-course-item { margin: 0; } .hd-course-link { display: block; padding: 2px 8px 2px 12px; font-size: 11px; color: var(--hd-text); text-decoration: none; border-radius: var(--hd-radius); --course-color: var(--pillar-color, var(--hd-primary)); } .hd-course-link:hover { background: var(--course-color); color: var(--course-text, #1E293B); } .hd-course-link-active { background: var(--course-color); color: var(--course-text, #1E293B); font-weight: 600; } /* Overview links (Pillar / Group) — slightly emphasized so they read as the "click here to land on the section's main page" entry, distinct from sibling courses */ .hd-course-link-overview { font-weight: 600; font-style: normal; } .hd-course-link-overview > span::after { content: ''; } /* Active-trail highlights — visible breadcrumb of where you are in the tree */ .hd-pillar-summary-active { background: rgba(15, 23, 42, 0.04); } .hd-pillar-summary-active .hd-pillar-name { color: var(--pillar-color); } .hd-group-summary-active { background: rgba(15, 23, 42, 0.04); color: var(--hd-text); } .hd-group-summary-active .hd-group-name { font-weight: 600; } /* "By Tier" / "By Category" subgroup label inside an expanded brand block */ .hd-sidebar-subgroup { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--hd-text-soft); padding: 6px 12px 2px 18px; margin-top: 4px; border-top: 1px dashed var(--hd-border); } .hd-tier-list + .hd-sidebar-subgroup { margin-top: 6px; } .hd-tier-free-tag { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hd-primary-dark); background: var(--hd-primary-light); padding: 1px 4px; border-radius: 2px; margin-left: auto; } /* Article list under active tier (3rd level) */ .hd-article-list { margin-left: 14px; border-left: 1px dashed var(--hd-border); padding-left: 0; } .hd-article-link { display: block; padding: 3px 10px; font-size: 11.5px; color: var(--hd-text-muted); text-decoration: none; border-radius: 3px; } .hd-article-link:hover { background: var(--hd-bg-active); color: var(--hd-text); } .hd-article-link-active { color: var(--hd-primary-dark); font-weight: 600; background: var(--hd-primary-light); } /* ─── ARTICLE CONTENT ─── */ .hd-content { padding: 40px 56px; max-width: 760px; margin: 0 auto; width: 100%; } .hd-breadcrumb { font-size: 12px; color: var(--hd-text-muted); margin-bottom: 12px; } .hd-breadcrumb a { color: var(--hd-text-muted); text-decoration: none; } .hd-breadcrumb a:hover { color: var(--hd-primary-dark); text-decoration: underline; } .hd-breadcrumb-sep { margin: 0 6px; color: var(--hd-text-soft); } .hd-content h1 { font-size: 30px; font-weight: 800; margin-bottom: 8px; line-height: 1.2; } .hd-content .hd-subtitle { font-size: 16px; color: var(--hd-text-muted); margin-bottom: 32px; } .hd-content h2 { font-size: 22px; font-weight: 700; margin: 36px 0 12px; scroll-margin-top: 160px; /* clear Simplero site header (82px) + our sticky page header (~60px) + breathing room */ } .hd-content h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; scroll-margin-top: 160px; /* clear Simplero site header (82px) + our sticky page header (~60px) + breathing room */ } .hd-content p { margin-bottom: 14px; } .hd-content ul, .hd-content ol { margin: 0 0 14px 24px; } .hd-content li { margin-bottom: 6px; } .hd-content code { background: var(--hd-bg-alt); padding: 1px 6px; border-radius: 3px; font-size: 0.9em; border: 1px solid var(--hd-border); } .hd-content pre { background: var(--hd-bg-alt); border: 1px solid var(--hd-border); border-radius: var(--hd-radius); padding: 14px; overflow-x: auto; margin-bottom: 14px; font-size: 13px; } .hd-content pre code { background: none; padding: 0; border: none; } .hd-content blockquote { border-left: 3px solid var(--hd-primary); padding: 8px 16px; background: var(--hd-primary-light); margin-bottom: 14px; color: var(--hd-text); } .hd-content table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 14px; } .hd-content table th, .hd-content table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--hd-border); vertical-align: top; } .hd-content table th { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hd-text-muted); background: var(--hd-bg-alt); } /* Hint blocks (replaces GitBook {% hint %} syntax) */ .hd-hint { border: 1px solid var(--hd-border); border-left-width: 4px; border-radius: var(--hd-radius); padding: 12px 16px; margin-bottom: 14px; font-size: 14px; background: var(--hd-bg-alt); } .hd-hint-success { border-left-color: #22C55E; } .hd-hint-info { border-left-color: var(--hd-primary); } .hd-hint-warning { border-left-color: #F59E0B; background: #FFFBEB; } .hd-hint-danger { border-left-color: #DC2626; background: #FEF2F2; } /* Placeholder block (the "no help written yet" pattern) */ .hd-placeholder { border: 1px solid var(--hd-border); border-radius: var(--hd-radius); padding: 28px 32px; background: var(--hd-bg-alt); text-align: center; margin: 24px 0; } .hd-placeholder-icon { font-size: 28px; margin-bottom: 8px; color: var(--hd-text-soft); } .hd-placeholder h2 { font-size: 18px; margin: 0 0 8px; color: var(--hd-text); } .hd-placeholder p { color: var(--hd-text-muted); font-size: 14px; max-width: 480px; margin: 0 auto 16px; } .hd-placeholder-cta { display: inline-block; padding: 10px 20px; background: var(--hd-primary); color: #fff; text-decoration: none; border-radius: var(--hd-radius); font-weight: 600; font-size: 14px; } .hd-placeholder-cta:hover { background: var(--hd-primary-dark); color: #fff; } /* ─── STICKY PAGE HEADER (title left · status right) ─── */ .hd-page-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; position: sticky; top: 82px; /* Simplero site header is 82px tall — clear it */ z-index: 50; margin: -8px -8px 16px; padding: 14px 16px; background: rgba(255, 255, 255, 0.96); backdrop-filter: saturate(160%) blur(8px); -webkit-backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--hd-border-soft); border-radius: 8px 8px 0 0; } .hd-page-header-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .hd-page-header h1 { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.2; color: var(--hd-text); } /* Purpose chip — small colored pill above title (Setup / FAQ / Features / etc.) */ .hd-purpose-chip { display: inline-flex; align-items: center; align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4; } .hd-page-status { flex: 0 0 auto; } .hd-status-pill, .hd-status-cta { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .hd-status-pill-soon { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; } .hd-status-cta-live { background: #10B981; color: #FFFFFF; border: 1px solid #0EA374; transition: background 0.15s, border-color 0.15s; /* Throbbing ring to pull eyes toward the buy CTA. Outline-only pulse means the button itself doesn't shift size — only the box-shadow halo radiates and fades. */ animation: hd-cta-pulse 2.2s ease-in-out infinite; } @keyframes hd-cta-pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); } 60% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } @media (prefers-reduced-motion: reduce) { .hd-status-cta-live { animation: none; } } .hd-status-cta-live:hover { background: #0EA374; border-color: #047857; color: #FFFFFF; animation: none; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25); } .hd-status-cta-live::before { content: "●"; color: #FFFFFF; font-size: 8px; margin-right: 2px; } @media (max-width: 600px) { .hd-page-header { flex-wrap: wrap; } .hd-page-header h1 { font-size: 18px; white-space: normal; } } /* ─── FAQ CARDS (standard Q+A pattern for product help pages) ─── */ .hd-faq { display: block; margin: 14px 0; padding: 16px 20px; background: #F8FAFC; border: 1px solid var(--hd-border-soft); border-left: 3px solid var(--hd-primary); border-radius: var(--hd-radius); transition: box-shadow 0.15s, border-color 0.15s; } .hd-faq:hover { box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04); border-left-color: var(--hd-primary-dark); } .hd-faq-q { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: #0F172A; line-height: 1.4; } .hd-faq-a { margin: 0; font-size: 14px; line-height: 1.65; color: #334155; } .hd-faq-a p { margin: 0 0 8px; } .hd-faq-a p:last-child { margin-bottom: 0; } .hd-faq-a ul, .hd-faq-a ol { margin: 4px 0 8px 20px; } /* Optional grouping wrapper for tighter visual rhythm between adjacent FAQs */ .hd-faq-group { display: block; margin: 12px 0 24px; } .hd-faq-group .hd-faq { margin: 8px 0; } /* ─── RIGHT FLOATING TOC ─── */ .hd-toc { padding: 40px 16px; position: sticky; top: 0; height: 100vh; border-left: 1px solid var(--hd-border-soft); display: flex; flex-direction: column; } .hd-toc-top { flex: 1 1 auto; overflow-y: auto; min-height: 0; } .hd-toc-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hd-text-soft); margin-bottom: 8px; } .hd-toc-list { list-style: none; margin: 0; padding: 0; } .hd-toc-list li { margin: 0; } .hd-toc-link { display: block; padding: 4px 8px; font-size: 12px; color: var(--hd-text-muted); text-decoration: none; border-left: 2px solid transparent; margin-left: -2px; line-height: 1.4; } .hd-toc-link:hover { color: var(--hd-text); } .hd-toc-link-h3 { padding-left: 20px; font-size: 11.5px; } .hd-toc-link-active { color: var(--hd-primary-dark); border-left-color: var(--hd-primary); font-weight: 600; } .hd-back-to-top { flex: 0 0 auto; align-self: flex-start; width: auto; max-width: 110px; margin-top: 16px; margin-bottom: 16px; /* lift above Simplero's help-popup widget zone */ padding: 6px 10px; font-size: 11.5px; font-weight: 600; color: var(--hd-primary-dark); background: var(--hd-bg-alt); border: 1px solid var(--hd-border); border-radius: var(--hd-radius); text-decoration: none; text-align: center; white-space: nowrap; transition: background 0.15s, border-color 0.15s; } .hd-back-to-top:hover { background: var(--hd-primary-light); border-color: var(--hd-primary); } /* ─── HOMEPAGE: layout overrides ─── */ .hd-is-home .hd-page-header { display: none; } .hd-is-home .hd-sidebar { display: none; } .hd-is-home .hd-toc { display: none; } .hd-is-home .hd-content { padding: 32px 24px; max-width: 1440px; width: 100%; justify-self: center; overflow-x: clip; } .hd-is-home.hd-page { grid-template-columns: 1fr; } /* ─── HOMEPAGE: Hero welcome ─── */ .hd-home-hero { background: linear-gradient(135deg, var(--hd-primary) 0%, var(--hd-primary-dark) 100%); color: #fff; border-radius: 10px; padding: 40px 36px 32px; margin: -8px 0 28px; text-align: center; } .hd-home-hero h2 { font-size: 26px; font-weight: 700; margin: 0 0 8px; color: #fff; } .hd-home-hero p { font-size: 14.5px; opacity: 0.9; margin: 0; line-height: 1.5; } .hd-home-search-box { display: flex; align-items: center; max-width: 520px; margin: 18px auto 0; background: #fff; border-radius: 6px; overflow: hidden; } .hd-home-search-icon { display: flex; align-items: center; justify-content: center; padding: 0 12px; color: var(--hd-text-muted); } .hd-home-search-icon svg { width: 18px; height: 18px; } .hd-home-search-input { flex: 1; border: none; outline: none; padding: 11px 14px 11px 0; font-size: 14px; color: var(--hd-text); background: transparent; } .hd-home-search-input::placeholder { color: var(--hd-text-soft); } .hd-home-search-results { max-width: 520px; margin: 6px auto 0; background: #fff; border-radius: 6px; max-height: 240px; overflow-y: auto; } .hd-home-search-results a { display: block; padding: 8px 14px; text-decoration: none; color: var(--hd-text); font-size: 13px; border-bottom: 1px solid var(--hd-border-soft); } .hd-home-search-results a:hover { background: var(--hd-bg-alt); } .hd-home-search-results a:last-child { border-bottom: none; } .hd-home-start-here { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; color: #fff; text-decoration: none; opacity: 0.9; border-bottom: 1px dashed rgba(255,255,255,0.5); padding-bottom: 1px; transition: opacity 0.15s; } .hd-home-start-here:hover { opacity: 1; color: #fff; } /* ─── HOMEPAGE: Top Nav (3-wide destination cards) ─── */ .hd-top-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 28px; } .hd-top-nav-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px 22px; border-radius: 10px; border: 1px solid var(--hd-border); background: var(--hd-bg); text-decoration: none; color: var(--hd-text); text-align: center; transition: box-shadow 0.2s, border-color 0.15s; } .hd-top-nav-card:hover { border-color: var(--nav-color); box-shadow: 0 4px 16px color-mix(in srgb, var(--nav-color) 15%, transparent); } .hd-top-nav-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--nav-color) 10%, transparent); } .hd-top-nav-icon svg { width: 24px; height: 24px; } .hd-top-nav-label { font-size: 17px; font-weight: 700; } .hd-top-nav-stat { font-size: 12.5px; color: var(--hd-text-muted); } /* ─── HOMEPAGE: Browse Sections ─── */ .hd-browse-sections { background: var(--hd-bg-alt); border-top: 1px solid var(--hd-border); border-bottom: 1px solid var(--hd-border); margin: 0 -24px 36px; padding: 32px 24px; overflow: hidden; } .hd-browse-filter-bar { margin-bottom: 14px; } .hd-browse-filter-input { width: 100%; max-width: 360px; padding: 8px 14px; font-size: 13px; border: 1px solid var(--hd-border); border-radius: 6px; background: var(--hd-bg); color: var(--hd-text); outline: none; } .hd-browse-filter-input:focus { border-color: var(--hd-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hd-primary) 15%, transparent); } .hd-browse-filter-input::placeholder { color: var(--hd-text-soft); } .hd-browse-sections-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .hd-browse-section { background: var(--hd-bg); border-radius: 10px; padding: 20px 16px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); transition: box-shadow 0.2s; overflow: hidden; min-width: 0; } .hd-browse-section:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); } .hd-browse-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .hd-browse-section-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: color-mix(in srgb, var(--section-color) 10%, transparent); flex-shrink: 0; } .hd-browse-section-icon svg { width: 20px; height: 20px; } .hd-browse-section-title { font-size: 16px; font-weight: 700; color: var(--hd-text); } .hd-browse-section-desc { font-size: 12.5px; color: var(--hd-text-muted); line-height: 1.4; display: block; margin-bottom: 14px; } .hd-browse-section-brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; } .hd-browse-brand-col { display: flex; flex-direction: column; gap: 0; overflow: hidden; min-width: 0; } .hd-browse-brand-head { display: block; padding: 3px 4px; border-radius: 4px; text-decoration: none; color: var(--brand-color); font-size: 12.5px; font-weight: 700; transition: background 0.12s; } .hd-browse-brand-head:hover { background: color-mix(in srgb, var(--brand-color) 8%, transparent); } .hd-browse-tier-list { display: flex; flex-direction: column; padding-left: 4px; } .hd-browse-tier { font-size: 11.5px; color: var(--hd-text-muted); text-decoration: none; padding: 1px 4px; border-radius: 3px; transition: color 0.12s, background 0.12s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hd-browse-tier:hover { color: var(--brand-color); background: color-mix(in srgb, var(--brand-color) 8%, transparent); } /* ─── HOMEPAGE: Section label ─── */ .hd-home-section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hd-text-muted); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--hd-border); } /* ─── HOMEPAGE: Featured / Popular Articles ─── */ .hd-featured-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0 36px; } .hd-featured-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 10px; border: 1px solid var(--hd-border); background: var(--hd-bg); text-decoration: none; color: var(--hd-text); transition: border-color 0.15s, box-shadow 0.2s; } .hd-featured-card:hover { border-color: var(--brand-color); box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-color) 10%, transparent); } .hd-featured-card-top { display: flex; align-items: center; gap: 8px; } .hd-featured-card-brand { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .hd-featured-card-chip { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hd-text-soft); background: var(--hd-bg-alt); padding: 2px 6px; border-radius: 3px; } .hd-featured-card-title { font-size: 14px; font-weight: 600; line-height: 1.35; } .hd-featured-card-arrow { font-size: 14px; color: var(--brand-color); margin-top: auto; opacity: 0; transition: opacity 0.15s; } .hd-featured-card:hover .hd-featured-card-arrow { opacity: 1; } /* ─── RESPONSIVE ─── */ @media (max-width: 1100px) { .hd-page { grid-template-columns: var(--hd-sidebar-w) 1fr; } .hd-toc { display: none; } /* Browse: 2-wide sections, brands still 3-col inside each card */ .hd-browse-sections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { /* Browse: brands stack to 1 column inside each card */ .hd-browse-section-brands { grid-template-columns: 1fr; gap: 10px; } .hd-featured-articles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .hd-page { grid-template-columns: 1fr; } .hd-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--hd-border); } .hd-content { padding: 24px 16px; } .hd-is-home .hd-content { padding: 24px 16px; } .hd-top-nav { grid-template-columns: 1fr; gap: 10px; } .hd-browse-sections { margin: 0 -16px 28px; padding: 20px 16px; } .hd-browse-sections-grid { grid-template-columns: 1fr; } .hd-browse-section-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; } .hd-featured-articles { grid-template-columns: 1fr; } .hd-home-hero { padding: 28px 16px 24px; } .hd-home-hero h2 { font-size: 22px; } } @media (max-width: 480px) { .hd-browse-section-brands { grid-template-columns: 1fr; gap: 8px; } .hd-top-nav-card { padding: 20px 14px 16px; } }