/* Raznameh Clinics — journey and role blueprints * Diagram components shared by journeys.html and the four view-*.html pages. * Loaded after guides.css and architecture.css, and built only from their * tokens: the page rhythm (.ov-section, .ov-head), the cards (.tile, .kpi) * and the tables come from there, and everything below is the drawing. * * Every diagram is HTML and CSS rather than an image, so it reflows, stays * selectable and searchable, and can be corrected by editing a line of text. * The wide ones scroll inside their own box; the page itself never does. * * Each page sets --role on . That single value drives the rules, * the numbers, the lane headers and the section markers, so a page is * recoloured by changing one declaration. */ body { --role: var(--color-brand-500); --role-soft: var(--color-brand-50); --role-line: var(--color-brand-200); --role-deep: var(--color-brand-800); } body.role-client { --role: var(--color-accent-500); --role-soft: var(--color-accent-50); --role-line: var(--color-accent-200); --role-deep: var(--color-accent-800); } body.role-expert { --role: var(--color-magenta-500); --role-soft: #f8e9f7; --role-line: #e6bfe4; --role-deep: var(--color-magenta-600); } body.role-admin { --role: var(--color-brand-500); --role-soft: var(--color-brand-50); --role-line: var(--color-brand-200); --role-deep: var(--color-brand-800); } body.role-accountant { --role: var(--color-brand-800); --role-soft: #eef2f8; --role-line: #c6d3e6; --role-deep: var(--color-brand-900); } .ov-num { color: var(--role); } /* ------------------------------------------------------------------ hero */ /* The role pages open on the dark band the guide hero uses, so they read as part of the same site rather than as a slide deck someone pasted in. */ .bp-head { background: var(--color-dark-800); color: #fff; padding-block: clamp(var(--space-12), 6vw, var(--space-20)); position: relative; overflow: hidden; } .bp-head::after { content: ''; position: absolute; inset: auto 0 0; height: 4px; background: var(--gradient-brand); } .bp-head .crumbs, .bp-head .crumbs a { color: rgba(255,255,255,.62); } .bp-head .crumbs a:hover { color: var(--color-accent-300); } .bp-head h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: var(--tracking-tighter); max-width: 20ch; } .bp-head .lede { color: rgba(255,255,255,.78); font-size: var(--text-lg); line-height: var(--leading-relaxed); max-width: 60ch; margin: var(--space-5) 0 0; } .bp-head .eyebrow { color: var(--color-accent-300); } /* who the page is for, stated before anything else */ .whofor { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); } .whofor span { font-size: var(--text-xs); font-weight: 600; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.86); } /* ------------------------------------------------------------- swimlanes */ /* Rows are people, columns are phases. Wide by nature, so it scrolls in its own box; the sticky first column keeps the actor visible while it does. */ .lanes-wrap { overflow-x: auto; border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: #fff; } .lanes { min-width: 940px; display: grid; grid-template-columns: 132px repeat(var(--phases, 6), minmax(140px, 1fr)); } .lane-phase { padding: var(--space-4) var(--space-3); text-align: center; background: var(--color-neutral-50); border-bottom: 1px solid var(--color-border-strong); border-left: 1px solid var(--color-border-default); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--color-text-secondary); } .lane-phase.corner { background: #fff; border-left: 0; } .lane-actor { position: sticky; left: 0; z-index: 2; background: #fff; padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border-default); border-right: 1px solid var(--color-border-strong); display: flex; flex-direction: column; gap: 2px; justify-content: center; } .lane-actor b { font-size: var(--text-sm); font-weight: 700; } .lane-actor em { font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); } .lane-actor::before { content: ''; display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--lane-accent, var(--color-neutral-300)); margin-bottom: var(--space-2); } .lane-client { --lane-accent: var(--color-accent-500); } .lane-expert { --lane-accent: var(--color-magenta-500); } .lane-staff { --lane-accent: var(--color-brand-500); } .lane-system { --lane-accent: var(--color-neutral-400); } .cell { padding: var(--space-3); border-bottom: 1px solid var(--color-border-default); border-left: 1px solid var(--color-border-default); display: grid; align-content: start; gap: var(--space-2); } .act { border: 1px solid var(--color-border-default); border-left: 3px solid var(--lane-accent, var(--color-neutral-300)); border-radius: var(--radius-md); background: var(--color-neutral-50); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); line-height: var(--leading-snug); } .act b { display: block; font-weight: 700; color: var(--color-text-primary); } .act span { color: var(--color-text-secondary); } .act.is-auto { background: #fff; border-style: dashed; } .act.is-key { background: var(--role-soft); border-color: var(--role); } .cell.is-empty { background: repeating-linear-gradient(45deg, transparent, transparent 7px, var(--color-neutral-50) 7px, var(--color-neutral-50) 14px); } .legend { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-secondary); } .legend i { font-style: normal; display: inline-flex; align-items: center; gap: var(--space-2); } .legend i::before { content: ''; width: 16px; height: 10px; border-radius: 3px; border: 1px solid var(--color-border-strong); background: var(--color-neutral-50); } .legend i.k-auto::before { background: #fff; border-style: dashed; } .legend i.k-key::before { background: var(--role-soft); border-color: var(--role); } .legend i.k-none::before { background: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--color-neutral-100) 4px, var(--color-neutral-100) 8px); } /* ---------------------------------------------------------------- ribbon */ /* One chain of phases, read left to right, wrapping on a narrow screen. */ .ribbon { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: stretch; } .rib { flex: 1 1 130px; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: #fff; padding: var(--space-4); position: relative; min-width: 130px; } .rib::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--role); opacity: .35; } .rib.is-now::before { opacity: 1; height: 4px; } .rib b { display: block; font-size: var(--text-sm); font-weight: 700; margin-top: var(--space-2); } .rib span { display: block; font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 4px; line-height: var(--leading-snug); } .rib em { font-style: normal; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--role); font-weight: 700; } /* -------------------------------------------------------------- the fork */ /* Online and on the premises, drawn as two columns off one shared spine. */ .fork { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); } .fork-col { border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: #fff; overflow: hidden; } .fork-top { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border-default); background: var(--color-neutral-50); } .fork-top h4 { font-size: var(--text-lg); font-weight: 700; } .fork-top p { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); } .fork-col.is-online .fork-top, .fork-col.is-warm .fork-top { background: var(--color-accent-50); } .fork-col.is-onsite .fork-top, .fork-col.is-cool .fork-top { background: var(--color-brand-50); } .fork-steps { list-style: none; margin: 0; padding: var(--space-5) var(--space-6); display: grid; gap: 0; counter-reset: forkstep; } .fork-steps li { display: grid; grid-template-columns: 30px 1fr; gap: var(--space-4); padding-bottom: var(--space-5); position: relative; } .fork-steps li:last-child { padding-bottom: 0; } .fork-steps li::before { counter-increment: forkstep; content: counter(forkstep); width: 26px; height: 26px; border-radius: var(--radius-full); display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; background: var(--color-neutral-100); color: var(--color-text-secondary); } .fork-steps li::after { content: ''; position: absolute; left: 13px; top: 30px; bottom: 8px; width: 1px; background: var(--color-border-strong); } .fork-steps li:last-child::after { display: none; } .fork-steps li.is-diff::before { background: var(--gradient-cta); color: #fff; } .fork-steps b, .fork-steps span { grid-column: 2; } .fork-steps b { display: block; font-size: var(--text-sm); font-weight: 700; } .fork-steps span { display: block; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-snug); margin-top: 2px; } /* ---------------------------------------------------------- screen frames */ /* A wireframe of what the role opens, drawn rather than screenshotted so it stays true when a screen is restyled and needs no image pipeline. */ .screens { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); } .frame { border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: #fff; padding: var(--space-5); } .frame > h4 { font-size: var(--text-base); font-weight: 700; } .frame > p { margin: var(--space-1) 0 var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); } .wf { border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-neutral-50); } .wf-bar { display: flex; align-items: center; gap: 5px; padding: var(--space-2) var(--space-3); background: var(--color-neutral-100); border-bottom: 1px solid var(--color-border-default); } .wf-bar i { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-neutral-300); } .wf-bar small { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--color-text-muted); } .wf-body { padding: var(--space-3); display: grid; gap: var(--space-2); } .wf-row { display: flex; align-items: center; gap: var(--space-2); font-size: 11px; color: var(--color-text-secondary); } .wf-row::before { content: ''; width: 5px; height: 5px; border-radius: 1px; background: var(--role); flex: none; } .wf-block { border-radius: var(--radius-md); background: #fff; border: 1px solid var(--color-border-default); padding: var(--space-2) var(--space-3); font-size: 11px; } .wf-block b { display: block; font-family: var(--font-display); font-size: var(--text-sm); color: var(--role-deep); } .wf-block span { color: var(--color-text-muted); } .wf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .wf-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--role-soft); color: var(--role-deep); } /* -------------------------------------------------------- control levers */ .controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--space-4); } .ctrl { border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: #fff; padding: var(--space-5); display: grid; gap: var(--space-3); } .ctrl-top { display: flex; align-items: center; gap: var(--space-3); } .ctrl-dot { width: 30px; height: 30px; border-radius: var(--radius-md); background: var(--role-soft); border: 1px solid var(--role-line); display: grid; place-items: center; flex: none; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--role-deep); } .ctrl-top b { font-size: var(--text-sm); font-weight: 700; } .ctrl > p { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-snug); } .ctrl-eff { border-top: 1px dashed var(--color-border-strong); padding-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); } .ctrl-eff b { color: var(--role-deep); font-weight: 700; display: block; text-transform: uppercase; letter-spacing: var(--tracking-widest); font-size: 10px; margin-bottom: 2px; } /* -------------------------------------------------------- before / after */ .baw { border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); overflow: hidden; background: #fff; } .baw-head, .baw-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 0; } .baw-head > div { padding: var(--space-3) var(--space-5); background: var(--color-neutral-50); border-bottom: 1px solid var(--color-border-strong); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--color-text-secondary); } .baw-row > div { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-default); font-size: var(--text-sm); line-height: var(--leading-snug); } .baw-row:last-child > div { border-bottom: 0; } .baw-row .b-task { font-weight: 600; } .baw-row .b-was { color: var(--color-text-secondary); background: var(--color-neutral-50); } .baw-row .b-now { color: var(--role-deep); background: var(--role-soft); } .baw-row .b-now b { font-weight: 700; } /* ------------------------------------------------------------ money leaks */ .leaks { display: grid; gap: var(--space-3); } .leak { display: grid; grid-template-columns: 190px 1fr; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); overflow: hidden; background: #fff; } .leak-where { padding: var(--space-4) var(--space-5); background: var(--color-neutral-50); border-right: 1px solid var(--color-border-default); } .leak-where b { display: block; font-size: var(--text-sm); font-weight: 700; } .leak-where span { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; } .leak-fix { padding: var(--space-4) var(--space-5); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-snug); } .leak-fix b { color: var(--role-deep); } .leak-fix code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-brand-700); } /* ------------------------------------------------------- satisfaction bars */ .sat { display: grid; gap: var(--space-4); } .satrow { display: grid; grid-template-columns: 210px 1fr; gap: var(--space-5); align-items: start; } .satrow > b { font-size: var(--text-sm); font-weight: 700; } .satrow > b small { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; } /* The meter carries the weight and the sentence carries the meaning, so the caption sits under the bar rather than on top of a saturated gradient. */ .satbar { position: relative; padding-top: 10px; } .satbar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 10px; border-radius: var(--radius-full); background: var(--color-neutral-100); } .satbar i { position: absolute; top: 0; left: 0; height: 10px; width: var(--w, 60%); border-radius: var(--radius-full); background: var(--gradient-cta); } .satbar span { display: block; margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-snug); } /* ----------------------------------------------------------- design notes */ .principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); counter-reset: princ; } .princ { border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: #fff; padding: var(--space-6); position: relative; } .princ::before { counter-increment: princ; content: counter(princ, decimal-leading-zero); position: absolute; top: var(--space-4); right: var(--space-5); font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700; color: var(--color-neutral-100); } .princ h4 { font-size: var(--text-base); font-weight: 700; padding-right: var(--space-10); } .princ p { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-snug); } .princ p + p { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-border-strong); color: var(--role-deep); } /* ------------------------------------------------------------- day clock */ .clock { display: grid; gap: 0; border-left: 2px solid var(--color-border-strong); margin-left: var(--space-4); } .tick { position: relative; padding: 0 0 var(--space-6) var(--space-8); } .tick:last-child { padding-bottom: 0; } .tick::before { content: ''; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: var(--radius-full); background: #fff; border: 2px solid var(--role); } .tick time { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--role); letter-spacing: var(--tracking-widest); text-transform: uppercase; } .tick b { display: block; font-size: var(--text-base); font-weight: 700; margin: 2px 0 var(--space-1); } .tick p { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-snug); max-width: 68ch; } /* --------------------------------------------------------------- pill nav */ .bp-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); } .bp-jump a { font-size: var(--text-xs); font-weight: 600; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.86); } .bp-jump a:hover { border-color: var(--color-accent-400); color: var(--color-accent-300); } /* ------------------------------------------------------------ cross links */ .crossnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); } .cross { border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: #fff; padding: var(--space-5); display: block; color: inherit; transition: transform var(--transition-fast), box-shadow var(--transition-normal), border-color var(--transition-fast); } .cross:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--role); color: inherit; } .cross em { font-style: normal; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-muted); } .cross b { display: block; font-size: var(--text-base); font-weight: 700; margin: var(--space-2) 0 var(--space-1); } .cross span { display: block; font-size: var(--text-xs); color: var(--color-text-secondary); line-height: var(--leading-snug); } .cross.is-here { border-color: var(--role); background: var(--role-soft); } /* ------------------------------------------------------- module catalogue */ .visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* The search bar follows the reader down a long list, so it sits under the 76px nav rather than scrolling away with the hero. */ .modtools { position: sticky; top: 76px; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border-default); } .modtools-inner { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); flex-wrap: wrap; } .modsearch-wrap { flex: 1 1 260px; display: block; } .modsearch { width: 100%; height: 44px; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); background: #fff; padding-inline: var(--space-5); font: inherit; font-size: var(--text-sm); color: var(--color-text-primary); } .modsearch:focus { outline: 2px solid var(--color-accent-400); outline-offset: 1px; border-color: var(--color-accent-500); } .modcount { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; } .mgroup + .mgroup { border-top: 1px solid var(--color-border-default); } .mgroup:nth-of-type(even) { background: var(--color-bg-subtle); } .mgroup .ov-num { color: var(--color-accent-600); } .mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--space-5); } .mcard { border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: #fff; padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start; position: relative; overflow: hidden; } .mcard::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--gradient-cta); opacity: .5; } .mcard-top { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; } .mcard h3 { font-size: var(--text-lg); font-weight: 700; } .mcard code { font-family: var(--font-mono); font-size: 11px; color: var(--color-brand-700); background: var(--color-brand-50); border-radius: var(--radius-full); padding: 2px var(--space-3); } .mcard > p { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); } .mfeat { list-style: none; margin: 0; padding: var(--space-4) 0 0; display: grid; gap: var(--space-2); border-top: 1px dashed var(--color-border-strong); } .mfeat li { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-snug); padding-left: var(--space-5); position: relative; } .mfeat li::before { content: ''; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-accent-400); } /* Licence: free to run, or part of what we build and a clinic pays for. */ .mtags { display: flex; flex-wrap: wrap; gap: var(--space-2); } .mtag { font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-widest); text-transform: uppercase; padding: 3px var(--space-3); border-radius: var(--radius-full); border: 1px solid transparent; white-space: nowrap; } .mtag.is-free { background: var(--color-accent-50); color: var(--color-accent-800); border-color: var(--color-accent-200); } .mtag.is-dev { background: var(--color-brand-50); color: var(--color-brand-700); border-color: var(--color-brand-200); } .mtag.is-paid { background: var(--gradient-cta); color: #fff; } .licence-key { display: grid; gap: var(--space-4); margin-top: var(--space-8); max-width: 82ch; } .licence-key > div { display: grid; grid-template-columns: 245px 1fr; gap: var(--space-5); align-items: start; } .lk-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; } .lk-text { font-size: var(--text-sm); color: rgba(255,255,255,.74); line-height: var(--leading-snug); } @media (max-width: 700px) { .licence-key > div { grid-template-columns: 1fr; gap: var(--space-2); } } /* Which applications in the deployment's Apps list a card accounts for. */ .mcovers { margin: 0; padding-top: var(--space-3); border-top: 1px dashed var(--color-border-strong); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .mcovers span { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-muted); margin-right: var(--space-1); } .mcovers b { font-weight: 600; font-size: 11px; color: var(--color-neutral-700); background: var(--color-neutral-100); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); padding: 2px var(--space-3); } /* The jump chips on this page carry a count, so they need a little more room. */ .bp-jump b { font-family: var(--font-mono); font-weight: 700; color: var(--color-accent-300); margin-left: var(--space-1); } /* These pages carry no language strip, so the mobile menu opens under the 76px bar rather than the 112px the guide pages leave room for. */ @media (max-width: 820px) { .nav-links { top: 76px; } } @media (max-width: 720px) { .leak { grid-template-columns: 1fr; } .leak-where { border-right: 0; border-bottom: 1px solid var(--color-border-default); } .satrow { grid-template-columns: 1fr; gap: var(--space-2); } .baw-head { display: none; } .baw-row { grid-template-columns: 1fr; } .baw-row > div { border-bottom: 0; } .baw-row { border-bottom: 1px solid var(--color-border-strong); } .baw-row .b-was::before { content: 'Before — '; font-weight: 700; color: var(--color-text-muted); } .baw-row .b-now::before { content: 'Now — '; font-weight: 700; } }