@import url("/styles/variables.css");.overview { --brand:var(--brand-color); --brand-soft:#e9f8ef; --ink:#1d2433; --muted:#667085; --line:#e4e7ec; --card:#ffffff; --accent-soft:#e7f2f9; --radius:12px; /* Width and outer spacing come from the surrounding <page-section> */ color:var(--ink); line-height:1.55;}.overview * { box-sizing:border-box; }/* Architecture *//* Three columns:role selector | diagram | Manage rail */.overview .arch { display:grid; grid-template-columns:200px 1fr 180px; gap:56px;}.overview .stack { display:flex; flex-direction:column; gap:10px; }.overview .layer { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;}.overview .layer-head { display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }.overview .layer-num { font-size:12px; font-weight:800; color:var(--brand); min-width:22px;}.overview .layer-title { font-weight:700; font-size:15px; line-height:1.4; margin:0; padding:0; }.overview .chips { display:flex; flex-wrap:wrap; gap:8px; }.overview .chip { flex:1 1 120px; text-align:center; font-size:14px; font-weight:600; padding:10px 12px; border-radius:8px; background:#f6f7f9; border:1px solid var(--line);}/* Tiles with more information:on hover (or tap/focus) a summary panel drops out of the bottom of the tile, so the tile appears to expand over whatever sits beneath it */.overview .has-info { position:relative; transition:border-color .15s, box-shadow .15s;}.overview .has-info:hover,.overview .has-info:focus-within { z-index:20; outline:none; border-color:var(--brand); border-bottom-left-radius:0; border-bottom-right-radius:0; box-shadow:0 8px 20px rgba(16, 24, 40, .12);}.overview .has-info > .info { position:absolute; top:calc(100% - 1px); left:-1px; right:-1px; padding:10px 12px 12px; background:inherit; border:1px solid var(--brand); border-top-color:var(--line); /* subtle divider between tile and summary */ border-radius:0 0 8px 8px; box-shadow:0 8px 20px rgba(16, 24, 40, .12); text-align:left; font-size:12px; font-weight:400; line-height:1.45; color:var(--muted); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s, transform .15s, visibility .15s;}.overview .layer.has-info > .info { border-radius:0 0 var(--radius) var(--radius); padding-left:20px; padding-right:20px; }/* Plain backing so text isn't read over the stripes */.overview .layer.band.has-info > .info { background:#fff; }.overview .side-list .has-info > .info { border-radius:0 0 6px 6px; padding-left:8px; padding-right:8px; }.overview .has-info:hover > .info,.overview .has-info:focus-within > .info { opacity:1; visibility:visible; transform:none; }.overview .has-info .info p { margin:0 0 6px; font-size:12px; color:var(--muted); }.overview .has-info .info a { display:block; width:fit-content; font-weight:600; color:var(--brand); text-decoration:none; }.overview .has-info .info a + a { margin-top:6px; }/* Panel on the green Central Database chip inherits the green, so use light text */.overview .chip.primary.has-info .info p { color:rgba(255, 255, 255, .9); }.overview .chip.primary.has-info .info a { color:#fff; }.overview .has-info .info a::after { content:" →"; }.overview .has-info .info a:hover { text-decoration:underline; }/* Inline text links */.overview .loop-note a { text-decoration:none; }.overview .loop-note a:hover strong { text-decoration:underline; }.overview .chip small { display:block; font-weight:400; color:var(--muted); font-size:12px; }.overview .layer.band { padding:12px 20px; background:repeating-linear-gradient(135deg, #f6f7f9 0 8px, #fff 8px 16px);}.overview .layer.band .layer-head { margin:0; }.overview .layer.core { border-color:var(--brand); box-shadow:0 6px 24px rgba(56, 193, 114, .12); }.overview .layer.core .chip.primary { background:var(--brand); color:#fff; border-color:var(--brand); }.overview .layer.core .chip.primary small { color:rgba(255,255,255,.85); }.overview .hub { position:relative; display:flex; flex-direction:column; gap:10px; margin-top:14px; padding:30px 14px 14px; border:2px solid var(--brand); border-radius:calc(var(--radius) + 6px); background:linear-gradient(180deg, var(--brand-soft), rgba(233, 248, 239, .35));}.overview .hub-badge { position:absolute; top:-14px; left:18px; display:inline-flex; align-items:center; gap:8px; padding:4px 14px 4px 4px; border-radius:999px; background:var(--brand); color:#fff; font-size:13px; font-weight:800; letter-spacing:.02em; box-shadow:0 4px 12px rgba(56, 193, 114, .3);}/* Layers with a pill heading like the SyncHub container:grey for the problem, blue for the outcome */.overview .layer.pilled { position:relative; margin-top:14px; padding-top:26px; }/* Inside a row, push the whole row down so the side box stays level */.overview .row:has(> .layer.pilled) { margin-top:14px; }.overview .row > .layer.pilled { margin-top:0; }.overview .hub-badge.problem-badge { background:#667085; box-shadow:0 4px 12px rgba(16, 24, 40, .15);}.overview .hub-badge.outcome-badge { background:#0b9ed0; box-shadow:0 4px 12px rgba(11, 158, 208, .3);}.overview .outcome-badge .pill-icon .chip-icon { color:#0b9ed0; }/* Round white holder for the icon at the start of a pill */.overview .pill-icon { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#fff;}.overview .pill-icon img { width:13px; height:13px; object-fit:contain; }.overview .pill-icon .chip-icon { width:14px; height:14px; margin:0; color:#667085; }.overview .row { display:grid; grid-template-columns:1fr 200px; gap:10px; }.overview .layer.side { padding:18px 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px;}/* Top-align side boxes so their heading lines up with the main layer's heading */.overview .row > .layer.side { justify-content:flex-start; }.overview .row:has(> .layer.pilled) > .layer.side { padding-top:26px; }.overview .layer.side .side-desc { margin:0; font-size:12px; color:var(--muted); }.overview .side-list { list-style:none; margin:6px 0 0; padding:0; width:100%; display:flex; flex-direction:column; gap:6px;}.overview .side-list li { padding:6px 8px; font-size:12px; font-weight:600; border-radius:6px; background:#fff; border:1px solid var(--line);}/* A row whose side box is joined to the main layer by an arrow */.overview .row.linked { grid-template-columns:1fr auto 200px; }.overview .row.linked > .arrow { align-self:center; margin:0; }.overview .loop-icon { width:18px; height:18px; }.overview .layer.outputs .chip { background:var(--accent-soft); border-color:transparent; color:#075b78; }.overview .layer.outputs .chip.has-info:is(:hover, :focus-within) { border-color:var(--brand); }.overview .chips.tiles .chip { display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px 12px 16px;}.overview .chips.tiles .chip small { color:#4b6b78; line-height:1.4; }.overview .chip-icon { width:32px; height:32px; margin-bottom:6px; background:currentColor; -webkit-mask:var(--icon) center / contain no-repeat; mask:var(--icon) center / contain no-repeat;}.overview .chip-logo { width:32px; height:32px; object-fit:contain; margin-bottom:6px; }.overview .arrow { width:32px; height:32px; margin:2px auto; display:grid; place-items:center; border-radius:50%; background:var(--brand); color:#fff; font-size:18px; font-weight:800; line-height:1; box-shadow:0 3px 10px rgba(56, 193, 114, .35);}.overview .arrow.muted { background:transparent; color:var(--brand); border:2px solid var(--brand); box-shadow:none; }.overview .loop-note { font-size:12px; color:var(--muted); margin:10px 0 0; }.overview .loop-note strong { color:var(--brand); }/* Side rail */.overview .rail { border:2px dashed var(--line); border-radius:var(--radius); padding:14px; display:flex; flex-direction:column; justify-content:center; gap:10px; text-align:center; position:relative; align-self:center;}/* Two-way connector between the user rail and the SyncHub container */.overview .rail-link { position:absolute; top:50%; left:-30px; transform:translate(-50%, -50%); display:flex; flex-direction:column; align-items:center; gap:4px;}.overview .rail-link .arrow { margin:0; }.overview .rail-link .two-way { width:18px; height:18px; display:block; }.overview .rail-title { margin:0 0 2px; padding:0; font-size:15px; font-weight:700; line-height:1.4; }.overview .rail-item { padding:16px 12px; }.overview .rail-item .chip-icon { display:block; width:28px; height:28px; margin:0 auto 8px; color:var(--brand); }.overview .rail-item h4 { margin:0; font-size:14px; }.overview .rail-item p { margin:4px 0 0; font-size:12px; color:var(--muted); }@media (max-width:760px) { .overview .arch, .overview .row, .overview .row.linked { grid-template-columns:1fr; } .overview .row.linked > .arrow { margin:0 auto; } .overview .rail { flex-direction:row; flex-wrap:wrap; } .overview .rail-title { flex-basis:100%; } .overview .rail-item { flex:1; } .overview .rail-link { top:-35px; left:50%; flex-direction:row; } .overview .rail-link .two-way { transform:rotate(90deg); }}/* Persona switcher:picking a role highlights its tiles (.persona-match) and dims the rest *//* On wide screens it's a left-hand panel that stays in view while you scroll the diagram */.overview .personas { align-self:start; position:sticky; top:calc(var(--headerHeight) + 20px); /* clear the sticky site header */ margin-top:14px; /* line up with the Problem card, whose pill sticks up above it */ padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card);}.overview .personas-label { display:block; margin-bottom:10px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}.overview .persona-buttons { display:flex; flex-direction:column; gap:6px; }.overview .persona-buttons button { height:auto; min-width:0; line-height:1.4; padding:8px 12px; text-align:left; white-space:normal; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:14px; font-weight:600;}.overview .persona-buttons button.active { background:var(--brand); border-color:var(--brand); color:#fff; }/* Below 1100px there's no room for three columns:the selector becomes a centred row above the diagram */@media (max-width:1100px) { .overview .personas { grid-column:1 / -1; position:static; margin-top:0; padding:16px; border:1px solid var(--line); background:var(--card); /* white card so the selector stands out from the shaded page-section */ text-align:center; } .overview .persona-buttons { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:8px; } .overview .persona-buttons button { padding:8px 16px; border-radius:999px; }}@media (min-width:761px) and (max-width:1100px) { .overview .arch { grid-template-columns:1fr 180px; }}@media (max-width:760px) { .overview .persona-buttons button { padding:6px 12px; font-size:13px; }}.overview [data-personas] { transition:opacity .2s, border-color .2s, box-shadow .2s; }.overview.persona-active [data-personas]:not(.persona-match) { opacity:.3; }/* Bring a dimmed tile back to full strength while its summary panel is open */.overview.persona-active [data-personas]:not(.persona-match):is(:hover, :focus-within) { opacity:1; }.overview.persona-active .persona-match { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft), 0 4px 12px rgba(56, 193, 114, .2);}/* Cloud Service Connectors tile:a magnifier beside the title hints at the app search, which lives in the tile's reveal panel alongside its summary */.overview .hub .chips .chip { display:flex; flex-direction:column; justify-content:center; }.overview .chip.app-tile { flex:1 1 0; }.overview .app-tile-title { display:inline-flex; align-items:center; justify-content:center; gap:6px; }.overview .app-tile-title .search-icon { width:14px; height:14px; flex:none; color:var(--muted); transition:color .15s; }.overview .app-tile:is(:hover, :focus-within) .app-tile-title .search-icon { color:var(--brand); }/* Chosen apps on the tile:tiny logos that expand (on hover, or tap/focus) into a card of chips, each of which removes its app */.overview .app-tile-logos { display:inline-flex; border-radius:4px; outline:none; } /* not positioned, so the expanded card spans the whole tile */.overview .app-tile-logos[hidden] { display:none; }.overview .app-logos-compact { display:inline-flex; align-items:center; gap:2px; font-size:11px; color:var(--muted); }.overview .app-logos-compact img { width:14px; height:14px; object-fit:contain; }.overview .app-logos-expanded { position:absolute; top:-1px; left:-1px; right:-1px; z-index:30; display:flex; flex-direction:column; gap:4px; padding:6px; background:#fff; border:1px solid var(--brand); border-radius:8px; box-shadow:0 8px 20px rgba(16, 24, 40, .12); opacity:0; visibility:hidden; transform:scale(.98); transform-origin:top center; transition:opacity .15s, transform .15s, visibility .15s;}.overview .app-tile-logos:is(:hover, :focus-within) .app-logos-expanded { opacity:1; visibility:visible; transform:none; }.overview .app-logo-chip { display:flex; align-items:center; gap:6px; height:auto; min-width:0; padding:3px 6px; border:1px solid var(--line); border-radius:6px; background:#fff; font-size:12px; font-weight:600; line-height:1.3; color:var(--ink); text-align:left; white-space:nowrap;}.overview .app-logo-chip img { width:16px; height:16px; object-fit:contain; flex:none; }.overview .app-logo-chip .app-logo-x { margin-left:auto; padding-left:6px; font-size:14px; color:var(--muted); }.overview .app-logo-chip:hover, .overview .app-logo-chip:focus-visible { opacity:1; border-color:var(--errorFontColor); outline:none; }.overview .app-logo-chip:hover .app-logo-x, .overview .app-logo-chip:focus-visible .app-logo-x { color:var(--errorFontColor); }/* Search box and results inside the panel */.overview .app-search { display:flex; align-items:center; gap:6px; margin:0 0 8px; padding:0 8px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--muted);}.overview .app-search[hidden] { display:none; }.overview .app-search:focus-within { border-color:var(--brand); color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }.overview .app-search .search-icon { width:14px; height:14px; flex:none; }.overview .app-search input { flex:1; min-width:0; height:30px; padding:0; border:0; background:transparent; font-size:13px; font-weight:400; color:var(--ink);}.overview .app-search input::placeholder { color:var(--muted); }.overview .app-search input:focus { outline:none; }.overview .app-results { margin:-4px 0 8px; padding:4px; list-style:none; position:relative; max-height:220px; overflow-y:auto; /* relative so option offsetTop is measured from the list */ background:#fff; border:1px solid var(--line); border-radius:6px; text-align:left; color:var(--ink);}.overview .app-results[hidden] { display:none; }.overview .app-results li { display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:4px; font-size:13px; font-weight:600; cursor:pointer;}.overview .app-results li.highlighted { background:var(--brand-soft); }.overview .app-results li small { margin-left:auto; font-size:11px; font-weight:400; color:var(--muted); }.overview .app-results li.app-none { font-weight:400; color:var(--muted); cursor:default; }.overview .app-results img { width:18px; height:18px; object-fit:contain; flex:none; }/* "Your selection" recap and call to action at the foot of the role panel */.overview .persona-summary { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); text-align:left;}.overview .persona-summary dl { display:grid; grid-template-columns:auto 1fr; gap:6px 10px; margin:0 0 12px; font-size:13px;}.overview .persona-summary dt { margin:0; font-weight:400; color:var(--muted); }.overview .persona-summary dd { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }.overview .persona-summary dd img { width:14px; height:14px; object-fit:contain; }.overview .persona-summary :is(dt, dd)[hidden] { display:none; }.overview .persona-summary .button { display:block; width:100%; height:auto; line-height:1.4; padding:10px 12px; text-align:center; white-space:normal;}@media (max-width:1100px) { .overview .persona-summary { max-width:360px; margin-left:auto; margin-right:auto; }}/* Problem and Connectors rows:three equal columns, with the Problem row inset by the SyncHub container's padding + border (14px + 2px) so its tiles line up with the Connectors tiles below */@media (min-width:761px) { .overview :is(.problem-layer, .connectors-layer) .chips .chip { flex:1 1 0; min-width:0; } .overview .problem-layer .chips { margin:0 16px; }}@media (max-width:760px) { /* Full width on phones so the search panel has room */ .overview .chip.app-tile { flex-basis:100%; }}/* Manage rail lives inside the SyncHub container but sits just outside its right edge, centred on it, filling the grid's (otherwise empty) right-hand column. 58px = the 56px grid gap + the container's 2px right border */.overview .hub > .rail { position:absolute; top:50%; left:calc(100% + 58px); width:180px; transform:translateY(-50%);}@media (max-width:760px) { /* On phones the page script moves the rail out to sit just below the SyncHub container */ .overview .stack > .rail { margin-top:56px; } /* room for the ↕ arrow, centred in the gap above */}/* Intro:until a role is picked, a prompt sits where the diagram goes */.overview.intro .stack { display:none; }.overview:not(.intro) .role-prompt { display:none; }.overview .role-prompt { align-self:start; grid-column:2 / -1; /* span the diagram and Manage columns */ margin-top:14px; /* level with the role panel */ min-height:360px; padding:40px 32px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border:2px dashed var(--line); border-radius:calc(var(--radius) + 6px); background:var(--card); text-align:center;}.overview .role-prompt-icon { width:44px; height:44px; margin:0 0 6px; color:var(--brand); }.overview .role-prompt h2 { margin:0; padding:0; font-size:22px; font-weight:700; line-height:1.3; }.overview .role-prompt p { max-width:420px; margin:0; font-size:15px; color:var(--muted); }.overview .role-prompt-hint { margin-top:8px; padding:6px 14px; border-radius:999px; background:var(--brand-soft); font-size:13px; font-weight:700; color:var(--brand); animation:role-prompt-nudge 1.6s ease-in-out infinite;}.overview .role-prompt-hint .hint-narrow { display:none; }@keyframes role-prompt-nudge { 0%, 100% { transform:translateX(0); } 50% { transform:translateX(-6px); } }@keyframes role-prompt-nudge-up { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }@media (max-width:1100px) { .overview .role-prompt { grid-column:1 / -1; margin-top:0; min-height:0; } .overview .role-prompt-hint .hint-wide { display:none; } .overview .role-prompt-hint .hint-narrow { display:inline; } .overview .role-prompt-hint { animation-name:role-prompt-nudge-up; }}/* Reveal:the diagram's parts fade up one after another once a role is picked (--step set by the page script) */.overview .reveal { animation:overview-reveal 1.35s ease both; animation-delay:calc(var(--step, 0) * 330ms); }@keyframes overview-reveal { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }/* The Manage rail is centred with a transform, so it only fades */.overview .hub > .rail.reveal { animation-name:overview-fade; }@keyframes overview-fade { from { opacity:0; } to { opacity:1; } }@media (prefers-reduced-motion:reduce) { .overview .reveal, .overview .role-prompt-hint { animation:none; }}/* "Your selection" stays hidden until an app or database is chosen, then fades in */.overview .persona-summary:not(.has-selection) { display:none; }.overview .persona-summary.has-selection { animation:overview-reveal .4s ease both; }@media (prefers-reduced-motion:reduce) { .overview .persona-summary.has-selection { animation:none; }}/* Cache CSSParserMiddleware_www.synchub.io_/Pages/styles/overview.css_False_HTML_32610221834 22 Oct 21:29:15Z */