/* ========================================================================== EO CAPABILITY GALLERY v6.1.2 · scoped component styles ========================================================================== */ /* ============================================================ EO CAPABILITY GALLERY v6.1.2 HOMEPAGE INTEGRATION START (CSS) source: EO Capability Gallery v6.1.2 · Production Ready ------------------------------------------------------------ Root-scoped component CSS, imported verbatim minus the source document's standalone-preview-only rules. The homepage owns the documented --eocg-* outer variables in the adapter below and nothing else. Replace this whole block to take a later gallery. ============================================================ */ /* ===== EO CAPABILITY GALLERY CSS START ===== */ /* ===== EO CAPABILITY GALLERY · TOKENS AND SCOPED CSS — START ===== Every rule below is scoped to [data-eo-capability-gallery]. The component changes nothing outside its own root: no host body, typography, link, button, focus, box-sizing or token changes. */ /* ============================================================ EO CAPABILITY GALLERY — AIRLINE OPERATIONAL TREATMENT ------------------------------------------------------------ One configuration-driven renderer. All capability content lives in Component.CAPS (logic class). This file contains NO capability-specific markup: every node, stage, outcome, port and edge is produced from configuration. Tokens below are the preserved Airline Operational treatment. ============================================================ */ [data-eo-capability-gallery]{ /* ---- PUBLIC INTEGRATION VARIABLES (homepage may override these only) ---- Outer frame, outer section spacing/background, and the section heading. Nothing internal (geometry, ports, routing, topology, timing) is exposed. */ --eocg-max-width:1500px; --eocg-inline-padding:40px; --eocg-top-padding:52px; --eocg-bottom-padding:92px; --eocg-section-background:#e8edf4; --eocg-heading-font:'Archivo','Helvetica Neue',Arial,sans-serif; --eocg-heading-size:clamp(38px,4.1vw,58px); --eocg-heading-color:#0c1724; /* ---- internal gallery tokens (were global :root in v5.1) ---- */ color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; --context-sticky-offset:0px; /* v4 material depth — one studio light from the top left */ --surface:#f7f9fc; --surface-inset:inset 0 2px 6px rgba(12,23,36,.10), inset 0 -1px 0 rgba(255,255,255,.75); --module-bg:#ffffff; --module-bd:#c9d3df; --module-sh:inset 0 1px 0 #fff, 0 1px 2px rgba(12,23,36,.10), 0 12px 20px -15px rgba(12,23,36,.45); --module-sh-lift:inset 0 1px 0 #fff, 0 1px 3px rgba(12,23,36,.13), 0 20px 30px -16px rgba(12,23,36,.52); /* EO working modules: dimensional, never flat — and cobalt-tinted only while a step is the active one (see the stage paint) */ --stage-sh:inset 0 1px 0 #fff, 0 1px 2px rgba(12,23,36,.07); --stage-sh-act:0 0 0 1px rgba(31,111,235,.20), 0 3px 10px -2px rgba(31,111,235,.18); --inset-bg:linear-gradient(180deg,#24384f 0%,#0c1724 100%); --inset-sh:inset 0 2px 6px rgba(6,12,20,.7), inset 0 -1px 0 rgba(255,255,255,.06); --channel:#dfe5ee; --navy:#0c1724; --navy-2:#24384f; --cobalt:#1f6feb; --cobalt-deep:#0c1724; --ink:#2a3038; --ink-2:#6b7178; --label:#8d97a4; --pale:#f7f9fc; --pale-2:#eef2f7; --white:#ffffff; --rule:#c9d3df; --rule-2:#aeb9c7; --band:#eef2f7; /* v5.5 · EO Foundation type system. --serif is KEPT as a token name because existing component logic and markup read it, but it now maps to Archivo: there is no serif typography in the gallery. */ --serif:'Archivo','Helvetica Neue',Arial,sans-serif; --sans:'Archivo','Helvetica Neue',Arial,sans-serif; --mono:'IBM Plex Mono',monospace; /* the elevation the renderer paints on event, outcome and system cards: white sheets standing above the chassis wash, never flat */ --sheet-sh:inset 0 1px 0 #fff, 0 1px 2px rgba(12,23,36,.10), 0 14px 24px -16px rgba(12,23,36,.50); /* port + node state tokens, read by the renderer */ --port-bg:#ffffff; --port-bd:#8d97a4; --sys-ring:rgba(31,111,235,.12); --stage-bg:#ffffff; --stage-bd:#c9d3df; --stage-fg:#2a3038; --stage-meta:#8d97a4; --stage-dot:#aeb9c7; --stage-done-bg:#eef2f7; --stage-done-bd:#aeb9c7; --stage-done-fg:#24384f; --stage-done-dot:#24384f; --stage-act-bg:#ffffff; --stage-act-bd:#1f6feb; --stage-act-fg:#1f6feb; --stage-act-dot:#1f6feb; --wire:#8d97a4; --wire-soft:#aeb9c7; --wire-exc:#24384f; --wire-act:#1f6feb; --label-bg:#f7f9fc; --label-fg:#2a3038; /* v5.1 radius hierarchy — soft exterior, precise interior. Applied by level, never arbitrarily: enclosure > surface > band > card > module. Operational nodes stay the most angular. */ --radius-shell:22px; --radius-surface:16px; --radius-band:12px; --radius-card:10px; --radius-module:7px; --radius-control:10px; --radius-pill:999px; /* v5.1 chassis depth: one contact shadow, one broad ambient wash */ --chassis-sh:0 1px 2px rgba(12,23,36,.09), 0 4px 10px rgba(12,23,36,.06), 0 28px 60px rgba(12,23,36,.13); } [data-eo-capability-gallery], [data-eo-capability-gallery] *{box-sizing:border-box} [data-eo-capability-gallery] p{text-wrap:pretty} [data-eo-capability-gallery] a{color:var(--cobalt);text-decoration:none} [data-eo-capability-gallery] a:hover{color:var(--cobalt-deep);text-decoration:underline} [data-eo-capability-gallery] [data-disclose]:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px} [data-eo-capability-gallery] [data-disclose-return]:focus-visible,[data-eo-capability-gallery] [data-tab]:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px} [data-eo-capability-gallery] [data-disclosure][hidden],[data-eo-capability-gallery] [data-level="business"][hidden]{display:none !important} @media (prefers-reduced-motion:reduce){ [data-eo-capability-gallery] [data-tokens]{display:none !important} [data-eo-capability-gallery] [data-wash]{transition:none !important} } /* v4.2 capability strip: one row, never wrapping, restrained scrollbar */ [data-eo-capability-gallery] [data-capstrip]{-ms-overflow-style:none} [data-eo-capability-gallery] [data-capstrip]::-webkit-scrollbar{height:0;display:none} [data-eo-capability-gallery] [data-capselect] select:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px} /* responsive stacking — the only rules that cannot be inline. Business story stays above technical detail; fan-out destinations stack without implying a sequence (they keep their own edges). */ @media (max-width:1180px){ /* MEDIUM (760–1180): the story stacks, the EO stage strip does not. Trigger ↓ one continuous stage strip ↓ outcome ↓ systems of record. */ [data-eo-capability-gallery] [data-level="business"]:not([hidden]){display:flex !important;flex-direction:column;gap:26px} [data-eo-capability-gallery] [data-zone="row"]{display:contents !important} [data-eo-capability-gallery] [data-node="a.start"]{order:1} [data-eo-capability-gallery] [data-sysband]{order:3;margin-top:18px !important} [data-eo-capability-gallery] [data-zone="sys"]{display:grid !important;grid-template-columns:minmax(0,1fr) !important} [data-eo-capability-gallery] [data-node="rail"]{order:2} [data-eo-capability-gallery] [data-zone="out"]{order:4;margin-top:18px !important} [data-eo-capability-gallery] [data-level="business"] > div:last-of-type{order:4} /* systems stay side by side while they are legible, never one giant card */ /* v6.1.1 · the systems row is owned by applySystemRow above the mobile breakpoint: it writes the width AND the gap, so nothing here may impose a different gap than the width was computed against. */ [data-eo-capability-gallery] [data-syslist] > *{grid-column:auto !important} [data-eo-capability-gallery] [data-stages] > *{grid-column:auto !important} /* one EO-carried process: shared structure, tighter segments, real dividers */ [data-eo-capability-gallery] [data-stages]{padding:16px !important;gap:14px !important} [data-eo-capability-gallery] [data-stage]{min-height:94px !important;padding:13px 11px 14px !important;gap:8px !important} [data-eo-capability-gallery] [data-stage] [data-stage-label]{font-size:12.5px !important;line-height:1.28 !important} [data-eo-capability-gallery] [data-stage] [data-stage-meta]{font-size:8.5px !important;letter-spacing:.1em !important} /* compact bookends: the event opens the story, the outcome closes it harder */ [data-eo-capability-gallery] [data-node="a.start"]{padding:15px 20px 16px 26px !important} /* the impact card is the horizontal conclusion: its role band is flush with the card top, so it takes no top padding here either */ [data-eo-capability-gallery] [data-kind="outcome"]{padding:0 20px 16px 26px !important} [data-eo-capability-gallery] [data-actor-title]{font-size:21px !important;margin-top:7px !important} [data-eo-capability-gallery] [data-out-title]{font-size:24px !important;margin-top:7px !important} [data-eo-capability-gallery] [data-actor-sub],[data-eo-capability-gallery] [data-out-sub]{margin-top:8px !important} /* v6.1.1 · the impact card is horizontal now: its proof is a vertical list beside the statement, never columns of one-word lines. The old rule below described the vertical card's stacked proof block and no longer applies. */ [data-eo-capability-gallery] [data-out-proof]{margin-top:0 !important;padding-top:2px !important;grid-auto-flow:row !important;grid-auto-columns:auto !important;gap:9px !important} /* v6.1.1 · each configured outcome keeps its own card, stacked in order: the impact row is a full-width conclusion, not a set of columns */ [data-eo-capability-gallery] [data-zone="out"]{display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:18px} [data-eo-capability-gallery] [data-tgrid]{grid-template-columns:minmax(0,1fr) !important;row-gap:40px !important} [data-eo-capability-gallery] [data-tgrid] [data-spacer]{display:none !important} [data-eo-capability-gallery] [data-zone="tctl"]{grid-template-columns:minmax(0,1fr) !important;gap:34px !important} /* context rail: one prominent active label plus progress, never seven squeezed labels and never horizontal overflow */ [data-eo-capability-gallery] [data-compact-grid]{grid-template-columns:minmax(0,1fr) !important} [data-eo-capability-gallery] [data-compact-zone="trigger"]{padding:14px 20px !important;border-right:none !important;border-bottom:1px solid var(--rule)} [data-eo-capability-gallery] [data-compact-zone="outcome"]{padding:14px 20px !important;border-left:none !important;border-top:1px solid var(--rule)} /* v5.5 · compact capability controls keep the Foundation scale */ [data-eo-capability-gallery] [data-tab],[data-eo-capability-gallery] [data-tab-echo]{font-size:14px !important;padding:12px 15px 13px !important} } /* NARROW (below 760): one active-stage display plus a segmented progress indicator built from the SAME configured stages — every approved label stays in the DOM for assistive technology, and every configured port stays attached because the segments are the stage elements themselves. */ @media (max-width:759px){ [data-eo-capability-gallery] [data-stage-now]{display:grid !important} [data-eo-capability-gallery] [data-stages]{padding:0 16px 16px !important;gap:7px !important} [data-eo-capability-gallery] [data-stage]{min-height:0 !important;height:26px !important;padding:0 !important;gap:0 !important;background:var(--rule-2) !important;border-color:var(--rule-2) !important} [data-eo-capability-gallery] [data-stage][data-active="1"]{background:var(--cobalt) !important;border-color:var(--cobalt) !important} [data-eo-capability-gallery] [data-stage][data-done="1"]{background:var(--navy-2) !important;border-color:var(--navy-2) !important} [data-eo-capability-gallery] [data-stage] [data-stage-label],[data-eo-capability-gallery] [data-stage] [data-stage-meta],[data-eo-capability-gallery] [data-stage] [data-stage-dot]{position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;border:0 !important;overflow:hidden !important;white-space:nowrap !important;clip-path:inset(50%) !important} [data-eo-capability-gallery] [data-out-proof]{grid-auto-flow:row !important;grid-auto-columns:auto !important;gap:9px !important} [data-eo-capability-gallery] [data-syslist]{grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) !important} [data-eo-capability-gallery] [data-actor-title]{font-size:19px !important} [data-eo-capability-gallery] [data-out-title]{font-size:21px !important} [data-eo-capability-gallery] [data-zone="out"]{grid-template-columns:minmax(0,1fr) !important} /* v4.2: the desktop capability row is replaced by a labelled selector. Exactly one control set is mounted at a time. */ [data-eo-capability-gallery] [data-capstrip-wrap]{display:none !important} [data-eo-capability-gallery] [data-capselect]{display:grid !important} [data-eo-capability-gallery] [data-gallery-controls]{flex-direction:column !important;align-items:stretch !important} [data-eo-capability-gallery] [data-controls]{width:100% !important} /* the rail keeps its height: only the replay control gets more compact */ [data-eo-capability-gallery] [data-eo-operating-rail]{padding:0 20px !important;gap:10px !important} [data-eo-capability-gallery] [data-replay]{height:28px !important;padding:0 10px !important;gap:7px !important;letter-spacing:.1em !important} } /* v4.2 · four-module lower bands (the pricing surfaces) stay in ONE row at every width: each surface keeps its own unobstructed inward connection to EO, and no connection has to cross another module to reach its port. */ @media (max-width:1180px){ /* v6.1.1 · five systems too: every system is entered on its TOP edge, so a wrapped row would sit directly under an incoming run and be crossed by it. One row keeps every connection clear of every card. */ } @media (max-width:640px){ [data-eo-capability-gallery] [data-syslist][data-count="4"],[data-eo-capability-gallery] [data-syslist][data-count="5"]{gap:7px !important} [data-eo-capability-gallery] [data-syslist][data-count="4"] [data-node],[data-eo-capability-gallery] [data-syslist][data-count="5"] [data-node]{padding:10px 9px 11px !important} [data-eo-capability-gallery] [data-syslist][data-count="5"] [data-node] [data-node-role],[data-eo-capability-gallery] [data-syslist][data-count="4"] [data-node] > span:first-of-type{position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;border:0 !important;overflow:hidden !important;white-space:nowrap !important;clip-path:inset(50%) !important} [data-eo-capability-gallery] [data-syslist][data-count="4"] [data-node-name],[data-eo-capability-gallery] [data-syslist][data-count="5"] [data-node-name]{margin-top:0 !important;font-size:12.5px !important;line-height:1.25 !important} } /* v6.1.1 · the impact conclusion stacks its proof under the statement before either side would have to wrap word by word, and the divider turns horizontal at exactly that point. */ @media (max-width:1024px){ [data-eo-capability-gallery] [data-out-body]{grid-template-columns:minmax(0,1fr) !important;row-gap:16px !important} [data-eo-capability-gallery] [data-out-divider]{width:100% !important;height:1px !important;align-self:auto !important} } /* v6.1 · the role band escapes the card padding with negative margins, so it follows the compact padding the responsive rules apply to those cards. */ @media (max-width:1180px){ [data-eo-capability-gallery] [data-kind="actor"] [data-role-band]{margin-top:-15px !important;margin-right:-20px !important;margin-left:-13px !important;margin-bottom:10px !important} [data-eo-capability-gallery] [data-kind="outcome"] [data-role-band]{margin-right:-20px !important;margin-left:-13px !important;margin-bottom:16px !important} } @media (max-width:759px){ [data-eo-capability-gallery] [data-role-name]{font-size:11.5px !important} [data-eo-capability-gallery] [data-role-band]{padding:0 12px !important;gap:10px !important} } /* v5.1 · narrow screens keep the same radius HIERARCHY at smaller values, so softening never eats into label or connector space. */ @media (max-width:759px){ [data-eo-capability-gallery]{ --radius-shell:16px; --radius-surface:12px; --radius-band:10px; --radius-card:8px; --radius-module:6px; --radius-control:9px; } } /* ===== EO CAPABILITY GALLERY · TOKENS AND SCOPED CSS — END ===== */ /* ===== EO CAPABILITY GALLERY · HOMEPAGE ADAPTER START ===== The only gallery presentation variables the homepage overrides. */ [data-eo-capability-gallery]{ --eocg-max-width:calc(1500px + (var(--eo-gutter) * 2)); --eocg-inline-padding:var(--eo-gutter); /* the page section already supplies the space above the gallery — the component only needs to clear its own edge */ --eocg-top-padding:clamp(12px,1.4vw,20px); --eocg-bottom-padding:clamp(68px,7vw,96px); --eocg-section-background:transparent; --eocg-heading-font:var(--eo-display); --eocg-heading-size:clamp(38px,4vw,56px); --eocg-heading-color:var(--eo-navy); } /* ===== EO CAPABILITY GALLERY · HOMEPAGE ADAPTER END ===== */ /* ===== EO CAPABILITY GALLERY CSS END ===== */ /* ===== EO CAPABILITY GALLERY v6.1.2 HOMEPAGE INTEGRATION END (CSS) ===== */