/* Bento grid with expanding detail panels, after the Stripe homepage pattern. Stripe renders its dialog from a client-side string table, so with JavaScript off nothing opens. This does the same job with :target and no script at all: a card is a link to #p-, CSS reveals the matching panel, and the close control is a link back to #bento. It is therefore deep linkable and shareable as a side effect. It is deliberately NOT marked role="dialog". Without JS there is no focus trap and no Escape key, and claiming dialog semantics we cannot honour is worse for a screen reader than describing what this actually is: a section of the page revealed by URL. In Webflow this becomes a native Interaction, which publishes on any paid plan. */ /* ---- the grid ---------------------------------------------------------- */ .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .bcard{position:relative;display:flex;flex-direction:column;min-height:430px; border:1px solid var(--line);border-radius:var(--r);background:var(--white); overflow:hidden;color:var(--navy); transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease} /* hover glow. Stripe nests three elements per card to draw a gradient border; a box-shadow ring plus a soft halo gets the same read, and Webflow's Designer can author a box-shadow natively where it cannot author a ::before gradient. --glow is set per card below so each one lights in its own artwork hue. */ .bcard{--glow:#2946b6;--glow-soft:rgba(41,70,182,.22)} .bcard:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--glow); box-shadow:0 0 0 3px var(--glow-soft),0 14px 30px -10px var(--glow-soft)} .bvis img,.bvis .queue{transition:transform .25s ease} .bcard:hover .bvis img{transform:translateY(-4px)} .bcard:hover .bvis .queue{transform:scale(.94) translateY(-4px)} .bexp{transition:background .15s,border-color .15s,transform .15s} .bcard:hover .bexp{transform:scale(1.08)} .bcard:focus-visible{outline:2px solid var(--blue);outline-offset:3px} .bcard-2{grid-column:span 2} .bcard h3{margin:0;padding:26px 68px 0 26px;font:600 22px/1.28 var(--display);color:var(--navy);max-width:24ch} /* the expand affordance, top right, as on the reference */ .bexp{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:6px; background:var(--cloud);border:1px solid var(--line);display:grid;place-items:center} .bexp img{width:14px;height:14px;display:block} .bcard:hover .bexp{background:var(--sky);border-color:var(--rail)} /* the wide cell runs text left, visual right, so it does not leave a hole in the middle the way a tall stacked card does */ .bcard-3{grid-column:span 3;flex-direction:row;align-items:stretch;min-height:0} .bcard-3 .btext{flex:0 0 310px;display:flex;flex-direction:column;padding:26px 0 26px 0} .bcard-3 .btext h3{padding:0 26px} .bcard-3 .btext .bsub{padding:10px 26px 0} .bcard-3 .bmini{flex:1;margin-top:0;justify-content:center;padding:58px 26px 26px 0} /* 58 top clears the expand button, which overlaps the grid on this card alone */ .bcard-3 .agents{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .bcard-3 .ag{padding:12px} .bcard-3 .ag i,.bcard-3 .ag .plus{width:38px;height:38px} .bcard-3 .ag .plus{font-size:20px} /* one dark cell, so a six-up grid has some rhythm. It carries the journey rail, which is drawn for the navy band and would be invisible on white. */ .bcard-dark{background:#1e39a3;border-color:#1e39a3} /* royal blue; the gradient itself is art/journey.svg */ .bcard-dark h3{color:#fff} .bcard-dark .bexp{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)} .bcard-dark .bexp img{filter:brightness(0) invert(1)} .bcard-dark:hover{border-color:var(--rail)} .bcard-dark:hover .bexp{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)} .bcard-dark .bsub{color:#c7d2ff} .bsub{padding:8px 26px 0;font-size:14px;color:var(--mute);max-width:36ch} /* every visual is decoration inside a link, so clicks always reach the card */ .bvis,.bmini,.bstage{pointer-events:none} /* compact visuals used inside cards */ .bmini{flex:1;margin-top:0;padding:22px 26px 26px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px} .bmini-spread{justify-content:center;gap:8px} /* space-between pushed 43px rows 52px apart; centring keeps them a list */ .bmini .num-card{padding:14px 16px;gap:5px} .bmini .num-card b{font:700 21px/1 var(--display)} .bmini .num-card b small{font:500 12px var(--ui);margin-left:6px} .bmini .num-card span{font-size:13.5px} /* one line per row, figure hard left and label hard right */ .bart-cost .num-card{flex-direction:row;align-items:baseline;justify-content:space-between; gap:12px;padding:12px 16px} .bart-cost .num-card b{font-size:20px;white-space:nowrap} .bart-cost .num-card b small{margin-left:5px} .bart-cost .num-card span{font-size:13px;white-space:nowrap} /* the rows are 50px now rather than 78, so flex-end left 121px dead above them; centred, the group sits inside the ring the way the reference composes it */ .bart-cost .bmini{justify-content:center;gap:14px} /* the cost card, one column: the heading, the three figures as separate smoked-glass rows (label, bar, figure), then SIGNAL MONOLITH filling the foot (a canvas the page script draws; in Webflow an Embed plus page code). */ .mono{position:relative;flex:1;min-height:180px;pointer-events:none} .bcard.bart-cost{min-height:500px} /* its row runs 500px tall, so the field below the figures gets about 270px */ .mono-cv{position:absolute;inset:0;display:block;width:100%;height:100%} .bart-cost .bexp{z-index:2} .bcost-body{position:relative;z-index:1;padding:16px 26px 0} .bart-cost .bcost-body .bmini{padding:0;gap:6px;justify-content:flex-start} .bcard-dark.bart-cost .num-card.sk-n{flex-direction:row;align-items:center;gap:12px;padding:7px 12px;text-align:left;border-radius:6px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);box-shadow:none; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .bcard-dark.bart-cost .num-card.sk-n .sk-lab{flex:0 0 92px;font:500 12.5px/1.2 var(--ui);white-space:nowrap;color:#dfe5ff} .bcard-dark.bart-cost .num-card.sk-n .sk-meter{flex:1 1 auto;height:6px} .bcard-dark.bart-cost .num-card.sk-n .sk-val{flex:0 0 auto;min-width:42px;text-align:right;font:700 13.5px/1 var(--display);color:#fff} .bcard-dark .sk-meter{background:rgba(255,255,255,.12)} .bmini .num-card em{font-size:12.5px} .brow{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:6px;background:var(--white);padding:10px 14px;font-size:13.5px;color:var(--ink)} .brow .tag{font:600 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--btn-h);min-width:88px} .bstage{flex:1;margin-top:0;padding:26px;overflow:hidden;display:flex;align-items:center} /* the visual sits at the foot of the card and bleeds off the right edge */ .bvis{margin-top:auto;padding:26px 0 0 26px;overflow:hidden} .bart-office .bvis{padding-right:26px} /* the app sits inside the card on both sides and bleeds off the foot only */ .bvis img{display:block;width:100%;height:auto;border:1px solid var(--line);border-right:0;border-bottom:0;border-radius:6px 0 0 0} /* the Office shot at 1:1 with the 1130px layout it was captured from, so its UI text is legible. The card clips the right edge, which is how both references show product UI: a real panel running off the card rather than a shrunken thumbnail. Scaled back down below 767, where a clip would show only the rail. */ .bcard-2 .bvis img{width:1130px;max-width:none} /* clipped vertically too, or the 587px-tall shot drags row one to 721px and the card beside it stretches with it. Two cropped edges is the reference's look. */ .bcard-2 .bvis{max-height:392px} .bart-office.bcard-2 .bvis{max-height:340px} .bvis .queue{border-right:0;border-bottom:0;border-radius:6px 0 0 0;transform:scale(.94);transform-origin:top left} /* ---- gradient artwork -------------------------------------------------- */ /* Real SVG files, so Webflow uploads each as an image asset. These sit BEHIND the card content and are anchored to the bottom, leaving the top pale where the heading sits. They are artwork inside cards, not a return of gradient surfaces: the page itself stays white, #fafafa and navy. */ .bcard{background-repeat:no-repeat;background-position:center bottom;background-size:cover} .bart-office{background-image:url(../assets/art/office.svg);--glow:#2946b6;--glow-soft:rgba(41,70,182,.22)} .bart-control{background-image:url(../assets/art/control.svg);--glow:#6d5ae6;--glow-soft:rgba(109,90,230,.26)} /* the two dark cards (cost, journey) share one background: deep navy dominant, the royal only as a low glow at the foot. CSS rather than art/journey.svg so the same fall fits the wide card and the tall one; the glows sit at the art's places */ .bart-cost,.bcard-dark.bart-journey{background-image:radial-gradient(80% 46% at 20% 96%,rgba(74,104,210,.38),rgba(74,104,210,0)), radial-gradient(70% 42% at 95% 88%,rgba(137,163,236,.18),rgba(137,163,236,0)), linear-gradient(180deg,#132671 0%,#162b7e 55%,#1c3596 100%);background-size:100% 100%; --glow:#4a68d2;--glow-soft:rgba(74,104,210,.34)} .bcard-dark.bart-cost,.bcard-dark.bart-journey{border-color:#162b7e} .bart-workspace{background-image:url(../assets/art/workspace.svg);--glow:#4a68d2;--glow-soft:rgba(74,104,210,.26)} .bart-journey{background-image:url(../assets/art/journey.svg);--glow:#4a68d2;--glow-soft:rgba(74,104,210,.34)} .bart-seats{background-image:url(../assets/art/seats.svg);--glow:#4a68d2;--glow-soft:rgba(74,104,210,.24)} /* ---- the ribbon, on the seats card only -------------------------------- */ /* A band across the bottom of the card with a real twist in it. The strands run in from the left, pinch to a waist at 42%, and come out the other side with their order reversed — which is what a ribbon does when it turns over. The art is one file, shown twice: the left element reveals everything up to the waist, the right element everything after it. Each pivots on the waist (transform-origin), so motion.css can open one lobe while it closes the other and the two stay joined at the pinch. Static it is finished artwork. */ .brib{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:var(--r);pointer-events:none; /* the band sits low and is cropped by the card's own bottom edge; this keeps its top strands off the paragraph in the left column */ -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 46%,#000 64%,#000 100%); mask-image:linear-gradient(180deg,transparent 0,transparent 46%,#000 64%,#000 100%)} .rib-l,.rib-r{position:absolute;bottom:-30%;height:104%;display:block; background-image:url(../assets/art/ribbon-royal.svg);background-repeat:no-repeat} /* royal blue copy; login keeps ribbon.svg */ /* The halves OVERLAP by 16% of the card rather than butting together. Both pivot on the same point of the artwork (art-x 40%, the waist), so at the pivot they coincide exactly; either side of it the opposite shears diverge, and each half is fading out as it does. Butted, the join held its position but not its slope, and the two shears met at a visible crease. 48 x 208.333 = 100 and 68 x 147.059 = 100, so both draw the art at card width. */ .rib-l{left:0;width:48%;background-size:208.333% 100%;background-position:left center; transform-origin:83.333% 67.5%; -webkit-mask-image:linear-gradient(90deg,#000 0,#000 66%,transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 66%,transparent 100%)} .rib-r{left:32%;width:68%;background-size:147.059% 100%;background-position:right center; transform-origin:11.765% 67.5%; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%); mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%)} /* the waving ribbon (replaces the twist): parallel strands on a sine wave, so they never cross, drawn twice across a strip twice the card's width. motion.css slides the strip one card-width to the left and loops, so the wave travels across the card like cloth in a breeze; the second, fainter layer runs slower and a little lower, and the two drift in and out of step. Static it is finished artwork. */ .rib-w{position:absolute;left:0;bottom:-26%;width:200%;height:100%;display:block; background:url(../assets/art/ribbon-wave.svg) repeat-x left center/50% 100%} .rib-w2{bottom:-34%;opacity:.45;background-size:62.5% 100%} .rib-lit{position:absolute;left:18%;bottom:-34%;width:56%;height:86%;display:block; background:radial-gradient(closest-side,rgba(41,70,182,.22),rgba(41,70,182,.06) 50%,transparent 74%)} .bart-seats .btext,.bart-seats .bmini{position:relative;z-index:1} /* ---- the sun, on the cost card only ------------------------------------- */ /* Stripe's is a three.js point cloud in a WebGL canvas — one and a shader, so there is no markup to lift. What carries the look is the layout: a RIM of particles on a circle, and FLAMES leaving that rim along rays and feathering outward, with the middle left open so the stat rows stay readable. The rim turns and the flames pulse outward (motion.css); at rest all three layers sit still and it is finished artwork. Sizing note: the rim is drawn at rx 216 of a 600 viewBox, so its radius is 0.36x the element, not half. 480 puts the flanks at x 10/357 — clear of the rows, which run x 27-340 — and the top arc in the strip above them. */ .borb{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:var(--r);pointer-events:none; -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 19%,#000 33%,#000 100%); mask-image:linear-gradient(180deg,transparent 0,transparent 19%,#000 33%,#000 100%)} /* one origin for all three, so the rim and its flames stay concentric */ .borb i{position:absolute;display:block;left:50%;top:59%;width:410px;height:410px;margin:-205px 0 0 -205px; /* the particle rings stay inside the card; only the faint outer tips of the flames reach the edges */ background-repeat:no-repeat;background-position:center;background-size:100% 100%} .orb-h{background-image:radial-gradient(closest-side,rgba(111,134,224,.18),rgba(41,70,182,.05) 48%,transparent 68%)} .orb-1{background-image:url(../assets/art/orbit-1.svg)} .orb-2{background-image:url(../assets/art/orbit-2.svg)} .orb-3{background-image:url(../assets/art/orbit-3.svg)} .bart-cost h3,.bart-cost .bsub,.bart-cost .bmini{position:relative;z-index:1} /* ---- the globe, on the journey card only -------------------------------- */ /* Stripe's globe is another three.js point cloud in a WebGL canvas, so again there is no markup to lift. What carries it is real geography: the dots are Natural Earth 110m coastlines sampled on a roughly equal-area lattice and projected orthographically, with the lighting baked per dot. A flat image cannot spin, so the turn is carried by the light instead: the globe's own dots mask a gradient that travels across, which brightens them in the order a rotating sphere would. */ .bglb{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:var(--r);pointer-events:none; -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 18%,#000 36%,#000 100%); mask-image:linear-gradient(180deg,transparent 0,transparent 18%,#000 36%,#000 100%)} /* the limb is what says "sphere", so the whole circle has to fit inside the card */ .bglb i{position:absolute;display:block;left:50%;top:68%;width:400px;height:400px;margin:-200px 0 0 -200px} .glb-haze{background:radial-gradient(closest-side,rgba(137,163,236,.2),rgba(137,163,236,.07) 56%,transparent 74%)} .glb-dots{background:url(../assets/art/globe.svg) no-repeat center/100% 100%} .glb-lit{background:linear-gradient(100deg,transparent 0,rgba(199,210,255,.72) 28%,rgba(255,255,255,1) 50%,rgba(199,210,255,.72) 72%,transparent 100%); /* the band is HALF the globe wide, so there is always somewhere it is not: sized at 260% it spanned 114% of the element and lit everything at once */ background-size:52% 100%;background-repeat:no-repeat; -webkit-mask-image:url(../assets/art/globe.svg);mask-image:url(../assets/art/globe.svg); -webkit-mask-size:100% 100%;mask-size:100% 100%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .bart-journey h3,.bart-journey .bsub,.bart-journey .bstage{position:relative;z-index:1} /* ---- glass panels, after the Glean reference --------------------------- */ /* The reference puts the colour on the card and floats a frosted panel on top. Here the artwork is that colour, so the visuals inside a card go translucent: a white fill you can see through, a blur of the artwork behind, a bright top highlight and a soft lift. Webflow has backdrop-filter in its Effects panel, so this survives the transfer. Solid panels elsewhere on the site are left alone: glass over a plain white section reads as nothing at all. */ .bcard .queue, .bcard .num-card, .bcard .brow, .bcard .ag{ background:rgba(255,255,255,.58); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); border-color:rgba(255,255,255,.75); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 18px -10px rgba(2,37,79,.22); } /* the rows inside the frosted inbox are a second, lighter layer */ .bcard .queue .q{background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.7)} /* on the dark card the same idea inverts: smoked glass rather than frosted */ .bcard-dark .stages{grid-auto-columns:minmax(88px,1fr);overflow-x:visible; background:rgba(255,255,255,.07); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.14); border-radius:8px;padding:16px 14px 10px} /* motion is a courtesy, never a requirement */ /* ---- skeleton visuals --------------------------------------------------- The cards show the shape of the Office, not its text: grey bars for words, coloured tiles for kinds of work, real avatars and chart art where they carry no claim. Nothing in a card reads as data, so nothing needs a SAMPLE label, and nothing goes stale when a label changes in the product. The expanded panels behind each card keep their real text. */ .sk-b{display:block;height:9px;border-radius:5px;background:#d3dcf7} /* skeleton bars in the site's pale royal tint */ .sk-b.sk-s{height:8px;background:#dce3f8} .sk-b.sk-h{height:14px;border-radius:7px;background:#ccd6f5} .sk-b.sk-big{height:16px;border-radius:6px;background:#c9d4f5} .sk-b.sk-hd{height:7px;background:#d8e0f8;display:inline-block;vertical-align:middle} .w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%} .w50{width:50%}.w55{width:55%}.w60{width:60%}.w62{width:62%}.w70{width:70%}.w80{width:80%}.w90{width:90%} .sk-lines{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;min-width:0} .sk-t{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:2.5px;width:26px;height:26px;padding:0 7px;border-radius:6px} .sk-t b{display:block;height:2px;border-radius:1px;background:rgba(255,255,255,.95)} .sk-t b:nth-child(3){width:60%} .sk-blue{background:#4a86d8}.sk-green{background:#3fa06e}.sk-amber{background:#f0b33c}.sk-violet{background:#7a6ae0} .sk-pill{flex:0 0 auto;width:46px;height:18px;border-radius:5px;background:#eaf1fb} /* a hint of real text: what each thing is, in one short label; the detail stays a bar */ .sk-txt{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 12.5px/1.3 var(--web);color:var(--navy)} .sk-pill{display:grid;place-items:center;width:auto;min-width:46px;padding:0 8px;font:600 10.5px var(--web);font-style:normal;color:var(--blue-d)} .sk-nav .sk-txt{font-weight:500;font-size:12px;color:var(--mute)} .sk-nav.on .sk-txt{color:var(--navy);font-weight:600} .sk-logo .sk-brand{display:block;width:96px;height:18px;background:url(../assets/img/manelink-wordmark.svg) no-repeat left center/contain} /* the full logo, icon and name */ .sk-top .sk-txt{font-size:13px} .sk-btn{display:grid;place-items:center;font:600 11px var(--web);font-style:normal;color:#fff;margin-right:9%} /* the app runs past the card edge; keep the button in view */ .sk-hello{font:700 17px/1.2 var(--display);color:var(--navy);letter-spacing:-.01em} .bart-cost .num-card.sk-n .sk-lab{flex:0 0 30%;font-size:12px} .bart-cost .num-card.sk-n .sk-val{flex:0 0 auto;min-width:54px;text-align:right;font:700 12.5px var(--display);color:var(--navy)} .stage .sk-stg{font:700 9.5px var(--web);letter-spacing:.09em;text-transform:uppercase;color:#acb6dd} .stage .sk-stn{margin:2px 0 4px;font:600 12.5px/1.25 var(--display);color:#eaf2fd;white-space:normal} .stage.cur .sk-stg,.stage.cur .sk-stn{color:#fff} .bcard-3 .ag .sk-txt{font-size:12px} /* inbox rows */ .bcard .queue .sk-q{display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 10px;border:1px solid rgba(255,255,255,.7);border-radius:6px;background:rgba(255,255,255,.62)} /* cost: three meters, filled to the three bars a seat is held to */ .bart-cost .num-card.sk-n{align-items:center;gap:16px} .sk-meter{flex:1 1 auto;height:10px;border-radius:5px;background:#dce3f8;overflow:hidden} .sk-meter i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#6aa6ee,#2b73d6)} .sk-m95 i{width:95%}.sk-m70 i{width:70%}.sk-m25 i{width:25%;background:linear-gradient(90deg,#5bc28b,#2f9a63)} .bart-cost .num-card.sk-n .sk-b{flex:0 0 22%} /* workspace kinds and seats */ .brow .sk-lines,.ag .sk-lines{gap:7px} .bcard-3 .ag .sk-lines{gap:6px} .ag.sk-add .sk-b{background:#c3cff5} /* journey stages on the dark card: smoked bars */ .stage .sk-b{background:rgba(255,255,255,.16)} .stage .sk-d{height:6px;width:40%} .stage .sk-dh{height:10px;margin-top:4px;background:rgba(255,255,255,.28)} .stage .sk-ds{height:6px;margin-top:3px} .stage.cur .sk-b{background:rgba(255,255,255,.42)} .stage.cur .sk-dh{background:rgba(255,255,255,.85)} /* office: a skeleton of the app in place of the screenshot */ .sk-app{display:flex;width:100%;min-width:0;height:420px;border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;background:#fafbfd;overflow:hidden; transition:transform .25s ease} .bcard:hover .sk-app{transform:translateY(-4px)} .sk-side{flex:0 0 170px;display:flex;flex-direction:column;gap:6px;padding:16px 14px;border-right:1px solid var(--line);background:#fff} .sk-logo{display:flex;align-items:center;gap:8px;margin-bottom:10px} .sk-nav{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:6px} .sk-nav>i{flex:0 0 auto;width:12px;height:12px;border-radius:3px;background:#e3e8f0} .sk-nav.on{background:#eaf1fb}.sk-nav.on>i,.sk-nav.on .sk-b{background:#b9d0ef} .sk-main{flex:1 1 auto;display:flex;flex-direction:column;gap:10px;padding:16px 18px;min-width:0} .sk-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line)} .sk-btn{flex:0 0 auto;width:84px;height:24px;border-radius:6px;background:var(--blue)} .sk-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:6px} .sk-chart{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:6px;background:#fff} .sk-chart img,.bcard-2 .bvis .sk-chart img,.bcard:hover .bvis .sk-chart img{display:block;width:100%;max-width:100%;height:70px;margin-top:4px;border:0;border-radius:0;transform:none} .sk-chart{overflow:hidden;min-width:0} .sk-seats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:4px} .sk-seat{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:6px;background:#fff} .sk-seat>i{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background-size:cover;background-position:center} @media (prefers-reduced-motion:reduce){ .bcard,.bexp,.bvis img,.bvis .queue,.sk-app{transition:none;transform:none} .bcard:hover{transform:none} .bcard:hover .bvis img,.bcard:hover .bvis .queue,.bcard:hover .sk-app,.bcard:hover .bexp{transform:none} } /* ---- breakpoints (Webflow's only: 991 / 767 / 479) --------------------- */ @media (max-width:991px){ .bento{grid-template-columns:1fr 1fr;grid-auto-flow:row dense} /* two columns: the narrow cards pair up, no holes */ /* the leadership card stacks from here: its heading above, the tiles across the full width */ .bcard-3{flex-direction:column} .bcard-3 .btext{flex:none;padding-bottom:0} .bcard-3 .btext h3{padding-right:68px} /* clear of the expand button */ .bcard-3 .bmini{padding:22px 26px 26px} /* names wrap rather than trail off, in the tiles, the office preview and the queue */ .bcard-3 .ag .sk-txt,.bart-office .sk-seat .sk-txt,.bcard .queue .sk-q .sk-txt{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25} .bcard-2,.bcard-3{grid-column:span 2} } @media (max-width:767px){ .bento{grid-template-columns:1fr} .bcard.bart-cost{min-height:0} /* phones: the office preview drops its sidebar and seat row so every label fits */ .bart-office .sk-side{display:none} .bart-office .sk-seats{display:none} .bart-cost .mono{min-height:240px} .bcard-2 .bvis img{width:100%} .bcard-2 .bvis{max-height:none} .bcard-2,.bcard-3{grid-column:span 1} .bcard-3 .agents{grid-template-columns:repeat(2,minmax(0,1fr))} /* bottom and height are percentages of the card, and the card roughly doubles in height once it stacks, so the band has to be re-anchored or it slides off the bottom entirely */ .rib-l,.rib-r,.rib-w{bottom:-10%;height:46%} .rib-w2{bottom:-16%} /* the bento drops to one column here, so the cost card goes wide and short and the 470px ring hides entirely behind the full-width stat rows. Growing it puts the flanks back out in the 26px margins where they can be seen. */ .borb i{top:51%;width:330px;height:330px;margin:-165px 0 0 -165px} /* the card is wide and short here (about 316px), so the ring shrinks to fit its height */ .bcard{min-height:0} } @media (max-width:479px){ .bcard-dark .stages{grid-auto-columns:minmax(0,1fr)} .stage .sk-stn{font-size:11px} .stage .sk-stg{font-size:8.5px} .bcard-3 .ag .sk-b{display:none} /* tiles are too narrow for bars beside the avatar; the names stay, wrapping */ .bcard-3 .ag{gap:8px;padding:10px} .bcard-3 .ag i,.bcard-3 .ag .plus{width:32px;height:32px;flex:0 0 32px} /* "Median or under Cost per finished item" needs 267px and the row is 234px wide at 320, so one line clips it silently. Stacked again, still centred. */ .bart-cost .num-card{flex-direction:column;align-items:center;gap:4px;padding:11px 12px;text-align:center} .bart-cost .num-card b,.bart-cost .num-card span{white-space:normal} /* the card is narrow again down here, so the ring goes back to the size that fits it rather than the wide-card one inherited from 767 */ .borb i{top:60%;width:350px;height:350px;margin:-175px 0 0 -175px} /* the journey card is down to 288px at the narrowest phone, where a 400px globe loses its limb and reads as texture. 300 keeps the circle whole. */ .bglb i{width:300px;height:300px;margin:-150px 0 0 -150px} } /* the office, queue, cost, workspace and seats cards: a soft white-to-royal wash, white at the top (under the heading) deepening to a pale royal tint at the foot */ .bart-office,.bart-control,.bart-workspace,.bart-seats{background-image:radial-gradient(120% 60% at 50% 100%,rgba(74,104,210,.14),transparent 70%), linear-gradient(180deg,#fff 0,#fff 38%,#eef1fc 72%,#e2e8fb 100%);background-size:100% 100%} .bart-office,.bart-control{--glow:#4a68d2;--glow-soft:rgba(74,104,210,.24)} /* the light cards (office, queue, cost, workspace, seats): a light-blue wash in the Every department tint (#e4ecfb), near-white at the top deepening toward the foot */ .bart-office,.bart-control,.bart-workspace,.bart-seats{background-image:linear-gradient(180deg,#f7f9fe 0,#eef3fd 30%,#e4ecfb 62%,#d8e2fa 100%)} /* skeleton bars on the seat tiles: a pale royal tint (the site's --sky family) instead of grey, so they read against the light-blue wash and match the rest of the palette */ .bcard-3 .ag .sk-b.sk-s{height:8px;background:#d3dcf7} .bcard-3 .ag.sk-add .sk-b{background:#c3cff5} /* the journey card: every stage name gets room for two lines, so a one-line name (Startup) and a two-line one (Small Business) put their bars on the same line */ .bstage .stage .sk-stn{display:flex;align-items:flex-start;min-height:2.5em;white-space:normal;overflow:visible;text-overflow:clip} /* every name wraps as it needs to (nothing is cut off), in a two-line box with the text set on its floor: each name sits the same distance above its bar, and the bars align */ /* journey card dots: the stages ahead are white, the current stage is the logo green */ .bstage .stage::after{top:6px;left:1px;width:10px;height:10px;background:#fff;border:0; box-shadow:0 0 0 2px rgba(255,255,255,.14),0 0 0 3px rgba(255,255,255,.28)} /* a smaller white core in a slim glass ring; the green current stage keeps the larger glow */ .bstage .stage.cur::after{top:5px;left:0;width:12px;height:12px;background:#4cc38a;border:0;box-shadow:0 0 0 5px rgba(76,195,138,.25)}