/* Berger BI v2 — solutions (#spec[data-sol]): what the data, automation and AI department does. One featured navy panel (automations, bots, AI agents) with a simulated WhatsApp bot conversation, then two cards. The phone is a simulation of a familiar interface and is labelled as one; no invented product screens elsewhere. */ #dc-root #spec[data-sol] { padding: var(--v2-sec-y) 0; } #dc-root [data-sol-wrap] { max-width: var(--v2-wrap); margin: 0 auto; padding: 0 var(--v2-gutter); box-sizing: border-box; } #dc-root [data-sol-head] { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; } #dc-root [data-sol-head] > div { max-width: 640px; min-width: 0; } #dc-root #spec[data-sol] h2 { margin: 16px 0 0; color: var(--v2-ink); text-wrap: balance; } #dc-root [data-sol-head] p { margin: 8px 0 0; font-size: var(--v2-lead); line-height: 1.6; color: var(--v2-muted); } #dc-root [data-sol-head] [data-sol-more] { font-size: 15px; white-space: nowrap; } #dc-root [data-sol-more] a { color: var(--v2-navy) !important; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; } #dc-root [data-sol-n] { display: inline-block; direction: ltr; font-family: var(--v2-mono); font-size: 12px; letter-spacing: .08em; color: var(--v2-soft); } #dc-root #spec[data-sol] h3 { margin: 8px 0 0; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--v2-ink); } #dc-root [data-sol-d] { margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: var(--v2-muted); max-width: 44ch; } #dc-root [data-sol-o] { margin: 18px 0 0; font-size: var(--v2-body); font-weight: 600; line-height: 1.5; color: var(--v2-navy); } #dc-root [data-sol-list] { list-style: none; margin: 20px 0 0; padding: 0; } #dc-root [data-sol-list] li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--v2-line); font-size: var(--v2-body); line-height: 1.5; color: var(--v2-ink); } #dc-root [data-sol-list] li:first-child { border-top: 0; } #dc-root [data-sol-list] li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--v2-navy); transform: translateY(-2px); } /* featured panels (01 navy, 02 light): text beside a stage where the SYSTEM leads — a redacted screen of the back office, large and running off the panel's outer edge — and the person's phone is a small second actor in the outer corner */ #dc-root [data-sol-feat] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; margin-top: 48px; padding: 48px 0; padding-inline-start: 56px; border-radius: var(--v2-r-card); background: var(--v2-navy); color: #FFFFFF; overflow: hidden; } #dc-root [data-sol-feat] + [data-sol-feat] { margin-top: 20px; } #dc-root [data-sol-feat] [data-sol-n] { color: rgba(255, 255, 255, .55); } #dc-root #spec[data-sol] [data-sol-feat] h3 { color: #FFFFFF; font-size: 30px; } #dc-root [data-sol-feat] [data-sol-d] { color: rgba(255, 255, 255, .78); } #dc-root [data-sol-feat] [data-sol-list] li { color: #FFFFFF; border-top-color: rgba(255, 255, 255, .14); } #dc-root [data-sol-feat] [data-sol-list] li::before { background: #9FC0E8; } #dc-root [data-sol-feat] [data-sol-o] { color: #CFE0F5; } #dc-root [data-sol-cap] { margin: 18px 0 0; max-width: 46ch; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .62); } /* light tone */ #dc-root [data-sol-feat][data-sol-tone="light"] { background: var(--v2-surface); color: var(--v2-ink); border: 1px solid var(--v2-line); box-shadow: var(--v2-shadow); } #dc-root [data-sol-tone="light"] [data-sol-n] { color: var(--v2-soft); } #dc-root #spec[data-sol] [data-sol-tone="light"] h3 { color: var(--v2-ink); } #dc-root [data-sol-tone="light"] [data-sol-d] { color: var(--v2-muted); } #dc-root [data-sol-tone="light"] [data-sol-list] li { color: var(--v2-ink); border-top-color: var(--v2-line); } #dc-root [data-sol-tone="light"] [data-sol-list] li::before { background: var(--v2-navy); } #dc-root [data-sol-tone="light"] [data-sol-o] { color: var(--v2-navy); } #dc-root [data-sol-tone="light"] [data-sol-cap] { color: var(--v2-soft); } #dc-root [data-sol-tone="light"] [data-sol-win] { box-shadow: 0 24px 60px -28px rgba(11, 22, 38, .45), 0 0 0 1px var(--v2-line-2); } /* stage */ #dc-root [data-sol-stage] { position: relative; height: 540px; } #dc-root [data-sol-win] { position: absolute; top: 24px; inset-inline-start: 0; width: 780px; border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .14); } #dc-root [data-sol-win] img { display: block; width: 100%; height: auto; } #dc-root [data-sol-stage] [data-sol-phone] { position: absolute; bottom: 0; inset-inline-end: 28px; transform: scale(.56); } #bbi-root[dir="rtl"] [data-sol-stage] [data-sol-phone] { transform-origin: bottom left; } #bbi-root[dir="ltr"] [data-sol-stage] [data-sol-phone] { transform-origin: bottom right; } /* the picker's app inside the phone */ #dc-root [data-sol-app="pick"] { background: #F5F7FA; } #dc-root [data-pk-head] { display: flex; align-items: center; gap: 10px; padding: 8px 14px 12px; background: #F6F6F6; border-bottom: 1px solid rgba(0, 0, 0, .08); } #dc-root [data-pk-back] { font-size: 24px; line-height: 1; color: var(--v2-navy); } #bbi-root[dir="ltr"] [data-pk-back] { transform: scaleX(-1); } #dc-root [data-pk-head] b { display: block; font-size: 15px; color: #111111; } #dc-root [data-pk-head] small { font-size: 12px; color: #667781; } #dc-root [data-pk-head] em { font-style: normal; font-weight: 600; color: #B4441E; } #dc-root [data-sol-app] [data-x] { filter: blur(3px); } #dc-root [data-pk-prog] { padding: 12px 14px 8px; } #dc-root [data-pk-prog] > div { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 12.5px; color: #5B6B80; } #dc-root [data-pk-prog] i { display: block; height: 6px; border-radius: 3px; background: #E6EAF0; overflow: hidden; } #dc-root [data-pk-prog] i b { display: block; width: 60%; height: 100%; border-radius: 3px; background: var(--v2-navy); } #dc-root [data-pk-list] { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 4px 10px; } #dc-root [data-pk-item] { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 12px; background: #FFFFFF; border: 1px solid #E6EAF0; font-size: 13.5px; color: #0F1B2D; } #dc-root [data-pk-item] > div { flex: 1; min-width: 0; } #dc-root [data-pk-item] b { display: block; font-weight: 600; } #dc-root [data-pk-item] small { font-size: 11.5px; color: #8D9AAD; } #dc-root [data-pk-item] bdi { font-family: 'DM Sans', sans-serif; font-weight: 600; color: #5B6B80; } #dc-root [data-pk-cb] { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid #C5CFDB; } #dc-root [data-pk-cb] svg { visibility: hidden; } #dc-root [data-pk-item="done"] { opacity: .6; } #dc-root [data-pk-item="done"] b { text-decoration: line-through; } #dc-root [data-pk-item="done"] [data-pk-cb] { background: #2E9B6A; border-color: #2E9B6A; } #dc-root [data-pk-item="done"] [data-pk-cb] svg { visibility: visible; } #dc-root [data-pk-item="now"] { border-color: var(--v2-navy); box-shadow: 0 0 0 3px rgba(31, 69, 112, .12); } #dc-root [data-pk-item="now"] [data-pk-cb] { border-color: var(--v2-navy); } #dc-root [data-pk-scan] { display: none; padding: 4px 9px; border-radius: var(--v2-r-pill); background: var(--v2-navy); color: #FFFFFF; font-size: 11.5px; font-weight: 600; } #dc-root [data-pk-item="now"] [data-pk-scan] { display: inline-block; } #dc-root [data-pk-foot] { display: flex; gap: 8px; padding: 10px 12px 18px; background: #FFFFFF; border-top: 1px solid #E6EAF0; } #dc-root [data-pk-foot] > span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; font-size: 13.5px; font-weight: 600; background: #F0F2F5; color: #0F1B2D; } #dc-root [data-pk-foot] > span + span { background: #E3E9F1; color: #6B7C93; } #dc-root [data-pk-foot] bdi { font-family: 'DM Sans', sans-serif; font-weight: 500; } /* the phone: a WhatsApp business chat (light theme) */ #dc-root [data-sol-phone] { width: 292px; padding: 10px; border-radius: 46px; background: #0B1626; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08) inset; } #dc-root [data-sol-scr] { display: flex; flex-direction: column; height: 624px; border-radius: 37px; overflow: hidden; background: #EFEAE2; font-family: -apple-system, BlinkMacSystemFont, 'Heebo', sans-serif; } #dc-root [data-sol-stbar] { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px 6px; direction: ltr; font-size: 13px; font-weight: 600; color: #111111; background: #F6F6F6; } #dc-root [data-sol-wah] { display: flex; align-items: center; gap: 10px; padding: 6px 14px 10px; background: #F6F6F6; border-bottom: 1px solid rgba(0, 0, 0, .08); } #dc-root [data-sol-av] { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--v2-navy); color: #FFFFFF; font-size: 13px; font-weight: 700; } #dc-root [data-sol-wah] b { display: block; font-size: 15px; font-weight: 600; color: #111111; } #dc-root [data-sol-wah] small { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #667781; } #dc-root [data-sol-chat] { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px 10px; font-size: 13px; line-height: 1.4; } #dc-root [data-sol-day] { align-self: center; margin-bottom: 4px; padding: 3px 10px; border-radius: 7px; background: #FFFFFF; color: #54656F; font-size: 11.5px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); } #dc-root [data-sol-b] { max-width: 82%; padding: 6px 9px 5px; border-radius: 9px; color: #111B21; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); } #dc-root [data-sol-b="in"] { align-self: flex-start; background: #FFFFFF; border-start-start-radius: 2px; } #dc-root [data-sol-b="out"] { align-self: flex-end; background: #D9FDD3; border-start-end-radius: 2px; } #dc-root [data-sol-t] { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 2px; direction: ltr; font-size: 10.5px; color: #667781; } #dc-root [data-sol-tk] { width: 16px; height: 11px; } #dc-root [data-sol-opts] { display: grid; margin: 6px -9px -5px; border-top: 1px solid #E9EDEF; } #dc-root [data-sol-opts] > span { display: block; padding: 7px; text-align: center; color: #027EB5; border-top: 1px solid #E9EDEF; } #dc-root [data-sol-opts] > span:first-child { border-top: 0; } #dc-root [data-sol-comp] { display: flex; align-items: center; gap: 8px; padding: 8px 10px 18px; background: #F6F6F6; } #dc-root [data-sol-comp] div { flex: 1; display: flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 18px; background: #FFFFFF; border: 1px solid #E2E2E2; font-size: 13px; color: #8696A0; } #dc-root [data-sol-comp] i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #1DAA61; } @media (max-width: 899px) { #dc-root [data-sol-head] { display: block; } #dc-root [data-sol-head] [data-sol-more] { margin-top: 12px; white-space: normal; } #dc-root [data-sol-feat] { grid-template-columns: 1fr; gap: 28px; padding: 32px 22px 0; } #dc-root #spec[data-sol] [data-sol-feat] h3 { font-size: 24px; } #dc-root [data-sol-stage] { height: 400px; margin: 0 -22px; overflow: hidden; } #dc-root [data-sol-win] { top: 8px; inset-inline-start: 22px; width: 600px; } #dc-root [data-sol-stage] [data-sol-phone] { inset-inline-end: 16px; bottom: -40px; transform: scale(.5); } } /* panel 03 on navy: the dashboards link and the alert's flag */ #dc-root [data-sol-feat]:not([data-sol-tone="light"]) [data-sol-link] { color: #CFE0F5 !important; border-bottom-color: rgba(255, 255, 255, .3); } #dc-root [data-al-flag] { color: #B4441E; font-weight: 700; } /* the manager's phone: a data assistant that answers in Hebrew, with numbers, a breakdown and its source */ #dc-root [data-sol-app="ask"] { background: #F5F7FA; } #dc-root [data-ak-head] { display: flex; align-items: center; gap: 10px; padding: 8px 14px 11px; background: #FFFFFF; border-bottom: 1px solid #E6EAF0; } #dc-root [data-ak-mark] { flex: none; width: 32px; height: 32px; border-radius: 10px; background: #4B4FA8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2l2.2 7.8L22 12l-7.8 2.2L12 22l-2.2-7.8L2 12l7.8-2.2z'/%3E%3C/svg%3E") center / 15px no-repeat; } #dc-root [data-ak-head] b { display: block; font-size: 14.5px; color: #111111; } #dc-root [data-ak-head] small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #667781; white-space: nowrap; } #dc-root [data-ak-head] small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1DAA61; } #dc-root [data-ak-chat] { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; padding: 10px; overflow: hidden; } #dc-root [data-ak-q] { align-self: flex-end; max-width: 84%; padding: 7px 11px; border-radius: 12px; border-start-end-radius: 3px; background: var(--v2-navy); color: #FFFFFF; font-size: 12.5px; line-height: 1.4; } #dc-root [data-ak-a] { align-self: flex-start; max-width: 94%; padding: 9px 11px; border-radius: 12px; border-start-start-radius: 3px; background: #FFFFFF; border: 1px solid #DCE2F3; font-size: 12.5px; line-height: 1.45; color: #0F1B2D; } #dc-root [data-ak-a] p { margin: 0 0 7px; } #dc-root [data-ak-rows] { display: grid; gap: 6px; padding: 8px 9px; border-radius: 9px; background: #F7F8FE; } #dc-root [data-ak-rows] > div { display: grid; grid-template-columns: 54px 1fr 38px; gap: 8px; align-items: center; font-size: 11.5px; } #dc-root [data-ak-rows] i { display: block; height: 7px; border-radius: 4px; background: linear-gradient(to left, #1F4570 var(--w), #E6EAF0 var(--w)); } #bbi-root[dir="ltr"] [data-ak-rows] i { background: linear-gradient(to right, #1F4570 var(--w), #E6EAF0 var(--w)); } #dc-root [data-ak-rows] i[data-dn] { background: linear-gradient(to left, #B4441E var(--w), #E6EAF0 var(--w)); } #bbi-root[dir="ltr"] [data-ak-rows] i[data-dn] { background: linear-gradient(to right, #B4441E var(--w), #E6EAF0 var(--w)); } #dc-root [data-ak-rows] bdi { font-family: 'DM Sans', sans-serif; font-weight: 600; text-align: end; color: #12784A; } #dc-root [data-ak-rows] bdi[data-dn] { color: #B4441E; } #dc-root [data-ak-src] { display: inline-block; margin-top: 7px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; background: #F3F4FB; color: #4B4FA8; } #dc-root [data-ak-acts] { display: flex; gap: 6px; margin-top: 8px; } #dc-root [data-ak-acts] > span { flex: 1; display: grid; place-items: center; min-height: 30px; white-space: nowrap; padding: 6px 4px; border-radius: 8px; text-align: center; font-size: 11.5px; font-weight: 600; border: 1px solid #DCE2F3; color: var(--v2-navy); } #dc-root [data-ak-acts] > span + span { background: var(--v2-navy); border-color: var(--v2-navy); color: #FFFFFF; } #dc-root [data-ak-input] { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 10px 16px; padding: 9px 10px; border-radius: 12px; background: #FFFFFF; border: 1px solid #C9CDEC; font-size: 12.5px; color: #8D9AAD; } #dc-root [data-ak-input] i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #4B4FA8; } #dc-root [data-ak-day] { align-self: center; padding: 2px 10px; border-radius: 7px; background: #FFFFFF; border: 1px solid #E6EAF0; font-size: 11px; color: #5B6B80; } /* in panel 03 the assistant is the point, so the phone is a little larger than in 01 and 02 */ #dc-root [data-sol-feat]:last-of-type [data-sol-stage] [data-sol-phone] { transform: scale(.66); inset-inline-end: auto; inset-inline-start: -36px; } #bbi-root[dir="rtl"] [data-sol-feat]:last-of-type [data-sol-stage] [data-sol-phone] { transform-origin: bottom right; } #bbi-root[dir="ltr"] [data-sol-feat]:last-of-type [data-sol-stage] [data-sol-phone] { transform-origin: bottom left; } @media (max-width: 899px) { #dc-root [data-sol-feat]:last-of-type [data-sol-stage] [data-sol-phone] { transform: scale(.6); inset-inline-start: auto; inset-inline-end: 12px; bottom: -60px; } #bbi-root[dir="rtl"] [data-sol-feat]:last-of-type [data-sol-stage] [data-sol-phone] { transform-origin: bottom left; } #bbi-root[dir="ltr"] [data-sol-feat]:last-of-type [data-sol-stage] [data-sol-phone] { transform-origin: bottom right; } }