/* Cloud Health Office — Services & operating models * * Components for /services and /deploy. Loaded AFTER sentinel.css and * evidence-hub.css and scoped to `.ev` on , so these pages inherit the * Evidence Hub reading treatment (documentation typography, cyan/green * Sentinel palette) and add only the structures those pages need: * * .svc-pillars product / deployment / services relationship diagram * .svc-stack "complementary layer" topology diagram * .svc-lane advisory / platform / both lanes * .svc-offer professional-services offering cards * .svc-model deployment & operating model cards with a status label * .svc-faq

FAQ * * Every diagram is built from real HTML (headings, lists) rather than an * image, so it reflows on a phone and reads correctly in a screen reader. */ /* ─── Status labels ────────────────────────────────────────────────────── * Availability language is deliberately explicit. A model is one of: * Available shipped and documented today * By engagement offered, scope defined per environment * Under evaluation not offered today; do not imply availability */ .svc-status { display: inline-block; font-family: var(--ev-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; padding: 0.22rem 0.6rem; border-radius: 4px; border: 1px solid; white-space: nowrap; } .svc-status--available { color: var(--ev-green); border-color: rgba(0, 255, 136, 0.35); background: rgba(0, 255, 136, 0.07); } .svc-status--engagement { color: var(--ev-blue); border-color: rgba(0, 180, 255, 0.35); background: rgba(0, 180, 255, 0.07); } .svc-status--evaluation { color: var(--ev-amber); border-color: rgba(255, 204, 102, 0.35); background: rgba(255, 204, 102, 0.07); } /* ─── Relationship diagram: software · deployment · services ───────────── * A top node, three branch columns, and a bottom node, joined by rules that * are decorative only. On narrow screens the rails are hidden and the three * branches stack. */ .svc-pillars { margin: 1.8rem 0 0; /*

is centered by the base stylesheet; the diagram reads as prose, so put the alignment back. The trunk/branch nodes re-center themselves. */ text-align: left; } .svc-node { border: 1px solid var(--ev-border-bright); border-radius: 10px; background: linear-gradient(160deg, rgba(0, 255, 255, 0.07), transparent 65%); padding: 0.85rem 1.1rem; text-align: center; font-family: var(--ev-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ev-cyan); } .svc-node--plan { border-color: rgba(0, 255, 136, 0.3); background: linear-gradient(160deg, rgba(0, 255, 136, 0.07), transparent 65%); color: var(--ev-green); } .svc-rail { height: 1.5rem; border-left: 1px solid var(--ev-border-bright); width: 0; margin: 0 auto; } .svc-branches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; position: relative; } /* The horizontal rail that ties the three branches to the trunk. */ .svc-branches::before { content: ''; position: absolute; top: -0.75rem; left: 16.6%; right: 16.6%; border-top: 1px solid var(--ev-border-bright); } .svc-branch { border: 1px solid var(--ev-border); border-radius: 12px; background: var(--ev-surface); padding: 1.1rem 1.2rem; position: relative; } /* Short drop from the horizontal rail into each branch card. */ .svc-branch::before { content: ''; position: absolute; top: -0.75rem; left: 50%; height: 0.75rem; border-left: 1px solid var(--ev-border-bright); } .svc-branch h3 { margin: 0 0 0.7rem; font-family: var(--ev-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ev-cyan); } .svc-branch ul { margin: 0; padding-left: 1.05rem; font-size: 0.86rem; line-height: 1.75; color: var(--ev-text-muted); } .svc-branch li::marker { color: rgba(0, 255, 255, 0.4); } @media (max-width: 780px) { .svc-branches { grid-template-columns: 1fr; } .svc-branches::before, .svc-branch::before { display: none; } } /* ─── Layer topology: Cloud Health Office beside what already runs ─────── */ .svc-stack { display: grid; gap: 0; margin: 1.8rem 0 0; max-width: 720px; text-align: left; } .svc-layer { border: 1px solid var(--ev-border); border-radius: 10px; background: var(--ev-surface); padding: 0.95rem 1.2rem; } .svc-layer--cho { border-color: var(--ev-border-bright); background: linear-gradient(160deg, rgba(0, 255, 255, 0.06), transparent 70%); } .svc-layer--existing { border-color: rgba(0, 180, 255, 0.25); background: linear-gradient(160deg, rgba(0, 180, 255, 0.05), transparent 70%); } .svc-layer h3 { margin: 0 0 0.2rem; font-family: var(--ev-mono); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: #fff; } .svc-layer p { margin: 0; font-size: 0.86rem; line-height: 1.7; color: var(--ev-text-muted); } .svc-connector { height: 1.2rem; border-left: 1px solid var(--ev-border-bright); width: 0; margin-left: 2rem; } /* ─── Advisory / platform / both lanes ───────────────────────────────────── */ .svc-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.1rem; margin-top: 1.6rem; } .svc-lane { border: 1px solid var(--ev-border); border-radius: 12px; padding: 1.3rem; background: var(--ev-surface); } .svc-lane--advisory { border-color: rgba(0, 180, 255, 0.28); } .svc-lane--platform { border-color: rgba(0, 255, 136, 0.28); } .svc-lane--both { border-color: var(--ev-border-bright); background: linear-gradient(160deg, rgba(0, 255, 255, 0.05), transparent 65%); } .svc-lane h3 { margin: 0 0 0.6rem; font-family: var(--ev-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; } .svc-lane--advisory h3 { color: var(--ev-blue); } .svc-lane--platform h3 { color: var(--ev-green); } .svc-lane--both h3 { color: var(--ev-cyan); } .svc-lane ul { margin: 0; padding-left: 1.05rem; font-size: 0.87rem; line-height: 1.75; color: var(--ev-text-muted); } /* ─── Offering cards ─────────────────────────────────────────────────────── */ .svc-offer { border: 1px solid var(--ev-border); border-radius: 12px; background: var(--ev-surface); padding: 1.5rem 1.6rem; margin-top: 1.2rem; } .svc-offer > h3 { margin: 0.5rem 0 0.5rem; font-size: 1.15rem; color: #fff; } .svc-offer__num { font-family: var(--ev-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ev-cyan); } .svc-offer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1rem 2rem; margin-top: 1.1rem; } .svc-offer__cols h4 { margin: 0 0 0.5rem; font-family: var(--ev-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ev-text-dim); } .svc-offer__cols ul { margin: 0; padding-left: 1.05rem; font-size: 0.86rem; line-height: 1.7; color: var(--ev-text-muted); } .svc-offer__cols li::marker { color: rgba(0, 255, 255, 0.35); } /* ─── Deployment & operating model cards ─────────────────────────────────── */ .svc-models { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1.1rem; margin-top: 1.6rem; } .svc-model { border: 1px solid var(--ev-border); border-radius: 12px; background: var(--ev-surface); padding: 1.4rem; display: flex; flex-direction: column; } .svc-model__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; } .svc-model__head h3 { margin: 0; font-size: 1.03rem; color: #fff; } .svc-model dl { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 0.35rem 1.1rem; margin: 0.9rem 0 0; font-size: 0.85rem; } .svc-model dt { font-family: var(--ev-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ev-text-dim); padding-top: 0.15rem; } .svc-model dd { margin: 0; color: var(--ev-text-muted); line-height: 1.6; min-width: 0; } @media (max-width: 720px) { .svc-model dl { grid-template-columns: 1fr; gap: 0.1rem; } .svc-model dd { margin-bottom: 0.5rem; } } /* ─── Table caption ─────────────────────────────────────────────────────── * A must keep `display: table-caption`, so it cannot reuse * .ev-eyebrow (which forces display:block and drops the caption into the * table body after the header row). */ .svc-table-caption { caption-side: top; text-align: left; padding: 0.9rem 1rem 0.2rem; font-family: var(--ev-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ev-cyan); opacity: 0.85; } /* ─── Engagement models ──────────────────────────────────────────────────── */ .svc-engagements { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.1rem; margin-top: 1.6rem; } .svc-engagement { border: 1px solid var(--ev-border); border-left: 2px solid rgba(0, 255, 255, 0.3); border-radius: 0 12px 12px 0; background: var(--ev-surface-alt); padding: 1.2rem 1.3rem; } .svc-engagement h3 { margin: 0 0 0.45rem; font-size: 1rem; color: #fff; } .svc-engagement p { margin: 0; font-size: 0.87rem; line-height: 1.7; color: var(--ev-text-muted); } /* ─── FAQ ────────────────────────────────────────────────────────────────── */ .svc-faq { margin-top: 1.6rem; } .svc-faq details { border: 1px solid var(--ev-border); border-radius: 10px; background: var(--ev-surface); padding: 0.9rem 1.2rem; margin-bottom: 0.7rem; } .svc-faq summary { cursor: pointer; font-weight: 600; color: #fff; font-size: 0.95rem; list-style: none; display: flex; gap: 0.7rem; align-items: flex-start; } .svc-faq summary::-webkit-details-marker { display: none; } .svc-faq summary::before { content: '+'; font-family: var(--ev-mono); color: var(--ev-cyan); line-height: 1.4; } .svc-faq details[open] summary::before { content: '\2212'; } .svc-faq summary:focus-visible { outline: 2px solid var(--ev-cyan); outline-offset: 3px; } .svc-faq details p { margin: 0.8rem 0 0 1.4rem; font-size: 0.89rem; line-height: 1.75; color: var(--ev-text-muted); } /* ─── Audience chips ─────────────────────────────────────────────────────── */ .svc-audience { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; padding: 0; list-style: none; } .svc-audience li { border: 1px solid var(--ev-border); border-radius: 999px; background: var(--ev-surface-alt); padding: 0.35rem 0.85rem; font-size: 0.82rem; color: var(--ev-text-muted); } /* ─── Homepage band (sentinel pages, not .ev) ────────────────────────────── */ .cho-band { padding: 80px 24px; background: linear-gradient(180deg, #000 0%, #04070c 100%); border-top: 1px solid rgba(0, 255, 255, 0.08); } .cho-band__inner { max-width: 1140px; margin: 0 auto; } .cho-band__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; margin-top: 34px; } .cho-band__card { border: 1px solid rgba(0, 255, 255, 0.14); border-radius: 12px; background: rgba(8, 8, 8, 0.9); padding: 24px; } .cho-band__card h3 { margin: 0 0 10px; font-size: 1.05rem; color: #fff; } .cho-band__card p { margin: 0; font-size: 0.92rem; line-height: 1.75; color: rgba(176, 176, 176, 0.82); } .cho-band__card .cho-band__more { display: inline-block; margin-top: 14px; font-size: 0.85rem; font-weight: 600; color: #00ffff; } .cho-band__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; } @media (prefers-reduced-motion: reduce) { .svc-offer, .svc-model, .cho-band__card { transition: none; } }