/* ============================================================ Welsani — Help Center styles. Loaded only on /help and /help/* pages. Builds on the tokens and primitives in site.css (do not redefine them here). ============================================================ */ /* ---------- Bilingual long-form blocks ---------- Article prose ships as paired [data-lang-block="en"|"nl"] wrappers. English shows by default (and if JS never runs); once applyLang() in i18n.js has run it adds `lang-ready` to and drives visibility with inline styles. The default-hide below is scoped to the pre-JS state only, so clearing the inline style on the active NL block lets it fall back to its natural display rather than staying hidden. */ html:not(.lang-ready) [data-lang-block="nl"] { display: none; } /* ---------- Help hero ---------- */ .help-hero { padding: 60px 0 52px; background: var(--cream); border-bottom: 1px solid var(--line); } .help-search-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 0.92rem; color: var(--muted); } .help-search-note svg { width: 16px; height: 16px; stroke: var(--accent); stroke-width: 1.8; fill: none; } /* ---------- Category cards (hub) ---------- */ .help-cat { display: block; background: var(--white); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 26px; transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; height: 100%; } .help-cat:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(22, 22, 22, 0.4); border-color: var(--accent); } .help-cat .feat-ico { margin-bottom: 14px; } .help-cat h3 { font-size: 1.24rem; font-weight: 560; } .help-cat p { color: var(--muted); margin: 8px 0 16px; font-size: 0.96rem; line-height: 1.5; } .help-cat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .help-cat li a { display: inline-flex; align-items: center; gap: 8px; font-size: 0.93rem; font-weight: 500; color: var(--link); } .help-cat li a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; opacity: 0.55; } .help-cat li a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---------- Breadcrumb ---------- */ .crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--muted); margin-bottom: 18px; } .crumb a { color: var(--link); font-weight: 500; } .crumb a:hover { text-decoration: underline; text-underline-offset: 2px; } .crumb .sep { color: var(--faint); } /* ---------- Article layout ---------- */ .article-shell { display: grid; grid-template-columns: 1fr 240px; gap: 56px; align-items: start; } .article-body { max-width: 720px; min-width: 0; } .article-head { padding-bottom: 26px; margin-bottom: 8px; border-bottom: 1px solid var(--line); } .article-head h1 { font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1.08; letter-spacing: -0.02em; } .article-head .lead { margin-top: 14px; } /* Article prose typography */ .prose { font-size: 1.04rem; line-height: 1.62; color: #2c2a24; } .prose > section { padding-top: 34px; scroll-margin-top: 90px; } .prose h2 { font-size: 1.55rem; line-height: 1.2; margin-bottom: 12px; font-weight: 540; } .prose h3 { font-size: 1.18rem; margin: 26px 0 8px; font-weight: 580; font-family: var(--sans); letter-spacing: -0.01em; } .prose p { margin: 0 0 16px; } .prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; } .prose li { margin-bottom: 8px; } .prose li::marker { color: var(--accent); } .prose a { color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(15, 110, 77, 0.35); } .prose a:hover { text-decoration-color: var(--link); } .prose strong { font-weight: 600; color: var(--ink); } .prose code { font-family: var(--mono); font-size: 0.88em; background: var(--cream-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; } /* Callout / note box */ .note { display: flex; gap: 12px; background: var(--accent-soft); border: 1px solid rgba(13, 90, 64, 0.16); border-radius: 12px; padding: 15px 17px; margin: 0 0 18px; font-size: 0.97rem; line-height: 1.55; } .note svg { width: 18px; height: 18px; stroke: var(--accent); stroke-width: 1.9; fill: none; flex-shrink: 0; margin-top: 2px; } .note p { margin: 0; } .note.warn { background: var(--gold-soft); border-color: rgba(168, 116, 26, 0.22); } .note.warn svg { stroke: var(--gold); } /* Role / availability chip used inside articles */ .avail { display: inline-flex; align-items: center; gap: 7px; background: var(--ok-soft); color: var(--ok); border-radius: 99px; padding: 4px 11px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; } .avail.opt { background: var(--gold-soft); color: var(--gold); } /* ---------- In-page table of contents ---------- */ .toc { position: sticky; top: 92px; font-size: 0.88rem; } .toc-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; } .toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line-2); display: flex; flex-direction: column; } .toc li a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); font-weight: 500; line-height: 1.35; } .toc li a:hover { color: var(--ink); } .toc li a.on { color: var(--accent); border-left-color: var(--accent); } /* ---------- Related + still-need-help ---------- */ .related { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); } .related-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; } .related-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .related-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--white); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; font-weight: 500; font-size: 0.96rem; transition: border-color 0.14s ease, background 0.14s ease; } .related-links a:hover { border-color: var(--accent); background: var(--cream); } .related-links a svg { width: 16px; height: 16px; stroke: var(--accent); stroke-width: 2; fill: none; flex-shrink: 0; } .help-contact { text-align: center; } .help-contact .card-soft { max-width: 640px; margin: 0 auto; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .article-shell { grid-template-columns: 1fr; gap: 0; } .toc { display: none; } } @media (max-width: 640px) { .related-links { grid-template-columns: 1fr; } .help-cat { padding: 22px; } }