/* Berger BI v2 — proof. Owned by the proof redesign; keep every rule scoped to its sections. #cases: text tabs with a sliding navy indicator, a product frame (breadcrumb bar, no window dots) around the live embed, and a hairline case sheet (question / challenge / result). #testimonials: an index of the recommenders plus one full quote at a time, manual controls with a mono counter, no stars, no autoplay. */ /* ---------- shared ---------- */ #dc-root [data-proof] { padding: var(--v2-sec-y) 0; } #dc-root [data-proof="quotes"] { padding-top: calc(var(--v2-sec-y) * .5); } #dc-root [data-proof] p { margin: 0; } #dc-root [data-proof-head] { max-width: 760px; } #dc-root [data-proof-head] h2 { margin: 14px 0 0; padding-bottom: .16em; color: var(--v2-ink) !important; text-wrap: balance; } #dc-root [data-proof-sub] { margin-top: 8px !important; max-width: 56ch; font-size: 17px; line-height: 1.6; color: var(--v2-muted); text-wrap: balance; } #dc-root [data-proof-num] { font-family: var(--v2-mono); font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--v2-soft); font-variant-numeric: tabular-nums; unicode-bidi: isolate; } #dc-root [data-proof-btn] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--v2-r-pill); font-family: 'Heebo', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; white-space: nowrap; cursor: pointer; transition: background-color 180ms var(--v2-ease), border-color 180ms var(--v2-ease), color 180ms var(--v2-ease); } #dc-root [data-proof-btn="primary"] { background: var(--v2-navy); color: #fff; border: 1px solid var(--v2-navy); } #dc-root [data-proof-btn="ghost"] { background: var(--v2-surface); color: var(--v2-navy); border: 1px solid var(--v2-line-2); } #bbi-root[dir="ltr"] [data-proof-flip] { transform: scaleX(-1); } @media (hover: hover) and (pointer: fine) { #dc-root [data-proof-btn="primary"]:hover { background: var(--v2-ink); border-color: var(--v2-ink); color: #fff; } #dc-root [data-proof-btn="ghost"]:hover { border-color: var(--v2-navy); color: var(--v2-navy); } } /* ---------- #cases: tabs ---------- */ #dc-root [data-proof-tabs-wrap] { margin-top: 40px; border-bottom: 1px solid var(--v2-line-2); } #dc-root [data-proof-tabs] { position: relative; display: flex; gap: 32px; margin-bottom: -1px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; } #dc-root [data-proof-tabs]::-webkit-scrollbar { display: none; } /* when the tabs scroll (phones), fade the edge that has more tabs behind it */ #bbi-root[dir="rtl"] [data-proof-tabs][data-fade="end"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px); mask-image: linear-gradient(to right, transparent, #000 48px); } #bbi-root[dir="rtl"] [data-proof-tabs][data-fade="start"] { -webkit-mask-image: linear-gradient(to left, transparent, #000 48px); mask-image: linear-gradient(to left, transparent, #000 48px); } #bbi-root[dir="ltr"] [data-proof-tabs][data-fade="end"] { -webkit-mask-image: linear-gradient(to left, transparent, #000 48px); mask-image: linear-gradient(to left, transparent, #000 48px); } #bbi-root[dir="ltr"] [data-proof-tabs][data-fade="start"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px); mask-image: linear-gradient(to right, transparent, #000 48px); } #bbi-root [data-proof-tabs][data-fade="both"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); } #dc-root [data-proof-tab] { flex: none; display: inline-flex; align-items: baseline; gap: 8px; min-height: 48px; padding: 14px 0 12px; margin: 0; border: 0; background: none; cursor: pointer; font-family: 'Heebo', sans-serif; font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--v2-muted); white-space: nowrap; transition: color 180ms var(--v2-ease); } #dc-root [data-proof-tab][aria-selected="true"] { color: var(--v2-ink); } #dc-root [data-proof-tabshort] { display: none; } #dc-root [data-proof-tab][aria-selected="true"] [data-proof-num] { color: var(--v2-navy); } #dc-root [data-proof-tab]:focus-visible { outline-offset: -2px; } @media (hover: hover) and (pointer: fine) { #dc-root [data-proof-tab]:hover { color: var(--v2-ink); } } /* the sliding indicator: a 1px bar scaled to the active tab's width (transform only) */ #dc-root [data-proof-ind] { position: absolute; bottom: 0; left: 0; width: 1px; height: 2px; background: var(--v2-navy); transform-origin: 0 0; transform: translateX(var(--pi-x, 0px)) scaleX(var(--pi-w, 0)); pointer-events: none; } #dc-root [data-proof-ind][data-ready] { transition: transform 220ms var(--v2-ease); } /* ---------- #cases: product frame ---------- */ #dc-root [data-proof-panel] { margin-top: 24px; } #dc-root [data-proof-frame] { background: var(--v2-surface); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-card); overflow: hidden; box-shadow: var(--v2-shadow); } #dc-root [data-proof-bar] { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 8px; padding-inline-start: 16px; background: var(--v2-surface-2); border-bottom: 1px solid var(--v2-line); } #dc-root [data-proof-crumb] { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--v2-mono); font-size: 12px; line-height: 1.4; color: var(--v2-muted); } #dc-root [data-proof-bar] [data-proof-crumb] { flex: 1; } #dc-root [data-proof-crumb] > span:last-child { white-space: nowrap; } #dc-root [data-proof-live] { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--v2-navy); } #dc-root [data-proof-sample] { flex: none; padding: 3px 10px; border: 1px solid var(--v2-line-2); border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--v2-muted); background: var(--v2-surface); white-space: nowrap; } #dc-root [data-proof-fs] { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-pill); background: var(--v2-surface); color: var(--v2-navy); font-family: 'Heebo', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 180ms var(--v2-ease); } @media (hover: hover) and (pointer: fine) { #dc-root [data-proof-fs]:hover { border-color: var(--v2-navy); } } #dc-root [data-proof-stage] { position: relative; height: clamp(460px, 70vh, 660px); background: var(--v2-surface-2); overflow: hidden; } #dc-root [data-proof-loading] { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 500; color: var(--v2-muted); } /* narrower than the dashboards' 1024px desktop layout: render at 1024 and scale (proof.js sets the vars) */ #dc-root [data-proof-stage][data-fit] [data-proof-iframe], [data-proof-fsstage][data-fit] [data-proof-iframe] { width: var(--pv-w) !important; height: var(--pv-h) !important; transform: scale(var(--pv-s)); transform-origin: 0 0; } #dc-root [data-proof-poster] { display: none; } /* the frame cuts the dashboard at a fixed height: a short fade and a quiet cue say "there is more, scroll inside". proof.js sets data-more while the embedded page still has content below and the visitor hasn't scrolled it yet */ #dc-root [data-proof-more] { position: absolute; inset: auto 0 0 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center; height: 88px; padding-bottom: 14px; box-sizing: border-box; pointer-events: none; background: linear-gradient(to bottom, rgba(247, 249, 251, 0), rgba(247, 249, 251, .92) 62%); opacity: 0; transition: opacity 240ms var(--v2-ease); } #dc-root [data-proof-more] span { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 1px solid var(--v2-line-2); border-radius: 999px; background: var(--v2-surface); color: var(--v2-muted); font-size: 13px; font-weight: 500; line-height: 1.3; box-shadow: 0 4px 12px -8px rgba(11, 22, 38, .3); } #dc-root [data-proof-stage][data-more]:not([data-fit="poster"]) [data-proof-more] { opacity: 1; } #dc-root [data-proof-stage][data-fit="poster"] [data-proof-iframe] { pointer-events: none; } #dc-root [data-proof-stage][data-fit="poster"] [data-proof-poster] { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding: 16px; margin: 0; border: 0; cursor: pointer; background: linear-gradient(to top, rgba(11, 22, 38, .22), rgba(11, 22, 38, 0) 45%); } #dc-root [data-proof-poster-chip] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--v2-r-pill); background: var(--v2-navy); color: #fff; font-family: 'Heebo', sans-serif; font-size: 15px; font-weight: 600; box-shadow: 0 8px 20px -10px rgba(11, 22, 38, .5); } /* ---------- #cases: case sheet ---------- */ #dc-root [data-proof-sheet] { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); margin-top: 32px; } #dc-root [data-proof-cell] { padding: 0 32px; border-inline-start: 1px solid var(--v2-line-2); } #dc-root [data-proof-cell]:first-child { padding-inline-start: 0; border-inline-start: 0; } #dc-root [data-proof-cell]:last-child { padding-inline-end: 0; } #dc-root [data-proof-label] { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--v2-muted); } #dc-root [data-proof-cstack] { display: grid; margin-top: 8px; } #dc-root [data-proof-cstack] > p { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity 180ms var(--v2-ease), visibility 0s linear 180ms; } #dc-root [data-proof-cstack] > p[data-active="true"] { opacity: 1; visibility: visible; transition: opacity 180ms var(--v2-ease), visibility 0s; } #dc-root [data-proof-cell] p { font-size: 16px; line-height: 1.65; color: var(--v2-muted); text-wrap: pretty; } #dc-root [data-proof-cell="q"] p { font-size: 20px; line-height: 1.45; font-weight: 500; color: var(--v2-ink); letter-spacing: -.005em; } #dc-root [data-proof-cell="r"] p { color: var(--v2-ink); } /* ---------- #cases: CTA row ---------- */ #dc-root [data-proof-cta] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--v2-line-2); } #dc-root [data-proof-cta-text] { flex: 1 1 420px; min-width: 0; } #dc-root [data-proof-cta-title] { font-size: 20px; font-weight: 600; line-height: 1.35; color: var(--v2-ink); } #dc-root [data-proof-cta-text] p { margin-top: 6px !important; max-width: 60ch; font-size: 16px; line-height: 1.6; color: var(--v2-muted); } /* ---------- fullscreen overlay ---------- */ [data-proof-fsov] { font-family: 'Heebo', sans-serif; } [data-proof-fsbar] { flex: none; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; min-height: 60px; padding: 8px 16px; background: var(--v2-surface); border-bottom: 1px solid var(--v2-line-2); } [data-proof-fstitle] { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; min-width: 0; } [data-proof-fsname] { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--v2-ink); } [data-proof-fsactions] { display: flex; align-items: center; gap: 8px; } [data-proof-fsov] [data-proof-short] { display: none; } #dc-root [data-proof-fsov] [data-proof-btn] { height: 40px; padding: 0 16px; font-size: 14px; } [data-proof-kbd] { font-family: var(--v2-mono); font-size: 11px; font-weight: 500; line-height: 1; padding: 3px 5px; border: 1px solid var(--v2-line-2); border-radius: 4px; color: var(--v2-muted); } @media not all and (hover: hover) and (pointer: fine) { [data-proof-kbd] { display: none; } } [data-proof-rotate] { position: absolute; left: 50%; bottom: 20px; z-index: 3; max-width: calc(100% - 40px); padding: 10px 16px; border-radius: var(--v2-r-inner); background: rgba(11, 22, 38, .9); color: #fff; font-size: 14px; line-height: 1.4; text-align: center; pointer-events: none; opacity: 0; transform: translateX(-50%); transition: opacity 240ms var(--v2-ease); } [data-proof-fsov][data-hint] [data-proof-rotate] { opacity: 1; } /* ---------- #testimonials ---------- */ #dc-root [data-proof-qgrid] { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 40px; } #dc-root [data-proof-qlist] { display: flex; flex-direction: column; border-top: 1px solid var(--v2-line-2); } #dc-root [data-proof-qtab] { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; width: 100%; min-height: 44px; padding: 16px 16px; margin: 0; border: 0; border-bottom: 1px solid var(--v2-line); background: none; text-align: start; cursor: pointer; font-family: 'Heebo', sans-serif; } #dc-root [data-proof-qtab]::before { content: ""; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 2px; background: var(--v2-navy); transform: scaleY(0); transition: transform 220ms var(--v2-ease); } #dc-root [data-proof-qtab][aria-selected="true"]::before { transform: scaleY(1); } #dc-root [data-proof-qtab][aria-selected="true"] [data-proof-num] { color: var(--v2-navy); } #dc-root [data-proof-qtab]:focus-visible { outline-offset: -2px; } #dc-root [data-proof-qwho] { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #dc-root [data-proof-qtab] [data-proof-qname] { font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--v2-muted); transition: color 180ms var(--v2-ease); } #dc-root [data-proof-qtab][aria-selected="true"] [data-proof-qname] { color: var(--v2-ink); font-weight: 600; } #dc-root [data-proof-qtab] [data-proof-qrole] { font-size: 14px; line-height: 1.45; color: var(--v2-muted); } @media (hover: hover) and (pointer: fine) { #dc-root [data-proof-qtab]:hover [data-proof-qname] { color: var(--v2-ink); } } /* the recommender's company, in brand colour on a small white tile (the client-logo tile, scaled down). In the index it sits at the end of the NAME line and the role runs full width below it, so roles don't wrap any earlier and names line up whether or not there is a logo (Nir Robinson has none). Heights are per logo (quotes[].logoGh) so wide wordmarks and square marks carry the same weight. system.css drops the number column with an !important single column; the number stays hidden, the logo needs a column of its own, so the grid is restated one notch more specific. */ #dc-root [data-proof-qlist] [data-proof-qtab] { grid-template-columns: minmax(0, 1fr) auto !important; column-gap: 12px; row-gap: 2px; align-items: center; } #dc-root [data-proof-qlist] [data-proof-qwho] { display: contents; } #dc-root [data-proof-qlist] [data-proof-qname] { grid-area: 1 / 1; } #dc-root [data-proof-qlist] [data-proof-qrole] { grid-area: 2 / 1 / 3 / 3; } #dc-root [data-proof-qlist] [data-proof-qlogo] { grid-area: 1 / 2; } #dc-root [data-proof-qlogo] { display: grid; place-items: center; box-sizing: border-box; height: 30px; min-width: 56px; padding: 0 7px; background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: 8px; } #dc-root [data-proof-qlogo] img { display: block; width: auto; height: calc(var(--lh, 20) * 1px); max-width: 64px; object-fit: contain; } /* in the quote's attribution (phones and tablets, where the index is hidden) the tile is a size up */ #dc-root [data-proof-attr] [data-proof-qlogo] { flex: none; height: 40px; min-width: 64px; padding: 0 10px; border-radius: 10px; } #dc-root [data-proof-attr] [data-proof-qlogo] img { height: calc(var(--lh, 20) * 1.25px); max-width: 84px; } #dc-root [data-proof-qpanel] { background: var(--v2-surface); border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-card); padding: 48px 56px 24px; } #dc-root [data-proof-qstack] { display: grid; } #dc-root [data-proof-quote] { grid-area: 1 / 1; margin: 0; min-width: 0; opacity: 0; visibility: hidden; transition: opacity 200ms var(--v2-ease), visibility 0s linear 200ms; } #dc-root [data-proof-quote][data-active="true"] { opacity: 1; visibility: visible; transition: opacity 200ms var(--v2-ease), visibility 0s; } #dc-root [data-proof-qtext] { margin: 0; } #dc-root [data-proof-qhead] { font-size: clamp(21px, 2vw, 27px); font-weight: 500; line-height: 1.4; letter-spacing: -.005em; color: var(--v2-ink); text-wrap: pretty; } #dc-root [data-proof-qbody] { margin-top: 20px !important; max-width: 62ch; font-size: 16px; line-height: 1.7; color: var(--v2-muted); text-wrap: pretty; } #dc-root [data-proof-attr] { display: none; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; } #dc-root [data-proof-attr] [data-proof-qname] { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--v2-ink); } #dc-root [data-proof-attr] [data-proof-qrole] { font-size: 14px; line-height: 1.45; color: var(--v2-muted); } #dc-root [data-proof-li] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--v2-navy); } #dc-root [data-proof-li] > svg { flex: none; } #dc-root [data-proof-li] [data-proof-ext] { display: inline; margin-inline-start: 2px; vertical-align: -1px; opacity: .7; } #bbi-root[dir="rtl"] [data-proof-ext] { transform: scaleX(-1); } #dc-root [data-proof-fig] { margin: 0; } /* "המלצה במקור באנגלית" / "Translated from Hebrew": aligned with the quote it describes */ #dc-root [data-proof] [data-proof-qnote] { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--v2-muted); } #dc-root [data-proof-qnote]::before { content: ""; flex: none; width: 16px; height: 1px; background: var(--v2-line-2); } @media (hover: hover) and (pointer: fine) { #dc-root [data-proof-li]:hover span { text-decoration: underline; text-underline-offset: 3px; } } #dc-root [data-proof-qctl] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--v2-line); } #dc-root [data-proof-arrow] { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-pill); background: var(--v2-surface); color: var(--v2-navy); cursor: pointer; transition: border-color 180ms var(--v2-ease); } @media (hover: hover) and (pointer: fine) { #dc-root [data-proof-arrow]:hover { border-color: var(--v2-navy); } } #dc-root [data-proof-count] { order: -1; margin-left: auto; font-family: var(--v2-mono); font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--v2-muted); font-variant-numeric: tabular-nums; } #bbi-root[dir="ltr"] [data-proof-count] { margin-left: 0; margin-right: auto; } #dc-root [data-proof-count] b { font-weight: 500; color: var(--v2-ink); } #dc-root [data-proof-count] i { font-style: normal; padding: 0 .4em; opacity: .6; } #dc-root [data-proof-seg] { display: none; } #dc-root [data-proof-seg] button { flex: 1; display: flex; align-items: center; height: 44px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; } #dc-root [data-proof-seg] button span { display: block; width: 100%; height: 2px; border-radius: 1px; background: var(--v2-line-2); transition: background-color 200ms var(--v2-ease); } #dc-root [data-proof-seg] button[data-active="true"] span { background: var(--v2-navy); } /* ---------- responsive ---------- */ @media (max-width: 1023px) { #dc-root [data-proof-stage] { height: clamp(420px, 62vh, 560px); } #dc-root [data-proof-sheet] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 28px; } #dc-root [data-proof-cell="q"] { grid-column: 1 / -1; padding-inline-end: 0; } #dc-root [data-proof-cell="c"] { padding-inline-start: 0; border-inline-start: 0; } } @media (max-width: 899px) { #dc-root [data-proof-qgrid] { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 32px; } #dc-root [data-proof-qlist] { display: none; } #dc-root [data-proof-attr] { display: flex; } #dc-root [data-proof-qpanel] { padding: 20px 28px 16px; } #dc-root [data-proof-seg] { display: flex; flex: 1 0 100%; gap: 6px; order: 5; } /* phones: one quote at a time, controls on top so they never move when the quote length changes */ #dc-root [data-proof-qpanel] { display: flex; flex-direction: column; } #dc-root [data-proof-qctl] { order: -1; margin: 0 0 24px; padding: 0 0 4px; border-top: 0; border-bottom: 1px solid var(--v2-line); } /* the card follows the active quote instead of reserving the tallest one: only the active quote is laid out, it fades in, and proof.js eases the height between the old and new quote (data-anim exists only for those 260ms) */ #dc-root [data-proof-quote]:not([data-active="true"]) { display: none; } #dc-root [data-proof-quote][data-active="true"] { animation: proof-qin 240ms var(--v2-ease) both; } #dc-root [data-proof-qstack][data-anim] { overflow: hidden; transition: height 260ms var(--v2-ease); } } @keyframes proof-qin { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 639px) { #dc-root [data-proof-tabs-wrap] { margin-top: 28px; margin-inline: -20px; padding-inline: 20px; } #dc-root [data-proof-tabs] { gap: 16px; scroll-padding-inline: 20px; } #dc-root [data-proof-tab] { font-size: 16px; } #dc-root [data-proof-bar] { padding-inline-start: 12px; } #dc-root [data-proof-host] { display: none; } #dc-root [data-proof-tabname] { display: none; } #dc-root [data-proof-tabshort] { display: inline; } #dc-root [data-proof-bar] [data-proof-fs] { display: none; } #dc-root [data-proof-stage] { height: auto; aspect-ratio: 1 / 1.05; } #dc-root [data-proof-sheet] { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 8px; } #dc-root [data-proof-cell], #dc-root [data-proof-cell]:first-child { grid-column: auto; padding: 20px 0; border-inline-start: 0; border-bottom: 1px solid var(--v2-line); } #dc-root [data-proof-cell="q"] p { font-size: 18px; } #dc-root [data-proof-cell]:last-child { border-bottom: 0; padding-bottom: 0; } #dc-root [data-proof-cta] { margin-top: 40px; padding-top: 24px; } #dc-root [data-proof-cta-text] { flex-basis: 100%; } #dc-root [data-proof-cta] [data-proof-btn] { width: 100%; height: 48px; } #dc-root [data-proof-qpanel] { padding: 16px 20px 12px; } #dc-root [data-proof-fstitle] [data-proof-crumb] { display: none; } [data-proof-fsbar] { flex-wrap: nowrap; padding: 8px 12px; } [data-proof-fsname] { min-width: 0; font-size: 15px; } [data-proof-fsov] [data-proof-long], [data-proof-fsov] [data-proof-closetext] { display: none; } [data-proof-fsov] [data-proof-short] { display: inline; } #dc-root [data-proof-fsov] [data-proof-close] { width: var(--v2-btn-h); padding: 0; } } /* ---------- motion off ---------- */ @media (prefers-reduced-motion: reduce) { #dc-root [data-proof] *, [data-proof-fsov] * { transition: none !important; animation: none !important; } } html.a11y-no-motion #dc-root [data-proof] *, html.a11y-no-motion [data-proof-fsov] * { transition: none !important; animation: none !important; }