/* Service opening system — SINGLE SOURCE. tools/build-service-spine.py writes this file into of every consumer and each component into its host section (service-spine.json). One family of quiet, data-numbered primitives for sections 2 and 3 of the compliance service pages (2026-09-08, owner brief via advisor), replacing the generic dot-led core-list those sections shared: .ssp-rail ComplianceSequence / RenewalControlRail — one continuous vertical line, small two-digit markers .ssp-rail--cadence CadenceTimeline — the same rail; the period label (small uppercase mono) is the entry heading, a small tick marks the line .ssp-register NumberedRiskRegister — small index, title / body, quiet horizontal rules, no cards, no alarm colour .ssp-sheet RequirementSheet — one framed two-column reference sheet; trigger left, explanation right .ssp-panel ConditionPanel — every condition listed with an index on the left, the selected condition's approved copy on a warm paper surface on the right (tabs: hover previews on fine pointers, click/keyboard commits) .ssp-panel--media VisualConditionPanel — the same panel, with a supporting image: each item carries an approved project image (declared in service-spine.json with alt + per-viewport focal positions), rendered as a shallow strip across the top of the active detail panel only — tabs stay text-only (number + title). The selected number, title and copy are the panel's subject; the strip is a 4:1 band on desktop (16:7, capped, when the panel stacks) so the text block carries the visual weight and the panel height follows content (owner brief 2026-09-09: the 16:9 band outweighed the copy). The tabpanel image carries the alt. Focal points ride --op-d / --op-m custom props. Numbers come from order. No route-specific rules, no nth-child, no per-page overrides. Tokens only. Dark is the base; light hangs off :root[data-theme="light"] through the theme tokens. */ .ssp { --ssp-marker: 26px; --ssp-gap: 18px; } .ssp-idx { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; line-height: 1; color: var(--muted); } /* rail */ .ssp-rail { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; max-width: 860px; } .ssp-rail::before { content: ""; position: absolute; left: calc(var(--ssp-marker) / 2); top: 13px; bottom: 13px; width: 1px; background: color-mix(in srgb, var(--text) 24%, transparent); } .ssp-rail > li { position: relative; display: grid; grid-template-columns: var(--ssp-marker) minmax(0, 1fr); column-gap: var(--ssp-gap); align-items: start; padding: 0 0 26px; } .ssp-rail > li:last-child { padding-bottom: 0; } .ssp-node { position: relative; z-index: 1; box-sizing: border-box; width: var(--ssp-marker); height: var(--ssp-marker); border-radius: 50%; border: 1px solid var(--text); background: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; line-height: 1; color: var(--text); } .ssp-rail h3 { margin: 0; padding-top: 4px; font-size: 15.5px; line-height: 1.35; letter-spacing: -.005em; font-weight: 500; color: var(--text); } .ssp-rail p { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 62ch; } .ssp-rail--cadence .ssp-node { width: 9px; height: 9px; margin: 9px 0 0 calc((var(--ssp-marker) - 9px) / 2); border: 0; background: var(--text); } .ssp-rail--cadence h3 { padding-top: 5px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--text); } .ssp-rail--cadence p { margin-top: 6px; font-size: 14.5px; color: var(--text); } /* risk register */ .ssp-register { list-style: none; margin: 0; padding: 0; max-width: 860px; } .ssp-register > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line-soft); } .ssp-register > li:first-child { border-top: 0; padding-top: 0; } .ssp-register > li:last-child { padding-bottom: 0; } .ssp-register .ssp-idx { padding-top: 5px; } .ssp-register h3 { margin: 0; font-size: 15.5px; line-height: 1.35; letter-spacing: -.005em; font-weight: 500; color: var(--text); } .ssp-register p { margin: 5px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 64ch; } /* requirement sheet */ .ssp-sheet { margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 4px 26px; } .ssp-sheet > div { display: grid; grid-template-columns: minmax(180px, 30%) minmax(0, 1fr); gap: 6px 36px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line-soft); } .ssp-sheet > div:first-child { border-top: 0; } .ssp-sheet dt { margin: 0; font-size: 15px; line-height: 1.4; letter-spacing: -.005em; font-weight: 500; color: var(--text); } .ssp-sheet dd { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } /* condition panel */ .ssp-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; } .ssp-panel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .ssp-tab { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: baseline; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.35; letter-spacing: -.005em; font-weight: 500; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; } .ssp-tab .ssp-idx { line-height: inherit; } .ssp-tab:hover { background: var(--control-surface); } .ssp-tab[aria-selected="true"], .ssp-tab.is-preview { background: var(--surface-tinted); border-color: var(--line-soft); } .ssp-tab:focus-visible { outline: 2px solid var(--focus-ring, var(--mineral)); outline-offset: 2px; } /* Stable detail stage (2026-09-10, owner brief: switching tabs must never move the section below). Every tabpanel occupies the SAME grid cell, so the stage is always as tall as the tallest panel at the current viewport — pure layout, re-evaluated by the browser on font load, resize and reflow. Inactive panels keep the `hidden` attribute but stay in layout as visibility:hidden: not painted, not focusable, not in the accessibility tree. No measured heights, no min-height reserve, no per-tab spacers. */ .ssp-detail { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: 14px; background: var(--surface-tinted); padding: 26px 28px; } .ssp-detail > div { grid-area: 1 / 1; min-width: 0; transition: opacity .2s ease; } .ssp-detail > div[hidden] { display: block; visibility: hidden; } .ssp-detail h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.3; letter-spacing: -.015em; font-weight: 500; color: var(--text); } .ssp-detail p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 56ch; } /* visual condition panel — supporting-image variant. Tabs stay text-only (number + title, 2026-09-08 owner brief): the item's single image lives in the active detail panel and nowhere else, as a shallow 4:1 strip (2026-09-09) so the selected copy, not the photograph, leads the panel. */ .ssp-media { margin: -26px -28px 20px; aspect-ratio: 4 / 1; overflow: hidden; border-bottom: 1px solid var(--line-soft); border-radius: 13px 13px 0 0; } .ssp-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--op-d, 50% 50%); } /* SequenceWithSideMedia — one contained editorial figure beside a linear component (2026-09-08). The left sequence sets the natural height; the figure is capped and never a background. */ .ssp-sidebody { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.72fr); column-gap: clamp(40px, 5vw, 72px); align-items: stretch; } .ssp-sidebody__seq { min-width: 0; } .ssp-sidemedia { position: relative; align-self: stretch; margin: 0; height: auto; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-tinted); } .ssp-sidemedia img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--sm-d, 50% 50%); } @media (max-width: 1023px) { .ssp-sidebody { grid-template-columns: 1fr; row-gap: 28px; } .ssp-sidemedia { align-self: auto; width: 100%; aspect-ratio: 16 / 9; height: auto; } .ssp-sidemedia img { object-position: var(--sm-m, var(--sm-d, 50% 50%)); } } @media (max-width: 900px) { .ssp-panel { grid-template-columns: 1fr; gap: 16px; } .ssp-sheet { padding: 2px 18px; } .ssp-sheet > div { grid-template-columns: 1fr; gap: 4px; padding: 15px 0; } .ssp-media img { object-position: var(--op-m, var(--op-d, 50% 50%)); } .ssp-media { aspect-ratio: 16 / 7; max-height: 168px; } /* stacked: never taller than the desktop strip */ } @media (prefers-reduced-motion: reduce) { .ssp-tab, .ssp-detail > div { transition: none; } } /* In-copy links (2026-09-26, owner, SON-4767): a cross-link inside a spine section's lede or an item's copy ("Usually set up with company formation, …", a source citation) reads as a link — underlined, in the text colour, never a button and never colour-only. Scoped to spine sections so no other block's links change. */ .svc-core .sec-head .lede a, .ssp a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, var(--text) 45%, transparent); } .svc-core .sec-head .lede a:hover, .ssp a:hover { text-decoration-color: var(--text); } /* SuitabilitySplit on a service page (kind suitability-split, 2026-09-26, owner): the section heading sits flush left like every other svc-core section on the page, not centred as on the free-zone, bank and emirate consumers. */ .dub-verdict.ssp-split .dub-verdict-head { text-align: left; max-width: 860px; margin-left: 0; margin-right: 0; }