/* * Help Center — converted 1:1 from the approved Claude Design help-app * (Help Center.dc.html / Help Article.dc.html). A self-contained documentation * app with its own bar + slim footer (header-help.php / footer-help.php), a * three-column article layout, and full light/dark theming driven by CSS * variables (data-theme on , persisted in localStorage). Inline styles in * the templates carry layout (the binding spec) and reference these variables; * this file owns the variables, the reusable components and the responsive pass. */ /* ---------- Theme variables ---------- */ :root { --bg: #ffffff; --bg-2: #f7f4fc; --sidebar: #faf8fe; --surface: #ffffff; --surface-2: #f4f0fb; --ink: #16042E; --text: #2a1747; --muted: #574a6e; --dim: #8a7ea3; --line: rgba(26,8,48,0.10); --line-2: rgba(26,8,48,0.055); --violet: #6D5DF3; --violet-ink: #5547d6; --mint: #3ED696; --accent-soft: rgba(109,93,243,0.10); --bar: rgba(255,255,255,0.82); --bar-line: rgba(26,8,48,0.09); --field: #ffffff; --field-line: rgba(26,8,48,0.13); --shadow: 0 30px 64px -34px rgba(22,4,46,0.26); --shadow-sm: 0 12px 30px -18px rgba(22,4,46,0.20); --code: #f4f0fb; --mesh: 0; } :root[data-theme="dark"] { --bg: #16042E; --bg-2: #1a073a; --sidebar: #190935; --surface: #1f0e44; --surface-2: #23104A; --ink: #ffffff; --text: #E9E2F7; --muted: #C8BCE8; --dim: #998CC2; --line: rgba(255,255,255,0.10); --line-2: rgba(255,255,255,0.055); --violet: #9385FF; --violet-ink: #9385FF; --mint: #3ED696; --accent-soft: rgba(147,133,255,0.13); --bar: rgba(22,4,46,0.72); --bar-line: rgba(255,255,255,0.10); --field: rgba(255,255,255,0.06); --field-line: rgba(255,255,255,0.16); --shadow: 0 30px 64px -30px rgba(0,0,0,0.55); --shadow-sm: 0 12px 30px -18px rgba(0,0,0,0.5); --code: #23104A; --mesh: 1; } /* The help app owns the document background so dark mode covers the viewport. */ body.hc-body-app { margin: 0; background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .hc-root, .hc-root * { box-sizing: border-box; } .hc-root h1, .hc-root h2, .hc-root h3, .hc-root h4 { font-family: 'Fira Sans Condensed', 'Roboto', sans-serif; } .hc-root [style*="border-radius"] { corner-shape: squircle; } .hc-root ::selection { background: #6D5DF3; color: #fff; } @keyframes hpRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .hc-root [data-rev] { opacity: 0; } .hc-root .hp-on { opacity: 1; animation: hpRise .7s cubic-bezier(.22,.61,.21,1) both; } @media (prefers-reduced-motion: reduce) { .hc-root [data-rev] { opacity: 1 !important; } } .hero-grain::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--atarim-noise); background-size: 250px 250px; mix-blend-mode: multiply; opacity: 0; } :root[data-theme="dark"] .hero-grain::after { opacity: 0.45; } /* ---------- App bar ---------- */ .ab-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; } .ab-icon:hover { color: var(--ink); border-color: var(--field-line); } .ab-search { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--field); border: 1px solid var(--field-line); border-radius: 12px; padding: 0 12px; height: 42px; transition: box-shadow .2s ease; } .ab-search:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px var(--accent-soft); } .ab-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: 'Roboto', sans-serif; font-size: 14.5px; color: var(--ink); } .ab-input::placeholder { color: var(--dim); } .kbd { font-family: 'Roboto', sans-serif; font-size: 11.5px; font-weight: 700; color: var(--dim); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; } .mint-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 700; color: #16042E; text-decoration: none; background: #3ED696; padding: 10px 18px; border-radius: 11px; border: none; cursor: pointer; transition: background-color .15s ease; } .mint-btn:hover { background: #35c98a; } /* dark-toggle icon: moon in light mode, sun in dark mode */ .hc-ico-sun { display: none; } :root[data-theme="dark"] .hc-ico-moon { display: none; } :root[data-theme="dark"] .hc-ico-sun { display: inline-flex; } /* ---------- Hero (home) ---------- */ .hsearch { display: flex; align-items: center; gap: 12px; width: min(620px, 100%); background: var(--field); border: 1px solid var(--field-line); border-radius: 16px; padding: 6px 8px 6px 18px; box-shadow: var(--shadow); } .hsearch:focus-within { border-color: var(--violet); } .hsearch input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: 'Roboto', sans-serif; font-size: 17px; color: var(--ink); padding: 11px 0; } .hsearch input::placeholder { color: var(--dim); } .topchip { font-family: 'Roboto', sans-serif; font-size: 13.5px; font-weight: 500; color: var(--muted); background: var(--surface); border: 1px solid var(--line); padding: 8px 15px; border-radius: 999px; cursor: pointer; text-decoration: none; } .topchip:hover { color: var(--ink); border-color: var(--violet); } /* ---------- Cards / rows ---------- */ .cat-card { display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; } .cat-card:hover { border-color: var(--violet); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .cat-link { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--muted); text-decoration: none; padding: 6px 0; border-top: 1px solid var(--line-2); } .cat-link span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cat-link:hover { color: var(--violet); } .pop-row { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; } .pop-row:hover { border-color: var(--violet); box-shadow: var(--shadow-sm); } .help-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; } .help-card:hover { border-color: var(--violet); box-shadow: var(--shadow-sm); } .seeall { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--violet); text-decoration: none; cursor: pointer; background: none; border: none; transition: gap .2s ease; } .seeall:hover { gap: 11px; } .ft-link { color: var(--dim); text-decoration: none; font-size: 13px; } .ft-link:hover { color: var(--ink); } /* ---------- Sidebar (docs tree) ---------- */ .sb-group { border: none; margin-bottom: 2px; } .sb-group > summary { list-style: none; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; cursor: pointer; color: var(--ink); font-family: 'Roboto', sans-serif; font-size: 14.5px; font-weight: 700; user-select: none; } .sb-group > summary::-webkit-details-marker { display: none; } .sb-group > summary:hover { background: var(--surface-2); } .sb-group > summary .sb-glyph { width: 22px; height: 22px; flex-shrink: 0; } .sb-group > summary .sb-name { flex: 1; min-width: 0; } .sb-group > summary .chev { transition: transform .2s ease; flex-shrink: 0; } .sb-group[open] > summary .chev { transform: rotate(90deg); } .sb-arts { display: flex; flex-direction: column; margin: 2px 0 8px; } .sb-art { display: block; padding: 7px 12px 7px 38px; color: var(--muted); text-decoration: none; font-size: 13.5px; line-height: 1.4; border-left: 2px solid transparent; border-radius: 8px; } .sb-art:hover { color: var(--ink); background: var(--surface-2); } .sb-art.sb-on { color: var(--violet); background: var(--accent-soft); font-weight: 700; } /* ---------- TOC + share ---------- */ .toc-link { display: block; padding: 6px 12px; border-left: 2px solid var(--line); color: var(--muted); text-decoration: none; font-size: 13px; line-height: 1.4; } .toc-link:hover { color: var(--ink); } .toc-link.toc-on { color: var(--violet); border-left-color: var(--violet); font-weight: 700; } .toc-link.toc-sub { padding-left: 26px; font-size: 12.5px; } .share-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); cursor: pointer; text-decoration: none; } .share-btn:hover { color: var(--violet); border-color: var(--violet); } /* ---------- Prose ---------- */ .ap-body { color: var(--text); } .ap-body a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; } .ap-body h2, .ap-body h2.wp-block-heading { margin: 46px 0 0; font-family: 'Fira Sans Condensed', sans-serif; font-size: clamp(24px,2.4vw,30px); font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; color: var(--ink); scroll-margin-top: 88px; text-wrap: balance; } .ap-body h3, .ap-body h3.wp-block-heading { margin: 30px 0 0; font-family: 'Fira Sans Condensed', sans-serif; font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--ink); } .ap-body h4, .ap-body h4.wp-block-heading { margin: 24px 0 0; font-size: 17px; font-weight: 700; color: var(--ink); } .ap-body p { margin: 16px 0 0; font-size: 17px; line-height: 1.72; color: var(--text); text-wrap: pretty; } .ap-body ul, .ap-body ol { margin: 16px 0 0; padding-left: 20px; } .ap-body li { font-size: 17px; line-height: 1.65; color: var(--text); margin-top: 9px; text-wrap: pretty; } .ap-body li::marker { color: var(--dim); } .ap-body strong { color: var(--ink); } .ap-body img, .ap-body .wp-block-image img, .ap-body figure img { max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); display: block; } .ap-body figure { margin: 26px 0 0; } .ap-body figcaption { margin-top: 11px; font-size: 13px; line-height: 1.5; color: var(--dim); text-align: center; text-wrap: pretty; } .ap-body blockquote { margin: 32px 0 0; padding: 18px 24px; border-left: 3px solid var(--violet); background: var(--surface-2); border-radius: 0 14px 14px 0; font-family: 'Fira Sans Condensed', sans-serif; font-size: 21px; line-height: 1.32; font-weight: 500; color: var(--ink); text-wrap: balance; } .ap-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--code); padding: 2px 6px; border-radius: 6px; color: var(--violet-ink); } .ap-body pre { background: var(--surface-2); color: var(--text); padding: 18px 20px; border-radius: 14px; overflow: auto; margin: 20px 0 0; font-size: 14px; line-height: 1.6; border: 1px solid var(--line); } .ap-body pre code { background: none; color: inherit; padding: 0; } .ap-body table { width: 100%; border-collapse: collapse; margin: 22px 0 0; font-size: 15px; display: block; overflow-x: auto; } .ap-body th, .ap-body td { text-align: left; padding: 11px 14px; border: 1px solid var(--line); } .ap-body th { background: var(--surface-2); font-weight: 700; color: var(--ink); } .ap-body .wp-block-embed, .ap-body iframe { max-width: 100%; border-radius: 14px; } /* callout box (tip / meta / issues) */ .hc-callout { display: flex; gap: 16px; margin: 30px 0 0; padding: 20px 22px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; } .hc-callout p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); } .hc-callout strong { color: var(--ink); } /* FAQ accordions (Yoast FAQ block →
, built in atarim_help_faqs) */ .ap-body .wp-block-yoast-faq-block { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .hc-faq { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; } .hc-faq > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 15px 18px; font-family: 'Fira Sans Condensed', sans-serif; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink); } .hc-faq > summary::-webkit-details-marker { display: none; } .hc-faq > summary > span { flex: 1; min-width: 0; } .hc-faq > summary:hover { color: var(--violet); } .hc-faq-chev { flex-shrink: 0; color: var(--dim); transition: transform .2s ease; } .hc-faq[open] .hc-faq-chev { transform: rotate(180deg); color: var(--violet); } .hc-faq-a { padding: 0 18px 16px; } .hc-faq-a p, .hc-faq-a .schema-faq-answer { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--muted); } .hc-faq-a p + p { margin-top: 10px; } /* Tips & best practices (the additional_advice meta) */ .hc-tips { margin: 34px 0 0; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); } .hc-tips-head { display: flex; align-items: center; gap: 10px; color: var(--violet); } .hc-tips-head h4 { margin: 0; font-family: 'Fira Sans Condensed', sans-serif; font-size: 18px; font-weight: 600; color: var(--ink); } .hc-tips-body { color: var(--muted); } .hc-tips-body > :first-child { margin-top: 10px; } .hc-tips-body p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); } .hc-tips-body ul, .hc-tips-body ol { margin: 10px 0 0; padding-left: 20px; } .hc-tips-body li { font-size: 15px; line-height: 1.6; color: var(--muted); margin-top: 7px; } /* Copy-link share button: green check only while the "copied" state is active */ .share-btn .copy-done { display: none; } .share-btn.is-copied .copy-idle { display: none; } .share-btn.is-copied .copy-done { display: inline-flex; } .hbtn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; padding: 10px 18px; border-radius: 11px; cursor: pointer; border: 1px solid var(--field-line); background: var(--surface); color: var(--ink); } .hbtn:hover { border-color: var(--violet); color: var(--violet); } .hbtn.hbtn-on { background: var(--violet); border-color: var(--violet); color: #fff; } .hbtn:disabled { opacity: .55; cursor: default; } .rel-row { display: flex; align-items: center; gap: 14px; padding: 15px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; text-decoration: none; transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; } .rel-row:hover { border-color: var(--violet); box-shadow: var(--shadow-sm); } /* ---------- Pagination ---------- */ .ap-center .pagination, .ap-center .nav-links { display: flex; gap: 8px; margin-top: 28px; flex-wrap: wrap; } .ap-center .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; background: var(--surface); } .ap-center .page-numbers.current { background: var(--violet); border-color: var(--violet); color: #fff; } .ap-center .page-numbers:hover:not(.current) { border-color: var(--violet); color: var(--violet); } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { .ap-grid { grid-template-columns: 268px minmax(0,1fr) !important; } .ap-toc { display: none !important; } } @media (max-width: 1080px) { .rsp-cats { grid-template-columns: repeat(2,1fr) !important; } .rsp-pop { grid-template-columns: 1fr !important; } .rsp-help { grid-template-columns: 1fr !important; } } @media (max-width: 980px) { .ap-grid { grid-template-columns: 1fr !important; } .ap-side { display: none !important; } .ap-center { padding: 32px 24px 60px !important; } .ab-searchwrap { display: none !important; } } @media (max-width: 860px) { .ab-searchwrap { display: none !important; } } @media (max-width: 720px) { .ap-center { padding: 26px 16px 52px !important; } .ab-dash-label { display: none !important; } .ab-pad { padding-left: 16px !important; padding-right: 16px !important; } .rsp-pad { padding-left: 16px !important; padding-right: 16px !important; } .hero-pad { padding-left: 16px !important; padding-right: 16px !important; } .rsp-cats { grid-template-columns: 1fr !important; } .rel-grid { grid-template-columns: 1fr !important; } }