/* WeZimplify-flavored B2B utility design. Shared between landing, wizard, single-page, and the cover-sheet preview. */ /* --- Theme tokens --------------------------------------------------------- KM Rustfri's own palette, read off their site's declared globals (2026-08-31): accent #D77F21, primary #0F1B28, secondary #131B2F, text #13243A, neutrals #FFFFFF / #F2F3F5 / #E4E5E5. It replaced Monokai, which was a code-editor theme wearing no relation to the customer. Two orange tokens, and the split is deliberate. --brand is KM's exact #D77F21; on white it has a contrast ratio of 3.02, which is fine for a large mark and fails for text (AA wants 4.5). --accent is the same hue deepened to #9A560C, which reaches 5.66 on white and 5.10 on the page ground, and is what the 19 places that colour TEXT with it actually need. Use --brand for large marks and rules, --accent for anything a person has to read. Every colour below was measured against its own surface; keep it that way when editing. System dark applies the dark set via the media query; an explicit data-theme on (set by theme.js from localStorage) wins over the system preference by specificity. Only colour/shadow tokens change between themes; structural tokens (radius, sizes) live in :root once. The cover-sheet preview (.cs-* below) is hardcoded black/white and is NOT themed - it represents printed paper, and paper does not have a dark mode. */ :root { color-scheme: light; /* KM Rustfri, light */ --bg: #f2f3f5; --panel: #ffffff; --panel-2: #e8ebef; --ink: #13243a; --ink-2: #3c4c60; --muted: #5f6c7b; --line: #e0e3e8; --line-2: #c7ced7; --brand: #d77f21; --accent: #9a560c; --accent-2: #7d4508; --accent-soft: #fbeeda; --warn: #c0392b; --warn-soft: #f9e5e2; --warn-line: #eec4bd; --good: #2f7d4f; --good-soft: #dff0e6; --good-line: #b3ddc4; --err: #a8123f; --shadow: 0 1px 2px rgba(15, 27, 40, 0.05), 0 4px 12px rgba(15, 27, 40, 0.08); --radius: 8px; --topbar-h: 56px; --sidebar-w: 220px; } /* KM Rustfri, dark. The grounds are their own navies (#0F1B28 primary), and the orange is lifted to #E89A4A so it clears 7:1 on them - the brand orange itself sits at 5.75 here and stays usable as --brand for marks. */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --bg: #0f1b28; --panel: #16222e; --panel-2: #1e2c3a; --ink: #eef2f6; --ink-2: #bfcad6; --muted: #8291a1; --line: #253444; --line-2: #33465a; --brand: #d77f21; --accent: #e89a4a; --accent-2: #f2b06b; --accent-soft: rgba(215, 127, 33, 0.16); --warn: #e4794c; --warn-soft: rgba(228, 121, 76, 0.16); --warn-line: rgba(228, 121, 76, 0.42); --good: #56b884; --good-soft: rgba(86, 184, 132, 0.16); --good-line: rgba(86, 184, 132, 0.42); --err: #f2506e; --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.45); } } /* Explicit user choice (attribute selectors beat the media-query :root). */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0f1b28; --panel: #16222e; --panel-2: #1e2c3a; --ink: #eef2f6; --ink-2: #bfcad6; --muted: #8291a1; --line: #253444; --line-2: #33465a; --brand: #d77f21; --accent: #e89a4a; --accent-2: #f2b06b; --accent-soft: rgba(215, 127, 33, 0.16); --warn: #e4794c; --warn-soft: rgba(228, 121, 76, 0.16); --warn-line: rgba(228, 121, 76, 0.42); --good: #56b884; --good-soft: rgba(86, 184, 132, 0.16); --good-line: rgba(86, 184, 132, 0.42); --err: #f2506e; --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.45); } :root[data-theme="light"] { color-scheme: light; --bg: #f2f3f5; --panel: #ffffff; --panel-2: #e8ebef; --ink: #13243a; --ink-2: #3c4c60; --muted: #5f6c7b; --line: #e0e3e8; --line-2: #c7ced7; --brand: #d77f21; --accent: #9a560c; --accent-2: #7d4508; --accent-soft: #fbeeda; --warn: #c0392b; --warn-soft: #f9e5e2; --warn-line: #eec4bd; --good: #2f7d4f; --good-soft: #dff0e6; --good-line: #b3ddc4; --err: #a8123f; --shadow: 0 1px 2px rgba(15, 27, 40, 0.05), 0 4px 12px rgba(15, 27, 40, 0.08); } /* --- Page-to-page transition ---------------------------------------------- Login -> app, and the logo -> forsiden, are full document loads. Cross-document view transitions make them a soft fade instead of a white flash, in two CSS rules and no JavaScript. Out is quick and in is slow, on the same expo-out curve as the wizard's step change, so the whole app moves the same way. Browsers without it get a plain fade-in; nobody gets both. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation-duration: 180ms; animation-timing-function: ease-in; } ::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); } @supports not (view-transition-name: root) { body { animation: doc-in 380ms cubic-bezier(.16, 1, .3, 1) both; } } @keyframes doc-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } body { animation: none; } } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: -apple-system, "Segoe UI", Inter, system-ui, sans-serif; font-size: 14px; line-height: 1.45; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; cursor: pointer; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); padding: 8px 14px; border-radius: 6px; transition: background .12s, border-color .12s; } button:hover { background: var(--panel-2); border-color: var(--accent); } button.primary { background: var(--accent); color: #fff; border-color: var(--accent); } button.primary:hover { background: var(--accent-2); border-color: var(--accent-2); } button:disabled { opacity: 0.5; cursor: not-allowed; } .btn-sync { padding: 4px 10px; font-size: 12px; } .btn-sync.syncing { animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .search-input { font: inherit; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); color: var(--ink); width: 320px; max-width: 100%; } .search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .order-filters { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .cert-no-edit { font: inherit; font-size: 12px; padding: 2px 6px; width: 80px; border: 1px solid var(--brand); border-radius: 4px; background: transparent; color: var(--ink); cursor: text; } .cert-no-edit:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); background: var(--panel); } .cert-no-edit.saved { border-color: var(--good); transition: border-color .3s; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); } .topbar .brand { font-weight: 700; letter-spacing: 0.4px; color: var(--ink); } .topbar .brand small { color: var(--muted); font-weight: 400; margin-left: 8px; } .topbar nav a { margin-left: 16px; color: var(--ink-2); padding: 4px 8px; border-radius: 4px; } .topbar nav a.active { background: var(--accent-soft); color: var(--accent); } .container { max-width: 1280px; margin: 0 auto; padding: 24px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; } h1 { font-size: 22px; margin: 0 0 4px; } h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin: 0 0 10px; border-bottom: 1px solid var(--line); padding-bottom: 8px; } table.data { width: 100%; border-collapse: collapse; font-size: 13px; } table.data th, table.data td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); } table.data th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } table.data tr.row-link { cursor: pointer; } table.data tr.row-link:hover td { background: var(--accent-soft); } /* Same left edge as the selected state, so hovering previews what clicking will do. */ table.data tr.row-link:hover td:first-child { box-shadow: inset 3px 0 0 var(--brand); } table.data tr.selected td { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } .pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; background: var(--accent-soft); color: var(--accent); font-weight: 600; } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.good { background: var(--good-soft); color: var(--good); } /* --- Field help (see assets/field-help.js) -------------------------------- An (i) beside a column heading. Small and quiet until you look for it: the fields it explains are the ones that are empty or misleading often enough that a user stops trusting the screen. */ .fh { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 5px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--muted); font: 600 9px/1 ui-sans-serif, system-ui, sans-serif; font-style: italic; cursor: help; vertical-align: middle; text-transform: none; } .fh:hover, .fh[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .fh:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .fh-pop { position: absolute; z-index: 60; max-width: 320px; background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 13px 12px; font-size: 12.5px; line-height: 1.45; text-transform: none; letter-spacing: 0; font-weight: 400; text-align: left; } .fh-pop b { display: block; margin-bottom: 4px; font-size: 12px; color: var(--ink); } .fh-pop p { margin: 0; color: var(--ink-2); } .fh-pop ul { margin: 0; padding-left: 15px; color: var(--ink-2); } .fh-pop li { margin: 2px 0; } /* --- "powered by WeZimplify" ---------------------------------------------- The logo is artwork and is never re-set in type (wez-design system). Both supplied colourways ship; the theme picks one, because a black wordmark on a navy bar is not a subtle logo, it is an invisible one. */ .wz-powered { display: inline-flex; align-items: center; gap: 7px; padding-left: 14px; margin-left: 2px; border-left: 1px solid var(--line); font-size: 10.5px; color: var(--muted); white-space: nowrap; } .wz-powered img { height: 14px; width: auto; display: block; opacity: .9; } .wz-white { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wz-black { display: none; } :root:not([data-theme="light"]) .wz-white { display: block; } } :root[data-theme="dark"] .wz-black { display: none; } :root[data-theme="dark"] .wz-white { display: block; } :root[data-theme="light"] .wz-black { display: block; } :root[data-theme="light"] .wz-white { display: none; } /* An empty cell says why it is empty. Blank space reads as a broken screen. */ .tom { color: var(--muted); font-size: .85em; font-style: italic; cursor: help; } /* --- Inline Cert. nr. (see KMHelp.certNoField) ----------------------------- Three states, because this field writes to the record a certificate is issued from: a suggestion that is not saved yet, a save that landed, and one that did not. Nothing here is allowed to be silent. */ .cert-no-edit.foreslaaet { border-style: dashed; border-color: var(--brand); color: var(--accent); background: var(--accent-soft); } .cert-no-edit.afventer { border-style: dashed; border-color: var(--brand); background: var(--accent-soft); color: var(--accent); } .cert-no-edit.saved { border-color: var(--good); background: var(--good-soft); } .cert-no-edit.save-failed { border-color: var(--err); background: var(--warn-soft); } /* A quiet mark on any order a human has changed. cert_no is only ever typed by a person - the sync never writes it - so its presence IS the edit flag. */ .redigeret { display: inline-block; margin-left: 7px; padding: 1px 6px; border: 1px solid var(--brand); border-radius: 999px; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); vertical-align: middle; cursor: help; } .kv { display: grid; grid-template-columns: 160px 1fr; gap: 4px 12px; font-size: 13px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; } .muted { color: var(--muted); } .mono { font-family: ui-monospace, "JetBrains Mono", Menlo, monospace; font-size: 12px; } /* Per-row "why does this match?" chips on cert suggestions. Replace the old opaque score pill so stakeholders can see which inputs drove the match. */ .match-chips { display: flex; flex-wrap: wrap; gap: 4px; } .match-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.4; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); } .match-chip.good { background: var(--good-soft); color: var(--good); border-color: var(--good-line); } .match-chip.warm { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); } .match-chip.none { background: var(--panel-2); color: var(--muted); font-style: italic; } .match-chip .chip-detail { font-weight: 400; opacity: 0.85; } /* "Matching-regler" legend that sits above the cert list. Plain-text description of what's in (and out of) the score, in Danish. */ .match-legend { background: var(--accent-soft); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; font-size: 12.5px; color: var(--ink-2); } .match-legend-title { font-weight: 700; color: var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .match-legend ul { margin: 4px 0 0; padding-left: 18px; } .match-legend li { margin: 2px 0; } .match-legend .limit { color: var(--muted); } /* =========================================================================== Cover sheet preview - styled to mirror KM Rustfri's filled Cover Sheets (visual targets: 96604.pdf, 96140_SD.pdf, Eksempel.pdf). Designed to print to A4 cleanly via Ctrl+P -> Save as PDF. =========================================================================== */ .cs-sheet { background: #fff; color: #000; width: 210mm; min-height: 297mm; margin: 0 auto; padding: 14mm 16mm; font-family: "Calibri", "Segoe UI", Arial, sans-serif; font-size: 10.5pt; line-height: 1.35; box-shadow: 0 2px 14px rgba(15, 25, 45, 0.10); } /* --- Header --- Table layout, not flex/grid, and deliberately so: this stylesheet is the ONE source for both the on-screen preview and the PDF, and no PHP PDF engine (Dompdf, mPDF) implements flex or grid. A rule that renders in the browser but silently collapses in the PDF is the worst of both. Keep .cs-* to tables. */ .cs-head { display: table; width: 100%; } .cs-head-left { display: table; padding-right: 16px; } .cs-logo-box { width: 56px; height: 56px; background: #000; color: #fff; font-weight: 900; font-size: 22pt; letter-spacing: -1px; display: table-cell; text-align: center; vertical-align: middle; font-family: "Calibri", sans-serif; } .cs-address { display: table-cell; vertical-align: top; padding-left: 12px; font-size: 9pt; line-height: 1.3; } .cs-address .cs-company { font-weight: 700; font-size: 10pt; } .cs-head-right { display: table-cell; vertical-align: top; text-align: right; min-width: 60mm; } .cs-doc-meta { font-size: 8.5pt; color: #222; margin-bottom: 6px; } .cs-doc-meta .cs-doc-label { color: #444; } .cs-id-table { border-collapse: collapse; margin-left: auto; font-size: 9pt; } .cs-id-table th, .cs-id-table td { border: 1px solid #000; padding: 2px 6px; text-align: left; } .cs-id-table th { background: #e8e8e8; font-weight: 700; } .cs-id-table td { background: #fff; min-width: 32mm; } /* --- Title --- */ .cs-title { text-align: center; margin: 10px 0 8px; } .cs-title h1 { font-size: 22pt; font-weight: 800; margin: 0; letter-spacing: 0.5px; color: #000; font-family: inherit; text-transform: none; border: none; padding: 0; } .cs-subtitle { font-size: 13pt; font-weight: 600; margin-top: 2px; } .cs-subtitle b { font-weight: 700; } /* --- Product table --- */ .cs-product { margin: 6px 0 10px; } .cs-product-label { font-weight: 700; font-size: 9.5pt; margin-bottom: 2px; } .cs-product-table { width: 100%; border-collapse: collapse; font-size: 9pt; table-layout: fixed; } .cs-product-table th, .cs-product-table td { border: 1px solid #000; padding: 6px 6px; text-align: center; vertical-align: middle; word-wrap: break-word; overflow-wrap: break-word; } .cs-product-table th { background: #e8e8e8; font-weight: 700; } .cs-product-table tr.cs-banner-row td { height: 16mm; text-align: center; font-style: italic; color: #222; } .cs-product-table tr.cs-banner-row.cs-banner-empty td { font-style: normal; } .cs-product-table tr.cs-melt-row td { text-align: center; font-weight: 700; height: 10mm; } .cs-product-table tr.cs-melt-row td:first-child { text-align: center; } /* --- Body blocks (labelled paragraphs) --- */ .cs-body { margin-top: 8px; } .cs-block { margin: 6px 0 8px; } .cs-block-h { font-weight: 700; font-size: 10pt; margin-bottom: 2px; } .cs-block p { margin: 1px 0; font-size: 9.5pt; } .cs-validity p { margin: 2px 0; } .cs-ra-banner { background: #f5f7fa; border-left: 3px solid #888; padding: 4px 8px; margin: 4px 0; font-size: 9.5pt; } /* --- Footer: signature + prepared-by --- */ .cs-foot { margin-top: 14px; display: table; width: 100%; } .cs-sign { display: table-cell; vertical-align: top; border: 1px solid #000; padding: 6px 10px; font-size: 9pt; min-width: 70mm; max-width: 90mm; } /* A cannot be the table-cell itself without losing its own rows, so the prepared-by table sits in a wrapper. See templates/preview/*.html. */ .cs-prepared-wrap { display: table-cell; vertical-align: top; text-align: right; padding-left: 16px; } .cs-sign-h { margin-bottom: 1px; } .cs-sign-org { font-weight: 700; } .cs-sign-line { height: 14mm; } .cs-sign-name { font-size: 9pt; } .cs-prepared { border-collapse: collapse; font-size: 9pt; margin-left: auto; } .cs-prepared th, .cs-prepared td { border: 1px solid #000; padding: 3px 8px; text-align: left; } .cs-prepared th { background: #e8e8e8; font-weight: 700; min-width: 18mm; } .cs-prepared td { background: #fff; min-width: 36mm; } .cs-variant-tag { margin-top: 14px; font-size: 7.5pt; color: #888; font-style: italic; text-align: right; } /* --- Print rules --- */ @page { size: A4; margin: 0; } @media print { body { background: #fff !important; } /* `.container > *:not(.cs-sheet)` used to swallow the preview too: the sheet is rendered inside #preview-frame, several levels down, so its ancestors matched the hide rule and Ctrl+P produced a blank page. `.print-keep` marks the one branch that must survive - everything inside it except the frame itself still goes. */ .topbar, nav, .container > *:not(.cs-sheet):not(.print-keep), .sp-grid > *:not(.print-keep) { display: none !important; } .print-keep { display: block !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; background: #fff !important; } .print-keep > *:not(#preview-frame):not(.preview-wrap) { display: none !important; } .preview-wrap { margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; overflow: visible !important; } #preview-frame { display: block !important; width: 210mm !important; height: 297mm !important; border: none !important; background: #fff !important; } .cs-sheet { box-shadow: none; margin: 0; width: 210mm; min-height: 297mm; page-break-after: avoid; } .cs-block, .cs-product, .cs-foot { page-break-inside: avoid; } .cs-variant-tag { display: none; } }