/* * Sophos docs-style theme (Firewall help + support portal feel). * https://docs.sophos.com/nsg/sophos-firewall/22.0/Help/en-us/webhelp/onlinehelp/index.html * Banner cue: https://docs.sophos.com/support/kil/index.html * * Light / dark: prefers-color-scheme, or , or theme button. */ :root { color-scheme: light; --sf-font: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --sf-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace; --sf-brand: #0d526d; --sf-brand-muted: rgba(13, 82, 109, 0.12); --sf-bg: #f4f6f8; --sf-surface: #ffffff; --sf-text: #1a2332; --sf-text-muted: #5c6b7a; --sf-border: #d4dbe3; --sf-link: #0b5cab; --sf-link-hover: #084a8f; --sf-table-header: #e8eef3; --sf-table-stripe: rgba(13, 82, 109, 0.04); --sf-code-bg: #eef1f4; --sf-shadow: 0 1px 3px rgba(26, 35, 50, 0.08); --sf-radius: 6px; --sf-maxw: 56rem; --sf-banner-height: 3.25rem; --sf-toc-width: 17rem; --sf-layout-max: 90rem; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --sf-brand: #3d9bc7; --sf-brand-muted: rgba(61, 155, 199, 0.15); --sf-bg: #0f1216; --sf-surface: #171b21; --sf-text: #e8ecf1; --sf-text-muted: #9aa8b4; --sf-border: #2a3340; --sf-link: #6eb3f0; --sf-link-hover: #9cccf7; --sf-table-header: #1f2630; --sf-table-stripe: rgba(255, 255, 255, 0.03); --sf-code-bg: #1f2630; --sf-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } } html[data-theme="dark"] { color-scheme: dark; --sf-brand: #3d9bc7; --sf-brand-muted: rgba(61, 155, 199, 0.15); --sf-bg: #0f1216; --sf-surface: #171b21; --sf-text: #e8ecf1; --sf-text-muted: #9aa8b4; --sf-border: #2a3340; --sf-link: #6eb3f0; --sf-link-hover: #9cccf7; --sf-table-header: #1f2630; --sf-table-stripe: rgba(255, 255, 255, 0.03); --sf-code-bg: #1f2630; --sf-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } html[data-theme="light"] { color-scheme: light; --sf-brand: #0d526d; --sf-brand-muted: rgba(13, 82, 109, 0.12); --sf-bg: #f4f6f8; --sf-surface: #ffffff; --sf-text: #1a2332; --sf-text-muted: #5c6b7a; --sf-border: #d4dbe3; --sf-link: #0b5cab; --sf-table-header: #e8eef3; --sf-table-stripe: rgba(13, 82, 109, 0.04); --sf-link-hover: #084a8f; --sf-code-bg: #eef1f4; --sf-shadow: 0 1px 3px rgba(26, 35, 50, 0.08); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--sf-font); font-size: 1rem; line-height: 1.55; color: var(--sf-text); background: var(--sf-bg); padding: 0; -webkit-font-smoothing: antialiased; } /* Top banner — support / KIL–style full-width bar */ .doc-site-banner { position: sticky; top: 0; z-index: 100; width: 100%; background: var(--sf-surface); border-bottom: 1px solid var(--sf-border); box-shadow: var(--sf-shadow); } .doc-site-banner-inner { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; max-width: min(100%, 90rem); margin: 0 auto; padding: 0.65rem 1rem; min-height: var(--sf-banner-height); } .doc-site-banner-brand { display: flex; flex-direction: row; align-items: center; gap: 0.85rem; min-width: 0; flex: 1 1 auto; } .doc-site-banner-logo-text { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--sf-brand); flex-shrink: 0; } .doc-site-banner-titles { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; } .doc-site-banner-eyebrow { display: block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sf-text-muted); line-height: 1.2; margin-bottom: 0.15rem; } .doc-site-banner-doc-title { margin: 0; font-size: clamp(0.95rem, 2.5vw, 1.15rem); font-weight: 600; line-height: 1.3; color: var(--sf-text); overflow-wrap: anywhere; } .doc-site-banner-actions { flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem; } .doc-toc-toggle { display: none; font: inherit; font-size: 0.8125rem; padding: 0.4rem 0.85rem; border-radius: var(--sf-radius); border: 1px solid var(--sf-border); background: var(--sf-bg); color: var(--sf-text); cursor: pointer; box-shadow: var(--sf-shadow); white-space: nowrap; } .doc-toc-toggle:hover { border-color: var(--sf-brand); color: var(--sf-brand); } .doc-toc-toggle:focus-visible { outline: 2px solid var(--sf-link); outline-offset: 2px; } .doc-theme-toggle { font: inherit; font-size: 0.8125rem; padding: 0.4rem 0.85rem; border-radius: var(--sf-radius); border: 1px solid var(--sf-border); background: var(--sf-bg); color: var(--sf-text); cursor: pointer; box-shadow: var(--sf-shadow); white-space: nowrap; } .doc-theme-toggle:hover { border-color: var(--sf-brand); color: var(--sf-brand); } .doc-theme-toggle:focus-visible { outline: 2px solid var(--sf-link); outline-offset: 2px; } /* Main + optional TOC sidebar layout */ .doc-main { margin: 0 auto; padding: 1rem 1rem 3rem; max-width: min(100%, var(--sf-layout-max)); } .doc-layout { display: grid; grid-template-columns: minmax(0, var(--sf-toc-width)) minmax(0, 1fr); gap: 1.5rem; align-items: start; } .doc-content { min-width: 0; /*max-width: var(--sf-maxw);*/ } .doc-toc { min-width: 0; background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 0.85rem 1rem 1rem; box-shadow: var(--sf-shadow); } .doc-toc-heading { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sf-text-muted); margin: 0 0 0.65rem; padding: 0; line-height: 1.2; } @media (min-width: 48rem) { .doc-toc { position: sticky; top: calc(var(--sf-banner-height) + 0.75rem); max-height: calc(100vh - var(--sf-banner-height) - 1.25rem); overflow-y: auto; overscroll-behavior: contain; align-self: start; } } @media (max-width: 47.99rem) { .doc-layout { display: block; } .doc-toc-toggle { display: inline-flex; align-items: center; justify-content: center; } .doc-toc { position: fixed; top: var(--sf-banner-height); left: 0; bottom: 0; width: min(19rem, 88vw); max-height: none; margin: 0; border-radius: 0; border-right: 1px solid var(--sf-border); border-top: none; border-bottom: none; border-left: none; z-index: 200; transform: translateX(-100%); transition: transform 0.2s ease; overflow-y: auto; overscroll-behavior: contain; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12); } html[data-theme="dark"] .doc-toc { box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45); } body.doc-toc-open .doc-toc { transform: translateX(0); } body.doc-toc-open { overflow: hidden; } .doc-toc-backdrop { display: none; position: fixed; inset: 0; z-index: 190; background: rgba(15, 18, 22, 0.45); margin: 0; padding: 0; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } body.doc-toc-open .doc-toc-backdrop { display: block; } } @media (prefers-reduced-motion: reduce) { .doc-toc { transition: none; } } /* Table of contents (inline when no sidebar) */ .toc-macro, div[class^="rbtoc"] { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 1rem 1.25rem 1.1rem; margin: 1.25rem 0 2rem; box-shadow: var(--sf-shadow); } /* TOC nested inside left panel — avoid double chrome */ .doc-toc .toc-macro, .doc-toc div[class^="rbtoc"] { margin: 0; padding: 0.35rem 0 0; border: none; border-radius: 0; box-shadow: none; background: transparent; } .toc-macro li, div[class^="rbtoc"] li { margin: 0.2rem 0.5rem; } .TOCOutline { display: none; min-width: 1.5rem; font-weight: 600; color: var(--sf-text-muted); font-variant-numeric: tabular-nums; } h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; color: var(--sf-text); scroll-margin-top: calc(var(--sf-banner-height) + 1rem); } h1 { font-size: clamp(1.65rem, 2.5vw, 2rem); margin: 0 0 !important; padding-bottom: 0.65rem; } h2 { font-size: clamp(1.25rem, 2vw, 1.45rem); margin: 2.25rem 0 0.85rem; padding-top: 0.25rem; } h3 { font-size: 1.1rem; margin: 1.5rem 0 0.6rem; } p { margin: 0 0 0.85rem; } a { color: var(--sf-link); text-decoration: underline; text-underline-offset: 0.12em; } a:hover { color: var(--sf-link-hover); } strong { font-weight: 600; color: var(--sf-text); } .legacy-color-text-default { color: var(--sf-text); } .external-link::after { content: " ↗"; font-size: 0.85em; opacity: 0.7; } code { font-family: var(--sf-mono); font-size: 0.9em; background: var(--sf-code-bg); padding: 0.12em 0.35em; border-radius: 4px; border: 1px solid var(--sf-border); word-break: break-word; overflow-wrap: anywhere; } pre, pre code { border: none; padding: 0; background: transparent; white-space: pre-wrap; word-break: break-word; } blockquote { margin: 1rem 0; padding: 0.5rem 1rem; border-left: 4px solid var(--sf-brand); background: var(--sf-brand-muted); color: var(--sf-text); } hr { border: none; border-top: 1px solid var(--sf-border); margin: 2rem 0; } img { max-width: 100%; height: auto; border-radius: 4px; } ul:not(.toc-indentation), ol { margin: 0 0 1rem 1.25rem; padding: 0; } ul:is(.toc-indentation), ol { margin: 0 0 1rem 1.25rem; padding: 0; } li { margin: 0.35rem 0; } table tbody tr:nth-child(even) { background: var(--sf-table-stripe); } table tbody tr:hover { background: var(--sf-brand-muted); } table tbody tr th { padding: 0.5rem 1rem; border: 1px solid var(--sf-border); background: var(--sf-table-header); color: var(--sf-text); } table tbody tr td { padding: 0.5rem 1rem; border: 1px solid var(--sf-border); color: var(--sf-text); } /* Article tables: keep within column width; wrap long text (e.g. syslog in ) — no horizontal scroll */ .doc-content table { width: 100%; max-width: 100%; min-width: 0; border-collapse: collapse; vertical-align: top; } /* .doc-content table tbody tr th, .doc-content table tbody tr td { min-width: 0; max-width: 100%; word-break: break-word; overflow-wrap: anywhere; hyphens: auto; vertical-align: top; box-sizing: border-box; } .doc-content table tbody tr th p, .doc-content table tbody tr td p { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } .doc-content table tbody tr th code, .doc-content table tbody tr td code { display: block; width: 100%; max-width: 100%; box-sizing: border-box; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; hyphens: none; } .doc-content table tbody tr th pre, .doc-content table tbody tr td pre { max-width: 100%; margin: 0; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; overflow-x: hidden; } .doc-content table img { max-width: 100%; height: auto; } */ /* -------------------------------------------------------------------------- Responsive layout (narrow viewports). Desktop table rules above are unchanged. -------------------------------------------------------------------------- */ @media (max-width: 47.99rem) { .doc-main { padding: clamp(0.75rem, 3vw, 1rem) clamp(0.5rem, 3vw, 1rem) 2.5rem; max-width: 100%; overflow-x: hidden; } .doc-site-banner-inner { padding-left: clamp(0.5rem, 3vw, 1rem); padding-right: clamp(0.5rem, 3vw, 1rem); gap: 0.5rem; } .doc-site-banner-brand { min-width: 0; flex: 1 1 100%; } .doc-site-banner-brand h1 { font-size: clamp(0.8rem, 4.2vw, 1.05rem); line-height: 1.35; overflow-wrap: anywhere; } .doc-site-banner-actions { flex: 0 0 auto; margin-left: auto; } .doc-content { min-width: 0; max-width: 100%; } .toc-macro, div[class^="rbtoc"] { padding: clamp(0.75rem, 2.5vw, 1rem); margin-left: 0; margin-right: 0; } .doc-toc .toc-macro, .doc-toc div[class^="rbtoc"] { padding-left: 0; padding-right: 0; } blockquote { margin-left: 0; margin-right: 0; padding: 0.5rem clamp(0.5rem, 2.5vw, 1rem); } ul:not(.toc-indentation), ol, ul:is(.toc-indentation) { margin-left: clamp(0.75rem, 4vw, 1.25rem); padding-right: 0.25rem; } pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 22rem) { .doc-toc-toggle, .doc-theme-toggle { font-size: 0.75rem; padding: 0.35rem 0.55rem; } }