/* ========================================================================== VeriCann Analytics v2 — analytics-v2.css Brand overlay for the analytics app (v2 marketing design system). Sibling of dashboard-v2.css: sections 1–8 and 12–14 mirror it verbatim so analytics.vericann.de, dashboard.vericann.de and vericann.de share one chrome. Sections 9–11 are analytics-only (sk-headers field cards, the sample-request status page, the CoA pages). LOAD ORDER CONTRACT - Linked by every analytics template in AFTER the common CSS (bootstrap, style.css, global-style.css, sk-headers.css, sample-request.css, form.css). - Re-linked by templates/partials/header.mustache.html, i.e. in AFTER menu.css + sk-mobile-hamburger*.css, so equal-specificity overrides here also win against the menu styles. - Re-linked ONCE MORE by sample-request.mustache.html directly after {{> analyses-table }}, because that partial links analyses-table.css in after the header. Its state tints are !important at the same specificity as ours — only source order can decide. - Restyles EXISTING sk-* / Bootstrap hooks only — nothing is renamed, no selector the client .mjs modules query is altered. New classes are av2-*. CLASS INVENTORY -------------------------------------------------------------------------- Tokens :root v2 brand tokens (--c-*, --radius…) + re-declared --sk-header-height / --sk-footer-height for the section min-height calc in style.css Base body / a / :focus-visible / h1–h6 .sk-section-content > h2::before small green accent bar Type utils .av2-eyebrow .av2-muted .av2-num .av2-fineprint Sections section, .sk-section-gray, section.sk-section-main hero wave, full-width, bottom-anchored Header / nav header sticky app bar, 6px top accent header nav / nav a / a.sk-corner-logo img Buttons .sk-button (element-qualified), .btn, .btn-primary, .btn.sk-cancel-button, .btn-danger (quiet outline), .sk-table-buttons a.bi Tables .table, thead th, tbody td, hover tint, status dots, #sk-analyses-table tr.sk-state-* softened tints, .sk-analyses-tr nested table, .sk-qr-wrap img .sk-analyses-table-single-request nested table promoted to a primary table (that page shows ONLY the nested one — thead + request rows are hidden by analyses-table.css) Badges .av2-badge --success --warning --danger --muted Cards/panels .av2-card .av2-table-card .av2-card-title .av2-panel .av2-panel-title .av2-empty Forms .form-control, .form-select, .input-group, .alert-* Modals .modal-content / -header / -footer / -title Field cards .sk-cards-wrap, ul.sk-headers, li.sk-field, .sk-field-name, .sk-field-value (+ .sk-saved badge anchor), tracking-number input sample-request #sk-request-bar, #sk-request-message, .sk-title, .sk-cancelled-prompt, #sk-request-cancel-button, #sk-error CoA pages .sk-analysis (cert), .sk-prompt, #cert-id (open-cert) Footer footer + flying-V watermark Responsive ≤1000px field cards stack; ≤700px tables scroll INSIDE .sk-table-wrap; ≤480px 390px-safe paddings Motion prefers-reduced-motion guard ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* v2 brand (mirrors site/css/site.css and dashboard-v2.css) */ --c-primary: #279338; --c-primary-dark: #1b6b28; --c-heading: #233b2d; --c-body: #3a4a40; --c-muted: #5f6e63; /* AA on white, --c-bg-alt and --c-panel */ --c-panel: #eef5ee; --c-panel-border: #cfe5d2; --c-hairline: #e3ebe3; --c-bg: #ffffff; --c-bg-alt: #f4f7f4; --c-cta: #21832f; /* AA-safe solid fill behind white text */ --c-band: #1c4b26; --c-focus: #1b6b28; --c-warn-fg: #7a5d00; --c-warn-bg: #fdf4dc; --c-warn-border: #f0dfa8; --c-danger-fg: #9c2121; --c-danger-bg: #fdecec; --c-danger-border: #f2c6c6; --font-head: "Poppins", "Segoe UI", system-ui, sans-serif; --radius: 8px; --radius-lg: 12px; --shadow-card: 0 1px 2px rgba(35, 59, 45, 0.06), 0 8px 24px rgba(35, 59, 45, 0.07); --accent-h: 6px; /* keep style.css section min-height calc truthful for the slimmer chrome */ --sk-header-height: 96px; --sk-footer-height: 320px; /* brand link colors (override bootstrap's blue) */ --bs-link-color: var(--c-primary-dark); --bs-link-hover-color: var(--c-primary-dark); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ body { overflow-x: clip; background: var(--c-bg); color: var(--c-body); } a { color: var(--c-primary-dark); } /* hover signalled by underline — the lighter green fails AA on white */ a:hover { color: var(--c-primary-dark); text-decoration: underline; } a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: 2px; } /* App-scale Poppins SemiBold headings (global-style's 50-80px marketing sizes are far too loud for status/certificate pages) */ h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--c-heading); line-height: 1.25; } h1 { font-size: clamp(1.9rem, 4vw, 2.4rem); margin-bottom: .5em; } h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); margin-bottom: 1.25rem; color: var(--c-heading); } h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: .75rem; color: var(--c-heading); } h4 { font-size: 1.1rem; font-weight: 600; line-height: 1.4; margin-bottom: .6rem; color: var(--c-heading); } h5 { font-size: 1rem; font-style: normal; font-weight: 600; margin-bottom: .5rem; color: var(--c-heading); } h6 { font-size: .95rem; font-weight: 600; margin-bottom: .5rem; color: var(--c-heading); } /* small green accent bar over page titles (no markup needed) */ .sk-section-content > h2::before { content: ""; display: block; width: 2.5rem; height: 3px; border-radius: 2px; background: var(--c-primary); margin-bottom: .6rem; } /* …but not when an eyebrow already introduces the title. .sr-eyebrow is the wizard sheet's own equivalent — without it the accent bar would appear as a stray green dash between the wizard's eyebrow and its title. */ .av2-eyebrow + h2::before, .sr-eyebrow + h2::before { content: none; } .sk-section-content p { font-weight: 400; color: var(--c-body); line-height: 1.6; } /* -------------------------------------------------------------------------- 3. Type utilities -------------------------------------------------------------------------- */ .av2-eyebrow { display: block; font-family: var(--font-head); font-size: 0.6875rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--c-muted); margin-bottom: 0.6rem; } .av2-muted { color: var(--c-muted) !important; } .av2-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; } /* legal/method fineprint (CoA page) */ .av2-fineprint { display: block; margin-top: 1.5rem; padding: 1rem 1.15rem; border-top: 1px solid var(--c-hairline); font-size: .78rem; line-height: 1.55; color: var(--c-muted); text-align: justify; } /* -------------------------------------------------------------------------- 4. Sections + hero-wave decor -------------------------------------------------------------------------- */ section { padding: 48px 0; /* sk-section-main keeps its !important padding */ } .sk-section-gray { background-color: var(--c-bg-alt); } /* Molecular wave at the section's bottom-right. style.css paints bg-1-gray.webp as a plain background layer, which leaves a hard horizontal seam wherever the asset's baked plate (#e6e9e4) meets the section colour — visible today on the live wizard. The marketing site (site/css/site.css §Decor) solves it the right way: use the WHITE-plated bg-1.webp in a pseudo-element and composite it with mix-blend-mode:multiply, so the plate disappears against any light background. Same technique here. global-style.css already gives section `position:relative; z-index:0`, i.e. a stacking context, so the z-index:-1 layer stays above the section's own background and below all content. The layer is anchored right/bottom and never wider than 70%, so no overflow clipping is needed (which would cut off the QR hover previews). */ /* both selectors are needed: style.css sets the plate twice, and its `section.sk-section-main.sk-section-gray` rule out-specifies a bare `section.sk-section-main` here */ section.sk-section-main, section.sk-section-main.sk-section-gray { background-image: none; isolation: isolate; } section.sk-section-main::before { content: ""; position: absolute; right: 0; bottom: 0; z-index: -1; width: min(70%, 56rem); aspect-ratio: 883 / 397; background: url("/assets/bg-1.webp") no-repeat right bottom / contain; mix-blend-mode: multiply; pointer-events: none; } /* -------------------------------------------------------------------------- 5. Header / nav NOTE: #sk-mobile-hamburger, .sk-mobile-hamburger-*, #sk-logout-wrap and the spacer are owned by the external sk-mobile-hamburger.css/.mjs — deliberately not styled here. Only generic link colors flow into them. -------------------------------------------------------------------------- */ header { position: sticky; top: 0; z-index: 50; /* below bootstrap modals (1055) */ width: 100%; max-width: none; /* menu.css pins 1183px — go full-bleed */ height: auto; min-height: 0; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-top: var(--accent-h) solid var(--c-primary); /* signature bar */ border-bottom: 1px solid var(--c-hairline); } header nav { max-width: 1183px; margin-inline: auto; align-items: center; height: auto; padding: 14px 16px; } header nav a { font-family: var(--font-head); font-weight: 500; font-size: 15px; letter-spacing: .3px; text-transform: none; color: var(--c-heading); transition: color .15s ease; } header nav a:hover { color: var(--c-primary-dark); } header nav a.sk-a-current { border-bottom: 2.5px solid var(--c-primary); /* keep menu.css offset trick */ color: var(--c-primary-dark); } header a.sk-corner-logo img, footer a.sk-corner-logo img { width: min(230px, 48vw); transform: none; } /* -------------------------------------------------------------------------- 6. Buttons -------------------------------------------------------------------------- */ /* element-qualified to out-specificity global-style's :is(.sk-button, input.wpcf7-submit); its disabled rules (form:invalid …, :disabled) are MORE specific and still win. */ a.sk-button, input.sk-button, button.sk-button { font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: .02em; text-transform: none; color: #fff; background-color: var(--c-cta); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(39, 147, 56, 0.28); transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; } a.sk-button:hover, input.sk-button:hover, button.sk-button:hover { color: #fff; background-color: var(--c-primary-dark); } a.sk-button:active, input.sk-button:active, button.sk-button:active { transform: translateY(1px); } .btn { border-radius: var(--radius); font-weight: 500; } .btn-primary { --bs-btn-bg: var(--c-cta); --bs-btn-border-color: var(--c-cta); --bs-btn-hover-bg: var(--c-primary-dark); --bs-btn-hover-border-color: var(--c-primary-dark); --bs-btn-active-bg: var(--c-band); --bs-btn-active-border-color: var(--c-band); --bs-btn-disabled-bg: var(--c-muted); --bs-btn-disabled-border-color: var(--c-muted); } /* light/secondary — the modal "Ja" buttons */ .btn.sk-cancel-button { color: var(--c-primary-dark); background-color: transparent; border: 1px solid var(--c-panel-border); } .btn.sk-cancel-button:hover { color: var(--c-primary-dark); background-color: var(--c-panel); border-color: var(--c-primary-dark); } /* destructive actions are rare and secondary here (cancel a request) — a quiet outline reads better than a full red slab */ .btn.btn-danger { --bs-btn-color: var(--c-danger-fg); --bs-btn-bg: transparent; --bs-btn-border-color: var(--c-danger-border); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #a52a2a; --bs-btn-hover-border-color: #a52a2a; --bs-btn-active-color: #fff; --bs-btn-active-bg: #8c2020; --bs-btn-active-border-color: #8c2020; font-weight: 500; } /* row action icons (.sk-icon-disabled keeps winning via !important) */ .sk-table-buttons a.bi { color: var(--c-primary-dark); transition: opacity .15s ease; } /* keep the AA-safe dark green; signal hover with opacity instead */ .sk-table-buttons a.bi:hover { color: var(--c-primary-dark); opacity: .72; } /* -------------------------------------------------------------------------- 7. Data tables -------------------------------------------------------------------------- */ .table { --bs-table-border-color: var(--c-hairline); --bs-border-color: var(--c-hairline); font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--c-body); } /* light-green header row */ .table > thead > tr > th { font-family: var(--font-head); font-weight: 600; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-heading); background-color: var(--c-panel); border-bottom: 2px solid var(--c-panel-border); padding: .6rem .75rem; } .table > tbody > tr > td { padding: .65rem .75rem; vertical-align: middle; } /* hover tint — only top-level tables inside .sk-table-wrap; analyses state rows keep their !important colors, nested tables unaffected */ .sk-table-wrap > .table > tbody > tr:not(.sk-analyses-tr):hover > td { background-color: var(--c-bg-alt); } .table tr.sk-disabled > td { color: var(--c-muted); background-color: var(--c-bg-alt); } th.sk-analysis-th-amount { text-align: right; } td[data-sk-key="amount"] { text-align: right; font-variant-numeric: tabular-nums; } /* status cell: colored dot in front of the JS-composed text-* color */ td[data-sk-key="status"] { font-weight: 500; } td[data-sk-key="status"].text-success { color: var(--c-primary-dark); } td[data-sk-key="status"].text-secondary { color: var(--c-muted); } td[data-sk-key="status"]:is(.text-success, .text-secondary, .text-danger, .text-body)::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: currentColor; margin-right: .45em; vertical-align: baseline; } /* softened analyses state tints — same frozen hooks, still !important so they keep beating the hover/base rules exactly like before */ #sk-analyses-table tr.sk-state-Cancelled td, #sk-analyses-table tr.sk-state-Cancelled + .sk-analyses-tr :is(td, th) { background-color: #e4e7e4 !important; } #sk-analyses-table tr.sk-state-Announced td { background-color: #f6dddd !important; } #sk-analyses-table tr.sk-state-Received td { background-color: #faf0d3 !important; } #sk-analyses-table tr.sk-state-Processing td { background-color: #f7e4ae !important; } #sk-analyses-table tr.sk-state-Completed td { background-color: #d9ecdf !important; } /* nested per-request analyses table: brand panel green instead of bootstrap success-subtle (structure untouched) */ .sk-analyses-tr table :is(td, th) { background-color: var(--c-panel); } .sk-analyses-tr table thead th { background-color: var(--c-panel); border-bottom: 1px solid var(--c-panel-border); color: var(--c-heading); } /* --- single-request mode (the /sample-request page) ---------------------- analyses-table.css hides the thead and every top-level request row there, so the nested table IS the page's primary table. Promote it: white rows, real padding, a proper green header — instead of the compact tinted sub-table look it inherits from the dashboard's expand/collapse view. */ .sk-analyses-table-single-request .sk-analyses-tr table :is(td, th) { background-color: transparent; line-height: 1.45; padding: .6rem .75rem; } /* analyses-table.css pins em-widths and ellipsises every cell so the nested table fits under a parent row in the dashboard's list view. Here it IS the page, with the full content width to spend — let it breathe and wrap. */ .sk-analyses-table-single-request, .sk-analyses-table-single-request .sk-analyses-tr table { table-layout: auto; } .sk-analyses-table-single-request .sk-analyses-tr table :is(td, th) { width: auto; overflow: visible; text-wrap: wrap; text-overflow: clip; } /* the leading filler column only exists to indent the nested table under its parent row — there is no parent row in single-request mode */ .sk-analyses-table-single-request .sk-analyses-tr table :is(td, th):first-child { display: none; } .sk-analyses-table-single-request .sk-analyses-tr table thead th { font-family: var(--font-head); font-weight: 600; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-heading); background-color: var(--c-panel); border-bottom: 2px solid var(--c-panel-border); } .sk-analyses-table-single-request .sk-analyses-tr table tbody tr:not(:last-child) > td { border-bottom: 1px solid var(--c-hairline); } .sk-analyses-table-single-request .sk-analyses-tr table tbody tr:hover > td { background-color: var(--c-bg-alt); } /* the analyses list is the whole point of this page — don't cap it at the dashboard's 300px inner scroller (the collapsed state still wins) */ .sk-analyses-table-single-request .sk-collapsible-tr:not(.sk-collapsed) > td > div { max-height: none; overflow-y: visible; } /* QR hover preview as a small white card */ .sk-qr-wrap img { background: #fff; border: 1px solid var(--c-hairline); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 6px; } /* -------------------------------------------------------------------------- 8. Status badges -------------------------------------------------------------------------- */ .av2-badge { display: inline-block; font-family: var(--font-head); font-size: .72rem; font-weight: 600; line-height: 1.6; letter-spacing: .04em; text-transform: none; white-space: nowrap; padding: .15em .7em; border-radius: 999px; color: var(--c-primary-dark); background: var(--c-panel); border: 1px solid var(--c-panel-border); } .av2-badge--warning { color: var(--c-warn-fg); background: var(--c-warn-bg); border-color: var(--c-warn-border); } .av2-badge--danger { color: var(--c-danger-fg); background: var(--c-danger-bg); border-color: var(--c-danger-border); } .av2-badge--muted { color: var(--c-muted); background: var(--c-bg-alt); border-color: var(--c-hairline); } /* -------------------------------------------------------------------------- 9. Cards, panels, forms, modals -------------------------------------------------------------------------- */ .av2-card { background: var(--c-bg); border: 1px solid var(--c-hairline); border-top: 3px solid var(--c-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.5rem 1.25rem; } /* error/failure states keep the card, drop the green endorsement */ .av2-card.av2-card--fail { border-top-color: var(--c-danger-border); } .av2-card.av2-table-card { padding: 1rem 1.25rem .5rem; } .av2-table-card .table { margin-bottom: .5rem; } .av2-card-title { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--c-heading); margin-bottom: .5em; } .av2-panel { background: var(--c-panel); border: 1px solid var(--c-panel-border); border-left: 4px solid var(--c-primary); border-radius: var(--radius); padding: 1.25rem 1.25rem; } .av2-panel-title { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--c-heading); margin-bottom: .4em; } .av2-empty { text-align: center; color: var(--c-muted); background: var(--c-bg); border: 1px dashed var(--c-panel-border); border-radius: var(--radius); padding: 2.5rem 1rem; } .av2-stack > * + * { margin-top: 1.5rem; } /* forms (form.css-compatible: heights/margins there are kept) */ .form-control, .form-select { border-radius: var(--radius); border-color: var(--c-panel-border); color: var(--c-body); } .form-control::placeholder { color: var(--c-muted); } .form-control:focus, .form-select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(39, 147, 56, 0.18); } .input-group-text { background-color: var(--c-bg-alt); border-color: var(--c-panel-border); color: var(--c-heading); } /* the search input-group pairs a .form-control with an .sk-button submit, which is not a .btn — restore the joined look bootstrap expects */ .input-group > input.sk-button { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-inline: 22px; } .alert { border-radius: var(--radius); } .alert-success { --bs-alert-bg: var(--c-panel); --bs-alert-border-color: var(--c-panel-border); --bs-alert-color: var(--c-primary-dark); } .alert-warning { --bs-alert-bg: var(--c-warn-bg); --bs-alert-border-color: var(--c-warn-border); --bs-alert-color: var(--c-warn-fg); } .alert-danger { --bs-alert-bg: var(--c-danger-bg); --bs-alert-border-color: var(--c-danger-border); --bs-alert-color: var(--c-danger-fg); } /* modals */ .modal-content { border: 1px solid var(--c-hairline); border-top: 4px solid var(--c-primary); border-radius: var(--radius-lg); box-shadow: 0 2px 4px rgba(35, 59, 45, 0.06), 0 24px 48px rgba(35, 59, 45, 0.18); } .modal-header { border-bottom-color: var(--c-hairline); } .modal-footer { border-top-color: var(--c-hairline); } .modal-title { font-family: var(--font-head); font-weight: 600; color: var(--c-heading); } /* -------------------------------------------------------------------------- 10. Field cards (sk-headers) — shared by /sample-request and /cert Markup is built by sk-headers.mjs and frozen: ul.sk-headers.list-group > li.sk-field.list-group-item > div.sk-field-name + div.sk-field-value -------------------------------------------------------------------------- */ /* equal-height columns — the two cards rarely carry the same field count */ .sk-cards-wrap { align-items: stretch; } /* each column becomes a white card with the brand top accent */ ul.sk-headers.list-group { flex: 1 1 20rem; background: var(--c-bg); border: 1px solid var(--c-hairline); border-top: 3px solid var(--c-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: .35rem .25rem; overflow: hidden; } /* rows: no bootstrap chrome, hairline separators instead */ .sk-headers > li.sk-field.list-group-item { background: transparent; border: 0; border-bottom: 1px solid var(--c-hairline); border-radius: 0; align-items: baseline; gap: .25rem 1rem; padding: .7rem .85rem; } .sk-headers > li.sk-field.list-group-item:last-child { border-bottom: 0; } .sk-headers .sk-field-name { font-family: var(--font-head); font-weight: 500; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); align-items: baseline; flex-shrink: 0; } .sk-headers .sk-field-value { position: relative; /* anchor for the .sk-saved "Gespeichert" badge — without this it resolves against a far-away positioned ancestor */ font-size: .95rem; color: var(--c-heading); font-weight: 500; line-height: 1.45; } /* the inline tracking-number editor */ .sk-headers .sk-field-value input[type="text"] { font-family: inherit; font-size: .9rem; font-weight: 400; color: var(--c-body); background: var(--c-bg-alt); border: 1px solid var(--c-panel-border); border-radius: var(--radius); padding: .3rem .55rem; } .sk-headers .sk-field-value input[type="text"]::placeholder { color: var(--c-muted); } .sk-headers .sk-field-value input[type="text"]:focus { outline: none; background: var(--c-bg); border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(39, 147, 56, 0.18); } .sk-headers .sk-field-value input[type="text"]:disabled { background: var(--c-bg-alt); color: var(--c-muted); } /* "Gespeichert" confirmation pill (sk-headers.css owns the ::after content) */ .sk-field-value.sk-saved::after { background-color: var(--c-primary) !important; border-radius: 999px !important; font-family: var(--font-head); font-weight: 600; letter-spacing: .03em; padding: 3px 9px !important; } /* -------------------------------------------------------------------------- 11. /sample-request status page + CoA pages -------------------------------------------------------------------------- */ /* the bar holds only the "-- Anonym --" marker (unhidden by sample-request.mjs when the request is anonymous) — render it as a badge, not shouty caps */ #sk-request-bar { justify-content: flex-start; font-size: 1rem; text-transform: none; margin-bottom: 1rem; } #sk-request-bar > * { font-weight: 500; } #sk-request-bar > *:last-child { display: inline-block; font-family: var(--font-head); font-size: .72rem; font-weight: 600; letter-spacing: .04em; line-height: 1.6; color: var(--c-muted); background: var(--c-bg-alt); border: 1px solid var(--c-hairline); border-radius: 999px; padding: .15em .7em; } /* collapse the empty strip on non-anonymous requests */ #sk-request-bar:not(:has(> *:not(.sk-hidden))) { margin-bottom: 0; } /* "Nachricht" heading + body */ .sk-title { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--c-heading); margin: 0 0 .5rem; } #sk-request-message { color: var(--c-body); line-height: 1.6; } .sk-cancelled-prompt { font-weight: 500; } #sk-request-cancel-button button { margin-top: .25rem; } #sk-request-cancel-button .spinner-border { color: var(--c-primary) !important; width: 1.25rem; height: 1.25rem; border-width: .18em; } /* not-found state: a card with a search box, not a wall of red */ #sk-error { max-width: 640px; margin: 3rem auto 6rem; background: var(--c-bg); border: 1px solid var(--c-hairline); border-top: 3px solid var(--c-danger-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); color: var(--c-body); padding: 1.75rem 1.5rem; } #sk-error p { color: var(--c-body); margin-bottom: 1.25rem; } #sk-error .input-group { margin-bottom: 0; } /* cert page: the standalone error prompt uses the same treatment. Scoped to direct children of .sk-section-content so the open-cert prompt, which lives INSIDE the form card, keeps the plain inline alert look. */ .sk-section-content > .sk-prompt.alert-danger { max-width: 640px; margin: 3rem auto 6rem; background: var(--c-bg); border: 1px solid var(--c-hairline); border-top: 3px solid var(--c-danger-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); color: var(--c-body); padding: 1.75rem 1.5rem; } /* open-cert: inline prompt inside the form card */ form .sk-prompt.alert-danger { margin-bottom: 1.25rem; } form .sk-prompt.alert-danger p:last-child { margin-bottom: 0; } /* cert page: the analyses list sits below the field cards */ #sk-analyses { margin-top: 1.5rem; } /* cert page: one white card per analysis block */ .sk-analysis { background: var(--c-bg); border: 1px solid var(--c-hairline); border-top: 3px solid var(--c-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.25rem 1.25rem .5rem; margin-bottom: 1.25rem; } .sk-analysis > .sk-title { font-size: 1.05rem; margin-bottom: .75rem; } .sk-analysis .table { margin-bottom: .5rem; } /* approval landing: the verdict line carries a leading status glyph */ .av2-result { font-weight: 500; color: var(--c-heading); } .av2-result::before { display: inline-block; width: 1.4em; font-weight: 700; } .av2-result--ok::before { content: "\2713"; /* check */ color: var(--c-primary); } .av2-result--fail::before { content: "\0021"; /* exclamation */ color: var(--c-danger-fg); } .av2-card > p:last-child { margin-bottom: 0; } /* open-cert: certificate id as a mono chip */ #cert-id { font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace; font-size: .9rem; color: var(--c-heading); background: var(--c-panel); border: 1px solid var(--c-panel-border); border-radius: var(--radius); padding: .15rem .5rem; word-break: break-all; } /* -------------------------------------------------------------------------- 12. Footer (flying-V watermark, right/bottom like the marketing site) -------------------------------------------------------------------------- */ footer { width: 100%; max-width: none; border-top: 1px solid var(--c-hairline); background-color: var(--c-bg); background-image: url("/assets/logos/footer-bg.webp"); background-repeat: no-repeat; background-position: right bottom; background-size: auto 100%; padding-top: 48px; color: var(--c-muted); } footer nav { max-width: 1183px; margin-inline: auto; padding: 16px; } footer nav a { color: var(--c-body); font-weight: 500; } footer nav a:hover { color: var(--c-primary-dark); } .sk-footer-bottom { height: auto; min-height: 88px; border-top: 1px solid var(--c-hairline); padding-block: 12px 24px; } .sk-footer-bottom :is(a, p) { color: var(--c-muted); } /* -------------------------------------------------------------------------- 13. Responsive — down to 390px. Wide content scrolls INSIDE its own .sk-table-wrap container; the page itself never scrolls horizontally. -------------------------------------------------------------------------- */ .sk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 1000px) { /* one card per column stops making sense once they stack */ ul.sk-headers.list-group { flex-basis: 100%; } } @media (max-width: 700px) { header nav { padding: 10px 12px; } /* keep columns readable; the wrap scrolls, not the page */ .sk-table-wrap > .table { min-width: 600px; } .sk-table-wrap > #sk-analyses-table { min-width: 680px; } .sk-section-content { padding: 0 14px; } /* …but a CoA's three columns DO fit a phone once the analyte names are allowed to wrap. Scrolling the result and unit off-screen would hide the whole point of the certificate. Overrides the 56% first-column width from cert.mustache.html's inline