/* ========================================================================= A M Water Services — Van Packs Brand palette (AMWS navy + high-vis orange accent for field CTAs). Mobile-first tuning. AMWS brand palette (from publish.css): --amw-navy: #1e3a5f (primary) --amw-navy-dark: #0f1f33 --amw-navy-light: #2c4f7c --amw-accent: #4a7ba7 --amw-highlight: #6499c7 --amw-sidebar-blue: #3b5998 --amw-bg-light: #f0f4f8 ========================================================================= */ /* --- Palette override --------------------------------------------------- */ /* Material for MkDocs wires the palette via [data-md-color-scheme] on the , so our overrides must be attribute-scoped to win specificity. */ [data-md-color-scheme="default"] { /* AMWS brand palette */ --amw-navy: #1e3a5f; --amw-navy-dark: #0f1f33; --amw-navy-light: #2c4f7c; --amw-accent: #4a7ba7; --amw-highlight: #6499c7; --amw-sidebar-blue: #3b5998; --amw-bg-light: #f0f4f8; --amw-border: #d4dce4; /* Map brand colours into Material's palette vars */ --md-primary-fg-color: var(--amw-navy); --md-primary-fg-color--light: var(--amw-navy-light); --md-primary-fg-color--dark: var(--amw-navy-dark); --md-primary-bg-color: #ffffff; --md-primary-bg-color--light: rgba(255, 255, 255, 0.7); /* Accent = high-vis orange for field CTAs / warnings / print button. Navy + orange is the classic hi-vis pairing, reads well outdoors. */ --md-accent-fg-color: #F4511E; --md-accent-fg-color--transparent: rgba(244, 81, 30, 0.1); --md-accent-bg-color: #ffffff; --md-accent-bg-color--light: rgba(255, 255, 255, 0.7); --md-typeset-a-color: var(--amw-sidebar-blue); } [data-md-color-scheme="slate"] { /* Dark mode — deeper navy primary, lighter link colour */ --amw-navy: #2c4f7c; --amw-navy-dark: #1e3a5f; --amw-navy-light: #4a7ba7; --amw-highlight: #6499c7; --amw-bg-light: #1a2330; --amw-border: #2a3a50; --md-primary-fg-color: var(--amw-navy-dark); --md-primary-fg-color--light: var(--amw-navy); --md-primary-fg-color--dark: #0f1f33; --md-accent-fg-color: #FF7043; --md-accent-fg-color--transparent: rgba(255, 112, 67, 0.15); --md-typeset-a-color: var(--amw-highlight); } :root { --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* --- Typography --------------------------------------------------------- */ /* Larger base type on small screens for readability in bright light */ html { font-size: 17px; } @media (min-width: 960px) { html { font-size: 16px; } } /* --- Homepage hero ------------------------------------------------------ */ .md-typeset h1:first-of-type { font-weight: 700; } /* --- Material 'grid cards' — mobile-tuned polish ------------------------ */ .md-typeset .grid.cards > ul > li, .md-typeset .grid.cards > :is(ol, ul) > li { border-radius: 12px !important; border: 2px solid var(--md-default-fg-color--lightest); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; padding: 1.25rem !important; min-height: 160px; } .md-typeset .grid.cards > :is(ol, ul) > li:hover { border-color: var(--md-primary-fg-color); box-shadow: 0 4px 14px rgba(30, 58, 95, 0.18); /* AMWS navy shadow */ transform: translateY(-2px); } /* Larger, greener icons inside cards */ .md-typeset .grid.cards .twemoji.lg svg, .md-typeset .grid.cards :is(svg.lg) { height: 2.25em; width: 2.25em; color: var(--md-primary-fg-color); fill: var(--md-primary-fg-color); } /* Emphasised 'Print' card — high-vis orange */ .md-typeset .grid.cards > ul > li:has(.print-card) { background: #FFF3E0; border-color: var(--md-accent-fg-color); } .md-typeset .grid.cards .twemoji.print-card svg { color: var(--md-accent-fg-color) !important; fill: var(--md-accent-fg-color) !important; } /* --- Document control header (compact table style) -------------------- */ .doc-control { border-left: 4px solid var(--md-primary-fg-color); padding: 0.4rem 0.9rem 0.5rem; margin: 0 0 1.5rem 0; border-radius: 0 4px 4px 0; background: rgba(30, 58, 95, 0.02); max-width: 100%; overflow: hidden; } .doc-control table { margin: 0; width: 100% !important; border-collapse: collapse; table-layout: auto; font-size: 0.85rem; } .doc-control th, .doc-control td { padding: 0.35rem 0.6rem; text-align: left; vertical-align: top; word-break: normal; overflow-wrap: break-word; min-width: 0; border: none; border-bottom: 1px solid var(--md-default-fg-color--lightest, #e5e8ec); } .doc-control thead th { font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--md-default-fg-color--light); background: transparent; border-bottom: 1px solid var(--md-default-fg-color--lighter, #d4dce4); } .doc-control tbody td { font-weight: 500; color: var(--md-default-fg-color); line-height: 1.45; } .doc-control tbody tr:last-child td { border-bottom: none; } .doc-control tbody td:nth-child(1), .doc-control tbody td:nth-child(2) { font-weight: 600; font-variant-numeric: tabular-nums; } @media (max-width: 50em) { .doc-control table, .doc-control thead, .doc-control tbody, .doc-control tr, .doc-control th, .doc-control td { display: block; width: 100% !important; } .doc-control thead { display: none; } .doc-control tbody td { border: none; padding: 0.15rem 0; white-space: normal !important; } .doc-control tbody td::before { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--md-default-fg-color--light); margin-bottom: 1px; } .doc-control tbody td:nth-child(1)::before { content: "Reference"; } .doc-control tbody td:nth-child(2)::before { content: "Revision"; } .doc-control tbody td:nth-child(3)::before { content: "Issue date"; } .doc-control tbody td:nth-child(4)::before { content: "Next review"; } .doc-control tbody td:nth-child(5)::before { content: "Controlled by"; } .doc-control tbody td:nth-child(6)::before { content: "Approved by"; } .doc-control tbody tr { margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--md-default-fg-color--lightest, #e5e8ec); } .doc-control tbody tr:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } } .md-typeset__scrollwrap { max-width: 100%; } .md-typeset table:not([class]) { table-layout: auto; word-break: normal; overflow-wrap: anywhere; } /* --- Mobile table scroll fallback --------------------------------------- */ .md-typeset table:not([class]) { font-size: 0.9rem; } @media (max-width: 600px) { .md-typeset__table { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* --- Risk-rating colour swatches --------------------------------------- */ .risk-low, .risk-moderate, .risk-high, .risk-very-high { display: inline-block; padding: 2px 10px; border-radius: 4px; font-weight: 600; font-size: 0.9em; white-space: nowrap; } .risk-low { background: #92D050; color: #1B5E20; } .risk-moderate { background: #FFC000; color: #5D4037; } .risk-high { background: #ED7D31; color: #ffffff; } .risk-very-high { background: #C00000; color: #ffffff; } /* --- Related-documents callout ----------------------------------------- */ .related-docs { background: var(--amw-bg-light, rgba(30, 58, 95, 0.06)); border-left: 4px solid var(--amw-highlight, #6499c7); border-radius: 0 8px 8px 0; padding: 1rem 1.25rem; margin: 2rem 0 1rem 0; } .related-docs h3 { color: var(--md-primary-fg-color); margin-top: 0; font-size: 1rem; } .related-docs ul { margin: 0; padding-left: 1.25rem; } /* --- Print rules: strip chrome, add watermark, fit-to-page ------------- */ @media print { .md-header, .md-tabs, .md-sidebar, .md-footer, .md-top { display: none !important; } .md-main__inner, .md-content { margin: 0 !important; max-width: 100% !important; } .md-content__inner { padding: 1cm !important; } body::before { content: "UNCONTROLLED WHEN PRINTED — A M Water Services Ltd"; position: fixed; top: 0.5cm; right: 0.5cm; font-size: 9pt; color: #999; font-weight: 600; } a { text-decoration: none; color: inherit; } h1, h2, h3 { page-break-after: avoid; } table, pre, blockquote { page-break-inside: avoid; } } /* ========================================================================= COLLAPSIBLE SIDEBARS — floating FAB controls (see widescreen.js) Three buttons bottom-right: Wide / Nav / TOC. AMWS navy palette — matches IMS portal pattern. ========================================================================= */ /* Toggle buttons container — fixed bottom-right */ .sidebar-toggles { position: fixed; bottom: 24px; right: 24px; z-index: 999; display: flex; flex-direction: column; gap: 10px; } .sidebar-toggle { width: 48px; height: 48px; border-radius: 50%; background-color: var(--amw-navy); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s; font-size: 20px; font-family: sans-serif; } .sidebar-toggle:hover { background-color: var(--amw-navy-dark); transform: scale(1.08); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } .sidebar-toggle:focus { outline: 2px solid var(--amw-highlight); outline-offset: 2px; } .sidebar-toggle.active { background-color: #424242; } .sidebar-toggle.active:hover { background-color: #333333; } /* Smooth transitions for sidebars */ .md-sidebar { transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; } body.hide-nav .md-sidebar--primary { opacity: 0; visibility: hidden; transform: translateX(-100%); width: 0 !important; min-width: 0 !important; } body.hide-toc .md-sidebar--secondary { opacity: 0; visibility: hidden; transform: translateX(100%); width: 0 !important; min-width: 0 !important; } @media screen and (min-width: 76.25em) { body.hide-nav .md-grid, body.hide-toc .md-grid, body.hide-nav.hide-toc .md-grid { max-width: 100% !important; } body.hide-nav .md-main__inner, body.hide-toc .md-main__inner, body.hide-nav.hide-toc .md-main__inner { max-width: 100% !important; } body.hide-nav .md-content { margin-left: 0 !important; } body.hide-toc .md-content { margin-right: 0 !important; } body.hide-nav.hide-toc .md-content { margin-left: 1rem !important; margin-right: 1rem !important; max-width: calc(100% - 2rem) !important; } body.hide-nav.hide-toc .md-content__inner { max-width: 100% !important; margin: 0 auto; } body.hide-nav .md-sidebar--primary { position: absolute; left: -9999px; } body.hide-toc .md-sidebar--secondary { position: absolute; right: -9999px; } } @media screen and (min-width: 60em) and (max-width: 76.24em) { body.hide-nav .md-grid, body.hide-toc .md-grid, body.hide-nav.hide-toc .md-grid { max-width: 100% !important; } body.hide-toc .md-sidebar--secondary { display: none !important; } body.hide-nav.hide-toc .md-content { margin: 0 1rem !important; max-width: calc(100% - 2rem) !important; } } @media screen and (max-width: 60em) { .sidebar-toggles { display: none; } } @media print { .sidebar-toggles { display: none !important; } }