/* ========================================================================== IAS suite, shared manual stylesheet -------------------------------------------------------------------------- Used by every document in docs/end-user/ and docs/plugin-guides/. Design language is inherited from planning/ROADMAP.html so the whole documentation set reads as one system: same variables, same spacing scale, same light/dark handling. Theme: follows the OS by default via prefers-color-scheme, and can be pinned with / . The pinned form must win in both directions, which is why the two [data-theme] blocks repeat the full variable set rather than relying on the media query alone. SVG diagrams inherit colour through currentColor and the CSS variables below, so a single diagram file works in both themes, never hard-code fills in the inline SVGs. Bundling: tools/bundle-manual.py inlines this file and base64-encodes the screenshots to emit a single portable .html. Keep everything here self-contained (no @import, no web fonts). ========================================================================== */ :root { --bg: #ffffff; --bg-alt: #f6f7f9; --bg-code: #f0f1f4; --fg: #1a1d21; --fg-muted: #5c6370; --border: #dfe2e7; --accent: #7f1d4f; --link: #0b5fa5; --note-bg: #e4edf8; --note-fg: #14538c; --note-br: #4a90d9; --tip-bg: #dff0e2; --tip-fg: #1d6b32; --tip-br: #3f9e5c; --warn-bg: #fdf0d9; --warn-fg: #8a5a06; --warn-br: #d99e2b; --stop-bg: #fbe3e3; --stop-fg: #9a2020; --stop-br: #cc4b4b; /* Diagram palette, referenced from inline SVG via var(). */ --dia-fill: #f6f7f9; --dia-fill-2: #e9edf3; --dia-stroke: #8a94a3; --dia-text: #1a1d21; --dia-accent: #0b5fa5; --dia-accent-2: #7f1d4f; --dia-ok: #1d6b32; --dia-warn: #8a5a06; --shadow: 0 1px 2px rgba(16, 20, 26, .06), 0 4px 12px rgba(16, 20, 26, .05); } @media (prefers-color-scheme: dark) { :root { --bg: #14161a; --bg-alt: #1c1f25; --bg-code: #23272e; --fg: #e6e8eb; --fg-muted: #9aa2ad; --border: #333942; --accent: #e78bb5; --link: #6fb3f2; --note-bg: #17293d; --note-fg: #8fc2f0; --note-br: #3b7fc4; --tip-bg: #16301e; --tip-fg: #86d29b; --tip-br: #3f9e5c; --warn-bg: #3a2e14; --warn-fg: #e5b455; --warn-br: #b8862a; --stop-bg: #3d1e1e; --stop-fg: #f09393; --stop-br: #b34a4a; --dia-fill: #1c1f25; --dia-fill-2: #262b33; --dia-stroke: #6d7683; --dia-text: #e6e8eb; --dia-accent: #6fb3f2; --dia-accent-2: #e78bb5; --dia-ok: #86d29b; --dia-warn: #e5b455; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35); } } :root[data-theme="dark"] { --bg: #14161a; --bg-alt: #1c1f25; --bg-code: #23272e; --fg: #e6e8eb; --fg-muted: #9aa2ad; --border: #333942; --accent: #e78bb5; --link: #6fb3f2; --note-bg: #17293d; --note-fg: #8fc2f0; --note-br: #3b7fc4; --tip-bg: #16301e; --tip-fg: #86d29b; --tip-br: #3f9e5c; --warn-bg: #3a2e14; --warn-fg: #e5b455; --warn-br: #b8862a; --stop-bg: #3d1e1e; --stop-fg: #f09393; --stop-br: #b34a4a; --dia-fill: #1c1f25; --dia-fill-2: #262b33; --dia-stroke: #6d7683; --dia-text: #e6e8eb; --dia-accent: #6fb3f2; --dia-accent-2: #e78bb5; --dia-ok: #86d29b; --dia-warn: #e5b455; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35); } :root[data-theme="light"] { --bg: #ffffff; --bg-alt: #f6f7f9; --bg-code: #f0f1f4; --fg: #1a1d21; --fg-muted: #5c6370; --border: #dfe2e7; --accent: #7f1d4f; --link: #0b5fa5; --note-bg: #e4edf8; --note-fg: #14538c; --note-br: #4a90d9; --tip-bg: #dff0e2; --tip-fg: #1d6b32; --tip-br: #3f9e5c; --warn-bg: #fdf0d9; --warn-fg: #8a5a06; --warn-br: #d99e2b; --stop-bg: #fbe3e3; --stop-fg: #9a2020; --stop-br: #cc4b4b; --dia-fill: #f6f7f9; --dia-fill-2: #e9edf3; --dia-stroke: #8a94a3; --dia-text: #1a1d21; --dia-accent: #0b5fa5; --dia-accent-2: #7f1d4f; --dia-ok: #1d6b32; --dia-warn: #8a5a06; } /* ---- base ---------------------------------------------------------------- */ * { box-sizing: border-box; } body { margin: 0; padding: 2rem 1.25rem 5rem; background: var(--bg); color: var(--fg); font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .wrap { max-width: 64rem; margin: 0 auto; } h1 { font-size: 2rem; line-height: 1.18; margin: 0 0 .4rem; letter-spacing: -.02em; } h2 { font-size: 1.35rem; margin: 3.2rem 0 1rem; padding-bottom: .4rem; border-bottom: 2px solid var(--border); letter-spacing: -.012em; scroll-margin-top: 1rem; } h3 { font-size: 1.08rem; margin: 2rem 0 .6rem; letter-spacing: -.005em; scroll-margin-top: 1rem; } h4 { font-size: .84rem; margin: 1.6rem 0 .5rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; } p, ul, ol { margin: .75rem 0; } ul, ol { padding-left: 1.35rem; } li { margin: .32rem 0; } li > ul, li > ol { margin: .3rem 0; } a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; } a:hover { border-bottom-color: currentColor; } strong { font-weight: 650; } code { background: var(--bg-code); padding: .12em .38em; border-radius: 4px; font: .875em/1.4 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; word-break: break-word; } pre { background: var(--bg-code); border: 1px solid var(--border); border-radius: 8px; padding: .85rem 1rem; overflow-x: auto; margin: 1rem 0; font: .84rem/1.55 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; } hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; } /* ---- document header ----------------------------------------------------- */ .doc-head { margin-bottom: 1.75rem; } .eyebrow { font: 700 .72rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 .6rem; } .lede { color: var(--fg-muted); font-size: 1.06rem; margin: .5rem 0 0; } .doc-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 0; padding: 0; list-style: none; } .doc-meta li { margin: 0; font-size: .8rem; color: var(--fg-muted); border: 1px solid var(--border); border-radius: 999px; padding: .25rem .7rem; background: var(--bg-alt); } .doc-meta strong { color: var(--fg); font-weight: 600; } /* ---- table of contents --------------------------------------------------- */ .toc { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-alt); padding: 1.1rem 1.35rem; margin: 2rem 0; } .toc h2 { font-size: .8rem; margin: 0 0 .7rem; padding: 0; border: 0; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-muted); } .toc ol { margin: 0; padding-left: 1.15rem; columns: 2; column-gap: 2rem; } .toc li { margin: .2rem 0; break-inside: avoid; } @media (max-width: 44rem) { .toc ol { columns: 1; } } /* ---- UI navigation path -------------------------------------------------- */ /* e.g. WooCommerce›Serial Keys›Settings */ .path { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .3em; background: var(--bg-code); border: 1px solid var(--border); border-radius: 5px; padding: .12em .5em; font-size: .875em; font-weight: 600; white-space: normal; } .path i { font-style: normal; color: var(--fg-muted); font-weight: 400; } /* ---- steps --------------------------------------------------------------- */ ol.steps { counter-reset: step; list-style: none; padding-left: 0; margin: 1.2rem 0; } ol.steps > li { counter-increment: step; position: relative; padding: 0 0 1.1rem 2.6rem; margin: 0; border-left: 1px solid var(--border); } ol.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; } ol.steps > li::before { content: counter(step); position: absolute; left: -0.85rem; top: -0.1rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--bg); color: var(--accent); border: 1px solid var(--border); font: 700 .8rem/1.6rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; } ol.steps > li > :first-child { margin-top: 0; } /* ---- figures ------------------------------------------------------------- */ figure { margin: 1.6rem 0; padding: 0; } figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); box-shadow: var(--shadow); } figcaption { margin-top: .6rem; font-size: .86rem; color: var(--fg-muted); line-height: 1.5; } figcaption b { color: var(--fg); font-weight: 600; } /* Diagrams sit on their own surface and scroll rather than overflow. */ figure.diagram { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-alt); padding: 1.2rem; overflow-x: auto; } figure.diagram svg { display: block; max-width: 100%; height: auto; margin: 0 auto; } figure.diagram figcaption { margin-top: .9rem; } /* SVG text/shape defaults, so diagrams need no per-element colour. */ svg .d-box { fill: var(--dia-fill); stroke: var(--dia-stroke); stroke-width: 1.25; } svg .d-box-2 { fill: var(--dia-fill-2); stroke: var(--dia-stroke); stroke-width: 1.25; } svg .d-line { stroke: var(--dia-stroke); stroke-width: 1.5; fill: none; } svg .d-line-accent { stroke: var(--dia-accent); stroke-width: 1.75; fill: none; } svg .d-text { fill: var(--dia-text); font: 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } svg .d-text-sm { fill: var(--fg-muted); font: 11px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } svg .d-text-mono { fill: var(--dia-text); font: 11.5px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } svg .d-title { fill: var(--dia-text); font: 600 13.5px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } svg .d-accent { fill: var(--dia-accent); } svg .d-accent-2 { fill: var(--dia-accent-2); } svg .d-ok { fill: var(--dia-ok); } svg .d-warn { fill: var(--dia-warn); } svg .d-arrow { fill: var(--dia-stroke); } svg .d-arrow-accent { fill: var(--dia-accent); } /* ---- tables -------------------------------------------------------------- */ .scroll { overflow-x: auto; margin: 1.1rem 0; } table { border-collapse: collapse; width: 100%; font-size: .9rem; } th, td { text-align: left; padding: .55rem .7rem; border: 1px solid var(--border); vertical-align: top; } th { background: var(--bg-code); font-weight: 600; } td code { white-space: nowrap; } /* ---- callouts ------------------------------------------------------------ */ .callout { border-left: 3px solid var(--accent); background: var(--bg-code); padding: .8rem 1.1rem; margin: 1.2rem 0; border-radius: 0 8px 8px 0; } .callout > :first-child { margin-top: 0; } .callout > :last-child { margin-bottom: 0; } .callout .label { display: block; font: 700 .7rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .45rem; } .callout.note { background: var(--note-bg); border-left-color: var(--note-br); } .callout.note .label { color: var(--note-fg); } .callout.tip { background: var(--tip-bg); border-left-color: var(--tip-br); } .callout.tip .label { color: var(--tip-fg); } .callout.warn { background: var(--warn-bg); border-left-color: var(--warn-br); } .callout.warn .label { color: var(--warn-fg); } .callout.stop { background: var(--stop-bg); border-left-color: var(--stop-br); } .callout.stop .label { color: var(--stop-fg); } /* ---- cards / feature grid ------------------------------------------------ */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem; margin: 1.2rem 0; padding: 0; list-style: none; } .cards > li { margin: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-alt); padding: .95rem 1.1rem; } .cards h3 { margin: 0 0 .35rem; font-size: .98rem; } .cards p { margin: 0; font-size: .9rem; color: var(--fg-muted); } /* ---- definition-style reference lists ------------------------------------ */ dl.ref { margin: 1.1rem 0; } dl.ref dt { font: 600 .9rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--accent); margin-top: 1rem; } dl.ref dd { margin: .25rem 0 0; padding-left: 0; font-size: .93rem; } /* ---- footer -------------------------------------------------------------- */ .doc-foot { margin-top: 4rem; padding-top: 1.2rem; border-top: 1px solid var(--border); font-size: .85rem; color: var(--fg-muted); } .doc-foot p { margin: .35rem 0; } /* ---- responsive ---------------------------------------------------------- */ @media (max-width: 40rem) { body { padding: 1.25rem .85rem 4rem; } h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; margin-top: 2.4rem; } .toc { padding: .95rem 1.1rem; } ol.steps > li { padding-left: 2.3rem; } } /* ---- print --------------------------------------------------------------- */ @media print { :root { --bg: #fff; --bg-alt: #fff; --bg-code: #f4f4f4; --fg: #000; --fg-muted: #444; --border: #bbb; } body { padding: 0; font-size: 11pt; } .toc { break-inside: avoid; } figure, .callout, table { break-inside: avoid; } h2, h3 { break-after: avoid; } a { color: inherit; border-bottom: 0; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; } .doc-foot { break-before: avoid; } }