/* ========================================================================== Option A (design-a.md; the advisers' vote, Peter 6 Oct 2026): the advice process page and the client record — colour cards, 17 px text, the stage timeline across the top, a household header. Only the look: the panels, folds (feos:panel-folds), buttons and access are EspoCRM's and FEOS's as before. ========================================================================== */ :root { --feos-a-ink: #0f1b26; --feos-a-muted: #3d4a57; --feos-a-line: #e1e7ee; --feos-a-blue: #0a72ba; --feos-a-blue-dark: #075a93; --feos-a-blue-soft: #e8f3fb; --feos-a-blue-ring: #cfe3f3; --feos-a-green: #1f7a4d; --feos-a-green-soft: #e6f4ec; --feos-a-orange: #a14a08; --feos-a-orange-soft: #fdf0e4; --feos-a-orange-line: #e7b88f; --feos-a-teal: #0e7c86; --feos-a-teal-soft: #e3f4f5; --feos-a-purple: #6a3fb5; --feos-a-purple-soft: #f1ebfa; --feos-a-grey: #3d4a57; --feos-a-grey-soft: #eef1f4; --feos-a-amber: #7a5a00; --feos-a-amber-soft: #fff4d6; --feos-a-red: #a3271b; --feos-a-red-soft: #fde6e4; } /* ---- Chips (the requirements, the statuses in the cards) ------------------------------------------------------- */ .feos-a-chip { display: inline-block; font-size: 14px; font-weight: 700; padding: 3px 12px; border-radius: 999px; white-space: nowrap; background: var(--feos-a-grey-soft); color: var(--feos-a-grey); line-height: 1.5; } .feos-a-chip-done { background: var(--feos-a-green-soft); color: var(--feos-a-green); } .feos-a-chip-waiting { background: var(--feos-a-amber-soft); color: var(--feos-a-amber); } .feos-a-chip-missing { background: var(--feos-a-red-soft); color: var(--feos-a-red); } .feos-a-chip-info { background: var(--feos-a-blue-soft); color: var(--feos-a-blue-dark); } :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"]) .panel .label { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--feos-a-grey-soft); color: var(--feos-a-grey); } :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"]) .panel .label-success { background: var(--feos-a-green-soft); color: var(--feos-a-green); } :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"]) .panel .label-warning { background: var(--feos-a-amber-soft); color: var(--feos-a-amber); } :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"]) .panel .label-danger { background: var(--feos-a-red-soft); color: var(--feos-a-red); } :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"]) .panel :is(.label-info, .label-primary) { background: var(--feos-a-blue-soft); color: var(--feos-a-blue-dark); } /* ---- Both pages: readable cards ------------------------------------------------------------------------------- */ :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"]) .panel { border-radius: 16px !important; overflow: hidden; } :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"]) .panel > .panel-heading { padding-top: 13px; padding-bottom: 13px; border-bottom-color: transparent; } :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"]) .panel > .panel-heading .panel-title { font-size: 19px; font-weight: 700; color: inherit; } :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"]) .panel > .panel-body, :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"]) .panel > .panel-body .field, :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"]) .panel > .panel-body td { font-size: 17px; } :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"]) .panel > .panel-body .control-label, :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"]) .panel > .panel-body th, :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"]) .panel > .panel-body small { font-size: 14px; } :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"]) .panel.feos-empty-rel .panel-title[data-feos-empty]:after { font-size: 15px; color: var(--feos-a-muted); opacity: .8; } :is(.detail[data-scope="FeosAdviceProcess"], .detail[data-scope="Contact"]) .feos-foldable > .panel-heading:hover .panel-title { color: inherit; text-decoration: underline; } /* the colour of each card's title (as in the mock-up) */ .detail[data-scope="FeosAdviceProcess"] .panel[data-name="policies"], .detail[data-scope="Contact"] .panel:is([data-name="feosPolicies"], [data-name="feosMortgages"]) { --feos-a-bg: var(--feos-a-orange-soft); --feos-a-fg: var(--feos-a-orange); } .detail[data-scope="FeosAdviceProcess"] .panel:is([data-name="mortgages"], [data-name="existingCover"]), .detail[data-scope="Contact"] .panel[data-name="feosAdviceProcesses"] { --feos-a-bg: var(--feos-a-teal-soft); --feos-a-fg: var(--feos-a-teal); } .detail[data-scope="FeosAdviceProcess"] .panel:has(.cell[data-name="stageLine"]), .detail[data-scope="Contact"] .panel[data-name="feosPortal"] { --feos-a-bg: var(--feos-a-green-soft); --feos-a-fg: var(--feos-a-green); } .detail[data-scope="FeosAdviceProcess"] .panel:is([data-name="feosClients"], :has(.cell[data-name="factFindAction"])), .detail[data-scope="Contact"] .record-grid .middle > .panel:first-child { --feos-a-bg: var(--feos-a-blue-soft); --feos-a-fg: var(--feos-a-blue-dark); } .detail[data-scope="FeosAdviceProcess"] .panel:is([data-name="files"], [data-name="feosHealth"]), .detail[data-scope="Contact"] .panel[data-name="feosUploads"] { --feos-a-bg: var(--feos-a-purple-soft); --feos-a-fg: var(--feos-a-purple); } .detail[data-scope="Contact"] .panel[data-name="feosVulnerabilities"] { --feos-a-bg: var(--feos-a-grey-soft); --feos-a-fg: var(--feos-a-grey); } .detail[data-scope="FeosAdviceProcess"] .panel:is([data-name="policies"], [data-name="mortgages"], [data-name="existingCover"], [data-name="feosClients"], [data-name="files"], [data-name="feosHealth"], :has(.cell[data-name="stageLine"]), :has(.cell[data-name="factFindAction"])) > .panel-heading, .detail[data-scope="Contact"] .panel:is([data-name="feosPolicies"], [data-name="feosMortgages"], [data-name="feosAdviceProcesses"], [data-name="feosPortal"], [data-name="feosUploads"], [data-name="feosVulnerabilities"]) > .panel-heading, .detail[data-scope="Contact"] .record-grid .middle > .panel:first-child > .panel-heading { background: var(--feos-a-bg); color: var(--feos-a-fg); } .detail[data-scope] .panel > .panel-heading .panel-actions-container .btn { background: #fff; border: 1.5px solid var(--feos-a-line); border-radius: 10px; font-size: 15px; color: var(--feos-a-ink); } .detail[data-scope="FeosAdviceProcess"] .panel[data-name="policies"] > .panel-heading .panel-actions-container .btn { border-color: var(--feos-a-orange-line); } /* ---- Advice process: the header ------------------------------------------------------------------------------ */ #main .header-title:has(.feos-a-head) { margin: 0; font-size: inherit; } .feos-a-eyebrow { font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--feos-a-muted); } .feos-a-eyebrow a { color: inherit; text-decoration: none; } .feos-a-eyebrow a:hover { color: var(--feos-a-blue); } .feos-a-title { margin: 4px 0 0; font-size: 30px; font-weight: 800; line-height: 1.2; color: var(--feos-a-ink); cursor: pointer; white-space: normal; } .feos-a-goal { color: var(--feos-a-muted); font-weight: 700; } .feos-a-title .feos-a-chip { margin-left: 10px; vertical-align: 6px; font-size: 13px; } #main .page-header:has(.feos-a-head) .page-header-column-2 .btn { height: 48px; padding: 0 20px; border-radius: 12px; font-size: 16px; font-weight: 600; } #main .page-header:has(.feos-a-head) .page-header-column-2 .btn-default { border: 1.5px solid #c9d3de; background: #fff; } #main .page-header:has(.feos-a-head) .page-header-column-2 .btn-primary { font-weight: 700; } /* ---- Advice process: the stage timeline across the top ------------------------------------------------------- */ .feos-a-flow { background: var(--panel-bg, #fff); border: 1px solid var(--feos-a-line); border-radius: 16px; padding: 20px 24px; margin: 0 0 16px; display: flex; flex-direction: column; gap: 16px; max-width: var(--record-grid-max-width); } .feos-a-flow:empty { display: none; } .feos-a-track-name { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--feos-a-muted); margin-bottom: 8px; } .feos-a-steps { display: grid; grid-template-columns: repeat(var(--feos-a-n, 6), minmax(0, 1fr)); gap: 10px; } .feos-a-step { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .feos-a-bar { height: 10px; border-radius: 5px; background: var(--feos-a-line); } .feos-a-step strong { font-size: 17px; color: #5b6875; line-height: 1.25; } .feos-a-step span { font-size: 14px; color: var(--feos-a-muted); } .feos-a-step-done .feos-a-bar { background: var(--feos-a-green); } .feos-a-step-done strong { color: var(--feos-a-ink); } .feos-a-step-now .feos-a-bar { background: var(--feos-a-blue); box-shadow: 0 0 0 3px var(--feos-a-blue-ring); } .feos-a-step-now strong, .feos-a-step-now span { color: var(--feos-a-blue); } .feos-a-step-now span { font-weight: 600; } .feos-a-step-missed .feos-a-bar { background: #e8a33d; } .feos-a-step-missed strong, .feos-a-step-missed span { color: var(--feos-a-amber); } .feos-a-step-na { opacity: .5; } .feos-a-step-na strong { text-decoration: line-through; } .feos-a-flow-closed { font-size: 15px; font-weight: 700; color: var(--feos-a-muted); } /* ---- Advice process: the order of the cards (left column) — policies first, what is needed, the fact find ---- */ .detail[data-scope="FeosAdviceProcess"] > .record-grid > .left { display: flex; flex-direction: column; } .detail[data-scope="FeosAdviceProcess"] > .record-grid > .left > :is(.middle, .bottom) { display: contents; } .detail[data-scope="FeosAdviceProcess"] > .record-grid > .left > :is(.middle, .bottom) > * { order: 10; } .detail[data-scope="FeosAdviceProcess"] > .record-grid > .left .panel[data-name="policies"] { order: 1; } .detail[data-scope="FeosAdviceProcess"] > .record-grid > .left .panel[data-name="mortgages"] { order: 2; } .detail[data-scope="FeosAdviceProcess"] > .record-grid > .left > .middle > .panel:has(.cell[data-name="stageLine"]) { order: 3; } .detail[data-scope="FeosAdviceProcess"] > .record-grid > .left > .middle > .panel:has(.cell[data-name="factFindAction"]) { order: 4; } .detail[data-scope="FeosAdviceProcess"] > .record-grid > .left .panel[data-name="feosHealth"] { order: 5; } .detail[data-scope="FeosAdviceProcess"] > .record-grid > .left .panel[data-name="existingCover"] { order: 6; } .detail[data-scope="FeosAdviceProcess"] > .record-grid > .left .panel[data-name="stream"] { order: 20; } .detail[data-scope="FeosAdviceProcess"] > .record-grid > .left > .extra { order: 19; } /* ---- Advice process: What is needed ---------------------------------------------------------------------------- */ .detail[data-scope="FeosAdviceProcess"] .cell[data-name="stageLine"] > .control-label { display: none; } .feos-a-title-count { margin-left: auto; float: right; font-size: 15px; font-weight: 600; margin-right: 8px; } .feos-a-reqs-count { display: none; } .feos-a-reqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 -15px -10px; } .feos-a-req { display: flex; align-items: center; gap: 12px; padding: 11px 15px; border-top: 1px solid var(--feos-a-line); font-size: 17px; min-width: 0; } .feos-a-req-name { flex: 1 1 auto; min-width: 0; } .feos-a-req-name small { display: block; } .feos-a-req-more { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; font-size: 14px; } .feos-a-closed { margin-bottom: 8px; } .detail[data-scope="FeosAdviceProcess"] .feos-ap-next { font-size: 17px; border-radius: 10px; margin: 0 0 12px; } /* ---- Advice process: Clients ---------------------------------------------------------------------------------- */ .feos-a-people { margin: -10px -15px; } .feos-a-person { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--feos-a-line); } .feos-a-person > div { display: flex; flex-direction: column; min-width: 0; } .feos-a-person strong { font-size: 17px; } .feos-a-person small { font-size: 15px; color: var(--feos-a-muted); } .feos-a-initials { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--feos-a-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; } .feos-a-initials-2 { background: var(--feos-a-blue-dark); } .feos-a-kv { display: flex; align-items: baseline; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--feos-a-line); font-size: 17px; } .feos-a-kv:last-child { border-bottom: 0; } .feos-a-kv > span { font-size: 15px; color: var(--feos-a-muted); } .feos-a-kv > strong { margin-left: auto; text-align: right; } .feos-a-portal { margin: -10px -15px; } /* ---- Client record: the household band ------------------------------------------------------------------------- */ #main .header-title:has(.feos-a-band) { margin: 0; font-size: inherit; width: 100%; } #main .page-header:has(.feos-a-band) .page-header-column-1 { width: 100%; flex: 1 1 100%; max-width: 100%; } .feos-a-band { background: var(--feos-a-blue); color: #fff; border-radius: 16px; padding: 22px 26px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; white-space: normal; } .feos-a-band-initials { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; background: #fff; color: var(--feos-a-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; } .feos-a-band-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .feos-a-band .feos-a-eyebrow, .feos-a-band .feos-a-eyebrow a { color: #dbeaf6; } .feos-a-band h1 { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.15; cursor: pointer; color: #fff; } .feos-a-band-line { font-size: 17px; opacity: .95; } .feos-a-band-line a { color: #fff; font-weight: 700; text-decoration: underline; } .feos-a-band-acts { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; } .feos-a-band-acts .btn { height: 50px; padding: 0 22px; border-radius: 12px; font-size: 17px; display: inline-flex; align-items: center; gap: 8px; } .feos-a-band-main, .feos-a-band-main:hover, .feos-a-band-main:focus { background: #fff; color: var(--feos-a-blue-dark); border: 0; font-weight: 800; } .feos-a-band-ghost, .feos-a-band-ghost:hover, .feos-a-band-ghost:focus { background: transparent; color: #fff; border: 2px solid #fff; } .feos-a-band-ghost:hover { background: rgba(255, 255, 255, .12); } /* ---- Phones and narrow laptops --------------------------------------------------------------------------------- */ @media (max-width: 991px) { .feos-a-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } .feos-a-reqs { grid-template-columns: 100%; } } @media (max-width: 600px) { .feos-a-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feos-a-title { font-size: 24px; } .feos-a-band { padding: 18px; } .feos-a-band h1 { font-size: 26px; } .feos-a-band-acts { margin-left: 0; width: 100%; } } /* ---- Clients have no photo (design-a.md C3): not in the portal's own menu either ------------------------------- */ body.feos-portal-user #navbar :is(.avatar, .avatar-link) { display: none !important; } .detail[data-scope] .panel > .panel-heading .panel-title :is(a, span) { text-decoration: none; } .detail[data-scope] .side .panel.feos-empty-rel .panel-title[data-feos-empty]:after { display: block; content: attr(data-feos-empty); font-size: 14px; margin-top: 2px; }