/* Help Center — clean styling for the lifted help articles (the live page's CSS was all chrome and conflicted with our layout, so this replaces it). */ /* Clear the fixed ~80px header (inner pages do this via .sub-banner margin-top). */ .help-page { padding: 100px 0 70px; } .help-page .subhead { padding: 8px 0; position: static;} .help-page .entry-title { font-size: 2rem; font-weight: 600; color: #003e70; margin-bottom: 10px; line-height: 1.25; } .help-page .published { color: #8a8a8a; font-size: 14px; display: inline-block; } .help-page .byline { font-size: 14px; color: #555; margin: 6px 0; } .help-page .byline a { color: #76a507; text-decoration: none; } .help-page .breadcrumbs_view { font-size: 13px; color: #999; margin: 6px 0 0; } .help-page .breadcrumbs_view a { color: #76a507; text-decoration: none; } .help-page .entry-content { font-size: 16px; line-height: 1.75; color: #333; } .help-page .entry-content h2, .help-page .entry-content h3, .help-page .entry-content h4 { color: #003e70; margin: 26px 0 12px; font-weight: 600; } .help-page .entry-content p { margin: 0 0 14px; } .help-page .entry-content img { max-width: 100%; height: auto; border: 1px solid #e6e6e6; border-radius: 8px; margin: 14px 0; } .help-page .entry-content ul, .help-page .entry-content ol { padding-left: 22px; margin: 12px 0; } .help-page .entry-content li { margin-bottom: 8px; } .help-page .entry-content a { color: #76a507; } /* The right sidebar is JS-populated on the live site (empty here) — hide it and let the article use the full width. */ .help-page .helpRightSideBar { display: none; } .help-page .row.mt-4 > .col-md-4 { display: none; } .help-page .row.mt-4 > .col-md-8 { flex: 0 0 100%; max-width: 900px; margin: 0 auto; } /* Help Center author archive (/help/*/author/*) */ .help-author { padding: 100px 0 70px; } .help-author .container { max-width: 900px; } .help-author .breadcrumbs_view { font-size: 13px; color: #999; margin: 0 0 12px; } .help-author .breadcrumbs_view a { color: #76a507; text-decoration: none; } .help-author .help-author-title { color: #003e70; font-weight: 600; font-size: 2rem; margin: 0 0 8px; } .help-author .help-author-body .page-header { display: none; } .help-author .help-author-body article { background: #fff; border: 1px solid #e6e6e6; border-radius: 12px; padding: 20px 24px; margin: 16px 0; box-shadow: 0 2px 6px rgba(0,0,0,.03); transition: box-shadow .2s ease, transform .2s ease; } .help-author .help-author-body article:hover { box-shadow: 0 8px 24px rgba(0,0,0,.06); transform: translateY(-1px); } .help-author .help-author-body article > header { padding: 0; margin: 0 0 10px; } .help-author .help-author-body .entry-title { font-size: 1.25rem; font-weight: 600; color: #003e70; margin: 0 0 6px; line-height: 1.35; } .help-author .help-author-body .entry-title a { color: inherit; text-decoration: none; } .help-author .help-author-body .entry-title a:hover { color: #76a507; } .help-author .help-author-body .published { color: #8a8a8a; font-size: 13px; display: inline-block; margin-right: 12px; } .help-author .help-author-body .byline { display: inline-block; font-size: 13px; color: #555; margin: 0; } .help-author .help-author-body .byline a { color: #76a507; text-decoration: none; } .help-author .help-author-body .entry-summary { color: #333; font-size: 15px; line-height: 1.6; } .help-author .help-author-body .entry-summary p { margin: 0; } .help-author .help-author-body .entry-summary a { color: #76a507; font-weight: 500; } /* Help Center landing (/help) — matches the /whats-new-in-desklog/ visual language */ .help-landing { --hlp-navy: #00487a; --hlp-navy-dark: #00326C; --hlp-green: #81B504; --hlp-green-dark: #648e02; --hlp-hilight-green: hsl(78, 55%, 62%); --hlp-ink: #262626; --hlp-muted: #5b6270; --hlp-line: #eef1f4; font-family: "Inter", "Inter Fallback", sans-serif; padding: 0; } /* ---------- Hero — mirrors the /changelog banner ---------- */ .help-landing .banner-help { position: relative; z-index: 0; background: #eff7dd; overflow: hidden; text-align: center; isolation: isolate; } /* Soft radial glow behind the title, like the changelog */ .help-landing .banner-help::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 260px at 50% 30%, rgba(255,255,255,.6), transparent 70%), radial-gradient(500px 260px at 100% 0%, rgba(129,181,4,.10), transparent 60%), radial-gradient(500px 260px at 0% 100%, rgba(0,64,115,.06), transparent 60%); pointer-events: none; z-index: -1; } /* Faint dotted grid — very subtle, like the changelog surface */ .help-landing .banner-help::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(0,50,50,.06) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%); pointer-events: none; opacity: .8; z-index: -1; } .help-landing .help-main { position: relative; z-index: 1; padding: 110px 10px 100px; } /* Pill eyebrow — "PRODUCT CHANGELOG"-style tag */ .help-landing .help-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px 8px 14px; background: #dff0b2; border-radius: 999px; color: #4a6b09; font-family: "Inter", "Inter Fallback", sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 28px; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 6px rgba(129,181,4,.15); } .help-landing .help-eyebrow__dot { width: 9px; height: 9px; border-radius: 50%; background: #81b504; box-shadow: 0 0 0 4px rgba(129,181,4,.18); } /* Big two-tone title */ .help-landing .help-title { font-family: "Inter", "Inter Fallback", sans-serif; font-size: clamp(34px, 4.5vw + 8px, 76px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: #0f2a1e; text-align: center; margin: 0 0 20px; } .help-landing .help-title span { color: #81b504; font-weight: 800; } .help-landing .help-sub { color: #38473f; font-family: "Inter", "Inter Fallback", sans-serif; font-weight: 400; text-align: center; font-size: clamp(14px, 1vw + 8px, 18px); max-width: 640px; margin: 0 auto 34px; line-height: 1.65; } /* Info pill under the search — like "Last updated" */ .help-landing .help-meta-pill { display: inline-flex; align-items: center; gap: 10px; margin: 24px auto 0; padding: 8px 18px; background: #ffffff; border-radius: 999px; box-shadow: 0 6px 18px rgba(15, 42, 30, .06); font-family: "Inter", "Inter Fallback", sans-serif; font-size: 13.5px; color: #38473f; } .help-landing .help-meta-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: #81b504; box-shadow: 0 0 0 4px rgba(129,181,4,.18); } .help-landing .help-meta-pill__label { color: #5b6270; font-weight: 500; } .help-landing .help-meta-pill__value { color: #4a6b09; font-weight: 700; } .help-landing .help-meta-pill__value::before { content: "•"; margin: 0 8px 0 2px; color: #b9c3cf; font-weight: 400; } /* Search — matches the changelog's soft floating input */ .help-landing .help-search { display: flex; align-items: center; max-width: 600px; margin: 0 auto; background: #ffffff; border-radius: 999px; border: 1px solid rgba(15,42,30,.08); box-shadow: 0 10px 30px rgba(15, 42, 30, .10); padding: 6px 6px 6px 18px; } .help-landing .help-search__icon { color: #8a95a5; display: inline-flex; margin-right: 8px; } .help-landing .help-search__input { flex: 1; border: 0; outline: none; background: transparent; font-family: inherit; font-size: clamp(13px, 2vw + 2px, 16px); color: #262626; padding: 10px 4px; min-width: 0; } .help-landing .help-search__input::placeholder { color: #9aa3b0; font-weight: 300; } .help-landing .help-search__input:disabled { cursor: not-allowed; } .help-landing .help-search__btn { background-color: var(--hlp-green); color: #fdfeff; border: 0; border-radius: 999px; padding: 10px 22px; box-shadow: rgb(97 181 4 / 31%) 0px 4px 12px 0px; font-size: clamp(12px, 2vw + 2.5px, 15px); font-family: "Inter", "Inter Fallback", sans-serif; font-weight: 600; cursor: pointer; transition: all 0.15s ease-in-out; } .help-landing .help-search__btn:hover:not(:disabled) { background-color: var(--hlp-green-dark); } .help-landing .help-search__btn:disabled { cursor: not-allowed; opacity: .8; } /* Popular chips row */ .help-landing .help-popular { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 22px; font-family: "Inter", "Inter Fallback", sans-serif; } .help-landing .help-popular__label { font-size: 14px; font-weight: 500; color: #5b6270; margin-right: 4px; } .help-landing .help-popular__chip { display: inline-block; font-size: 13.5px; color: #262626; text-decoration: none; padding: 5px 12px; background: #ffffff; border-radius: 30px; border: 1px solid #E7F2FD; box-shadow: 0 2px 8px 0 rgba(18, 17, 118, .06); transition: all 0.15s ease-in-out; } .help-landing .help-popular__chip:hover { background: #f8ffe9; border-color: #ddecbd; color: var(--hlp-green-dark); transform: translateY(-1px); } /* ---------- Categories ---------- */ .help-landing .help-categories { background: #fdfeff; padding: 40px 0 40px; position: relative; z-index: 1; } .help-landing .help-section-head { text-align: center; margin-bottom: 36px; } .help-landing .help-section-head .seccond-heading_whatsnew { font-family: "Inter", "Inter Fallback", sans-serif; font-size: clamp(20px, 1.4vw + 16px, 30px); font-weight: 700; color: #242424; margin: 0 0 8px; } .help-landing .help-section-head p { color: #5b6270; font-weight: 300; font-size: clamp(13px, 2vw + 2px, 16px); margin: 0; } .help-landing .cat-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); max-width: 1200px; margin: 0 auto; } .help-landing .cat-card { display: flex; flex-direction: column; background-color: #FCFDFE; border-radius: 13px; padding: 26px 24px; border: solid 2px #F8FFE5; box-shadow: 0px 15px 20px 0px rgba(18, 17, 118, .08); transition: transform .18s ease, box-shadow .18s ease; font-family: "Inter", "Inter Fallback", sans-serif; } .help-landing .cat-card:hover { transform: translateY(-3px); box-shadow: 0 20px 30px 0 rgba(18, 17, 118, .12); } .help-landing .cat-card:nth-child(even) { border-color: #E8F3FC; } .help-landing .cat-card__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; border-bottom: 2px solid #E2EDF6; padding-bottom: 14px; } .help-landing .cat-card h3 { font-family: "Inter", "Inter Fallback", sans-serif; font-size: 18px; font-weight: 600; color: #242424; margin: 2px 0 4px; line-height: 1.3; } .help-landing .cat-blurb { font-size: 13.5px; color: #5b6270; margin: 0; line-height: 1.5; font-weight: 300; } .help-landing .cat-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #F8FFE5; color: var(--hlp-green-dark); } .help-landing .cat-card:nth-child(even) .cat-icon { background: #E7F2FD; color: var(--hlp-navy); } .help-landing .cat-icon svg { width: 22px; height: 22px; } .help-landing .cat-articles { list-style: none; padding: 0; margin: 0 0 16px; } .help-landing .cat-articles li + li { border-top: 1px dashed #eef1f4; } .help-landing .cat-articles li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; color: #262626; text-decoration: none; font-size: 14.5px; font-weight: 400; transition: color .15s ease; } .help-landing .cat-articles__title { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .help-landing .cat-articles__chev { flex-shrink: 0; color: #b9c3cf; transition: transform .15s ease, color .15s ease; } .help-landing .cat-articles li a:hover { color: var(--hlp-green-dark); } .help-landing .cat-articles li a:hover .cat-articles__chev { color: var(--hlp-green-dark); transform: translateX(2px); } .help-landing .cat-view-all { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: #f8ffe9; color: #72a100f0; padding: 5px 12px; border-radius: 4px; border: solid 2px #ddecbd; box-shadow: rgba(99, 99, 99, 0.15) 0px 2px 8px 0px; font-size: 14px; font-weight: 500; text-decoration: none; transition: all 300ms ease-in-out; } .help-landing .cat-view-all:hover { background: #f2ffd8; transform: scale(1.04); color: #72a100f0; } /* ---------- Bottom CTA ---------- */ .help-landing .help-cta-section { padding: 40px 0 100px; background: #fdfeff; } .help-landing .cta-box { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px; max-width: 1060px; margin: 0 auto; padding: 42px 44px; background: linear-gradient(180deg, #ffffff 0%, #fafffb 100%); border-radius: 24px; border: 1px solid #e6efd6; box-shadow: 0 30px 60px -30px rgba(15, 42, 30, .18), 0 8px 20px rgba(129, 181, 4, .06); font-family: "Inter", "Inter Fallback", sans-serif; overflow: hidden; isolation: isolate; } .help-landing .cta-box__glow { position: absolute; inset: -40% -30% auto auto; width: 520px; height: 520px; background: radial-gradient(closest-side, rgba(129,181,4,.22), transparent 70%); z-index: -1; pointer-events: none; } .help-landing .cta-box::before { content: ""; position: absolute; inset: auto auto -60% -20%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(0,72,122,.10), transparent 70%); z-index: -1; pointer-events: none; } .help-landing .cta-box__text { max-width: 560px; } .help-landing .cta-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; background: #eaf7c7; border: 1px solid #d5ec9c; border-radius: 999px; color: #4a6b09; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; } .help-landing .cta-eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: #81b504; box-shadow: 0 0 0 4px rgba(129,181,4,.2); } .help-landing .cta-box h3 { font-size: clamp(20px, 1.4vw + 14px, 28px); font-weight: 700; color: #0f2a1e; margin: 0 0 8px; line-height: 1.25; letter-spacing: -.01em; } .help-landing .cta-box p { color: #4a5763; font-weight: 400; font-size: 15.5px; margin: 0; line-height: 1.6; } .help-landing .cta-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; align-items: center; } .help-landing .cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-family: "Inter", "Inter Fallback", sans-serif; font-size: 14.5px; font-weight: 600; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease; white-space: nowrap; } .help-landing .cta-btn svg { transition: transform .18s ease; } .help-landing .cta-btn--primary { background-color: #81B504; color: #ffffff; box-shadow: 0 10px 22px -6px rgba(129, 181, 4, .55); } .help-landing .cta-btn--primary:hover { background-color: #648e02; color: #ffffff; transform: translateY(-1px); box-shadow: 0 14px 28px -8px rgba(129, 181, 4, .6); } .help-landing .cta-btn--primary:hover svg { transform: translateX(3px); } .help-landing .cta-btn--ghost { background: #ffffff; color: #00487a; border: 1px solid #dbe6ef; box-shadow: 0 4px 12px rgba(15, 42, 30, .05); } .help-landing .cta-btn--ghost:hover { border-color: #00487a; color: #00326C; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 72, 122, .12); } .help-landing .cta-btn--ghost svg { color: #81b504; } @media (max-width: 700px) { .help-landing .cta-box { padding: 32px 24px; gap: 22px; } .help-landing .cta-actions { width: 100%; } .help-landing .cta-btn { flex: 1; justify-content: center; } } /* Responsive */ @media (max-width: 700px) { .help-landing .help-main { padding-top: 100px; padding-bottom: 60px; } .help-landing .banner-help::before, .help-landing .banner-help::after { opacity: .5; } .help-landing .help-search { padding: 5px 5px 5px 12px; } .help-landing .cat-grid { grid-template-columns: 1fr; } .help-landing .cta-box { padding: 26px 22px; } .help-landing .help-cta-section { padding: 30px 0 70px; } } /* Help category listing (/help/detail) */ .help-category { padding: 100px 0 70px; } .help-category .help-cat-head h1 { color: #003e70; font-weight: 600; text-transform: capitalize; } .help-category .help-cat-head .breadcrumbs_view { font-size: 13px; color: #999; margin: 8px 0 0; } .help-category .help-cat-head .breadcrumbs_view a { color: #76a507; text-decoration: none; } .help-category .help-article-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; } .help-category .help-article-list li a { display: block; padding: 16px 20px; border: 1px solid #e6e6e6; border-radius: 10px; color: #003e70; text-decoration: none; background: #fff; transition: all .2s ease; font-weight: 500; } .help-category .help-article-list li a:hover { border-color: #76a507; box-shadow: 0 4px 14px rgba(0,0,0,.06); transform: translateY(-1px); } /* ═══════════════════════════════════════════════════════════════════════ HELP INNER PAGES (article / category / author) — single unified template ═══════════════════════════════════════════════════════════════════════ */ .help-article { --hlp-navy: #00487a; --hlp-navy-dark: #00326C; --hlp-green: #81B504; --hlp-green-dark: #648e02; --hlp-ink: #0f2a1e; --hlp-body: #3d4655; --hlp-muted: #6b7280; --hlp-line: #e6efd6; --hlp-surface: #fdfeff; font-family: "Inter", "Inter Fallback", sans-serif; color: var(--hlp-body); background: var(--hlp-surface); padding: 0; } /* -- Hero -- */ .help-article__hero { position: relative; background: #ffffff; border-bottom: 1px solid #eef1e6; padding: 120px 0 44px; } .help-article__hero .container { max-width: 1160px; } .help-article__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: #6b7280; margin: 0 0 24px; } .help-article__crumbs a { color: #6b7280; text-decoration: none; transition: color .15s ease; } .help-article__crumbs a:hover { color: var(--hlp-green-dark); } .help-article__crumbs-sep { color: #cbd2da; font-weight: 400; } .help-article__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; background: #f5faec; border-radius: 999px; color: var(--hlp-green-dark); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-decoration: none; margin: 0 0 20px; transition: background .15s ease; } .help-article__eyebrow:hover { background: #eaf5d0; color: var(--hlp-green-dark); } .help-article__eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hlp-green); } .help-article__title { font-family: "Inter", "Inter Fallback", sans-serif; font-size: clamp(30px, 2.4vw + 14px, 44px); font-weight: 700; line-height: 1.18; letter-spacing: -.02em; color: var(--hlp-ink); margin: 0 0 24px; max-width: 820px; } .help-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13.5px; color: #6b7280; } .help-article__meta-item { display: inline-flex; align-items: center; gap: 8px; } .help-article__meta-sep { width: 3px; height: 3px; border-radius: 50%; background: #cbd2da; } .help-article__avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--hlp-green) 0%, var(--hlp-green-dark) 100%); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } /* -- Body: article + sticky TOC -- */ .help-article__body { padding: 56px 0 72px; background: #fafbfc; } .help-article__body .container { max-width: 1160px; } .help-article__grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 64px; align-items: start; } @media (max-width: 900px) { .help-article__grid { grid-template-columns: 1fr; gap: 32px; } } .help-article__content { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; max-width: 100%; min-width: 0; } @media (max-width: 700px) { .help-article__content { padding: 0; } } .prose-help { font-family: "Inter", "Inter Fallback", sans-serif; font-size: 16.5px; line-height: 1.75; color: #313842; } .prose-help h2, .prose-help h3, .prose-help h4 { color: var(--hlp-ink); font-weight: 700; letter-spacing: -.015em; scroll-margin-top: 100px; } .prose-help h2 { font-size: 26px; margin: 2.4em 0 .7em; padding-top: .4em; line-height: 1.3; } .prose-help h3 { font-size: 20px; margin: 2em 0 .5em; line-height: 1.35; } .prose-help h4 { font-size: 17px; margin: 1.8em 0 .4em; line-height: 1.4; } .prose-help > :first-child { margin-top: 0; } .prose-help p { margin: 0 0 1.1em; } .prose-help strong { color: var(--hlp-ink); font-weight: 600; } .prose-help a { color: var(--hlp-green-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(100,142,2,.35); transition: text-decoration-color .15s ease; } .prose-help a:hover { text-decoration-color: currentColor; } .prose-help ul, .prose-help ol { padding-left: 1.4em; margin: 0 0 1.2em; } .prose-help li { margin-bottom: .5em; } .prose-help li > p { margin: 0 0 .5em; } .prose-help img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid #e6ebf0; margin: 1.4em 0; box-shadow: 0 8px 20px -12px rgba(15,42,30,.15); } .prose-help blockquote { margin: 1.6em 0; padding: 14px 20px; background: #f5faec; border-left: 3px solid var(--hlp-green); border-radius: 4px; color: #3a4a2e; font-style: italic; } .prose-help code { background: #f4f6f8; padding: 2px 6px; border-radius: 4px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 14px; color: #4a6b09; } .prose-help pre { background: #0f2a1e; color: #e8f2d7; padding: 18px 20px; border-radius: 10px; overflow-x: auto; font-size: 14px; line-height: 1.6; margin: 1.4em 0; } .prose-help pre code { background: transparent; padding: 0; color: inherit; } .prose-help table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 14.5px; border: 1px solid #e6ebf0; border-radius: 8px; overflow: hidden; } .prose-help th, .prose-help td { padding: 10px 14px; border-bottom: 1px solid #eef1e6; text-align: left; } .prose-help th { background: #f5faec; color: var(--hlp-ink); font-weight: 600; } /* Feedback footer */ .help-article__feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 56px; padding: 28px 32px; background: #ffffff; border: 1px solid #eef1e6; border-radius: 14px; font-size: 14px; color: #4a5763; } .help-article__feedback-q { font-size: 15px; font-weight: 600; color: var(--hlp-ink); margin: 0; flex: 1 1 auto; } .help-article__feedback-btns { display: inline-flex; gap: 8px; } .help-article__feedback-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid #e0e6ec; background: #ffffff; color: var(--hlp-ink); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s ease; font-family: inherit; } .help-article__feedback-btn:hover:not(:disabled) { border-color: var(--hlp-green); color: var(--hlp-green-dark); background: #f8ffe9; } .help-article__feedback-btn.is-selected { background: var(--hlp-green); color: #ffffff; border-color: var(--hlp-green); } .help-article__feedback-btn:disabled { opacity: .55; cursor: default; } .help-article__feedback-thanks { color: var(--hlp-green-dark); font-weight: 600; } /* -- Sticky sidebar -- */ .help-article__aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; align-self: start; } @media (max-width: 900px) { .help-article__aside { position: static; } } .help-toc { padding: 0 0 0 16px; border-left: 1px solid #e6ebf0; } .help-toc__label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a929c; margin: 0 0 14px; } .help-toc__list { list-style: none; padding: 0; margin: 0; counter-reset: none; } .help-toc__item { position: relative; } .help-toc__item + .help-toc__item { margin-top: 2px; } .help-toc__item a { display: flex; align-items: baseline; gap: 10px; padding: 6px 4px; color: #6b7280; text-decoration: none; font-size: 13.5px; line-height: 1.45; transition: color .15s ease; } .help-toc__marker { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: #cbd2da; flex-shrink: 0; transform: translateY(-2px); transition: all .15s ease; } .help-toc__text { flex: 1; } .help-toc__item a:hover { color: var(--hlp-ink); } .help-toc__item a:hover .help-toc__marker { background: var(--hlp-green); } .help-toc__item.is-active a { color: var(--hlp-green-dark); font-weight: 600; } .help-toc__item.is-active .help-toc__marker { background: var(--hlp-green); width: 6px; height: 6px; transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(129,181,4,.18); } .help-toc__item--h3 a { padding-left: 20px; font-size: 12.5px; } .help-toc__cta { background: #ffffff; border: 1px solid #eef1e6; border-radius: 14px; padding: 20px 22px; } .help-toc__cta-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hlp-green-dark); margin: 0 0 8px; } .help-toc__cta-body { font-size: 13.5px; color: #4a5763; margin: 0 0 14px; line-height: 1.55; } .help-toc__cta-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; background: var(--hlp-ink); color: #ffffff; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all .18s ease; } .help-toc__cta-btn:hover { background: var(--hlp-green-dark); color: #ffffff; } .help-toc__cta-btn svg { transition: transform .15s ease; } .help-toc__cta-btn:hover svg { transform: translateX(2px); } /* -- Related articles -- */ .help-article__related { padding: 72px 0 110px; background: #ffffff; border-top: 1px solid #eef1e6; } .help-article__related .container { max-width: 1160px; } .help-article__related-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .help-article__related-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hlp-green-dark); margin: 0 0 6px; } .help-article__related-head h2 { font-size: clamp(22px, 1.4vw + 16px, 28px); font-weight: 700; color: var(--hlp-ink); margin: 0; letter-spacing: -.015em; } .help-article__related-more { display: inline-flex; align-items: center; gap: 6px; color: var(--hlp-ink); text-decoration: none; font-size: 14px; font-weight: 600; transition: all .15s ease; } .help-article__related-more:hover { gap: 10px; color: var(--hlp-green-dark); } .help-related-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .help-related-grid li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; background: #fff; border: 1px solid #eef1e6; border-radius: 10px; color: var(--hlp-ink); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: all .18s ease; } .help-related-grid li a:hover { border-color: var(--hlp-green); box-shadow: 0 8px 20px -8px rgba(129,181,4,.25); transform: translateY(-2px); color: var(--hlp-green-dark); } .help-related-grid li a svg { color: #b9c3cf; transition: transform .15s ease, color .15s ease; } .help-related-grid li a:hover svg { color: var(--hlp-green-dark); transform: translateX(3px); } .help-related__title { line-height: 1.4; } /* ── Category listing ── */ .help-category-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 900px; } .help-category-list li a { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: #fff; border: 1px solid #eef1e6; border-radius: 12px; color: var(--hlp-ink); text-decoration: none; font-size: 15.5px; font-weight: 500; transition: all .18s ease; box-shadow: 0 4px 14px -10px rgba(15,42,30,.1); } .help-category-list li a:hover { border-color: var(--hlp-green); box-shadow: 0 10px 24px -10px rgba(129,181,4,.25); transform: translateY(-1px); color: var(--hlp-green-dark); } .help-category-list__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: #f5faec; color: var(--hlp-green-dark); display: inline-flex; align-items: center; justify-content: center; } .help-category-list__title { flex: 1; line-height: 1.4; } .help-category-list__chev { color: #b9c3cf; transition: transform .15s ease, color .15s ease; } .help-category-list li a:hover .help-category-list__chev { color: var(--hlp-green-dark); transform: translateX(3px); } .help-empty { text-align: center; padding: 60px 20px; color: var(--hlp-muted); font-size: 15px; } /* Author archive card list */ .help-article .help-author-body .page-header { display: none; } .help-article .help-author-body article { background: #fff; border: 1px solid #eef1e6; border-radius: 12px; padding: 20px 24px; margin: 12px 0; box-shadow: 0 6px 20px -14px rgba(15, 42, 30, .12); transition: all .18s ease; } .help-article .help-author-body article:hover { border-color: var(--hlp-green); transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(129,181,4,.25); } .help-article .help-author-body .entry-title { font-size: 1.15rem; font-weight: 600; color: var(--hlp-ink); margin: 0 0 6px; line-height: 1.35; } .help-article .help-author-body .entry-title a { color: inherit; text-decoration: none; } .help-article .help-author-body .entry-title a:hover { color: var(--hlp-green-dark); } .help-article .help-author-body .published, .help-article .help-author-body .byline { display: inline-block; font-size: 13px; color: #5b6270; margin-right: 12px; } .help-article .help-author-body .byline a { color: var(--hlp-green-dark); text-decoration: none; } .help-article .help-author-body .entry-summary { color: #3d4655; font-size: 14.5px; line-height: 1.6; margin-top: 8px; } .help-article .help-author-body .entry-summary a { color: var(--hlp-green-dark); font-weight: 500; } /* Neutralise chrome from any stray lifted markup that survived extraction */ .help-article .helpRightSideBar, .help-article .subhead, .help-article > .container > .row > .col-md-4 { display: none; }