/* ============================================================ KeurigOnline HelpScout Docs theme (help.keurigonline.nl) MINTLIFY-STYLE THREE-PANE REWORK — 2026-07-21 (v3). CONSTRAINT: this file styles a THIRD-PARTY hosted docs product (help.keurigonline.nl runs on HelpScout Docs). We can inject ONE custom stylesheet + a HTML/JS blob (head.html) — we cannot touch HelpScout's server-rendered HTML. head.html's JS relocates the fixed HelpScout DOM nodes into the three-pane shell built here (.hs-shell > .hs-sidebar / .hs-main[/ .hs-toc]); this file styles that shell plus the underlying HelpScout selectors it wraps. DEPLOY NOTE — FONTS: this file's @font-face rules are self-hosted on the keurigonline.nl main site (Pablo, where the .woff2 files already live): https://www.keurigonline.nl/template/KeurigOnline/local/fonts/fonnts.com-Aeonik-{Regular,Bold}.woff2 (Aeonik: FLAT in local/fonts/) https://www.keurigonline.nl/template/KeurigOnline/local/fonts/geist/geist-{400,500,600,700}.woff2 (Geist: in the geist/ subfolder) MUST use the www. host, NOT the bare domain: bare keurigonline.nl 301-REDIRECTS to www., and browsers do NOT follow redirects for CORS font requests (@font-face is always CORS-checked cross-origin from help.keurigonline.nl). www. serves the woff2 directly — HTTP 200 + `Access-Control-Allow-Origin: https://help.keurigonline.nl` — so it loads clean (verified 2026-07-22: bare -> 301 no-CORS, www -> 200+CORS). Layout asymmetry too: Aeonik flat in local/fonts/, Geist nested in geist/. Each face is still paired with a same-shape system fallback in --font-display/ --font-body below, so the site reads fine even if a file is missing (just not on-brand). The /helpscout-preview office page ADDS a local /assets/fonts override so the preview renders on-brand on the dev box. Icons: NO icon font, NO CDN (was Bootstrap Icons via jsdelivr — blocked on the dev box and needless prod dependency). head.html injects inline SVG (stroke-based, currentColor) for every icon; this file only sizes/colors them. ============================================================ */ /* ---- Fonts (self-hosted — see deploy note above) ---- */ @font-face { font-family: 'Aeonik Pro'; font-weight: 400; font-style: normal; font-display: swap; src: url('https://www.keurigonline.nl/template/KeurigOnline/local/fonts/fonnts.com-Aeonik-Regular.woff2') format('woff2'); } @font-face { font-family: 'Aeonik Pro'; font-weight: 700; font-style: normal; font-display: swap; src: url('https://www.keurigonline.nl/template/KeurigOnline/local/fonts/fonnts.com-Aeonik-Bold.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-weight: 400; font-style: normal; font-display: swap; src: url('https://www.keurigonline.nl/template/KeurigOnline/local/fonts/geist/geist-400.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-weight: 500; font-style: normal; font-display: swap; src: url('https://www.keurigonline.nl/template/KeurigOnline/local/fonts/geist/geist-500.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-weight: 600; font-style: normal; font-display: swap; src: url('https://www.keurigonline.nl/template/KeurigOnline/local/fonts/geist/geist-600.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-weight: 700; font-style: normal; font-display: swap; src: url('https://www.keurigonline.nl/template/KeurigOnline/local/fonts/geist/geist-700.woff2') format('woff2'); } /* ---- Design tokens (DESIGN.md Appendix, verbatim — same block as Layouts/base.twig) ---- */ :root { --orange-50: #FEF3ED; --orange-100: #FDE0D2; --orange-200: #FBC3A6; --orange-400: #F57C43; --orange-500: #F26522; --orange-600: #D9500F; --orange-700: #B33E0C; --ink-900: #202D39; --ink-700: #3A4552; --neutral-500: #6F6F6F; --neutral-400: #A1A1A1; --neutral-300: #D1D5DB; --neutral-200: #E5E7EB; --neutral-100: #F1F1F1; --surface-subtle: #F9F9F9; --canvas: #FDFDFC; /* page + sidebar base (Pablo) — warm near-white */ --white: #FFFFFF; /* ---- GRAYSCALE SCALE (Pablo, mid-build pivot 2026-07-23 — "Vercel-docs grade, grayscale-first") — a dedicated near-black-to-near-white ramp for the LANDING PAGE rework (hero/header/quick-start panel/category cards): --gray-1000 is the primary text color, --gray-200/100 are hairline borders and quiet surfaces. Distinct from --ink-900/700 (which stay in place, unchanged, everywhere they were already used — article prose, nav tree, etc.) so this pass never silently recolors content this wave didn't touch. --orange-500 stays the ONE deliberate warm accent: the primary hero/header button, the active/selected state, and link-hover — never a default card/icon fill anymore. */ --gray-1000: #0A0A0A; --gray-900: #171717; --gray-700: #404040; --gray-600: #525252; --gray-500: #737373; --gray-400: #A3A3A3; --gray-300: #D4D4D4; --gray-200: #E5E5E5; --gray-150: #EDEDED; --gray-100: #F5F5F5; --gray-50: #FAFAFA; --success: #00B67A; --info: #7896C2; --warning: #FF9F40; --danger: #DB6C6C; --font-display: 'Aeonik Pro', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'SFMono-Regular', 'JetBrains Mono', Consolas, monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; --shadow-xs: 0 1px 2px rgba(32,45,57,0.06); --shadow-sm: 0 2px 8px rgba(32,45,57,0.08); --shadow-md: 0 8px 24px rgba(32,45,57,0.10); --ease-out: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 140ms; --dur-base: 240ms; --sidebar-w: 300px; /* 272→300 (Pablo): roomier nav tree (long category/ article names stop wrapping) + shifts the content block right so the article anchors less to the left */ --toc-w: 260px; --topbar-h: 56px; --prose-max: 820px; --content-max: 1264px; } /* ---- Base ---- */ * { box-sizing: border-box; } *, *::before, *::after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* NO overflow-x:hidden on html/body — it silently breaks position:sticky on the TOC (a sticky element won't stick if ANY ancestor clips overflow). Horizontal overflow is prevented per-element instead (min-width:0 on flex items, overflow-x:auto on wide code/tables). */ html { } body { font-family: var(--font-body) !important; background: var(--canvas) !important; color: var(--ink-900); padding-top: 0 !important; padding-left: 0; padding-right: 0; margin: 0; line-height: 1.6; } /* ONLY h1 is ever Aeonik (Pablo 2026-07-23). h2/h3/h4 are Geist — hierarchy comes from weight/size, not a second typeface. Previously this rule forced the display font onto all of h1-h4, so landing section headings (

) and any

rendered Aeonik; the article page had to carve them back per selector. Fix it at the source so every heading below h1 is body font. / h1 { font-family: var(--font-display) !important; color: var(--ink-900); font-weight: 700; } / line-height: base CSS sets `h1,h2,h3{line-height:36px}` — a fixed 36px that looks broken on a 16px heading. Normalise to 1.3 here so EVERY heading (incl. bare

s not scoped to #fullArticle) has sane leading. */ h2, h3, h4 { font-family: var(--font-body) !important; color: var(--ink-900); font-weight: 700; line-height: 1.3; } /* Inputs/buttons don't inherit font-family from the UA — force ours so no field falls back to a system/serif face (Pablo: "Zoek in de kennisbank" was a default font). */ input, textarea, select, button, .search-query { font-family: var(--font-body); } a { color: var(--orange-700); text-decoration: none; } a:hover { text-decoration: underline; } a:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* hide HelpScout's own navbar entirely — the sidebar header now carries the brand mark (Mintlify never repeats a top navbar above the shell) */ .navbar { display: none !important; } /* ============================================================ TOP BAR — mobile-only utility strip (hamburger + brand); desktop hides it, the brand lives in the sidebar header instead. ============================================================ */ .hs-topbar { display: none; position: sticky; top: 0; z-index: 1100; align-items: center; gap: var(--space-3); height: var(--topbar-h); padding: 0 var(--space-4); background: var(--white); border-bottom: 1px solid #e9ecef; } .hs-topbar-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--radius-md); color: var(--ink-700); cursor: pointer; flex-shrink: 0; } .hs-topbar-toggle:hover { background: var(--surface-subtle); } .hs-topbar-toggle:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 2px; } .hs-topbar-brand { display: flex; align-items: center; } /* search icon + hamburger grouped at the RIGHT end of the bar (client-portal idiom: [Helpdesk] ... [🔎][☰]) */ .hs-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); } .hs-topbar-search { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--radius-md); color: var(--ink-700); cursor: pointer; flex-shrink: 0; } .hs-topbar-search:hover { background: var(--surface-subtle); } .hs-topbar-search:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 2px; } /* ---- Brand lockup: [Ko] / helpdesk — a white rounded badge (orange "K" + black "o", built from text, not an image) followed by a muted "/ helpdesk" label. Replaces the full KO logo image everywhere in this shell: sidebar header + mobile top bar. Links to the docs HOME (head.html's DOCS_HOME), never the marketing site. The badge's own border/background make it read on BOTH the sidebar's --canvas background and the mobile top bar's white background. ---- */ .hs-brand-wordmark { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-900) !important; text-decoration: none !important; font-family: var(--font-display); font-weight: 700; font-size: 1rem; } .hs-brand-wordmark:hover { text-decoration: none !important; } /* Matches the real KO favicon (ko_favicon.ico): a solid orange rounded square with white bold "KO". Not a white box with two-tone letters. */ .hs-brand-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; height: 26px; min-width: 26px; padding: 0 5px; background: var(--orange-500); border-radius: var(--radius-sm); color: var(--white); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; line-height: 1; letter-spacing: 0.01em; } .hs-brand-slash { line-height: 1; /* body font (Geist), NOT the display face — reads as clean supporting text next to the KO badge (Pablo: "helpdesk suddenly a different font"). The display font was also the least-reliable to load off the CDN. */ font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; color: var(--neutral-500); white-space: nowrap; } /* Mobile category bar — horizontally touch-scrollable chips under the top bar (client-portal .mobile-nav-scroll idiom). Hidden on desktop; shown at the same breakpoint the sidebar collapses to a drawer. */ .hs-mobile-nav { display: none; } .hs-mobile-nav-inner { display: flex; gap: var(--space-2); overflow-x: auto; -webkit-overflow-scrolling: touch; padding: var(--space-2) var(--space-4); scrollbar-width: none; } .hs-mobile-nav-inner::-webkit-scrollbar { display: none; } /* Client-portal top-menu idiom (#da-main-nav ul li a): flat items, no pill border/background by default, 14px/500 near-ink text, quiet grey hover/active fills instead of an orange-tinted chip. */ .hs-mobile-nav-item { flex: 0 0 auto; min-height: 44px; display: flex; align-items: center; padding: 8px 12px; border-radius: var(--radius-md); border: none; background: transparent; font-size: 14px; line-height: 20px; font-weight: 500; color: #222; white-space: nowrap; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .hs-mobile-nav-item--active { background: #F1F5F9; color: #111827; font-weight: 500; } .hs-mobile-nav-item:hover { background: #f3f4f6; color: #111827; text-decoration: none; } /* ============================================================ THREE-PANE SHELL ============================================================ */ .hs-shell { display: flex; align-items: flex-start; min-height: 100vh; width: 100%; } /* ---- LEFT SIDEBAR (persistent on every view) ---- Matched to the client-portal #da-sidebar idiom (new.css ~164-260): thin .5rem/8px horizontal padding, transparent-ish background (a hairline right border is kept here for legibility against the docs' white content pane, since the portal sits on its own page canvas — the docs shell needs SOME separation). Sticks flush to the viewport top: the portal's own #da-sidebar uses top:24px only because the portal content area is padded 24px above it; in THIS shell the sidebar starts at y=0 (the brand mark is the first thing at the top), so a 24px offset would leave a dead gap on scroll AND push the last 24px of a tall nav below the fold (max-height 100vh + top 24px overflows the viewport). top:0 is correct here. */ /* Flex column: header (brand+search) + scrollable nav (flex:1) + a footer PINNED to the bottom of the sticky rail (the two low-emphasis exit links) — the sidebar itself no longer scrolls as one long column; only .hs-sidebar-scroll does, so the footer never scrolls out of reach. */ .hs-sidebar { flex: 0 0 var(--sidebar-w); width: var(--sidebar-w); height: 100vh; display: flex; flex-direction: column; background: var(--canvas); border-right: 1px solid #e9ecef; padding: var(--space-4) var(--space-2) 0; position: sticky; top: 0; align-self: flex-start; } /* Desktop: no sidebar panel-header (the sticky .hs-header owns the brand). Shown ONLY inside the mobile drawer (re-styled in the <1024px block). */ .hs-sidebar-header { display: none; } .hs-sidebar-brand { display: flex; align-items: center; } .hs-sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .hs-sidebar-footer { flex-shrink: 0; margin: 0 calc(-1 * var(--space-2)); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--neutral-200); display: flex; flex-direction: column; gap: 2px; } .hs-sidebar-footer-link { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); font-size: 0.8125rem; font-weight: 500; color: var(--neutral-500) !important; text-decoration: none !important; } .hs-sidebar-footer-link:hover { background: #f3f4f6; color: var(--ink-700) !important; } .hs-sidebar-footer-icon { display: flex; align-items: center; flex-shrink: 0; color: var(--neutral-400); } /* Portal search-TRIGGER chrome (Base/Sidebar.css .c-sidebar__search-trigger / new.css #da-search input): 9px radius, #e9ecef border, white background, 8px/12px padding, 14px/400 grey text, grey focus ring — NO orange ring. NON-TYPEABLE (Pablo, mirrors the client portal): this is now a