. So the marks fell back to the SVG default fill — solid black discs — and the case art was never normalised. Styling by element rather than by class on the child: the shape is the contract, and a generated mark should not have to remember two class names. */ .svc-mark, .ind-icon, .edge-mark, .feat-mark { display:block; flex:none; } .svc-mark { width:34px; height:38px; margin-bottom:16px; } .ind-icon { width:22px; height:25px; } .edge-mark { width:22px; height:25px; margin-top:2px; } .feat-mark { width:16px; height:18px; margin-top:4px; } .svc-mark polygon, .ind-icon polygon, .edge-mark polygon, .feat-mark polygon { fill:none; stroke:var(--mark-comb); stroke-width:2; stroke-linejoin:round; } .feat-mark polygon { stroke:var(--accent); stroke-width:2.4; } .svc-mark circle, .ind-icon circle, .edge-mark circle { fill:var(--mark-circuit); } /* On the dark Mark-N band --mark-comb is lift and --mark-circuit is white, which the band already redefines, so the marks follow without a second rule. */ /* ---- Case study art ------------------------------------------------------ The two source images are 854x1000 portrait and 1024x784 landscape -- the pair that produced the stretched hexagons on the live site. The placeholder renders an inside .case-art, so the normalisation has to sit on the child: aspect-ratio crops both to one shape instead of distorting either. */ .case-art { display:block; width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--bg-alt); border-radius:0; } .case-art img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; } /* ---- Services ----------------------------------------------------------- Links were sitting directly under the copy at whatever height the longest description ended. margin-top:auto in a flex column puts every one on the card's own baseline, so the row reads as a set. */ .grid--4 .card { display:flex; flex-direction:column; } .grid--4 .card .card-body { flex:1; } .grid--4 .card .card-link { margin-top:14px; align-self:start; } .grid--4 .card h3 { font-size:var(--fs-h3); letter-spacing:-.01em; margin-bottom:8px; } .grid--4 .card .card-body { color:var(--text-muted); font-size:.9375rem; } /* ---- Mark-N band --------------------------------------------------------- */ .feature-list { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:13px; } .feature-list li { display:grid; grid-template-columns:16px 1fr; gap:12px; align-items:start; font-size:.9375rem; color:var(--text-muted); } .feat-head { margin-top:22px; font-family:var(--font-display); font-weight:var(--fw-medium); color:var(--text); } /* ---- Edge and industries ------------------------------------------------- */ .edge-list { list-style:none; margin:0; padding:0; display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); } .edge-list li { display:grid; grid-template-columns:22px 1fr; gap:14px; align-items:start; } .edge-list li > div { font-size:.9375rem; color:var(--text-muted); } .edge-head { margin-top:clamp(34px,5vw,56px); } .industries { list-style:none; margin:0; padding:0; display:grid; gap:clamp(12px,1.6vw,18px); grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); } .industries li { display:flex; align-items:center; gap:13px; padding:16px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); font-size:.9375rem; font-weight:var(--fw-medium); transition:border-color .22s; } .industries li:hover { border-color:var(--accent); } /* ---- Vision / mission ---------------------------------------------------- */ .vm-split { margin-top:clamp(26px,4vw,44px); } .vm-split .card h3 { font-size:var(--fs-h3); margin-bottom:8px; } .vm-split .card p { color:var(--text-muted); font-size:.9375rem; } /* --------------------------------------------------------------------------- Class namespacing --------------------------------------------------------------------------- The redesign extends cms/base.html, so it loads style.css -- 4,300 lines of the old design -- alongside this file. 22 of the 83 classes the redesign templates use also appear there, and seven of those old rules paint something. .hex-icon was the live one: style.css:1535 makes it a 24x24 cyan block with a clip-path and rotateZ(90deg), which my , so it inherited body copy exactly -- same 16px, same colour -- and read as a stray sentence above the heading rather than as a label on it. Smaller, tracked out, in the accent and in caps, so it does the job of an eyebrow and stops competing with the sentence underneath. */ .svc-eyebrow{display:block;font-size:.75rem;font-weight:var(--fw-semibold); letter-spacing:.14em;text-transform:uppercase;color:var(--accent); margin:0 0 10px} .svc-sub{color:var(--accent);font-weight:var(--fw-medium); font-size:.9375rem;margin:0 0 6px} .svc-desc{margin-top:16px;max-width:60ch;color:var(--text-muted)} /* Same fault .page-hero above was given grid-column:1/-1 for, and the same fix. .hero .shell-wrap is a two-column grid built for the home page's headline-beside-visual. The services page puts three children in it -- the hidden h1, the service block and its card row -- so grid auto-placement dealt them into cells: the copy ran in a 281px column (about 35 characters a line) and the card row landed in column two, which put the cards ABOVE the heading they belong to. Document order said block-then-cards, the screen said the reverse, so the reading order was wrong as well as the measure. Spanning the full container gives each one its own row, in document order. */ .hero .shell-wrap > .svc-block, .hero .shell-wrap > .svc-detail, .hero .shell-wrap > h1{grid-column:1/-1} /* The media column was .8fr -- roughly 450px of a 1072px block -- while what sits in it is a 72px decorative mark. That is where the empty right-hand side came from, and it pushed the copy into a column narrower than it needed. auto sizes the column to whatever is actually in it, so the mark takes 72px and an editor who later drops a real image into first_service_image still gets the room for it. The copy is capped at its own measure instead of filling whatever is left: at 1072px it ran 130 characters a line, twice a comfortable read. */ .svc-block{display:grid;gap:clamp(26px,4vw,52px); grid-template-columns:minmax(0,68ch) auto;align-items:center; justify-content:start} .svc-block-head{min-width:0} @media (max-width:860px){ .svc-block{grid-template-columns:1fr} } /* Two service blocks in a row need the same air between them that separates the first from its cards. */ .svc-detail + .svc-block{margin-top:clamp(48px,7vw,96px)} .svc-block-media img{max-width:100%;height:auto;display:block;margin-inline:auto} /* The service NAME is an h2, and the templates put it in whichever of these two wrappers that service was built with -- .svc-block-title on some, .svc-sub on others, because the placeholder slots are named the other way round from what they hold (first_service_sub_title carries the title). The slot names cannot change without orphaning an editor's plugin, so the heading is styled for both wrappers instead. .svc-sub sets a 15px base for its own text, and an h2 is sized in em, so a heading left to inherit it came out at 22.5px in the accent colour while the same heading in the other wrapper was 33.6px in the text colour. Same page, same element, two sizes. */ .svc-block-title h2,.svc-block-title h3, .svc-sub h2,.svc-sub h3{font-size:var(--fs-h2);color:var(--text); letter-spacing:-.015em;margin:0} .svc-detail{margin-top:clamp(28px,4vw,48px)} .grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} /* Lists inside placeholder content: the editor's

inside .card-link, so nothing in the redesign had ever styled them; the reset was doing it by accident. Given .case-link's treatment, so the two kinds of card on the home page use one link language. */ .card-link a{color:var(--accent);font-weight:var(--fw-medium); font-size:.9375rem;text-decoration:none; border-bottom:1px solid currentColor;padding-bottom:2px} .card-link a:hover{color:var(--accent-strong)} /* That border is an underline for a TEXT link, and some of these cards hold an arrow icon instead of the words. An inline box takes its height from the line, not from a replaced child, so the anchor around a 53x52 icon was still 22px tall and the border landed across the middle of the artwork rather than under it -- a line through the button. inline-flex makes the box wrap the icon, which also gives the link a real 53x52 hit area instead of a 22px strip. */ .card-link a:has(img){ border-bottom:0; padding-bottom:0; display:inline-flex; align-items:center; } /* ── The project collage ─────────────────────────────────────────────────── Template markup (home.html), geometry only, and the one place a measurement can be read straight off the artwork: 171/522 and 197/791 is one cell as a fraction of the sheet, and the background-size is its inverse so that one cell frames one photo. Nothing here hides a cell. The entrance is "Flip, tuned" in redesign.js, driven by Web Animations, which supplies its own start state and leaves no trace -- so a cell is visible whether or not that file ever runs. The earlier note here said main.js applies a per-column drift; main.js has not shipped on these pages since item 42. */ .hex-collage{position:relative;display:block;width:100%;max-width:522px; aspect-ratio:522 / 791;margin-inline-start:auto} /* The hero stacks below 860px with the visual first, and section 5 caps that visual at min(150px,42%) so it stays an emblem rather than a cover image — but it caps `.hero-mark`, and the page that ships puts `.hex-collage` in that slot. Uncapped, a 522x791 collage at 390px wide is 543px tall and put the h1 at 696px of an 800px viewport: headline on the fold line, intro and both CTAs below it. That is the defect BACKLOG.md 19 closed on the old template, reopened by the new one. Same cap, applied to the element that is actually there; the collage is a ten-photo cluster rather than a single mark, so it gets more room than the 150px the mark is held to. */ @media (max-width:860px){ .hex-collage{max-width:min(210px,56%);margin-inline:auto} } .hex-cell{position:absolute;left:var(--x);top:var(--y); width:32.7586%;height:24.9052%; background-image:var(--sheet);background-size:305.2632% 401.5228%; background-position:var(--bgx) var(--bgy);background-repeat:no-repeat; clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); backface-visibility:hidden} /* ── Contact form fields — cms/includes/contact_form_fields.html ─────────── The include is shared with the old design and its markup is load-bearing for cache safety, so it cannot be restyled by editing it (BACKLOG.md 28). Most of it is already covered by the CONTACT FORM section above; these are the parts that were still coming from style.css. The required-field asterisk was a hardcoded #ff9b9b — a pink that exists in style.css as --danger-text and reads as decoration on white. It now uses the same --danger the field errors use, so "required" and "this field is wrong" speak with one voice. */ .contact-form label span{color:var(--danger)} .contact-form-button{margin-top:4px} @media (max-width:560px){.contact-form-button .secondary-btn{width:100%}} /* The subhead inside the form, and the plugin-authored contact block on the home page, both use .title with a hexagon bullet. .hex-icon is the old design's name for that bullet — unrelated to .svc-mark, which is the redesign's own hexagon line-work and was renamed precisely because the two collided. */ .title{display:flex;align-items:center;gap:10px} .hex-icon{width:20px;height:20px;flex:none;background:var(--accent); clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0% 50%); transform:rotateZ(90deg)} /* p{margin:0} is the page-wide reset, which is right for copy inside a card but left the apply form welded to the sentence introducing it -- measured at 0px between them. These two paragraphs introduce a form rather than sit in a block of prose, so they carry their own space. */ .job-form .content-wrap > p, .contact-container > .contact-subtext{margin-bottom:clamp(20px,3vw,30px)} .contact-subhead{text-align:start;margin-bottom:18px} .contact-subhead h3{font-family:var(--font-display);font-size:var(--fs-h3); font-weight:var(--fw-semibold);color:var(--text);line-height:1.3} .contact-subhead p{margin-top:8px;font-size:.9375rem;color:var(--text-muted)} /* Editor-authored contact markup on the home page: the footer_contact_form slot holds a plugin whose HTML is the old design's, down to a width:85% and centred margins sized for a full-width section rather than for one cell of .contact-grid. Reset to fill the cell it is actually in. */ .contact-container{width:100%;margin-inline:0;text-align:start} .contact-container h2{font-size:var(--fs-h2);letter-spacing:-.015em; line-height:1.18;margin-bottom:10px;color:var(--text)} .contact-subtext{color:var(--text-muted);font-size:.9375rem;margin-bottom:22px} /* mobile-only / desktop-only come from the shared includes, and the only thing they switch is the contact form's subhead. So they follow the width that form actually folds at -- .contact-grid goes single-column at 860px -- not style.css's 768px and not the navigation's breakpoint, which is a different question about a different element. */ .desktop-only{display:block} .mobile-only{display:none} @media (max-width:860px){ .desktop-only{display:none} .mobile-only{display:block} } /* ── Floating social widget — the parts the port left behind ─────────────── The widget was restyled onto the tokens in the FLOATING SOCIAL SPEED-DIAL section above, but four things stayed in style.css and would have gone with it. Three of them are not cosmetic: * the bottom offset clears Google's reCAPTCHA v3 badge, which is pinned to the bottom corner at 60px tall on every page because the footer form loads it site-wide. Covering it hides a notice Google's terms require to stay visible, and makes it unclickable; * the closed menu is invisible but still laid out, about 250px tall above the toggle, so without pointer-events:none it sits over the page and swallows every click in that column; * nine links stack past the top of a short or landscape viewport, so the stack scrolls. The padding/negative-margin pair buys room for the items' drop-shadows, which overflow-y would otherwise clip, without moving anything. The fourth is the breathing pulse, which is most of the reason the widget is noticed at all. */ .sfloat{bottom:calc(var(--corner-bottom) + var(--corner-badge)); padding-bottom:env(safe-area-inset-bottom,0px)} .sfloat__toggle{filter:drop-shadow(0 10px 22px rgba(1,35,43,.32)); animation:sfloatBreathe 6s ease-in-out infinite;transition:transform .35s ease} .sfloat__toggle:hover{transform:translateY(-3px)} .sfloat__toggle:hover,.sfloat__toggle:focus-visible, .sfloat.is-open .sfloat__toggle{ /* One cue at a time: the breathing stops the moment the widget has the visitor's attention, and does not come back. */ animation:none} .sfloat__item{filter:drop-shadow(0 6px 16px rgba(1,35,43,.26))} .sfloat__item:hover{transform:translateY(-2px) scale(1.06)} .sfloat__menu{max-height:calc(100vh - 258px);max-height:calc(100dvh - 258px); overflow-y:auto;pointer-events:none;overscroll-behavior:contain; scrollbar-width:none;padding:14px 16px;margin:-14px -16px} .sfloat__menu::-webkit-scrollbar{display:none} .sfloat.is-open .sfloat__menu{pointer-events:auto} @keyframes sfloatBreathe{ 0%,80%,100%{transform:none} 87%{transform:scale(1.08)} 94%{transform:scale(.97)} } @media (prefers-reduced-motion:reduce){ .sfloat__toggle{animation:none} .sfloat,.sfloat__toggle,.sfloat__ico,.sfloat__li,.sfloat__item, .sfloat__toggle::before,.sfloat__item::before{transition:none} } /* ── ASSISTANT ───────────────────────────────────────────────────────────── The floating sales router. Markup: cms/partials/assistant.html. Behaviour: js/assistant.js. It sits above the social speed-dial and uses the corner tokens declared beside .sfloat above, so neither widget hardcodes the other's height. z-index:61 — it only has to beat .sfloat's 60. It cannot beat the reCAPTCHA badge's 2000000000 and must not try: see --corner-badge. */ .bl-assist{position:fixed;inset-inline-end:var(--corner-inline); bottom:calc(var(--corner-bottom) + var(--corner-badge));z-index:61; display:flex;flex-direction:column;align-items:flex-end;gap:10px; padding-bottom:env(safe-area-inset-bottom,0px)} /* BESIDE the social widget, not above it. It was above: bottom + badge + one item + gap, which cleared the social TOGGLE exactly. That was measured against the wrong thing. The social menu opens UPWARD from its toggle (.sfloat__menu is column-reverse with order:-1), so the space one item above the toggle is precisely where its first link appears -- and with .bl-assist at z-index 61 over .sfloat's 60, this launcher painted on top of it. On beelogico.com, where WhatsApp is the only social link configured, that covered the entire menu: opening it did nothing visible at all. Sideways instead of taller, because the collision is with a stack whose height is not knowable here. The menu holds one link or nine depending on what an editor has filled in, so any vertical offset is a guess that is wrong for every other count. Offset by one item and a gap along the inline axis and the two never share space, whatever the menu grows to. Not solved by hiding this launcher while the menu is open, which was the first idea and is a trap: the menu opens on hover under (pointer: fine) and its open box covers this position, so a mouse travelling up to reach the assistant would keep the menu open and the assistant hidden the whole way. The control would be unreachable by mouse rather than merely obscured. The class is server-rendered from the same conditions social_float.html tests, so it is identical for every visitor and safe in a cached page. */ .bl-assist--beside{inset-inline-end:calc(var(--corner-inline) + var(--corner-item) + var(--corner-gap))} /* The launcher steps aside; the panel does not have to. Pulled back to the corner so it still opens against the edge of the screen rather than leaving a gap the width of the social widget down its trailing side. */ .bl-assist--beside .bl-assist__panel{ margin-inline-end:calc(-1 * (var(--corner-item) + var(--corner-gap)))} /* Scoped, not global. The steps rely on the `hidden` attribute rather than a class, because it removes an inactive step from the accessibility tree AND the tab order in one move — but `display` from any later rule would beat it, and .bl-assist__step is a flex container. !important inside this widget only, so nothing else on the site inherits the hammer. */ .bl-assist [hidden]{display:none !important} .bl-assist__toggle{position:relative;display:grid;place-items:center; width:50px;height:56px;border:0;padding:0;background:transparent; cursor:pointer;color:var(--btn-text); filter:drop-shadow(0 10px 22px rgba(1,35,43,.32)); transition:transform .35s ease} /* Painted by ::before so the control itself stays unclipped and its focus ring is still visible — a clip-path on the element would cut the ring off. Same reasoning, same polygon, as .sfloat__toggle. */ .bl-assist__toggle::before{content:"";position:absolute;inset:0; background:var(--accent);transition:background .2s; clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)} .bl-assist__toggle:hover::before{background:var(--accent-strong)} .bl-assist__toggle:hover{transform:translateY(-3px)} .bl-assist__toggle svg{position:relative} /* The bot face. currentColor is --btn-text, the ink that already reads on --accent in both themes; the eyes take --accent back so they look lit. */ .bl-assist__eye{fill:var(--accent)} .bl-assist__bot .bl-assist__eye{transform-box:fill-box;transform-origin:center; animation:blAssistBlink 5s infinite} @keyframes blAssistBlink{0%,92%,100%{transform:none}95%{transform:scaleY(.1)}} /* A gentle bob while closed, so the button reads as someone waiting rather than as a static icon. Stops while open and under reduced motion. */ .bl-assist:not(.is-open) .bl-assist__toggle{animation:blAssistBob 3.5s ease-in-out infinite} .bl-assist:not(.is-open) .bl-assist__toggle:hover{animation:none} @keyframes blAssistBob{0%,100%{transform:none}50%{transform:translateY(-4px)}} .bl-assist__online{position:absolute;top:5px;inset-inline-end:1px;width:12px;height:12px; border-radius:50%;background:#3DDC97;border:2px solid var(--bg)} /* The countdown ring, traced round the hexagon while the panel is auto-open. stroke-dasharray/--len are set from getTotalLength() in assistant.js, so the path can change without anyone recomputing a magic number. */ /* .bl-assist__toggle in the selector to outrank `.bl-assist__toggle svg` above, which would otherwise put the ring back in the grid beside the face. */ .bl-assist__toggle .bl-assist__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible; pointer-events:none} .bl-assist__ring path{fill:none;stroke:var(--accent);stroke-width:2.5; stroke-linejoin:round;opacity:0} .bl-assist.is-peeking .bl-assist__ring path{opacity:1; animation:blAssistTrace var(--assist-peek,3s) linear forwards} .bl-assist.is-peek-paused .bl-assist__ring path, .bl-assist.is-peek-paused .bl-assist__peek-fill{animation-play-state:paused} @keyframes blAssistTrace{from{stroke-dashoffset:0}to{stroke-dashoffset:var(--len,0)}} @media (max-width:560px){.bl-assist__toggle{width:46px;height:52px} .bl-assist__bot{width:27px;height:27px}} .bl-assist__panel{order:-1; width:min(360px,calc(100vw - (var(--corner-inline) * 2))); max-height:min(72vh,560px);overflow-y:auto;overscroll-behavior:contain; background:var(--surface);color:var(--text); border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow);padding:16px} /* A centred bot card: avatar, name, status. The avatar sits in the flow rather than riding over the panel's top edge, because the panel scrolls (overflow-y:auto) and would clip anything positioned outside it. */ .bl-assist__head{position:relative;display:flex;flex-direction:column; align-items:center;gap:2px;text-align:center; margin:-16px -16px 14px;padding:16px 40px 12px; border-radius:var(--radius) var(--radius) 0 0; background:linear-gradient(180deg,var(--bg-alt),var(--surface)); border-bottom:1px solid var(--border)} .bl-assist__avatar{display:grid;place-items:center;width:52px;height:58px; margin-bottom:6px;color:var(--btn-text);background:var(--accent); clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)} .bl-assist__title{font-family:var(--font-display);font-weight:var(--fw-semibold); font-size:1rem} .bl-assist__status{display:inline-flex;align-items:center;gap:6px; font-size:.78rem;color:var(--text-muted)} .bl-assist__status::before{content:"";width:7px;height:7px;border-radius:50%; background:#3DDC97} .bl-assist__hello{font-weight:var(--fw-medium);margin:0 0 2px} .bl-assist__close{position:absolute;top:8px;inset-inline-end:8px; display:grid;place-items:center;width:28px;height:28px; border:0;border-radius:var(--radius-sm);background:transparent; color:var(--text-muted);cursor:pointer;transition:background .2s,color .2s} .bl-assist__close:hover{background:var(--bg-alt);color:var(--text)} .bl-assist__q{font-weight:var(--fw-medium);font-size:var(--fs-small); margin:0 0 10px} .bl-assist__choices,.bl-assist__actions{display:flex;flex-direction:column; gap:8px} /* One filled action and the rest quiet, rather than a column of identical buttons where nothing says which route is the normal one. */ .bl-assist__choice,.bl-assist__action{display:block;width:100%; text-align:start;font:inherit;font-size:var(--fs-small); padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-sm); background:var(--bg);color:var(--text);text-decoration:none;cursor:pointer; transition:border-color .2s,background .2s,transform .12s ease} .bl-assist__choice:hover,.bl-assist__action:hover{border-color:var(--accent); background:var(--bg-alt)} .bl-assist__choice:active,.bl-assist__action:active{transform:translateY(1px)} .bl-assist__action--wa{background:var(--accent);border-color:var(--accent); color:var(--btn-text)} .bl-assist__action--wa:hover{background:var(--accent-strong); border-color:var(--accent-strong)} /* The "read about it" route is the one most visitors want and the one that is not a handoff, so it reads as a link rather than competing as a fourth button. */ .bl-assist__action--read{border-color:transparent;background:transparent; color:var(--accent);padding-inline:2px} .bl-assist__action--read:hover{background:transparent;text-decoration:underline} /* A word, never an arrow glyph: "←" does not mirror under RTL, so it would point away from where it goes on the Arabic site. */ .bl-assist__back{margin-top:12px;border:0;background:transparent;padding:4px 2px; font:inherit;font-size:var(--fs-small);color:var(--text-muted); cursor:pointer;text-decoration:underline} .bl-assist__back:hover{color:var(--text)} .bl-assist__aside{margin:14px 0 0;font-size:var(--fs-small); color:var(--text-muted)} .bl-assist__fieldset{border:0;margin:0;padding:0;min-width:0} .bl-assist__fieldset legend{font-weight:var(--fw-semibold); font-size:var(--fs-small);padding:0;margin-bottom:8px} .bl-assist__form .form-row{margin-bottom:10px} .bl-assist__hours,.bl-assist__legal{margin:0 0 10px; font-size:.78rem;line-height:1.5;color:var(--text-muted)} .bl-assist__legal a{color:inherit} .bl-assist__submit{margin-top:4px} .bl-assist__submit .secondary-btn{width:100%;justify-content:center} /* The auto-open countdown strip at the foot of the panel. */ .bl-assist__peek{display:flex;align-items:center;gap:10px;margin-top:14px; font-size:.78rem;color:var(--text-muted);font-variant-numeric:tabular-nums} .bl-assist__peek-track{flex:1;height:4px;border-radius:2px; background:var(--border);overflow:hidden} .bl-assist__peek-fill{display:block;height:100%;background:var(--accent); transform-origin:0 50%} [dir="rtl"] .bl-assist__peek-fill{transform-origin:100% 50%} .bl-assist.is-peeking .bl-assist__peek-fill{ animation:blAssistDrain var(--assist-peek,3s) linear forwards} @keyframes blAssistDrain{from{transform:scaleX(1)}to{transform:scaleX(0)}} /* While the panel is open the social widget below is unpointable. This is what fixes the hover trap: social-float.js opens that menu on mouseenter under a fine pointer, and the launcher sits directly above its toggle, so a mouse travelling up to this panel used to pop nine icons open behind it. An element with pointer-events:none is never sent mouseenter, so no JS coordination is needed — and on a phone the sheet covers it anyway. */ html.assistant-open .sfloat{pointer-events:none} /* Below 560px two stacked widgets plus a panel do not fit a 375x667 screen, so the panel becomes a bottom sheet and the social widget is hidden outright while it is open. 85dvh rather than vh: on iOS Safari vh includes the retracted toolbar, so the sheet's own footer would sit under it. */ @media (max-width:560px){ html.assistant-open .sfloat{display:none} .bl-assist.is-open .bl-assist__panel{position:fixed;inset:auto 0 0 0; width:auto;max-width:none;max-height:85dvh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-inline:0;border-bottom:0;margin-inline:0; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))} } @media (prefers-reduced-motion:reduce){ .bl-assist__toggle,.bl-assist__choice,.bl-assist__action, .bl-assist__close,.bl-assist__toggle::before{transition:none} .bl-assist__toggle:hover,.bl-assist__choice:active, .bl-assist__action:active{transform:none} .bl-assist:not(.is-open) .bl-assist__toggle, .bl-assist__bot .bl-assist__eye{animation:none} }