:root { --ai-chat-fab-shape: circle; --ai-chat-header-bg: #0B0B0B; --ai-chat-header-text-colour: #FFFFFF; --ai-chat-panel-height: 420px; --ai-chat-panel-width: 380px; --ai-chat-position: fab; --auth-footer-display: right-panel; --palette-crm-company-status-client: #80ffc6; --palette-crm-company-status-client-ink: #0f172a; --palette-crm-company-status-prospect: #f6f7f8; --palette-crm-company-status-prospect-ink: #0f172a; --palette-crm-proposal-status-accepted: #b3fd7c; --palette-crm-proposal-status-accepted-ink: #0f172a; --palette-crm-proposal-status-draft: #f6f7f8; --palette-crm-proposal-status-draft-ink: #0f172a; --palette-crm-proposal-status-published: #f4ff6a; --palette-crm-proposal-status-published-ink: #0f172a; --palette-crm-proposal-status-rejected: #ee7863; --palette-crm-proposal-status-rejected-ink: #0f172a; --palette-crm-proposal-status-revoked: #f6f7f8; --palette-crm-proposal-status-revoked-ink: #0f172a; --palette-datasets-current-type-aggregate: var(--brand-primary-colour); --palette-datasets-current-type-aggregate-ink: #ffffff; --palette-datasets-current-type-record: #0b5ca8; --palette-datasets-current-type-record-ink: #ffffff; --palette-datasets-widget-kind-graph: var(--brand-primary-colour); --palette-datasets-widget-kind-graph-ink: #ffffff; --palette-datasets-widget-kind-stat: #b45309; --palette-datasets-widget-kind-stat-ink: #ffffff; --palette-datasets-widget-kind-table: #0b5ca8; --palette-datasets-widget-kind-table-ink: #ffffff; --announcement-banner-background: linear-gradient(90deg, rgba(0, 229, 227, .14), rgba(0, 229, 227, .05)); --announcement-banner-border-colour: rgba(0, 229, 227, .35); --announcement-banner-icon: ; --announcement-banner-message-colour: black; --announcement-banner-style: top-bar; --announcement-banner-title-colour: black; --email-logo-height: ; --email-logo-style: original; --email-button-background-colour: var(--brand-secondary-colour); --email-button-text-colour: black; --email-footer-background-colour: black; --email-footer-text-colour: white; --email-header-background-colour: black; --email-body-font-size: 14px; --email-font-family: Arial, sans-serif; --email-header-font-size: 24px; --message-centre-layout: simple; --notification-badge-colour: #00E5E3; --notification-badge-style: dot; --notification-bell-action: panel; --feedback-link-visibility: visible; --messaging-centre-link-visibility: hidden; --support-link-visibility: hidden; --palette-projects-rag-status-amber: #f4ff6a; --palette-projects-rag-status-amber-ink: #0f172a; --palette-projects-rag-status-green: #80ffc6; --palette-projects-rag-status-green-ink: #0f172a; --palette-projects-rag-status-red: #ee7863; --palette-projects-rag-status-red-ink: #0f172a; --palette-sdlc-branch-state-active: var(--brand-primary-colour); --palette-sdlc-branch-state-active-ink: #ffffff; --palette-sdlc-branch-state-conflict: #ee7863; --palette-sdlc-branch-state-conflict-ink: #0f172a; --palette-sdlc-branch-state-deleted: #f6f7f8; --palette-sdlc-branch-state-deleted-ink: #0f172a; --palette-sdlc-branch-state-merged: #b3fd7c; --palette-sdlc-branch-state-merged-ink: #0f172a; --palette-sdlc-branch-state-pending: #f4ff6a; --palette-sdlc-branch-state-pending-ink: #0f172a; --palette-sdlc-branch-state-untouched: #e7f1ff; --palette-sdlc-branch-state-untouched-ink: #0f172a; --palette-sdlc-dev-session-status-blocked: #ee7863; --palette-sdlc-dev-session-status-blocked-ink: #0f172a; --palette-sdlc-dev-session-status-complete: #b3fd7c; --palette-sdlc-dev-session-status-complete-ink: #0f172a; --palette-sdlc-dev-session-status-paused: #f4ff6a; --palette-sdlc-dev-session-status-paused-ink: #0f172a; --palette-sdlc-dev-session-status-working: var(--brand-primary-colour); --palette-sdlc-dev-session-status-working-ink: #ffffff; --palette-sdlc-release-status-draft: #f6f7f8; --palette-sdlc-release-status-draft-ink: #0f172a; --palette-sdlc-release-status-released: #b3fd7c; --palette-sdlc-release-status-released-ink: #0f172a; --palette-sdlc-release-status-tagged: #00E5E3; --palette-sdlc-release-status-tagged-ink: #0f172a; --palette-sdlc-release-status-tagging: #f4ff6a; --palette-sdlc-release-status-tagging-ink: #0f172a; --alert-danger-bg: #FEF2F2; --alert-danger-border: #FECACA; --alert-danger-fg: #991B1B; --alert-info-bg: #EFF6FF; --alert-info-border: #BFDBFE; --alert-info-fg: #1E40AF; --alert-success-bg: #F0FDF4; --alert-success-border: #BBF7D0; --alert-success-fg: #166534; --alert-warning-bg: #FFFBEB; --alert-warning-border: #FDE68A; --alert-warning-fg: #92400E; --auth-background-image-position: bottom; --auth-layout-style: split; --auth-logo-height: 60px; --auth-logo-position: with-text; --auth-logo-style: original; --auth-powered-by-position: after-welcome-text; --auth-split-icon: ; --auth-welcome-text: hidden; --auth-welcome-text-position: centre; --brand-accent-muted: color-mix(in srgb, var(--brand-accent-colour) 40%, #ffffff); --brand-accent-soft: color-mix(in srgb, var(--brand-accent-colour) 10%, #ffffff); --brand-accent-colour: #afee84; --brand-primary-colour: #000000; --brand-primary-ink: #ffffff; --brand-secondary-colour: #00E5E3; --brand-logos-link: ; --colour-palettes-link: ; --presences-link: ; --brand-primary-muted: color-mix(in srgb, var(--brand-primary-colour) 40%, #ffffff); --brand-primary-soft: color-mix(in srgb, var(--brand-primary-colour) 10%, #ffffff); --brand-secondary-muted: color-mix(in srgb, var(--brand-secondary-colour) 40%, #ffffff); --brand-secondary-soft: color-mix(in srgb, var(--brand-secondary-colour) 10%, #ffffff); --text-accent-colour: #000000; --text-primary-colour: #000000; --text-secondary-colour: #000000; --button-danger-bg: #E31631; --button-danger-fg: white; --button-ghost-danger-border: var(--button-danger-bg); --button-ghost-danger-fg: var(--button-danger-bg); --button-ghost-danger-hover-border: var(--text-secondary-colour); --button-ghost-primary-border: var(--button-primary-bg); --button-ghost-primary-fg: var(--button-primary-bg); --button-ghost-primary-hover-border: var(--text-secondary-colour); --button-ghost-secondary-border: #d1d5db; --button-ghost-secondary-fg: var(--button-secondary-fg); --button-ghost-secondary-hover-border: var(--text-secondary-colour); --button-primary-bg: #afee84; --button-primary-fg: #000000; --button-primary-hover-bg: #ffffff; --button-secondary-bg: white; --button-secondary-fg: black; --button-secondary-hover-bg: #ffffff; --buttons-border-radius: 8px; --buttons-hover-opacity: 1; --buttons-hover-shadow: 0 0 0 3px rgba(0, 229, 227, .22); --buttons-text-transform: none; --link-colour: #008080; --link-font-weight: 600; --link-hover-bg: rgba(0, 229, 227, 0.1); --link-hover-colour: teal; --link-underline-width: 1px; --link-underline-colour: rgba(0, 229, 227, 0.5); --progress-bar-fill: linear-gradient(90deg, #00e5e3 0%, #6ad4f1 45%, #d3c5ff 75%, #f500ff 100%); --progress-bar-track: #F6F7F8; --segmented-toggle-selected-bg: var(--brand-secondary-colour); --segmented-toggle-selected-text-colour: var(--text-secondary-colour); --custom-icons-link: ; --avatar-default-bg-colour: var(--brand-secondary-colour); --avatar-default-text-colour: var(--text-secondary-colour); --avatar-fill-mix: 100%; --avatar-fill-border-mix: 100%; --avatar-fill-ink-mix: 100%; --avatar-radius: 9999px; --font-family: 'Bai Jamjuree', 'Avenir Next', Avenir, system-ui, sans-serif; --font-size: 16px; --font-weight: 400; --header-colour: #000000; --header-font-family: 'Bai Jamjuree', 'Avenir Next', Avenir, system-ui, sans-serif; --header-font-weight: 900; --header-text-transform: none; --chip-fill-mix: 100%; --chip-border-mix: 100%; --chip-ink-mix: 100%; --pill-font-weight: 700; --section-nav-item-inset: 0.75rem; --section-nav-item-spacing: 0.375rem; --tab-active-font-weight: 900; --tab-font-weight: 600; --tab-hover-bg: transparent; --tab-hover-text-colour: #374151; --tab-indicator-colour: var(--button-primary-bg); --tab-indicator-width: 1px; --tab-row-border-colour: #e5e7eb; --tab-row-border-width: 1px; --tab-inset: 0.875rem; --tab-selected-bg: transparent; --tab-spacing: 0.5rem; --tab-text-colour: #6b7280; --toc-active-font-weight: 600; --toc-font-size: 13px; --toc-font-weight: 500; --page-bg-colour: #fafafa; --page-bg-image: none; --page-text-colour: #333333; --main-layout: sidebar; --page-header-location: page; --record-drawers: enabled; --scrollbar-visibility: hidden; --content-margin: 0 auto; --content-bg-colour: #ffffff; --content-bg-image: none; --content-border-colour: #ffffff; --content-font-size: 15px; --content-line-height: 1.55; --content-max-width: 1020px; --content-paragraph-spacing: 10px; --content-text-colour: #333333; --content-heading-weight: 900; --page-footer-border-colour: #E9EAEC; --page-footer-enabled: enabled; --page-footer-padding-x: 4rem; --page-footer-updated-visibility: hidden; --page-heading-font-family: BaiJamjuree-Bold; --page-heading-size: 26px; --page-heading-weight: 700; --page-hero-banner-colour: ; --page-hero-banner-enabled: disabled; --page-hero-banner-tint: 8; --section-heading-colour: #333333; --section-heading-margin-bottom: 8px; --section-heading-margin-top: 0px; --section-heading-size: 26px; --section-heading-weight: 700; --page-content-gap: 16px; --page-content-padding-bottom: 1.5rem; --page-content-padding-top: 2rem; --page-content-padding-x: 3rem; --page-header-description-gap: 8px; --page-header-padding-top: 2rem; --page-header-padding-x: 3rem; --palette-ui-semantic-brand: var(--brand-primary-colour); --palette-ui-semantic-brand-ink: #ffffff; --palette-ui-semantic-caution: #F8A43D; --palette-ui-semantic-caution-ink: #0f172a; --palette-ui-semantic-informative: #80ffc6; --palette-ui-semantic-informative-ink: #0f172a; --palette-ui-semantic-negative: #ee7863; --palette-ui-semantic-negative-ink: #0f172a; --palette-ui-semantic-neutral: #f6f7f8; --palette-ui-semantic-neutral-ink: #0f172a; --palette-ui-semantic-positive: #b3fd7c; --palette-ui-semantic-positive-ink: #0f172a; --palette-ui-severity-critical: #FF5536; --palette-ui-severity-critical-ink: #ffffff; --palette-ui-severity-elevated: #f4ff6a; --palette-ui-severity-elevated-ink: #0f172a; --palette-ui-severity-notable: #00E5E3; --palette-ui-severity-notable-ink: #0f172a; --palette-ui-severity-routine: #f6f7f8; --palette-ui-severity-routine-ink: #0f172a; --palette-ui-severity-serious: #FF8A12; --palette-ui-severity-serious-ink: #0f172a; --sidebar-font-size: 14px; --sidebar-font-weight: 900; --sidebar-icon-size: 1.0625rem; --sidebar-item-gutter: 10px; --sidebar-item-inset: 0.75rem; --sidebar-item-spacing: 0.35rem; --sidebar-section-label-size: 0.75rem; --sidebar-section-label-spacing: 1rem; --sidebar-selected-bg: #14302f; --sidebar-selected-border: var(--sidebar-selected-icon); --sidebar-selected-icon: #00E5E3; --sidebar-selected-text: white; --sidebar-text-colour: #C5C8CC; --sidebar-bg-opacity: 100; --sidebar-header-inset: 1.25rem; --sidebar-header-padding-y: 1.5rem; --sidebar-logo-height: 56px; --sidebar-logo-style: original; --sidebar-nav-padding-y: 1rem; --sidebar-pattern: off; --sidebar-width: max-content; --table-first-column-weight: 600; --table-row-hover-bg: #f2fcfd; --table-variant: floating; --filter-pill-active-bg: #0a0a0a; --filter-pill-active-text-colour: #ffffff; --filter-pill-bg: #ffffff; --filter-pill-border-colour: #e6e6e4; --filter-pill-dark-active-bg: #00E5E3; --filter-pill-dark-active-text-colour: #0a0a0a; --filter-pill-text-colour: #3d3d3d; --dark-mode-toggle-visibility: visible; --message-icon-visibility: hidden; --profile-position: sidebar; --top-nav-icon-colour: var(--brand-primary-colour); --top-nav-icon-style: inline; --top-nav-inset: 0px; --top-nav-logo-height: 36px; --top-nav-size: compact; --command-palette-icon: search; --command-palette-keyboard-hint: hidden; --command-palette-location: left; --widget-border-colour: #E9EAEC; --widget-border-width: 1px; --widget-row-hover-bg: #E0FCFC; --widget-shadow: 0 2px 8px rgba(10, 10, 10, .08); --widget-grid-gap: 1.5rem; --widget-header-spacing: 20px; --widget-padding-x: 1.25rem; --widget-padding-y: 1rem; --widget-heading-letter-spacing: 0.14rem; --widget-heading-size: 12px; --widget-heading-text-transform: uppercase; --widget-heading-weight: 900; --email-accent-colour: var(--brand-primary-colour); --email-content-background-colour: var(--content-bg-colour); --email-content-border-colour: var(--content-border-colour); --email-content-text-colour: var(--content-text-colour); --email-page-background-colour: var(--page-bg-colour); --email-page-text-colour: var(--page-text-colour); --funnel-input-colour: ; --funnel-input-placeholder-colour: ; --command-palette-search-page: core; } html.dark:root { --ai-chat-header-bg: #0B0B0B; --ai-chat-header-text-colour: #FFFFFF; --palette-crm-company-status-client: #80ffc6; --palette-crm-company-status-client-ink: #0f172a; --palette-crm-company-status-prospect: #f6f7f8; --palette-crm-company-status-prospect-ink: #0f172a; --palette-crm-proposal-status-accepted: #b3fd7c; --palette-crm-proposal-status-accepted-ink: #0f172a; --palette-crm-proposal-status-draft: #f6f7f8; --palette-crm-proposal-status-draft-ink: #0f172a; --palette-crm-proposal-status-published: #f4ff6a; --palette-crm-proposal-status-published-ink: #0f172a; --palette-crm-proposal-status-rejected: #ee7863; --palette-crm-proposal-status-rejected-ink: #0f172a; --palette-crm-proposal-status-revoked: #f6f7f8; --palette-crm-proposal-status-revoked-ink: #0f172a; --palette-datasets-current-type-record: #7cc0f0; --palette-datasets-current-type-record-ink: #0f172a; --palette-datasets-widget-kind-stat: #f0b35c; --palette-datasets-widget-kind-stat-ink: #0f172a; --palette-datasets-widget-kind-table: #7cc0f0; --palette-datasets-widget-kind-table-ink: #0f172a; --announcement-banner-message-colour: white; --announcement-banner-title-colour: white; --palette-projects-rag-status-amber: #f4ff6a; --palette-projects-rag-status-amber-ink: #0f172a; --palette-projects-rag-status-green: #80ffc6; --palette-projects-rag-status-green-ink: #0f172a; --palette-projects-rag-status-red: #ee7863; --palette-projects-rag-status-red-ink: #0f172a; --palette-sdlc-branch-state-conflict: #ee7863; --palette-sdlc-branch-state-conflict-ink: #0f172a; --palette-sdlc-branch-state-deleted: #f6f7f8; --palette-sdlc-branch-state-deleted-ink: #0f172a; --palette-sdlc-branch-state-merged: #b3fd7c; --palette-sdlc-branch-state-merged-ink: #0f172a; --palette-sdlc-branch-state-pending: #f4ff6a; --palette-sdlc-branch-state-pending-ink: #0f172a; --palette-sdlc-branch-state-untouched: #e7f1ff; --palette-sdlc-branch-state-untouched-ink: #0f172a; --palette-sdlc-dev-session-status-blocked: #ee7863; --palette-sdlc-dev-session-status-blocked-ink: #0f172a; --palette-sdlc-dev-session-status-complete: #b3fd7c; --palette-sdlc-dev-session-status-complete-ink: #0f172a; --palette-sdlc-dev-session-status-paused: #f4ff6a; --palette-sdlc-dev-session-status-paused-ink: #0f172a; --palette-sdlc-release-status-draft: #f6f7f8; --palette-sdlc-release-status-draft-ink: #0f172a; --palette-sdlc-release-status-released: #b3fd7c; --palette-sdlc-release-status-released-ink: #0f172a; --palette-sdlc-release-status-tagged: #00E5E3; --palette-sdlc-release-status-tagged-ink: #0f172a; --palette-sdlc-release-status-tagging: #f4ff6a; --palette-sdlc-release-status-tagging-ink: #0f172a; --alert-danger-bg: #3D1A20; --alert-danger-border: #7E2A36; --alert-danger-fg: #FFA3A3; --alert-info-bg: #1B2B4D; --alert-info-border: #2C4A80; --alert-info-fg: #8FC3FF; --alert-success-bg: #12332B; --alert-success-border: #1E5A46; --alert-success-fg: #7FE8B0; --alert-warning-bg: #3A2E12; --alert-warning-border: #6E5214; --alert-warning-fg: #FFD65C; --brand-accent-muted: color-mix(in srgb, var(--brand-accent-colour) 40%, #1e293b); --brand-accent-soft: color-mix(in srgb, var(--brand-accent-colour) 10%, #1e293b); --brand-accent-colour: #afee84; --brand-primary-colour: #000000; --brand-primary-ink: #ffffff; --brand-secondary-colour: #00E5E3; --brand-primary-muted: color-mix(in srgb, var(--brand-primary-colour) 40%, #1e293b); --brand-primary-soft: color-mix(in srgb, var(--brand-primary-colour) 10%, #1e293b); --brand-secondary-muted: color-mix(in srgb, var(--brand-secondary-colour) 40%, #1e293b); --brand-secondary-soft: color-mix(in srgb, var(--brand-secondary-colour) 10%, #1e293b); --text-accent-colour: #000000; --text-primary-colour: #000000; --text-secondary-colour: #000000; --button-danger-bg: #E31631; --button-danger-fg: white; --button-ghost-danger-border: var(--button-danger-bg); --button-ghost-danger-fg: var(--button-danger-bg); --button-ghost-danger-hover-border: var(--text-secondary-colour); --button-ghost-primary-border: var(--button-primary-bg); --button-ghost-primary-fg: var(--button-primary-bg); --button-ghost-primary-hover-border: var(--text-secondary-colour); --button-ghost-secondary-border: #d1d5db; --button-ghost-secondary-fg: var(--button-secondary-fg); --button-ghost-secondary-hover-border: var(--text-secondary-colour); --button-primary-bg: #afee84; --button-primary-fg: #000000; --button-primary-hover-bg: #ffffff; --button-secondary-bg: #334155; --button-secondary-fg: #e2e8f0; --button-secondary-hover-bg: #ffffff; --link-colour: #008080; --link-hover-colour: #ffffff; --link-underline-colour: rgba(226, 232, 240, 0.35); --avatar-default-bg-colour: var(--brand-secondary-colour); --avatar-default-text-colour: var(--text-secondary-colour); --header-colour: #000000; --tab-hover-text-colour: #e2e8f0; --tab-selected-bg: #1e293b; --tab-text-colour: #94a3b8; --page-bg-colour: #fafafa; --page-text-colour: #333333; --content-bg-colour: #ffffff; --content-border-colour: #ffffff; --content-text-colour: #333333; --page-footer-border-colour: #2F3237; --section-heading-colour: #333333; --palette-ui-semantic-caution: #F8A43D; --palette-ui-semantic-caution-ink: #0f172a; --palette-ui-semantic-informative: #80ffc6; --palette-ui-semantic-informative-ink: #0f172a; --palette-ui-semantic-negative: #ee7863; --palette-ui-semantic-negative-ink: #0f172a; --palette-ui-semantic-neutral: #f6f7f8; --palette-ui-semantic-neutral-ink: #0f172a; --palette-ui-semantic-positive: #b3fd7c; --palette-ui-semantic-positive-ink: #0f172a; --palette-ui-severity-critical: #FF5536; --palette-ui-severity-critical-ink: #ffffff; --palette-ui-severity-elevated: #f4ff6a; --palette-ui-severity-elevated-ink: #0f172a; --palette-ui-severity-notable: #00E5E3; --palette-ui-severity-notable-ink: #0f172a; --palette-ui-severity-routine: #f6f7f8; --palette-ui-severity-routine-ink: #0f172a; --palette-ui-severity-serious: #FF8A12; --palette-ui-severity-serious-ink: #0f172a; --sidebar-selected-bg: #334155; --sidebar-selected-border: var(--sidebar-selected-icon); --sidebar-selected-icon: #00E5E3; --sidebar-selected-text: white; --sidebar-text-colour: #F8F8F8; --table-row-hover-bg: #283548; --top-nav-icon-colour: #e2e8f0; --widget-border-colour: #2F3237; --widget-row-hover-bg: #1A4050; } @font-face { font-family: 'BaiJamjuree-SemiBold'; src: url('https://harbour.axisops.com/media/9755dc68-10fb-4921-a2bc-63b3c1bf8da0') format('truetype'); font-display: swap; } @font-face { font-family: 'BaiJamjuree-MediumItalic'; src: url('https://harbour.axisops.com/media/361f6a24-105d-479f-bae9-7a54a50a5c5c') format('truetype'); font-style: italic; font-display: swap; } @font-face { font-family: 'BaiJamjuree-Medium'; src: url('https://harbour.axisops.com/media/1d965343-d061-461d-811e-6a2fba84a705') format('truetype'); font-display: swap; } @font-face { font-family: 'BaiJamjuree-Italic'; src: url('https://harbour.axisops.com/media/b03b0d83-a48d-49e2-9a8e-a43146ad69be') format('truetype'); font-style: italic; font-display: swap; } @font-face { font-family: 'BaiJamjuree-BoldItalic'; src: url('https://harbour.axisops.com/media/479d5493-3c19-4967-8af8-2d072c6453ef') format('truetype'); font-style: italic; font-display: swap; } @font-face { font-family: 'BaiJamjuree-ExtraLightItalic'; src: url('https://harbour.axisops.com/media/3f4e942c-effc-4082-82e9-794a5c3864e8') format('truetype'); font-style: italic; font-display: swap; } @font-face { font-family: 'BaiJamjuree-Bold'; src: url('https://harbour.axisops.com/media/ae61ca26-f7db-478b-84ce-64fd72dc966c') format('truetype'); font-display: swap; } @font-face { font-family: 'BaiJamjuree-LightItalic'; src: url('https://harbour.axisops.com/media/71207ac9-0717-47f2-96a7-3a910817d50d') format('truetype'); font-style: italic; font-display: swap; } @font-face { font-family: 'BaiJamjuree-Regular'; src: url('https://harbour.axisops.com/media/01165f2d-1fd5-4e41-8d7a-d671c946c139') format('truetype'); font-display: swap; } @font-face { font-family: 'BaiJamjuree-Light'; src: url('https://harbour.axisops.com/media/626b0bb7-b8cd-4639-b006-499fec81398e') format('truetype'); font-display: swap; } @font-face { font-family: 'BaiJamjuree-ExtraLight'; src: url('https://harbour.axisops.com/media/4c2d0683-f4e8-4ff7-a7c0-56e7ae713fb9') format('truetype'); font-display: swap; } @font-face { font-family: 'BaiJamjuree-SemiBoldItalic'; src: url('https://harbour.axisops.com/media/bd848ad4-7e2c-4c22-aecb-763405f9bf9d') format('truetype'); font-style: italic; font-display: swap; } /* Custom CSS (ui::custom-css brand setting) */ /* * Assure's residual look: what the 2026-09-10 prototype draws that no brand * setting and no content-kind variant expresses. Written by * AssurePresenceSeeder into the `custom-css` brand setting at * `presence:assure`, so an administrator edits it from * Branding → Presences → AxisOps Assure → Custom, and "Reset this presence" * puts it back. It is appended to the end of that presence's branding * stylesheet, after the base presence sheet and the content-kinds sheet, so * every rule here wins on the cascade at ordinary specificity. * * Each group says what it is and why a setting could not carry it. The * groups marked PLATFORM GAP are the candidates for a settable equivalent * (see the module docs). */ /* 1. The prototype's typeface, self-hosted from the module's assets. ONE face, with no weight descriptor, so every weight is the Regular drawn faux-bold. That is what the original build renders: its faces are uploaded media, one family per FILE, and its font setting names `BaiJamjuree-Regular` — so its headings are the Regular synthesised bold, and real Bold/SemiBold faces here set every bold line ~6% wider than the original. Restore the four weight-bearing @font-face rules (Medium/SemiBold/Bold ship beside this file) for proper weights at the cost of that parity. PLATFORM GAP: `font-files` holds uploaded media, so a package cannot ship a face with its code; @import is (rightly) refused by the custom-css validator. */ @font-face { font-family: 'Bai Jamjuree'; font-display: swap; src: url('/assets/code-assurance/modules/presence/fonts/BaiJamjuree-Regular.ttf') format('truetype'); } /* 2. The prototype's fixed palette — the wash, the slate and muted text, the teal numerals, the dim on ink. Not brand colours (an administrator recolouring the brand must not move them), so they stay literal here and every group below reads them. --sf-cyan is the ACCENT and --sf-mint the SECOND colour, which is how the original build resolves them. */ .presence--assure { --sf-ink: var(--brand-primary-colour, #000000); --sf-ink-text: var(--text-primary-colour, #000000); --sf-cyan: var(--brand-accent-colour, #afee84); --sf-cyan-ink: var(--text-accent-colour, #000000); --sf-mint: var(--brand-secondary-colour, #00E5E3); --sf-line: var(--content-border-colour, #ffffff); --sf-paper: var(--content-bg-colour, #ffffff); --sf-text: var(--content-text-colour, #333333); --sf-wash: #f4fdfc; --sf-slate: #2c3a39; --sf-muted: #5d6b6a; --sf-soft: #9aacab; --sf-teal: #0d8c8a; --sf-dim: #c9d4d3; /* Each funnel screen's column: 1020px centred, never less than 48px of gutter either side — the prototype's frame. */ --sf-gutter: max(48px, calc((100% - 1020px) / 2)); /* The site's own body size. `font-size` is the ROOT size and stays at the portal's 16px (see AssureBrand), because every rem the base presence sheet and the shared form chrome carry is measured against it; the original sets the 15px here, on the presence, and so does this. PLATFORM GAP: one setting names both, so a site that reads smaller than the portal cannot say so without shrinking every rem underneath it. */ font-size: 15px; } /* 2a. Bold in prose is the prototype's 600, not the browser's 700. PLATFORM GAP: there is no setting for the weight of `strong`. */ .presence--assure b, .presence--assure strong { font-weight: 600; } /* 2b. The funnel, report and workspace screens sit in that column. The base sheet holds the page header and the rail to it but not the sections laravel-ui renders beneath them; the brochure and the sample report bleed instead, as they always did. */ .presence--assure .presence-sections { padding: 0 var(--sf-gutter) 38px; } /* …and on paper, not on the page's own wash: a funnel screen's pane, its journey rail and its white controls are drawn against white in the original, so the wash is only what surrounds the bar and the footer. PLATFORM GAP: the presence's main column has no ground of its own — `page-bg-colour` is the page's and `content-bg-colour` is a band's. */ .presence--assure .presence-main { background: var(--sf-paper); } /* A funnel screen's pane: the page title, its description and the journey rail all sit in the same column as the bands, at the prototype's sizes. PLATFORM GAP: the presence page header, title and description are fixed clamps in the base sheet — no `presence-title-size`, no `presence-description-colour` and no header padding. The gutter is the base sheet's own and already the site's, so only the vertical air and the type are restated. */ .presence--assure .presence-header { padding-block: 26px 0; } .presence--assure .presence-title { font-size: 26px; font-weight: 700; line-height: 1.15; margin: 0 0 6px; color: var(--sf-text); } .presence--assure .presence-description { color: var(--sf-muted); max-width: 62ch; margin: 0; font-size: 15px; opacity: 1; } .presence--assure .presence-sections:has(.cms-brochure), .presence--assure .presence-sections:has(.sf-report) { padding: 0; gap: 0; } .presence--assure .presence-sections:has(.cms-brochure) .static-section > div, .presence--assure .presence-sections:has(.sf-report) .static-section > div { padding: 0; } /* 3. The hero's and the dark bands' ground: a radial glow, not a flat fill, with the prototype's diagonal hatch over the first one. The two dark bands do not share a glow — the hero's falls from the top right, the "bigger picture" band's from the top left — and only the hero is hatched. PLATFORM GAP: `content-hero-dark-bg`, the ink tone and the brand tone each take one colour, and `band_image_url` an image; none of them takes a gradient, and none is per-band. */ .presence--assure .cms-hero--dark.cms-hero--size-display, .presence--assure .cms-kind--tone-ink:not(.cms-cards), .presence--assure .cms-brochure__band--tone-ink:not(.cms-brochure__band--cards) { background: radial-gradient(1100px 560px at 78% -12%, #14504e 0%, #0e2a29 45%, var(--sf-ink) 80%); } /* The persona grid is the foot of the band above it in the original, so it takes neither a glow nor a hatch of its own — flat ink, which the band above has faded to by the time they meet, and the seam goes. */ .presence--assure .cms-brochure__band--cards.cms-brochure__band--tone-ink { background: var(--sf-ink); } /* Both heroes paint their own ground, so their bands would show the page through any sub-pixel hairline between one band and the next. */ .presence--assure .cms-brochure__band--hero { background: var(--sf-ink); } .presence--assure .cms-hero--dark.cms-hero--size-compact { background: radial-gradient(900px 210px at 20% -30%, #14504e 0%, var(--sf-ink) 70%); } .presence--assure .cms-hero--dark.cms-hero--size-display { position: relative; } .presence--assure .cms-hero--dark.cms-hero--size-display::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, .028) 0 8px, transparent 8px 30px); } .presence--assure .cms-hero--dark.cms-hero--size-display > * { position: relative; } /* 3b. What the hero's settings cannot say. The highlighted line runs on rather than breaking (PLATFORM GAP: `content-hero-highlight-style` has colour/gradient/italic but no inline/block); the eyebrow's own colour is overridden on a dark hero by a later rule reading `--brand-primary-soft` (PLATFORM GAP: the dark hero has no eyebrow colour of its own, and the shared one cannot reach it); and the second hero is the same kind at a smaller size, which no per-size title, measure or standfirst setting expresses. */ .presence--assure .cms-hero__title em { display: inline; } .presence--assure .cms-hero--dark .cms-kind__eyebrow { color: var(--content-eyebrow-colour, var(--sf-cyan)); } .presence--assure .cms-hero--size-compact .cms-hero__title { font-size: 30px; max-width: 24ch; } .presence--assure .cms-hero--size-compact .cms-hero__title em { color: var(--sf-cyan); } .presence--assure .cms-hero--size-compact .cms-hero__standfirst { font-size: 15px; max-width: 64ch; } .presence--assure .cms-hero--size-compact { padding-top: 38px; padding-bottom: 0; } /* The persona grid is the same band as the copy above it in the prototype; here it is a cards band of its own, so the air between them is closed. PLATFORM GAP: a band is one kind, and a hero cannot carry a card grid. */ .presence--assure .cms-brochure__band--cards.cms-brochure__band--tone-ink { padding-top: 0; } /* The second button is a size of its own — the prototype sets it smaller and tighter than the first. PLATFORM GAP: the secondary button has a style, an edge colour and a shadow, but no size or padding. */ .presence--assure .cms-hero__button--secondary { font-size: 15px; padding: 11px 24px; border-width: 2px; } .presence--assure .cms-hero--dark .cms-hero__button--secondary { border-color: rgba(255, 255, 255, .5); } /* A button's line box is the prototype's 1.2, not the page's 1.55. PLATFORM GAP: a button has a size, a weight and a padding, but no line height, so it grows with the body leading. */ .presence--assure .cms-hero__button, .presence--assure .cms-kind__button { line-height: 1.2; } /* The dark hero's outlined companion reads a half-transparent white, which a colour-pair setting (hex only) cannot hold. */ /* 3c. The bar's sign-in is a link, not a button: `top-nav-sign-in-style: text` drops the pill but the base button chrome — its radius, its transparent edge and its vertical padding — is still on it. PLATFORM GAP: the style choice does not undo the button's own box. */ .presence--assure .presence-nav--sign-in-text .presence-nav__account a, .presence--assure .presence-nav--sign-in-text .presence-nav__account button { border: 0; border-radius: 0; padding: 0; background: transparent; font-size: 14px; font-weight: 500; } /* 4. The four-colour gradient rule: 6px at the head of the page and 5px again under the hero. NOTE on the original: only the under-hero rule is the presence's (an `hr.sf-rule`); the strips at the top AND bottom of the viewport are the maps PORTAL's own `ui::custom-css` (`body::before/::after`, fixed, 6px), so they follow it onto every page of that portal and are not Assure's. The head-of-page strip is drawn here so Assure keeps it on any portal; the fixed foot strip is not (see docs/assure-parity-gaps.md). The head-of-page strip is an OVERLAY on the bar, not a border of it: the original's is a fixed bar that takes no height, so drawing it as a 6px border pushed every page 6px down the viewport. PLATFORM GAP: a band has a border colour, never a gradient edge, and the presence chrome has no rule of its own. */ .presence--assure .presence-nav { position: relative; } .presence--assure .presence-nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; pointer-events: none; background: linear-gradient(90deg, var(--sf-cyan), var(--sf-mint), #B3F985, #F9F871); } /* The sample report marks its own copy of the rule up, under the cover (`hr.sf-rule` in resources/views/sample-report.blade.php) — the package's markup, so no setting reaches it and it would otherwise draw as the browser's 1px line. */ .presence--assure .sf-rule { height: 5px; border: 0; margin: 0; max-width: none; background: linear-gradient(90deg, var(--sf-cyan), var(--sf-mint), #B3F985, #F9F871); } .presence--assure .cms-brochure__band--hero:first-child { border-bottom: 5px solid transparent; border-image: linear-gradient(90deg, var(--sf-cyan), var(--sf-mint), #B3F985, #F9F871) 1; } /* The bar's ground is a glow of its own, not the flat ink of `top-nav-bg-colour`. PLATFORM GAP: as group 3. */ .presence--assure .presence-nav { background: radial-gradient(1100px 560px at 78% 110%, #14504e 0%, #0e2a29 45%, var(--sf-ink) 80%); } /* The bar sits in the same column as every band. PLATFORM GAP: `top-nav-padding` takes lengths only, so it cannot hold the site's max(48px, (100% - measure) / 2) gutter. */ .presence--assure .presence-nav { padding-inline: var(--sf-gutter); } /* 4a. A funnel screen's chrome — the enquiry form (/connect) and the screens after it. The original marks the bar up TWICE: the brochure's (`sf-nav--brochure`, the settings above) and a quieter one for a screen someone is filling in (`sf-nav--funnel`) — a 30px mark, 13.5px links, 16px of air above and below, no section links at all so nothing competes with the form, and the gradient rule repeated under it (its own `hr.sf-rule`) instead of under a hero there is none of. The presence chrome renders ONE bar from one set of settings, so the quieter one is drawn here, keyed off the journey rail that only these screens carry. PLATFORM GAP: every `top-nav-*` setting is a single value for the whole presence — there is no bar variant for a funnel or enquiry screen, nothing hides the section links on a screen that should not offer them, and no band or chrome setting repeats the rule there. */ .presence--assure:has(.presence-funnel) .presence-nav { padding-block: 16px; /* Flat ink, not the brochure bar's glow: the original's glow belongs to `sf-nav--brochure` alone. */ background: var(--sf-ink); border-bottom: 5px solid transparent; border-image: linear-gradient(90deg, var(--sf-cyan), var(--sf-mint), #B3F985, #F9F871) 1; } .presence--assure:has(.presence-funnel) .presence-nav__logo { height: 30px; } .presence--assure:has(.presence-funnel) .presence-nav__links { display: none; } /* The bar's right-hand end is carried by the section links' `margin-left: auto`; with them gone the sign-in has to carry it instead. */ .presence--assure:has(.presence-funnel) .presence-nav__account { margin-left: auto; } .presence--assure:has(.presence-funnel) .presence-nav__account a { font-size: 13.5px; } /* A journey pill is a list item, not a flex row: the original leaves the step's display alone, so its label is the inline run of text it reads as. The base sheet makes every step a flex container, which blockifies the label and sets it a line box of its own. PLATFORM GAP: `funnel-style: pills` chooses the shape, not the box; and the pills rule hard-codes its padding in rem rather than reading `funnel-step-padding` (which is why the root size in group 2 matters). */ .presence--assure .presence-funnel__step { display: list-item; } /* The full-bleed rail's steps stay in the site's column. PLATFORM GAP: as `top-nav-padding` above, `funnel-padding` takes lengths only, so it cannot hold max(48px, (100% - measure) / 2). */ .presence--assure .presence-funnel--full { padding-inline: var(--sf-gutter); } /* 5. The stack strip: the cards list drawn as the prototype's chips, and its footnote (the kind's lede) moved below them. PLATFORM GAP: there is no chip/pill variant on the cards kind, and no footnote field. */ .presence--assure .cms-cards.cms-kind--list#section-built-for-the-stacks-we-know-deeply .cms-cards__grid { display: flex; flex-wrap: wrap; gap: 10px; border: 0; margin-top: 12px; } .presence--assure .cms-cards.cms-kind--list#section-built-for-the-stacks-we-know-deeply .cms-card { display: inline-block; border: 1px solid var(--sf-line); background: #fff; border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 600; box-shadow: 0 2px 8px rgba(12, 15, 15, .05); } .presence--assure .cms-cards.cms-kind--list#section-built-for-the-stacks-we-know-deeply .cms-card__title { margin: 0; font-size: 14px; } .presence--assure .cms-cards.cms-kind--list#section-built-for-the-stacks-we-know-deeply { display: flex; flex-direction: column; } .presence--assure .cms-cards.cms-kind--list#section-built-for-the-stacks-we-know-deeply .cms-cards__lede { order: 3; font-size: 13.5px; color: var(--sf-muted); margin-top: 14px; } /* 6. The footer's box. The original's is a quiet note that butts against the page: 14px of air over it, 26px under it, and no separating line. PLATFORM GAP: the minimal layout sets its own `padding-block` in a rule that outranks `page-footer-padding-y`, so the setting cannot be seen there at all; and the footer's rule is a border with a colour setting but no width, so the only way to have no line is to draw none. (Its colour setting would leave 1px of the page's height behind.) */ .presence--assure .presence-footer { padding-block: 14px 26px; border-top: 0; } /* The two lines of small print run on, one under the other, with no step between them. PLATFORM GAP: the space between the note and the powered-by line is a fixed 0.375rem in the base sheet, with no setting. */ .presence--assure .presence-footer__description + .presence-footer__powered-by { margin-top: 0; } /* 7. The shared pieces the funnel, report and workspace views mark up themselves (resources/views/*.blade.php): pills, small print and the prototype's buttons. These are this package's own components, not content, so no setting reaches them. */ .presence--assure .sf-pill { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; } .presence--assure .sf-pill--dark { background: var(--sf-ink); color: var(--sf-cyan); } .presence--assure .sf-pill--cyan { background: #dcf8f6; color: var(--sf-teal); } .presence--assure .sf-pill--priority { background: #fde2dc; color: #a53a25; } .presence--assure .sf-pill--observation { background: #fdf0d8; color: #96650c; } .presence--assure .sf-pill--consideration { background: #e8f8d8; color: #3f7015; } .presence--assure .sf-small { font-size: 13.5px; color: var(--sf-muted); } .presence--assure .sf-btn, .presence--assure .sf-button { display: inline-block; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; border: 0; border-radius: 10px; padding: 13px 26px; cursor: pointer; text-decoration: none; background: var(--sf-cyan); color: var(--sf-cyan-ink); box-shadow: 0 4px 14px rgba(0, 229, 227, .35); } .presence--assure .sf-btn--big { font-size: 16px; padding: 15px 32px; } .presence--assure .sf-btn--secondary, .presence--assure .sf-button--secondary { background: transparent; border: 2px solid var(--sf-ink); color: var(--sf-ink); box-shadow: none; padding: 11px 24px; } .presence--assure .sf-btn--ghost { background: transparent; border: 2px solid rgba(255, 255, 255, .5); color: #fff; box-shadow: none; padding: 11px 24px; } .presence--assure .sf-button--small { font-size: 14px; padding: 10px 18px; margin: 0 8px 8px 0; background: transparent; border: 2px solid var(--sf-ink); color: var(--sf-ink); box-shadow: none; } .presence--assure .sf-button--small:first-child { background: var(--sf-ink); color: var(--sf-cyan); } .presence--assure .sf-mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; background: var(--sf-wash); border-radius: 6px; padding: 2px 8px; color: var(--sf-teal); } .presence--assure .sf-terms { font-size: 13.5px; color: var(--sf-muted); margin-top: 8px; } .presence--assure .sf-terms a { color: var(--sf-teal); } /* 8. Sizing (the provider presets and the trust note) — connect. */ .presence--assure .sf-presets { margin: 16px 0 0; } .presence--assure .sf-presets__label { font-size: 13.5px; font-weight: 600; color: var(--sf-slate); margin-bottom: 8px; } .presence--assure .sf-presets__buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 640px; } .presence--assure .sf-presets__button { font-family: inherit; font-size: 15px; border: 2px solid var(--sf-line); border-radius: 12px; padding: 18px 14px; text-align: center; cursor: pointer; font-weight: 600; background: #fff; color: var(--sf-ink); } .presence--assure .sf-presets__button:hover, .presence--assure .sf-presets__button:focus-visible { border-color: var(--sf-cyan); background: var(--sf-wash); box-shadow: 0 4px 14px rgba(0, 229, 227, .18); outline: none; } .presence--assure .sf-presets__hint { font-size: 13.5px; color: var(--sf-muted); margin-top: 10px; } .presence--assure .sf-trust { display: flex; gap: 14px; align-items: flex-start; background: var(--sf-wash); border: 1px solid var(--sf-line); border-radius: 12px; padding: 16px 18px; margin: 18px 0; max-width: 640px; } .presence--assure .sf-trust__badge { flex: 0 0 auto; background: var(--sf-ink); color: var(--sf-cyan); font-weight: 700; font-size: 12px; border-radius: 8px; padding: 9px 11px; text-align: center; line-height: 1.3; max-width: 4.5em; } .presence--assure .sf-trust p { font-size: 13.5px; color: var(--sf-slate); } /* 9. The price panel and its breakdown — quote. */ .presence--assure .sf-price { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: start; margin-top: 16px; } .presence--assure .sf-price__headline { grid-row: 1 / 3; position: relative; overflow: hidden; color: #fff; border-radius: 16px; padding: 26px 28px; background: radial-gradient(600px 320px at 80% -20%, #14504e 0%, var(--sf-ink) 70%); } .presence--assure .sf-price__band { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-mint); font-weight: 700; } .presence--assure .sf-price__amount { font-size: 46px; font-weight: 700; line-height: 1.1; margin: 6px 0 2px; } .presence--assure .sf-price__subscription, .presence--assure .sf-price__validity { font-size: 14px; color: var(--sf-dim); padding: 6px 0; border-bottom: 1px solid #263332; } .presence--assure .sf-price__next { margin-top: 18px; } .presence--assure .sf-price--expired .sf-price__headline { opacity: .55; } .presence--assure .sf-price__table { width: 100%; border-collapse: collapse; font-size: 13.5px; border: 1px solid var(--sf-line); border-radius: 12px; background: #fff; padding: 18px 20px; display: block; } .presence--assure .sf-price__table caption { display: block; text-align: left; font-size: 15px; font-weight: 600; padding-bottom: 10px; } .presence--assure .sf-price__table thead, .presence--assure .sf-price__table tbody, .presence--assure .sf-price__table tr { display: table; width: 100%; table-layout: fixed; } .presence--assure .sf-price__table th, .presence--assure .sf-price__table td { padding: 7px 4px; border-bottom: 1px solid var(--sf-line); color: var(--sf-slate); text-align: left; font-weight: 400; } .presence--assure .sf-price__table td:last-child { text-align: right; font-weight: 600; } .presence--assure .sf-price__table thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-muted); } .presence--assure .sf-price__total th, .presence--assure .sf-price__total td { font-weight: 700; color: var(--sf-ink); } /* 10. Checkout, review progress, the reports list and the thank-you. */ .presence--assure .sf-checkout__summary { font-size: 22px; font-weight: 700; margin: 16px 0; } .presence--assure .sf-checkout__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 18px 0; } .presence--assure .sf-checkout__errors { color: #a53a25; } .presence--assure .sf-checkout__terms, .presence--assure .sf-checkout__unavailable { font-size: 13.5px; color: var(--sf-muted); } .presence--assure .sf-review__reference { font-size: 13.5px; color: var(--sf-muted); margin-top: 16px; } .presence--assure .sf-review__note { margin: 8px 0 0; color: var(--sf-slate); } .presence--assure .sf-review__note a { color: var(--sf-teal); } .presence--assure .sf-review__stages { list-style: none; padding: 0; margin: 20px 0; display: flex; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--sf-soft); } .presence--assure .sf-review__stage { padding: 3px 10px; border-radius: 999px; } .presence--assure .sf-review__stage--done { background: #e8f8d8; color: #3f7015; font-weight: 600; } .presence--assure .sf-review__stage--current { background: var(--sf-ink); color: var(--sf-cyan); font-weight: 700; } .presence--assure .sf-reports { margin-top: 16px; } .presence--assure .sf-reports__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .presence--assure .sf-reports__item { background: #fff; border: 1px solid var(--sf-line); border-radius: 12px; padding: 16px 18px; box-shadow: 0 3px 12px rgba(12, 15, 15, .04); } .presence--assure .sf-reports__title { font-size: 15px; margin: 0 0 4px; } .presence--assure .sf-reports__meta { font-size: 13.5px; color: var(--sf-muted); margin: 0 0 12px; } .presence--assure .sf-reports__empty { color: var(--sf-muted); } .presence--assure .sf-feedback__thanks { position: relative; overflow: hidden; color: var(--sf-dim); border-radius: 16px; padding: 30px 34px; margin: 16px 0 24px; max-width: 56ch; background: radial-gradient(700px 340px at 70% -20%, #14504e 0%, var(--sf-ink) 70%); } /* 11. The sample report document: the dark cover, the numbered sections, the finding and observation cards, the stat row and the download links. */ /* Every heading in the document sets on the original's 1.15 line and takes the colour of whatever it sits on — white on the cover, the body's own ink on paper. The original gets both from a blanket `h1…h5` rule of its own; here the brochure's content kinds style their headings by class, and a blanket rule would out-specify every one of them, so it is held to the report's own markup. PLATFORM GAP: there is no `header-line-height`, and `header-colour` is one flat colour — a heading cannot be told to take the ground's ink, so one set on a dark ground and one on paper cannot both be right. */ .presence--assure .sf-report :is(h2, h3, h4, h5) { line-height: 1.15; color: inherit; } .presence--assure .sf-report { display: block; padding-bottom: 30px; } .presence--assure .sf-report__cover { color: #fff; padding: 34px var(--sf-gutter) 38px; background: radial-gradient(900px 400px at 75% -15%, #14504e 0%, var(--sf-ink) 70%); } .presence--assure .sf-report__logo { height: 30px; display: block; } .presence--assure .sf-report__kicker { margin-top: 16px; } .presence--assure .sf-report__title { color: #fff; font-size: 30px; margin-top: 12px; } .presence--assure .sf-report__meta { color: var(--sf-dim); margin-top: 8px; font-size: 14px; } .presence--assure .sf-report__section { padding: 26px var(--sf-gutter) 6px; } .presence--assure .sf-report__section--last { padding-bottom: 12px; } .presence--assure .sf-report__heading { font-size: 19px; margin-bottom: 12px; } .presence--assure .sf-report__heading span { color: var(--sf-teal); margin-right: 8px; } .presence--assure .sf-report__exec { background: var(--sf-paper); border: 2px solid var(--sf-ink); border-left: 6px solid var(--sf-cyan); padding: 18px 20px; margin: 0 0 18px; font-size: 14.5px; color: var(--sf-slate); } .presence--assure .sf-report__exec p + p { margin-top: 10px; } .presence--assure .sf-report__none { color: var(--sf-muted); font-size: 13.5px; } .presence--assure .sf-finding { background: var(--sf-paper); border: 1px solid var(--sf-line); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; box-shadow: 0 3px 12px rgba(12, 15, 15, .04); } .presence--assure .sf-finding__head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; } .presence--assure .sf-finding h4 { font-size: 15px; } .presence--assure .sf-finding p { font-size: 13.5px; color: var(--sf-slate); } .presence--assure .sf-obs { background: var(--sf-paper); border: 1px solid var(--sf-line); border-radius: 12px; padding: 13px 16px; margin-bottom: 10px; font-size: 13.5px; color: var(--sf-slate); } .presence--assure .sf-obs b { color: var(--sf-ink); } .presence--assure .sf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 6px 0 20px; } .presence--assure .sf-stat { background: var(--sf-paper); border: 1px solid var(--sf-line); border-radius: 12px; padding: 14px 16px; box-shadow: 0 3px 12px rgba(12, 15, 15, .04); } .presence--assure .sf-stat__value { font-size: 24px; font-weight: 700; } .presence--assure .sf-stat__label { font-size: 12.5px; color: var(--sf-muted); } .presence--assure .sf-report__disclaimer { margin: 4px 0 18px; max-width: 72ch; } .presence--assure .sf-dl { display: flex; gap: 12px; margin: 18px 0; flex-wrap: wrap; } .presence--assure .sf-dl__link { display: inline-block; text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--sf-ink); border: 2px solid var(--sf-ink); border-radius: 10px; padding: 10px 18px; } .presence--assure .sf-dl__link--primary { background: var(--sf-ink); color: var(--sf-cyan); } .presence--assure .sf-report__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } /* 12. The comparison tables of "Different by design". A Text block's body is declared as markdown (AssureSite::comparisons()) and raw HTML in a declaration is stripped, so the tables carry no classes of their own and everything below is drawn from a cell's POSITION: the first column is the row label, the last is ours, and the first table's cells take the ✕/✓ badges from ::before rather than from markup. PLATFORM GAP: `content-table-style` has no "our column" emphasis, and no kind takes a table as a field. */ .presence--assure .cms-brochure__band--text .cms-brochure__body > table { width: 100%; border-collapse: collapse; margin-top: 20px; background: #fff; border: 2px solid var(--sf-ink); box-shadow: 10px 10px 0 rgba(0, 229, 227, .35); } .presence--assure .cms-brochure__band--text .cms-brochure__body > table th { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 14px 18px; border-bottom: 2px solid var(--sf-ink); color: var(--sf-muted); background: transparent; } .presence--assure .cms-brochure__band--text .cms-brochure__body > table th:last-child { background: var(--sf-ink); color: var(--sf-cyan); font-size: 13px; } .presence--assure .cms-brochure__band--text .cms-brochure__body > table td { font-size: 13.5px; padding: 14px 18px; border-bottom: 1px solid var(--sf-line); color: var(--sf-muted); vertical-align: top; line-height: 1.5; } .presence--assure .cms-brochure__band--text .cms-brochure__body > table tr:last-child td { border-bottom: 0; } .presence--assure .cms-brochure__band--text .cms-brochure__body > table td:last-child { background: var(--sf-wash); font-weight: 600; color: var(--sf-ink); border-left: 2px solid var(--sf-ink); } .presence--assure .cms-brochure__band--text .cms-brochure__body > table td:first-child { font-weight: 700; color: var(--sf-ink); width: 140px; font-size: 14px; background: transparent; border-left: 0; } /* The first table's ✕/✓ badges: the scanner column fails every row, ours passes it, so the mark is the column rather than the copy. */ .presence--assure .cms-brochure__band--text .cms-brochure__body > table:first-of-type td:not(:first-child)::before { content: "✕"; display: inline-block; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; text-align: center; line-height: 20px; margin-right: 9px; background: #f3e2de; color: #a53a25; } .presence--assure .cms-brochure__band--text .cms-brochure__body > table:first-of-type td:last-child::before { content: "✓"; background: var(--sf-cyan); color: var(--sf-cyan-ink); } /* The footnote under the second table — the prototype's small print. Held to this band by its anchor, or the terms page's one paragraph would take it. */ .presence--assure .cms-brochure__band--text#section-different-by-design .cms-brochure__body > p:last-child { font-size: 13.5px; color: var(--sf-muted); max-width: none; margin-top: 10px; margin-bottom: 0; } /* 12b. The same tables as the step-25 data migration left them, for an installation that ran it and has not since had the declarations re-applied (`presence:install assure --force`): those pages hold sf-compare markup, which the positional rules above do not reach. Goes when no installation carries that markup any more. */ .presence--assure .sf-compare__wrap { margin-top: 20px; background: #fff; border: 2px solid var(--sf-ink); box-shadow: 10px 10px 0 rgba(0, 229, 227, .35); overflow-x: auto; } .presence--assure .sf-compare { width: 100%; border-collapse: collapse; } .presence--assure .sf-compare th { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 14px 18px; border-bottom: 2px solid var(--sf-ink); color: var(--sf-muted); background: transparent; } .presence--assure .sf-compare th.sf-compare__us { background: var(--sf-ink); color: var(--sf-cyan); font-size: 13px; } .presence--assure .sf-compare td { font-size: 13.5px; padding: 14px 18px; border-bottom: 1px solid var(--sf-line); color: var(--sf-muted); vertical-align: top; line-height: 1.5; } .presence--assure .sf-compare tr:last-child td { border-bottom: 0; } .presence--assure .sf-compare td.sf-compare__us { background: var(--sf-wash); font-weight: 600; color: var(--sf-ink); border-left: 2px solid var(--sf-ink); } .presence--assure .sf-compare td.sf-compare__label { font-weight: 700; color: var(--sf-ink); width: 140px; font-size: 14px; } .presence--assure .sf-compare__no, .presence--assure .sf-compare__yes { display: inline-block; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; text-align: center; line-height: 20px; margin-right: 9px; } .presence--assure .sf-compare__no { background: #f3e2de; color: #a53a25; } .presence--assure .sf-compare__yes { background: var(--sf-cyan); color: var(--sf-cyan-ink); } /* 13. The shared form chrome — the section card, fields and submit button laravel-ui renders for every form — re-skinned as the prototype's pane. PLATFORM GAP: form fields have no brand settings of their own. */ .presence--assure .main-sections .section-card { border: 0 !important; border-radius: 0; box-shadow: none; background: transparent !important; } .presence--assure .main-sections .section-header { padding: 16px 0 0; } /* The pane's heading sets on the site's 1.15 line, not the body's 1.55 — PLATFORM GAP: there is no `header-line-height`, and the section-heading group's own line height does not reach `ui-heading--section`. */ .presence--assure h3.ui-heading--section { font-size: 14px; font-weight: 600; color: var(--sf-teal); letter-spacing: 0; text-transform: none; line-height: 1.15; } /* The note under it butts against the heading: the original's blanket `p { margin: 0 }` kills the utility margin the form chrome ships. A blanket rule here would out-specify every content kind's own prose, so it is held to the pane. PLATFORM GAP: the form chrome has no settings. */ .presence--assure .section-header p { color: var(--sf-muted); font-size: 13.5px; max-width: 62ch; margin-top: 0; } .presence--assure .main-sections .static-section > div { padding-left: 0; padding-right: 0; } .presence--assure .field { padding-left: 0; padding-right: 0; padding-top: 14px; } .presence--assure .field label { color: var(--sf-slate); font-weight: 600; font-size: 13.5px; } .presence--assure .field input[type="text"], .presence--assure .field input[type="email"], .presence--assure .field input[type="password"], .presence--assure .field textarea, .presence--assure .field .choices__inner { font-family: inherit; font-size: 15px; width: 100%; max-width: 460px; border: 1.5px solid var(--sf-dim); border-radius: 8px; padding: 11px 13px; background: #fff; box-shadow: none; color: var(--sf-ink); } .presence--assure .field .choices { max-width: 460px; } .presence--assure .field .password-wrapper { max-width: 460px; } .presence--assure .field input:focus, .presence--assure .field textarea:focus, .presence--assure .field .is-focused .choices__inner { border-color: var(--sf-cyan); box-shadow: 0 0 0 3px rgba(0, 229, 227, .25); outline: none; } .presence--assure .form-actions { padding: 22px 0 8px; } .presence--assure .form-actions .flex-1 { text-align: left; } .presence--assure .form-actions .button-group { justify-content: flex-start; } .presence--assure .form-actions button, .presence--assure .form-actions .button-group > button { background: var(--sf-cyan); color: var(--sf-cyan-ink); border: 0; border-radius: 10px; padding: 15px 32px; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; box-shadow: 0 4px 14px rgba(0, 229, 227, .35); font-family: inherit; } .presence--assure .form-actions button:hover { background: var(--sf-cyan); filter: brightness(.96); } /* 14. Narrow screens, for the groups above that grid. */ @media (max-width: 900px) { .presence--assure .sf-presets__buttons, .presence--assure .sf-stats { grid-template-columns: 1fr 1fr; } .presence--assure .sf-price { grid-template-columns: 1fr; } .presence--assure .sf-price__headline { grid-row: auto; } } @media (max-width: 600px) { .presence--assure .sf-presets__buttons { grid-template-columns: 1fr; } .presence--assure .sf-stats { grid-template-columns: 1fr 1fr; } } /* 15. Cards and quotes wear the accent down their left edge, and a card on an ink band is a slightly-lifted panel rather than the tone's flat ink. PLATFORM GAP: `content-card-accent-width` draws the accent as a bar ACROSS THE TOP of a card, there is no choice of edge, and the only thing that colours it is a per-card `accent_colour` the declaration must hard-code as a hex (the field is `^#[0-9a-f]{3,8}$`, so it cannot name the brand accent). Drawn here from `--sf-cyan` instead, so an administrator recolouring the accent moves every edge with it; a quote panel has a border colour but no border width and no accent edge at all; and a card's ink tone is the band's own ink with nothing to lift it. */ .presence--assure .cms-kind--tone-ink .cms-card--tone-ink { background: #111b1a; border-color: #2b3d3b; } .presence--assure .cms-kind--tone-ink .cms-card--tone-ink { border-width: 1px; padding: 16px 18px; } .presence--assure .cms-kind--tone-ink .cms-card--tone-ink { border-left: 5px solid var(--sf-cyan); } /* PLATFORM GAP: a card's body has a size but no colour. */ .presence--assure .cms-card .cms-kind__prose { color: var(--sf-muted); } .presence--assure .cms-cards:not(.cms-kind--list) .cms-card { border-left: var(--content-card-accent-width, 6px) solid var(--sf-cyan); box-shadow: none; } .presence--assure .cms-kind--tone-ink .cms-card--tone-ink .cms-card__title { font-size: 15px; } .presence--assure .cms-kind--tone-ink .cms-card--tone-ink .cms-kind__prose { font-size: 13px; color: #9fb3b1; } .presence--assure .cms-quote { border-width: 2px; box-shadow: inset 6px 0 0 var(--sf-cyan); } /* The kicker over the persona grid: the prototype's own line, not a lede. PLATFORM GAP: a cards lede has a size and a colour, but one pair for every cards band, and this site's three ledes are three different things. */ .presence--assure .cms-kind--tone-ink .cms-cards__lede { font-size: 16px; color: var(--sf-mint); } /* A lede runs the band's full width in the original; blanking the setting only returns the kind's own 48rem default, which is not "no measure". */ .presence--assure .cms-cards__lede { max-width: none; } /* 16. The closing strip's mark sits beside the copy at the prototype's size, not as a half-width illustration. PLATFORM GAP: the split kind has a ratio setting but no image height. */ .presence--assure .cms-split__image { max-height: 34px; width: auto; border-radius: 0; } .presence--assure .cms-split--with-image.cms-split--left { grid-template-columns: 180px minmax(0, 1fr); gap: 22px; } /* 17. The FAQ cards' frame. `content-faq-rows: cards` reaches the block now, but the card it draws pads itself AND the question, so the question's own padding stacks on the card's; and the list has no measure of its own, so it runs the width of the band rather than the prototype's narrower column held to the left. PLATFORM GAP: no `content-faq-list-measure`, and the card's padding is not a setting. */ .presence--assure .cms-faq__list { max-width: 760px; margin-top: 14px; } .presence--assure .cms-faq__item { padding: 0; border: 1px solid var(--sf-line); box-shadow: none; } /* The +/− marker sits in the question's line box, so its 18px sets the row's height; the prototype hangs it instead. PLATFORM GAP: the marker has a colour and a size but no line of its own. */ .presence--assure .cms-faq__question::after { line-height: 22.5px; } /* PLATFORM GAP: a question has a size, a weight and a padding; an answer has all three and a measure — but neither has a colour. */ .presence--assure .cms-faq__answer { color: var(--sf-muted); } /* 18. A Text band's prose: the prototype's muted body, its rhythm and its reading measure. PLATFORM GAP: `content-reading-measure` caps the band's whole body, tables included, and a Text band's heading and body have no colour settings of their own. */ .presence--assure .cms-brochure__heading { color: inherit; } .presence--assure .cms-brochure__band--text .cms-brochure__body > p { max-width: 68ch; color: var(--sf-muted); margin-top: 0; margin-bottom: 14px; } .presence--assure #section-different-by-design .cms-brochure__body > p { max-width: 64ch; } .presence--assure .cms-brochure__band--text .cms-brochure__body > h3 { font-size: 17px; font-weight: 900; line-height: 1.15; color: inherit; margin: 30px 0 6px; } /* The sample-report link in a cards lede, and the same link in the left column of "What you'll get", are the prototype's outlined button. PLATFORM GAP: a lede and a card body are markdown, and a link in prose has a colour, a weight and an underline but no button treatment. */ .presence--assure .cms-cards__lede a, .presence--assure #section-what-youll-get .cms-card:first-child .cms-kind__prose a { display: inline-block; font-size: 15px; font-weight: 700; line-height: 1.2; border: 2px solid var(--sf-ink); border-radius: 10px; padding: 11px 24px; color: var(--sf-ink); text-decoration: none; } /* 18b. Two rhythms the kinds fix rather than settle: a card grid always opens 1.25rem under its lede, and a step's numeral takes the page's 1.55 leading, so a 34px numeral reserves 53px of line. PLATFORM GAP: no `content-cards-grid-space`, no `content-step-number-line-height`. */ .presence--assure .cms-cards__grid { margin-top: 14px; } .presence--assure .cms-step__number { line-height: 1; } /* 19. The closing strip's label sits plain rather than in the hero's pill: one eyebrow treatment reaches every kind. PLATFORM GAP: the eyebrow's style, ground and colour are one choice for the whole site. */ .presence--assure .cms-split .cms-kind__eyebrow { background: transparent; padding: 0; border-radius: 0; font-size: 12px; letter-spacing: .09em; color: var(--sf-teal); margin-bottom: 3px; } .presence--assure .cms-split__body { color: var(--sf-muted); max-width: 60ch; } /* 20. "What you'll get": the original sets the copy and its link in a left column beside one sample panel — two findings and a note inside a single ink frame with the prototype's hard cyan shadow. A cards band is a lede ABOVE a grid of equal cards, so the band's own box is gridded here: the heading across the top, the lede left, the card grid right, framed as one panel with its cards flush inside it. PLATFORM GAP: no copy-beside-panel kind; `content-cards-columns` is one count for every cards band, so this one is set by anchor; a card's title is required, so the note is a titled card; and a card has no label field, so each finding's severity pill is the first bold run of its markdown body — beside the description rather than beside the title as the original sets it. */ .presence--assure #section-what-youll-get { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 26px; align-items: center; } .presence--assure #section-what-youll-get .cms-system-section__heading { grid-column: 1 / -1; } .presence--assure #section-what-youll-get .cms-cards__lede { grid-column: 1; align-self: center; max-width: 64ch; } .presence--assure #section-what-youll-get .cms-cards__lede p { margin-bottom: 12px; } .presence--assure #section-what-youll-get .cms-cards__grid { grid-column: 2; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; align-self: center; background: var(--sf-paper); border: 2px solid var(--sf-ink); padding: 20px 22px; box-shadow: 8px 8px 0 rgba(0, 229, 227, .35); } .presence--assure #section-what-youll-get .cms-card { border: 0; padding: 0; background: transparent; gap: 0.35rem; } .presence--assure #section-what-youll-get .cms-card__title { font-size: 14px; } .presence--assure #section-what-youll-get .cms-card .cms-kind__prose { font-size: 12.5px; color: var(--sf-slate); } .presence--assure #section-what-youll-get .cms-card .cms-kind__prose p { margin-bottom: 8px; } .presence--assure #section-what-youll-get .cms-card:last-child .cms-card__title { font-size: 13.5px; font-weight: 400; color: var(--sf-muted); } /* The severity pill: the first bold run of a finding's body, in the prototype's fixed priority and observation colours (group 7's pills). */ .presence--assure #section-what-youll-get .cms-card .cms-kind__prose p > strong:first-child { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; margin: 0 10px 2px 0; float: left; } .presence--assure #section-what-youll-get .cms-card:nth-child(1) .cms-kind__prose p > strong:first-child { background: #fde2dc; color: #a53a25; } .presence--assure #section-what-youll-get .cms-card:nth-child(2) .cms-kind__prose p > strong:first-child { background: #fdf0d8; color: #96650c; } /* 21. "How it works" numbers its steps 1–4, not 01–04. The steps template pads the numeral to two digits itself (`str_pad(…, 2, '0')`), so the markup cannot say otherwise and no stylesheet reaches the text — the numeral is replaced by a counter of this sheet's own. PLATFORM GAP: a numbered CARDS block has `content-card-numbering` (decimal / leading-zero / roman); the steps kind has no equivalent. */ .presence--assure .cms-steps__list { counter-reset: sf-step; } .presence--assure .cms-step { counter-increment: sf-step; } .presence--assure .cms-step__number { font-size: 0; } .presence--assure .cms-step__number::before { content: counter(sf-step); font-size: var(--content-step-number-size, 34px); } /* 22. The hero's code rain: the prototype sets a rotated, masked block of sample code behind the headline. It is decoration, not content — the original carries it in an `sf-hero__code` div, and the hero kind has no field for it, so this sheet draws it on the display hero's spare pseudo-element. `::before` is the hatch (group 3), so this is `::after`. PLATFORM GAP: a hero has no decorative-text or ornament slot; nothing short of a kind field or a background image can carry this. The `\00003c` is a literal `<`: the custom-CSS guard rejects any `<` as markup, so the sample's `Promise` has to be escaped. It renders as written. */ .presence--assure .cms-hero--dark.cms-hero--size-display::after { content: "Route::middleware(['auth:sanctum'])\A ->prefix('api/v2')\A ->group(function () {\A Route::get('/accounts', [AccountController::class, 'index']);\A Route::post('/transfers', [TransferController::class, 'store'])\A ->middleware('verified');\A });\A \A export async function runChecks(repo: Repository): Promise\00003cReport> {\A const findings = await analyse(repo, { depth: 'full' });\A return weight(findings)\A .byRiskZone(['auth', 'payments', 'pii'])\A .withSuggestedNextSteps();\A }\A \A def verify_dependencies(manifest: Manifest) -> list[Finding]:\A return [f for f in scan(manifest) if f.provenance is not Verified]"; position: absolute; right: -30px; top: 10px; z-index: 0; font-family: ui-monospace, Menlo, monospace; font-size: 14px; line-height: 1.9; color: #aef8f7; opacity: .26; white-space: pre; transform: rotate(-3deg); pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), transparent 92%); mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), transparent 92%); } /* The headline and its buttons sit over it. */ .presence--assure .cms-hero--dark.cms-hero--size-display > * { z-index: 1; } @media (max-width: 860px) { .presence--assure .cms-hero--dark.cms-hero--size-display::after { display: none; } }