/* ========================================================================== Public pages — iOS 26 liquid glass -------------------------------------------------------------------------- Scope: body.nz-pub — set by app/Views/layout/index.php on every page that has no left menu (store, documentation, request-estimate form, About) and by the document previews (estimate / proposal / contract / invoice links). The floating header keeps its own sheet (public-header.css, .nz-ph26). Two palettes, declared ONCE as tokens on body.nz-pub and redefined for body.nz-pub.color-1E202D. The dark class is put on by the server (Settings -> Appearance -> Public pages: always light / always dark), or by App\Libraries\Public_theme's head script from prefers-color-scheme ("follow the device"). Whichever way it got there, the dark theme sheet assets/css/color/1E202D.css is active at the same time and its rules are !important — so the dark overrides here are !important too, on purpose. Every colour pair below was measured with tests/public_pages_theme.spec.js: text on glass over the plain gradient, over a flat colour and over a picture under its veil. Keep it that way: change a token, run the test. The admin background (Settings -> Appearance -> Public pages): colour painted on by includes/public_theme_body.php; a dark colour also puts the page in the dark palette (Public_theme) picture the fixed .nz-pub-bg layer under a theme-aware veil ========================================================================== */ body.nz-pub { /* ---- light ---- */ --nz-pub-ink: #1a1a1c; /* body text — 15.1:1 on the page, 13.8:1 on glass */ --nz-pub-ink-2: #3d434d; /* secondary text — 9.2:1 on glass */ --nz-pub-ink-soft: #5a6270; /* muted — 5.9:1 on glass; never below this */ --nz-pub-link: #1f4fd8; --nz-pub-glass: rgba(255, 255, 255, .66); --nz-pub-glass-strong: rgba(255, 255, 255, .84); --nz-pub-stroke: rgba(26, 26, 28, .09); --nz-pub-hairline: rgba(26, 26, 28, .07); --nz-pub-shadow: 0 10px 34px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); --nz-pub-shadow-lift: 0 18px 44px rgba(16, 24, 40, .13), 0 1px 2px rgba(16, 24, 40, .05); --nz-pub-highlight: rgba(255, 255, 255, .9); --nz-pub-field: rgba(255, 255, 255, .78); --nz-pub-field-focus: rgba(255, 255, 255, .96); --nz-pub-chip: rgba(26, 26, 28, .06); --nz-pub-veil: rgba(247, 248, 250, .64); /* the light veil over a background picture */ --nz-pub-cta-bg: #0f1217; --nz-pub-cta-ink: #fcfcfc; --nz-pub-radius: 22px; --nz-pub-radius-sm: 14px; --nz-pub-blur: blur(22px) saturate(160%); } body.nz-pub.color-1E202D { /* ---- dark ---- */ --nz-pub-ink: #f2f4f8; /* 15.6:1 on the page, 12.9:1 on glass */ --nz-pub-ink-2: #c9cede; /* 9.4:1 on glass */ --nz-pub-ink-soft: #a3aabb; /* 6.1:1 on glass */ --nz-pub-link: #8fa8ff; --nz-pub-glass: rgba(37, 41, 50, .62); --nz-pub-glass-strong: rgba(37, 41, 50, .84); --nz-pub-stroke: rgba(255, 255, 255, .11); --nz-pub-hairline: rgba(255, 255, 255, .08); --nz-pub-shadow: 0 10px 34px rgba(0, 0, 0, .38), 0 1px 2px rgba(0, 0, 0, .3); --nz-pub-shadow-lift: 0 18px 44px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .3); --nz-pub-highlight: rgba(255, 255, 255, .09); --nz-pub-field: rgba(255, 255, 255, .07); --nz-pub-field-focus: rgba(255, 255, 255, .11); --nz-pub-chip: rgba(255, 255, 255, .08); --nz-pub-veil: rgba(20, 22, 30, .68); --nz-pub-cta-bg: #f2f4f8; --nz-pub-cta-ink: #0f1217; } /* ------------------------------------------------------ the page itself */ body.nz-pub { color: var(--nz-pub-ink-2); } body.nz-pub.color-1E202D { color: var(--nz-pub-ink-2) !important; } body.nz-pub h1, body.nz-pub h2, body.nz-pub h3, body.nz-pub h4, body.nz-pub h5, body.nz-pub h6, body.nz-pub .strong, body.nz-pub .font-16.strong { color: var(--nz-pub-ink); } body.nz-pub .text-off, body.nz-pub .text-muted, body.nz-pub .form-text { color: var(--nz-pub-ink-soft) !important; } body.nz-pub a:not(.btn):not(.nz-ph26-link):not(.nz-ph26-cta):not(.nz-ph26-drawer-link) { color: var(--nz-pub-link); } /* a background picture: fixed under everything, veiled per theme. z-index -1 puts it under the page's in-flow content but over the canvas — is transparent and creates no stacking context, so nothing else has to be repositioned (the fixed cart button and the modals stay where they are). */ .nz-pub-bg { position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; } .nz-pub-bg::after { content: ""; position: absolute; inset: 0; background: var(--nz-pub-veil, rgba(247, 248, 250, .64)); } body.nz-pub.nz-pub-has-image, body.nz-pub.nz-pub-has-image.color-1E202D { background-color: transparent !important; background-image: none !important; } /* the page gutter: the header capsule spans 1290px, the content follows it */ body.nz-pub .public-page-container .page-wrapper { padding: 25px 20px 40px; } /* ----------------------------------------------------------------- cards */ body.nz-pub .card { background: var(--nz-pub-glass) !important; -webkit-backdrop-filter: var(--nz-pub-blur); backdrop-filter: var(--nz-pub-blur); border: 1px solid var(--nz-pub-stroke) !important; border-radius: var(--nz-pub-radius); box-shadow: var(--nz-pub-shadow); /* the top edge catches the light */ background-image: linear-gradient(180deg, var(--nz-pub-highlight) 0, rgba(255, 255, 255, 0) 42px) !important; transition: box-shadow .25s ease, transform .25s ease; overflow: hidden; } /* background-COLOR, not the shorthand: the documentation category cards carry their banner as an inline background-image on the card header */ body.nz-pub .card .card-header, body.nz-pub .card .card-body, body.nz-pub .card .card-footer, body.nz-pub .card-body, body.nz-pub .card-footer { background-color: transparent !important; border-color: var(--nz-pub-hairline) !important; color: inherit; } body.nz-pub .card .card-header { padding: 16px 20px; font-weight: 600; color: var(--nz-pub-ink); } body.nz-pub .card .card-header:first-child { border-radius: var(--nz-pub-radius) var(--nz-pub-radius) 0 0; } /* the title strip of a section (request estimate, documentation) */ body.nz-pub .page-title, body.nz-pub .card .page-title { background-color: transparent !important; border: 0; border-bottom: 1px solid var(--nz-pub-hairline); color: var(--nz-pub-ink); } body.nz-pub .page-title h1, body.nz-pub .page-title h4 { color: var(--nz-pub-ink); } /* ----------------------------------------------------- lists in a card */ body.nz-pub .list-group-item { background: transparent !important; border-color: var(--nz-pub-hairline) !important; color: var(--nz-pub-ink-2) !important; padding: 14px 18px; } body.nz-pub .list-group-item:first-child { border-top: 0; } body.nz-pub .list-group-item:last-child { border-bottom: 0; } body.nz-pub .list-group-item:hover, body.nz-pub .list-group-item:focus { background: var(--nz-pub-chip) !important; } /* ---------------------------------------------------------------- forms */ body.nz-pub .form-control, body.nz-pub .general-form .form-control, body.nz-pub .select2-container .select2-choice, body.nz-pub .select2-container-multi .select2-choices { background: var(--nz-pub-field) !important; border: 1px solid var(--nz-pub-stroke) !important; border-radius: var(--nz-pub-radius-sm) !important; color: var(--nz-pub-ink) !important; box-shadow: inset 0 1px 0 var(--nz-pub-highlight); transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; } body.nz-pub .form-control::placeholder { color: var(--nz-pub-ink-soft); opacity: 1; } body.nz-pub .form-control:focus, body.nz-pub .general-form .form-control:focus { background: var(--nz-pub-field-focus) !important; border-color: var(--nz-pub-link) !important; box-shadow: 0 0 0 4px rgba(31, 79, 216, .14); } body.nz-pub .select2-container .select2-choice .select2-chosen, body.nz-pub .select2-container .select2-choice>.select2-chosen { color: var(--nz-pub-ink); } body.nz-pub .select2-container .select2-choice .select2-arrow { background: transparent; border: 0; } body.nz-pub .form-check-input { background-color: var(--nz-pub-field); border-color: var(--nz-pub-stroke); } body.nz-pub label, body.nz-pub .form-label, body.nz-pub .form-check-label { color: var(--nz-pub-ink-2); } body.nz-pub .input-group .form-control { border-radius: var(--nz-pub-radius-sm) !important; } /* the phone field's dial code is text next to the input, not in it */ body.nz-pub .iti__selected-dial-code, body.nz-pub .iti__selected-country { color: var(--nz-pub-ink-2) !important; } /* -------------------------------------------------------------- buttons */ body.nz-pub .btn { border-radius: 999px; padding: 8px 18px; font-weight: 500; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; } body.nz-pub .btn-sm, body.nz-pub .btn-group-sm>.btn { padding: 5px 14px; } body.nz-pub .btn:active { transform: scale(.97); } body.nz-pub .btn-default { background: var(--nz-pub-glass-strong) !important; -webkit-backdrop-filter: var(--nz-pub-blur); backdrop-filter: var(--nz-pub-blur); border: 1px solid var(--nz-pub-stroke) !important; color: var(--nz-pub-ink) !important; box-shadow: inset 0 1px 0 var(--nz-pub-highlight), 0 1px 2px rgba(16, 24, 40, .06); } body.nz-pub .btn-default:hover, body.nz-pub .btn-default:focus { box-shadow: inset 0 1px 0 var(--nz-pub-highlight), var(--nz-pub-shadow); } /* the one strong action of a screen: a solid pill in the opposite tone, exactly like the Sign in button of the header */ body.nz-pub .btn-primary, body.nz-pub .btn-info, body.nz-pub .btn-success { border: 1px solid transparent !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); } body.nz-pub .btn-primary, body.nz-pub .btn-info, body.nz-pub .btn-info.text-white { background: var(--nz-pub-cta-bg) !important; color: var(--nz-pub-cta-ink) !important; } body.nz-pub .btn-info:hover, body.nz-pub .btn-info:focus { box-shadow: var(--nz-pub-shadow-lift); } /* the cart's quantity stepper */ body.nz-pub .cart-item-quantity.b-a { background: var(--nz-pub-field); border: 1px solid var(--nz-pub-stroke) !important; border-radius: 10px; color: var(--nz-pub-ink); } body.nz-pub .cart-item-quantity-btn { color: var(--nz-pub-ink-2); } /* the meaning colours, one shade deeper than the app's: white ink on the app's #0abb87 / #f5325c measures 2.5:1 and 3.8:1, these measure 5:1+ */ body.nz-pub .btn-success { background: #0b7f5b !important; color: #fff !important; } body.nz-pub .btn-danger { background: #d22347 !important; color: #fff !important; } body.nz-pub .btn-success:hover, body.nz-pub .btn-danger:hover { filter: brightness(1.08); box-shadow: var(--nz-pub-shadow-lift); } body.nz-pub .btn-primary:hover, body.nz-pub .btn-primary:focus { box-shadow: var(--nz-pub-shadow-lift); } /* --------------------------------------------------------------- footer */ body.nz-pub .footer { margin: 30px 20px 20px; padding: 14px 20px !important; background: var(--nz-pub-glass); -webkit-backdrop-filter: var(--nz-pub-blur); backdrop-filter: var(--nz-pub-blur); border: 1px solid var(--nz-pub-stroke); border-radius: 999px; color: var(--nz-pub-ink-soft); font-size: 13px; position: static !important; } body.nz-pub .footer a { color: var(--nz-pub-ink-2); margin: 0 8px; text-decoration: none; } body.nz-pub .footer a:hover { color: var(--nz-pub-ink); } /* ---------------------------------------------------------------- store */ body.nz-pub .cart-grid-item .card { cursor: default; } body.nz-pub .cart-grid-item .card:hover { box-shadow: var(--nz-pub-shadow-lift); transform: translateY(-2px); } body.nz-pub .cart-grid-item-image-container { border-radius: var(--nz-pub-radius) var(--nz-pub-radius) 0 0; overflow: hidden; } body.nz-pub .cart-grid-item-details-section .strong { color: var(--nz-pub-ink); } body.nz-pub .cart-item-rate { color: var(--nz-pub-ink-2); } body.nz-pub .cart-grid-item-buttons .btn { -webkit-backdrop-filter: var(--nz-pub-blur); backdrop-filter: var(--nz-pub-blur); } /* ------------------------------------------------------- documentation */ body.nz-pub .help-search-box-container .form-control { border-radius: 999px !important; padding-left: 22px; } body.nz-pub .help-category-box, body.nz-pub .help-page .card { color: var(--nz-pub-ink-2); } body.nz-pub .help-category-box .card-header { color: var(--nz-pub-ink); } /* ------------------------------------------------- shared modal (accept) */ body.nz-pub .modal-content { background: var(--nz-pub-glass-strong) !important; -webkit-backdrop-filter: var(--nz-pub-blur); backdrop-filter: var(--nz-pub-blur); border: 1px solid var(--nz-pub-stroke); border-radius: var(--nz-pub-radius); color: var(--nz-pub-ink-2); } body.nz-pub .modal-header, body.nz-pub .modal-footer { background-color: transparent !important; border-color: var(--nz-pub-hairline) !important; } /* ---------------------------------------------------------- reduced motion */ @media (prefers-reduced-motion: reduce) { body.nz-pub .card, body.nz-pub .btn { transition: none; } body.nz-pub .cart-grid-item .card:hover { transform: none; } } /* ----------------------------------------------------------------- phone */ @media (max-width: 575.98px) { body.nz-pub { --nz-pub-radius: 18px; } body.nz-pub .public-page-container .page-wrapper { padding: 16px 16px 32px; } body.nz-pub .footer { margin: 20px 16px 16px; border-radius: var(--nz-pub-radius); text-align: center; } } /* ================================================================== Document previews — estimate / proposal / contract / pay invoice (body.nz-pub-doc, opened by includes/public_doc_body_open.php) The page follows the theme like every public page; the DOCUMENT does not. It is the same HTML that becomes the PDF, so the paper stays white with dark ink in both themes — a sheet of paper on a desk, light or dark. Every dark-theme rule that could leak into it is pinned back here. ================================================================== */ body.nz-pub-doc { margin: 0; } body.nz-pub-doc .page-wrapper { padding: 24px 20px 40px; } body.nz-pub-doc .invoice-preview { max-width: 960px; } /* the action bar above the paper: a glass capsule — logo left, the actions right, whatever floats the markup used */ body.nz-pub-doc .invoice-preview>.card, body.nz-pub-doc .proposal-preview>.card, body.nz-pub-doc .contract-preview>.card, body.nz-pub-doc .estimate-preview>.card { padding: 12px 18px !important; margin-bottom: 18px; border-radius: 999px; overflow: visible; } body.nz-pub-doc .invoice-preview>.card>.clearfix, body.nz-pub-doc .proposal-preview>.card>.clearfix, body.nz-pub-doc .contract-preview>.card>.clearfix, body.nz-pub-doc .estimate-preview>.card>.clearfix { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; } body.nz-pub-doc .card>.clearfix>* { float: none !important; margin-top: 0 !important; } body.nz-pub-doc .card>.clearfix>.max-height-width-logo, body.nz-pub-doc .card>.clearfix>.nizu-logo-stack { margin-right: auto; } body.nz-pub-doc .card>.clearfix>.nizu-logo-stack .max-height-width-logo { float: none; } body.nz-pub-doc .card .grid-button-group { display: flex; gap: 8px; } body.nz-pub-doc .card .grid-button-group>.float-end { float: none !important; } body.nz-pub-doc .card .grid-button-group .btn { margin: 0 !important; } body.nz-pub-doc .card .max-height-width-logo { max-height: 36px; max-width: 150px; } body.nz-pub-doc .card .mt4 { margin-top: 0; } /* the paper */ body.nz-pub-doc .invoice-preview-container { background: #fff !important; color: #333 !important; color-scheme: light; border: 1px solid var(--nz-pub-stroke); border-radius: var(--nz-pub-radius); box-shadow: var(--nz-pub-shadow); padding: 40px 34px; overflow: hidden; } body.nz-pub-doc.color-1E202D .invoice-preview-container { /* a white sheet on a dark desk casts a real shadow, no hairline needed */ border-color: rgba(255, 255, 255, .06); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); } body.nz-pub-doc .invoice-preview-container h1, body.nz-pub-doc .invoice-preview-container h2, body.nz-pub-doc .invoice-preview-container h3, body.nz-pub-doc .invoice-preview-container h4, body.nz-pub-doc .invoice-preview-container h5, body.nz-pub-doc .invoice-preview-container h6, body.nz-pub-doc .invoice-preview-container p, body.nz-pub-doc .invoice-preview-container td, body.nz-pub-doc .invoice-preview-container th, body.nz-pub-doc .invoice-preview-container .strong, body.nz-pub-doc .invoice-preview-container label { color: inherit; } body.nz-pub-doc .invoice-preview-container .text-off, body.nz-pub-doc .invoice-preview-container .text-muted, body.nz-pub-doc .invoice-preview-container .text-default { color: #4e5e6a !important; } body.nz-pub-doc .invoice-preview-container a:not(.btn) { color: #1f4fd8; } /* a contract/proposal template may carry . Bootstrap paints every cell from --bs-table-bg (white), which put white ink on white cells; let the author's own colours through instead */ body.nz-pub-doc .invoice-preview-container .table { --bs-table-bg: transparent; --bs-table-color: inherit; } body.nz-pub-doc .invoice-preview-container .form-control { background: #fff !important; color: #333 !important; border-color: #d9dde3 !important; } /* the pay-invoice amount pill */ body.nz-pub-doc .invoice-payment-amount-section { background: var(--nz-pub-chip) !important; color: var(--nz-pub-ink); border-radius: var(--nz-pub-radius-sm) 0 0 var(--nz-pub-radius-sm); } body.nz-pub-doc .invoice-payment-button .form-control.inline-block { border-radius: 0 var(--nz-pub-radius-sm) var(--nz-pub-radius-sm) 0 !important; } /* accept / reject keep their meaning colours, on white ink */ body.nz-pub-doc .btn-success, body.nz-pub-doc .btn-danger { color: #fff !important; } @media (max-width: 575.98px) { body.nz-pub-doc .page-wrapper { padding: 12px 12px 30px; } body.nz-pub-doc .invoice-preview { min-width: 0; } body.nz-pub-doc .invoice-preview-container { padding: 22px 14px; } body.nz-pub-doc .invoice-preview>.card, body.nz-pub-doc .proposal-preview>.card, body.nz-pub-doc .contract-preview>.card, body.nz-pub-doc .estimate-preview>.card { border-radius: var(--nz-pub-radius); } } @media print { body.nz-pub-doc, body.nz-pub-doc.color-1E202D { background: #fff !important; } body.nz-pub-doc .invoice-preview-container { box-shadow: none; border: 0; border-radius: 0; } }