1/* Layout engine ported from home-banner.html renderVals + BAKED. 2 Recalculates from the banner's own width on every resize â same bandFor + geometry. */ 3(function () { 4 "use strict"; 5 6 var BP_ORDER = ["2560", "1920", "1600", "1200", "992", "767", "360"]; 7 var SEED_TITLE = { "2560": 46, "1920": 44, "1600": 40, "1200": 36, "992": 34, "767": 32, "360": 28 }; 8 var PAD_X = { "2560": 24, "1920": 20, "1600": 18, "1200": 14, "992": 12, "767": 8, "360": 8 }; 9 var PAD_Y = { "2560": 26, "1920": 22, "1600": 14, "1200": 13, "992": 12, "767": 12, "360": 16 }; 10 var GRID = { 11 "2560": [12, 80, 20], "1920": [12, 80, 20], "1600": [12, 80, 20], 12 "1200": [12, 56, 20], "992": [12, 40, 24], "767": [4, 16, 20], "360": [4, 16, 20] 13 }; 14 var PL_R = { head: 0.72, amount: 0.88, priceLbl: 0.42, label: 0.34, cta: 0.38, itemGap: 0.80, rowsGap: 0.22 }; 15 var NAV_CLEAR = 69; 16 var BAKED = { 17 "2560": { height: 595, swooshes: [{ enabled: true, transform: { x: 17, y: 58, rotate: -302, scale: 0.45 } }], presenter: { enabled: true, width: 42, top: 0, transform: { x: -10, y: 0, rotate: 0, scale: 0.92 } }, textBlock: { offset: { x: 0, y: 0 }, top: 0, gap: 17, align: "center" }, hero: { stack: false, h: 0, w: 46 }, wifi7: { on: true, size: 74, x: 30.5, y: 86.5, color: "navy" }, titleOneLine: true, titleSize: 46, titleLeading: 0.9, plate: { maxWidth: 640, topPad: 46, offsetY: 0, scale: 90, mobileScale: 100, priceScale: 140, ctaFont: 23, labelSize: 22, iconSize: 48 } }, 18 "1920": { height: 595, swooshes: [{ enabled: true, transform: { x: 22, y: 54, rotate: -319, scale: 0.7 } }], presenter: { enabled: true, width: 42, top: 0, transform: { x: 69, y: 0, rotate: 0, scale: 0.88 } }, textBlock: { offset: { x: 0, y: 0 }, top: 0, gap: 16, align: "right" }, hero: { stack: false, h: 0, w: 46 }, wifi7: { on: true, size: 56, x: 16, y: 80, color: "white" }, titleOneLine: true, titleSize: 44, titleLeading: 0.9, plate: { maxWidth: 560, topPad: 46, offsetY: 0, scale: 90, mobileScale: 100, priceScale: 134, ctaFont: 22, labelSize: 21, iconSize: 44 } }, 19 "1600": { height: 595, swooshes: [{ enabled: true, transform: { x: 31, y: 56, rotate: -317, scale: 0.8 } }], presenter: { enabled: true, width: 42, top: 0, transform: { x: 44, y: 0, rotate: 0, scale: 0.92 } }, textBlock: { offset: { x: 0, y: 0 }, top: 0, gap: 8, align: "right" }, hero: { stack: false, h: 0, w: 46 }, wifi7: { on: true, size: 50, x: 8, y: 88, color: "white" }, titleOneLine: true, titleSize: 40, titleLeading: 0.9, plate: { maxWidth: 500, topPad: 46, offsetY: 0, scale: 90, mobileScale: 100, priceScale: 128, ctaFont: 21, labelSize: 20, iconSize: 40 } }, 20 "1200": { height: 595, swooshes: [{ enabled: true, transform: { x: 25, y: 61, rotate: -312, scale: 0.95 } }], presenter: { enabled: true, width: 42, top: 0, transform: { x: 16, y: -4, rotate: 0, scale: 0.8 } }, textBlock: { offset: { x: 0, y: 0 }, top: 0, gap: 14, align: "right" }, hero: { stack: false, h: 0, w: 46 }, wifi7: { on: true, size: 54, x: 7.5, y: 88.5, color: "white" }, titleOneLine: true, titleSize: 36, titleLeading: 0.9, plate: { maxWidth: 440, topPad: 46, offsetY: 0, scale: 90, mobileScale: 100, priceScale: 124, ctaFont: 20, labelSize: 19, iconSize: 36 } }, 21 "992": { height: 595, swooshes: [{ enabled: true, transform: { x: 28, y: 53, rotate: -322, scale: 1.1 } }], presenter: { enabled: true, width: 42, top: 0, transform: { x: -5, y: 0, rotate: 0, scale: 0.86 } }, textBlock: { offset: { x: 0, y: 0 }, top: 0, gap: 13, align: "right" }, hero: { stack: false, h: 0, w: 46 }, wifi7: { on: true, size: 58, x: 5.5, y: 87.5, color: "white" }, titleOneLine: true, titleSize: 34, titleLeading: 0.9, plate: { maxWidth: 400, topPad: 46, offsetY: 0, scale: 90, mobileScale: 100, priceScale: 120, ctaFont: 19, labelSize: 18, iconSize: 32 } }, 22 "767": { height: 470, swooshes: [{ enabled: true, transform: { x: 33, y: 57, rotate: -314, scale: 1.35 } }], presenter: { enabled: true, width: 42, top: 0, transform: { x: 36, y: 3, rotate: 0, scale: 1.32 } }, textBlock: { offset: { x: 0, y: 0 }, top: 56, gap: 12, align: "right" }, hero: { stack: true, h: 230, w: 34 }, wifi7: { on: true, size: 62, x: 8, y: 78, color: "white" }, titleOneLine: false, titleSize: 38, titleLeading: 0.9, plate: { maxWidth: 480, topPad: 46, offsetY: 0, scale: 90, mobileScale: 100, priceScale: 120, ctaFont: 18, labelSize: 17, iconSize: 30 } }, 23 "360": { height: 470, swooshes: [{ enabled: true, transform: { x: 38, y: 40, rotate: -294, scale: 1.7 } }], presenter: { enabled: true, width: 42, top: 0, transform: { x: 23, y: -6, rotate: 0, scale: 0.98 } }, textBlock: { offset: { x: 0, y: -24 }, top: 48, gap: 0, align: "right" }, hero: { stack: true, h: 168, w: 46 }, wifi7: { on: true, size: 38, x: 11.5, y: 80.5, color: "white" }, titleOneLine: false, titleSize: 28, titleLeading: 1.05, plate: { maxWidth: 345, topPad: 96, offsetY: 6, scale: 130, mobileScale: 100, priceScale: 120, ctaFont: 18, labelSize: 16, iconSize: 28 } } 24 }; 25 26 function bandFor(w) { 27 w = w || 1280; 28 for (var i = 0; i < BP_ORDER.length; i++) if (w >= Number(BP_ORDER[i])) return BP_ORDER[i]; 29 return "360"; 30 } 31 function q(root, sel) { return root.querySelector(sel); } 32 function qa(root, sel) { return root.querySelectorAll(sel); } 33 function css(el, map) { 34 if (!el) return; 35 for (var k in map) if (Object.prototype.hasOwnProperty.call(map,
35k)) el.style[k] = map[k]; 36 } 37 function num(v, d) { v = Number(v); return isFinite(v) ? v : (d == null ? 0 : d); } 38 39 function geometry(cw, heightHint) { 40 var bp = bandFor(cw); 41 var c = BAKED[bp]; 42 var height = c.height; 43 if (heightHint > 0) height = heightHint; 44 var bpMobile = (bp === "767" || bp === "360"); 45 var pr = c.presenter; 46 var tb = c.textBlock; 47 var pl = c.plate; 48 var sw = c.swooshes[0]; 49 var w7 = c.wifi7; 50 var hero = c.hero; 51 var pXv = num(pr.transform.x, 0); 52 var pYv = num(pr.transform.y, 0); 53 var pScale = num(pr.transform.scale, 1); 54 var pRot = num(pr.transform.rotate, 0); 55 var presenterTop = num(pr.top, 0); 56 var presenterW = num(pr.width, 42); 57 58 var gridMarginPx = Math.min(80, Math.max(16, cw * 0.044)); 59 var sidePadPx = (cw - Math.min(cw, 1600 + 2 * gridMarginPx)) / 2 + gridMarginPx; 60 if (bpMobile) sidePadPx = 16; 61 62 var presShare0 = 1.07; 63 var presGap = 16; 64 var snugEarly = Math.round(presShare0 * height * (801 / 1200)) + 24 + presGap; 65 var presReserve = Math.min(snugEarly, cw * 0.6); 66 if (bpMobile) { 67 var designW = bp === "360" ? 340 : 440; 68 var avail = cw - presReserve - 20; 69 if (avail - 2 * sidePadPx > designW) sidePadPx = Math.max(gridMarginPx, (avail - designW) / 2); 70 } 71 var contentRoom = cw - 2 * sidePadPx - presReserve - 20; 72 var presBottom = presReserve > 0 && (contentRoom < 240 || bp === "360"); 73 var mobOff = 0; 74 if (presBottom) { 75 presReserve = 0; 76 contentRoom = cw - 2 * sidePadPx; 77 } 78 if (presBottom && bp === "360") { 79 var mobFrame = Math.min(cw, 372); 80 sidePadPx = Math.max(gridMarginPx, (cw - (mobFrame - 32)) / 2); 81 contentRoom = cw - 2 * sidePadPx; 82 mobOff = Math.max(0, Math.round(sidePadPx - 16)); 83 var t = Math.max(0, Math.min(1, (cw - 360) / (676 - 360))); 84 mobOff = Math.round(mobOff * (1 - t * 0.7)); 85 } 86 87 var colMax = 560; 88 var plateReqW = Math.min(pl.maxWidth, Math.round(cw - 2 * sidePadPx)); 89 if (plateReqW > 0) colMax = Math.max(colMax, plateReqW); 90 if (contentRoom > 160) colMax = Math.min(colMax, Math.max(Math.round(contentRoom), plateReqW)); 91 92 var align = tb.align || "right"; 93 var mainJustify = align === "center" ? "center" : (align === "left" ? "flex-end" : "flex-start"); 94 var textTop = num(tb.top, 0); 95 var tx = num(tb.offset.x, 0); 96 var ty = num(tb.offset.y, 0); 97 var vPad = bpMobile ? 16 : 20; 98 var legalReserve = bpMobile ? 40 : 50; 99 100 var presFigW = Math.round(presShare0 * height * (801 / 1200)); 101 var presSnugW = presFigW + 24; 102 var presStripW = presSnugW; 103 var gM3 = (bp === "1200") ? 56 : (bp === "992" ? 40 : 80); 104 var gG3 = (bp === "992") ? 24 : 20; 105 var gridW3 = Math.min(cw, 1600 + 2 * gM3) - 2 * gM3; 106 var colW3 = (gridW3 - 11 * gG3) / 12; 107 var d3 = (cw - Math.min(cw, 1600 + 2 * gM3)) / 2 + gM3 + 2 * (colW3 + gG3); 108 var presGroupW = presSnugW + presGap + colMax; 109 var copyShift = presBottom ? 0 : Math.max(0, Math.round((cw - 2 * sidePadPx - presGroupW) / 2)); 110 var presLeftPx = Math.max(0, Math.round(sidePadPx + copyShift)); 111 if (!bpMobile && !presBottom) { 112 var textLeftX = cw - d3 - colMax; 113 var visW = presStripW * (1 + Math.max(0, pXv) / 100); 114 presLeftPx = Math.min(presLeftPx, Math.max(0, Math.round(textLeftX - 300 - visW))); 115 } 116 117 var heroStack = bpMobile && hero.stack; 118 var heroH = Math.max(80, hero.h || 180); 119 var heroCutShare = 0.092; 120 var heroWShare = Math.max(0.28, Math.min(0.62, (hero.w || 46) / 100)); 121 var stackColW = Math.max(240, Math.round(Math.min(pl.maxWidth, cw - 32))); 122 var heroAspect = 601 / 545; 123 var heroBoxW = Math.round(heroH * heroAspect); 124 var plateYRide = bpMobile ? num(pl.offsetY, 0) : 0; 125 126 var presAspect = 801 / 1200; 127 var presBoxW = presBottom ? 146 : (presenterW >= 100 ? cw : presStripW); 128 var presTopPct = presBottom ? Math.max(presenterTop, 56) : presenterTop; 129 var presBoxH = Math.max(1, height * (1 - presTopPct / 100));
130 var presFitH = Math.min(presBoxH, presBoxW / presAspect); 131 var presScaleEff = presBottom ? pScale : Math.max(0.3, Math.min(3, ((presShare0 * height) / presFitH) * pScale)); 132 var presNudgePx = presBottom ? 0 : Math.round(pXv / 100 * presStripW); 133 var presTx = presBottom ? (pXv + "%") : (presNudgePx + "px"); 134 var presTy = pYv + "%"; 135 136 var plateMaxW = pl.maxWidth; 137 var stageW = Math.max(240, Math.round(cw - 2 * sidePadPx)); 138 plateMaxW = Math.round(Math.min(Math.max(240, plateMaxW), stageW)); 139 if (!bpMobile) plateMaxW = Math.min(plateMaxW, Math.round(cw * 0.42)); 140 if (bpMobile) plateMaxW = Math.max(160, Math.round(plateMaxW * ((pl.mobileScale || 100) / 100))); 141 142 var T0 = SEED_TITLE[bp] || (bpMobile ? 26 : 42); 143 var der = function (r, min) { return Math.max(min || 0, Math.round(T0 * r)); }; 144 var delib = Math.max(0.5, Math.min(1.3, (pl.scale || 100) / 100)); 145 var ps = (pl.priceScale || 125) / 100; 146 var head = der(PL_R.head, 15) * delib * (bpMobile ? 24 / 26 : 1); 147 var label = pl.labelSize || Math.min(20, der(PL_R.label, 13)); 148 var cta = pl.ctaFont || der(PL_R.cta, 16); 149 var amount = der(PL_R.amount, 17); 150 var priceLbl = der(PL_R.priceLbl, 12); 151 var itemGap = pl.itemGap || der(PL_R.itemGap, 10); 152 var rowsGap = (pl.rowsGap != null && pl.rowsGap >= 0) ? pl.rowsGap : der(PL_R.rowsGap, 6); 153 var gg = GRID[bp] || [12, 40, 24]; 154 155 return { 156 bp: bp, height: height, bpMobile: bpMobile, heroStack: heroStack, 157 sidePadPx: sidePadPx, colMax: colMax, d3: d3, copyShift: copyShift, 158 presLeftPx: presLeftPx, presSnugW: presSnugW, presBottom: presBottom, mobOff: mobOff, 159 presenterTop: presenterTop, presenterW: presenterW, 160 presTx: presTx, presTy: presTy, presScaleEff: presScaleEff, pRot: pRot, pXv: pXv, pYv: pYv, pScale: pScale, 161 heroH: heroH, heroCutShare: heroCutShare, heroWShare: heroWShare, heroBoxW: heroBoxW, 162 stackColW: stackColW, plateYRide: plateYRide, plateMaxW: plateMaxW, 163 textTop: textTop, tx: tx, ty: ty, vPad: vPad, legalReserve: legalReserve, 164 mainJustify: mainJustify, titleOneLine: !!c.titleOneLine, 165 titleSize: c.titleSize, titleLeading: c.titleLeading, textGap: tb.gap || 0, 166 sw: sw, w7: w7, pl: pl, 167 head: head, label: label, cta: cta, amount: amount, priceLbl: priceLbl, ps: ps, 168 itemGap: itemGap, rowsGap: rowsGap, delib: delib, 169 padX: PAD_X[bp] || 16, padY: PAD_Y[bp] || 16, 170 gMargin: gg[1], legalSize: bpMobile ? 12 : 14 171 }; 172 } 173 174 function apply(box) { 175 var host = box.parentElement; 176 var cw = box.clientWidth || (host && host.clientWidth) || 1280; 177 var slotH = box.clientHeight || (host && host.clientHeight) || 0; 178 var g = geometry(cw, 0); 179 var heroEl = q(box, ".bzf-hero"); 180 var root = q(box, ".bzf-root"); 181 if (!heroEl || !root) return; 182 heroEl.classList.toggle("is-stack", g.heroStack); 183 heroEl.setAttribute("data-cut", g.bp); 184 box.setAttribute("data-cut", g.bp); 185 css(heroEl, { 186 alignItems: (g.heroStack || g.textTop > 0) ? "flex-start" : "center", 187 paddingBottom: g.legalReserve + "px" 188 }); 189 190 var swImg = q(box, ".bzf-swoosh img"); 191 css(swImg, { 192 position: "absolute", 193 left: g.sw.transform.x + "%", 194 top: g.sw.transform.y + "%", 195 width: (g.sw.transform.scale * 100) + "%", 196 maxWidth: "none", 197 height: "auto", 198 transform: "translate(-50%,-50%) rotate(" + g.sw.transform.rotate + "deg)", 199 mixBlendMode: "screen", 200 filter: "brightness(1.18) saturate(1.1)", 201 animation: "bzf-shimmer 3s ease-in-out infinite" 202 }); 203 204 var pres = q(box, ".bzf-presenter"); 205 css(pres, { 206 display: g.heroStack ? "none" : "block", 207 left: (g.presBottom ? g.mobOff : g.presLeftPx) + "px", 208 top: (g.presBottom ? Math.max(g.presenterTop, 56) : g.presenterTop) + "%", 209 bottom: "0px", 210 width: g.presBottom ? "146px" : (g.presenterW >= 100 ? "100%" : g.presSnugW + "px") 211 }); 212 var presXf = "translate(" + g.presTx + "," + g.presTy + ") scale(" + g.presScaleEff + ") rotate(" + g.pRot + "deg)"; 213 var presOrigin = g.presBottom ? "bottom left" : "bottom center"; 214 css(q(box, ".bzf-presenter-desk"), { 215 position: "absolute",
216 inset: "0px", 217 width: "100%", 218 height: "100%", 219 objectFit: "contain", 220 objectPosition: g.presBottom ? "left bottom" : "bottom center", 221 transformOrigin: presOrigin, 222 transform: presXf 223 }); 224 css(q(box, ".bzf-presenter-glow-wrap"), { 225 transform: "translate(" + g.presTx + "," + g.presTy + ") scale(" + Math.max(0.6, Math.min(1.8, g.presScaleEff)) + ")", 226 transformOrigin: presOrigin 227 }); 228 229 var wWhite = q(box, ".bzf-wifi7--white"); 230 var wNavy = q(box, ".bzf-wifi7--navy"); 231 var navy = g.w7.color === "navy"; 232 css(wWhite, { 233 display: (!navy && g.w7.on) ? "block" : "none", 234 left: g.w7.x + "%", top: g.w7.y + "%", width: g.w7.size + "px" 235 }); 236 css(wNavy, { 237 display: (navy && g.w7.on) ? "block" : "none", 238 left: g.w7.x + "%", top: g.w7.y + "%", width: g.w7.size + "px" 239 }); 240 241 var row = q(box, ".bzf-hero-row"); 242 var copy = q(box, ".bzf-copy"); 243 var stack = q(box, ".bzf-stack"); 244 var stackImg = q(box, ".bzf-presenter-mob"); 245 if (g.heroStack) { 246 var cutPx = Math.round(g.heroH * g.heroCutShare); 247 css(row, { 248 display: "flex", flexDirection: "row", alignItems: "flex-end", 249 justifyContent: "space-between", gap: "10px", width: "100%", 250 position: "relative", zIndex: "6", 251 marginBottom: (-cutPx) + "px" 252 }); 253 css(copy, { 254 display: "flex", flexDirection: "column", 255 gap: Math.round(g.textGap * 0.5) + "px", 256 alignItems: "flex-start", textAlign: "right", 257 flex: "1 1 auto", minWidth: "0", 258 paddingBottom: (cutPx + 10) + "px", 259 transform: (g.tx || g.ty) ? "translate(" + g.tx + "px," + g.ty + "px)" : "none" 260 }); 261 css(stack, { 262 display: "flex", justifyContent: "flex-end", alignItems: "flex-end", 263 pointerEvents: "none", flex: "0 0 auto", 264 width: g.heroBoxW + "px", 265 maxWidth: Math.round(g.heroWShare * 100) + "%", 266 transform: g.plateYRide ? "translateY(" + g.plateYRide + "px)" : "none" 267 }); 268 css(stackImg, { 269 width: "auto", 270 maxWidth: "100%", 271 display: "block", 272 objectFit: "contain", 273 objectPosition: "bottom center", 274 transformOrigin: "bottom center", 275 transform: "translate(" + g.pXv + "px," + g.pYv + "px) scale(" + g.pScale + ") rotate(" + g.pRot + "deg)" 276 }); 277 if (!stackImg.style.height) stackImg.style.height = "180px"; 278 } else { 279 css(row, { display: "contents", marginBottom: "0px" }); 280 css(copy, { display: "contents", transform: "none", paddingBottom: "0px", flex: "", minWidth: "", gap: "" }); 281 css(stack, { display: "none" }); 282 } 283 284 var col = q(box, ".bzf-col"); 285 var colGap = g.textGap; 286 if (g.heroStack) { 287 css(col, { 288 display: "flex", flexDirection: "column", 289 alignSelf: "stretch", justifyContent: "flex-start", 290 alignItems: "stretch", textAlign: "right", 291 gap: colGap + "px", 292 width: "min(100%," + (g.stackColW + 2 * g.sidePadPx) + "px)", 293 maxWidth: "min(100%," + (g.stackColW + 2 * g.sidePadPx) + "px)", 294 marginLeft: "auto", marginRight: "auto", 295 paddingTop: (g.textTop > 0 ? g.textTop : 8) + "px", 296 paddingBottom: (g.vPad + g.legalReserve) + "px", 297 paddingLeft: Math.round(g.sidePadPx) + "px", 298 paddingRight: Math.round(g.sidePadPx) + "px", 299 overflow: "visible", 300 transform: "none" 301 }); 302 } else { 303 var w3 = Math.round(g.colMax + g.sidePadPx + g.d3); 304 css(col, { 305 display: "flex", flexDirection: "column", 306 alignSelf: "auto", justifyContent: "center", 307 alignItems: g.mainJustify, textAlign: g.mainJustify === "center" ? "center" : "right", 308 gap: colGap + "px", 309 width: "min(100%," + w3 + "px)", 310 maxWidth: "min(100%," + w3 + "px)", 311 marginLeft: "auto", marginRight: "0", 312 paddingTop: Math.max(NAV_CLEAR, g.textTop > 0 ? g.textTop : g.vPad) + "px", 313 paddingBottom: g.vPad + "px", 314 paddingLeft: Math.round(g.sidePadPx) + "px", 315 paddingRight: Math.round(g.d3) + "px",
316 transform: (g.tx || g.ty) ? "translate(" + g.tx + "px," + g.ty + "px)" : "none" 317 }); 318 } 319 320 var title = q(box, ".bzf-title"); 321 var lines = qa(box, ".bzf-line"); 322 var titleSelf = g.heroStack ? "stretch" : (g.mainJustify === "center" ? "center" : "flex-start"); 323 css(title, { 324 margin: "0px", 325 font: "900 " + g.titleSize + "px/" + g.titleLeading + " var(--font-sans, SimplerPro, sans-serif)", 326 letterSpacing: "-0.02em", 327 whiteSpace: g.titleOneLine ? "nowrap" : "normal", 328 textAlign: g.heroStack ? "right" : (g.mainJustify === "center" ? "center" : "right"), 329 alignSelf: titleSelf, 330 width: "", 331 paddingBottom: "0px" 332 }); 333 for (var i = 0; i < lines.length; i++) { 334 css(lines[i], { 335 display: g.titleOneLine ? "inline" : "block", 336 width: g.titleOneLine ? "auto" : "fit-content", 337 whiteSpace: "nowrap", 338 marginInline: g.heroStack ? "0" : "auto", 339 fontSize: "" 340 }); 341 } 342 var anim = q(box, ".bzf-title-anim"); 343 var grad = "linear-gradient(90deg,#6edcfb,#0073ff,#6edcfb)"; 344 if (g.heroStack) { 345 css(anim, { 346 display: "contents", 347 background: "none", 348 color: "inherit", 349 webkitTextFillColor: "inherit", 350 animation: "none", 351 filter: "none" 352 }); 353 for (i = 0; i < lines.length; i++) { 354 css(lines[i], { 355 backgroundImage: grad, 356 backgroundSize: "200% 100%", 357 webkitBackgroundClip: "text", 358 backgroundClip: "text", 359 color: "transparent", 360 webkitTextFillColor: "transparent", 361 animation: "bzf-grad 3.5s linear infinite", 362 filter: "none" 363 }); 364 } 365 } else { 366 css(anim, { 367 display: "inline-block", 368 backgroundImage: grad, 369 backgroundSize: "200% 100%", 370 webkitBackgroundClip: "text", 371 backgroundClip: "text", 372 color: "transparent", 373 webkitTextFillColor: "transparent", 374 animation: "bzf-grad 3.5s linear infinite", 375 filter: "none" 376 }); 377 } 378 379 var plate = q(box, ".bzf-plate"); 380 css(plate, { 381 position: "relative", 382 zIndex: "4", 383 width: "100%", 384 maxWidth: g.plateMaxW + "px", 385 marginTop: g.heroStack ? "0px" : "2px", 386 marginBottom: "0px", 387 marginLeft: "auto", 388 marginRight: (g.heroStack || g.mainJustify === "center") ? "auto" : "0px", 389 padding: g.padY + "px " + g.padX + "px", 390 gap: Math.max(6, g.rowsGap) + "px", 391 transform: g.plateYRide ? "translateY(" + g.plateYRide + "px)" : "none", 392 transformOrigin: "top right" 393 }); 394 css(q(box, ".bzf-plate-head"), { fontSize: Math.round(g.head) + "px" }); 395 css(q(box, ".bzf-plate-items"), { gap: Math.max(6, g.itemGap) + "px" }); 396 var iconH = g.pl.iconSize || 36; 397 var icons = qa(box, ".bzf-icon, .bzf-icon-img, .bzf-icon svg"); 398 for (var j = 0; j < icons.length; j++) css(icons[j], { height: iconH + "px" }); 399 var labs = qa(box, ".bzf-benefit-label"); 400 for (var k = 0; k < labs.length; k++) css(labs[k], { fontSize: g.label + "px" }); 401 var plusSz = g.bpMobile ? 20 : 26; 402 css(q(box, ".bzf-plus"), { 403 fontSize: plusSz + "px", 404 lineHeight: plusSz + "px", 405 marginTop: Math.max(0, Math.round((iconH - plusSz) / 2)) + "px", 406 marginBottom: "0px" 407 }); 408 var amtPx = Math.round(g.amount * (g.pl.priceScale || 125) / 125); 409 css(q(box, ".bzf-price"), { height: Math.max(g.bpMobile ? 34 : 40, Math.round(amtPx * 1.5)) + "px" }); 410 var pLbl = g.bpMobile ? g.label : Math.round(g.priceLbl * (g.pl.priceScale || 125) / 125); 411 var ptxt = qa(box, ".bzf-price-txt"); 412 for (var p = 0; p < ptxt.length; p++) css(ptxt[p], { fontSize: pLbl + "px" }); 413 css(q(box, ".bzf-cur"), { fontSize: Math.round(amtPx * 0.62) + "px" }); 414 css(q(box, ".bzf-num"), { fontSize: amtPx + "px" }); 415 css(q(box, ".bz-glowbtn"), { 416 height: (g.bpMobile ? 42 : 58) + "px", 417 fontSize: g.cta + "px" 418 }); 419 if (box._bzfBp !== g.bp) { 420 box._bzfHeroPass = 0; 421 box._bzfBp = g.bp; 422 } 423 424 var legalInner = q(box, ".bzf-legal-inner"); 425 css(legalInner, { 426 maxWidth: (1600 + 2 * g.gMargin) + "px", 427 padding: (g.bpMobile ? 14 : 18) + "px " + g.gMargin + "px " + (g.bpMobile ? 10 : 12) + "px" 428 });
429 css(q(box, ".bzf-legal p"), { fontSize: g.legalSize + "px" }); 430 431 box._bzf = g; 432 box._bzfSlotH = slotH; 433 } 434 435 function fontsReady() { 436 return !(document.fonts && document.fonts.status === "loading"); 437 } 438 439 function fitTitle(box) { 440 var g = box._bzf; if (!g) return; 441 var title = q(box, ".bzf-title"); 442 var col = q(box, ".bzf-col"); 443 var plate = q(box, ".bzf-plate"); 444 if (!title || !col) return; 445 title.style.fontSize = g.titleSize + "px"; 446 title.style.width = ""; 447 var lines = qa(box, ".bzf-line"); 448 var i; 449 for (i = 0; i < lines.length; i++) lines[i].style.fontSize = ""; 450 451 if (g.heroStack) { 452 title.style.fontSize = g.titleSize + "px"; 453 title.style.maxWidth = "none"; 454 title.style.overflow = "visible"; 455 var bannerW = box.clientWidth || 0; 456 if (fontsReady() && bannerW > 80) { 457 for (i = 0; i < lines.length; i++) { 458 lines[i].style.fontSize = ""; 459 lines[i].style.maxWidth = "none"; 460 lines[i].style.overflow = "visible"; 461 var nat = lines[i].scrollWidth || lines[i].offsetWidth || 0; 462 if (nat > bannerW - 20) { 463 lines[i].style.fontSize = Math.min(1, (bannerW - 20) / nat).toFixed(3) + "em"; 464 } 465 } 466 } 467 return; 468 } 469 470 if (g.titleOneLine && !g.heroStack) { 471 var card = plate ? plate.offsetWidth : 0; 472 var cs = getComputedStyle(col); 473 var colW = col.clientWidth - (parseFloat(cs.paddingInlineStart) || 0) - (parseFloat(cs.paddingInlineEnd) || 0); 474 var cap = Math.min(colW, card > 80 ? card : colW); 475 if (fontsReady()) { 476 var sw = title.scrollWidth || 0; 477 if (cap > 40 && sw > cap + 1) { 478 var r = Math.max(0.72, cap / sw); 479 title.style.fontSize = Math.max(Math.round(g.titleSize * 0.72), Math.floor(g.titleSize * r)) + "px"; 480 } 481 } 482 if (card > 80) title.style.width = Math.round(card) + "px"; 483 return; 484 } 485 486 var host = g.heroStack ? (q(box, ".bzf-copy") || col) : col; 487 var hcs = getComputedStyle(host); 488 var target = host.clientWidth - (parseFloat(hcs.paddingInlineStart) || 0) - (parseFloat(hcs.paddingInlineEnd) || 0); 489 if (!(target > 40) || !lines.length) return; 490 if (fontsReady()) { 491 for (i = 0; i < lines.length; i++) { 492 var nat = lines[i].scrollWidth || lines[i].offsetWidth || 0; 493 if (nat > target + 1) { 494 var lr = Math.min(1, target / nat); 495 lines[i].style.fontSize = lr.toFixed(3) + "em"; 496 } 497 } 498 } 499 title.style.maxWidth = "100%"; 500 } 501 502 function fitPlateWidth(box) { 503 var g = box._bzf; if (!g) return; 504 var col = q(box, ".bzf-col"); 505 var plate = q(box, ".bzf-plate"); 506 if (!col || !plate) return; 507 var cs = getComputedStyle(col); 508 var colInner = col.clientWidth - (parseFloat(cs.paddingInlineStart) || 0) - (parseFloat(cs.paddingInlineEnd) || 0); 509 var capW = Math.min(colInner, g.plateMaxW); 510 var need = 2 * 112 + (((g.itemGap || 16) + 26)) + 2 * g.padX; 511 capW = Math.max(capW, Math.min(colInner, need)); 512 plate.style.maxWidth = Math.max(120, Math.round(capW)) + "px"; 513 plate.style.width = "100%"; 514 } 515 516 function fitLabels(box) { 517 var g = box._bzf; if (!g) return; 518 var labs = qa(box, ".bzf-benefit-label"); 519 if (!labs.length) return; 520 var want = g.label; 521 var floor = Math.max(11, Math.round(want * 0.72)); 522 var f = want; 523 var fits = function (size) { 524 var ok = true; 525 for (var i = 0; i < labs.length; i++) { 526 labs[i].style.fontSize = size + "px"; 527 var lh = parseFloat(getComputedStyle(labs[i]).lineHeight) || size * 1.25; 528 if ((labs[i].offsetHeight || 0) > lh * 2 + 1) ok = false; 529 } 530 return ok; 531 }; 532 while (f > floor && !fits(f)) f -= 1; 533 } 534 535 function fitPlateHeight(box) { 536 var g = box._bzf; 537 var plate = q(box, ".bzf-plate"); 538 var col = q(box, ".bzf-col"); 539 if (!g || !plate || !col) return;
540 var ride = g.plateYRide || 0; 541 plate.style.marginBottom = "0px"; 542 if (g.heroStack) { 543 plate.style.transform = ride ? "translateY(" + ride + "px)" : "none"; 544 return; 545 } 546 var H = plate.offsetHeight || 0; 547 if (H <= 0) return; 548 var title = q(box, ".bzf-title"); 549 var other = title ? (title.offsetHeight || 0) : 0; 550 var slotH = box.clientHeight || g.height; 551 var total = slotH - 2 * g.vPad - g.legalReserve; 552 var gapUsed = g.textGap; 553 var pad = 2; 554 var budget = total - other - gapUsed; 555 var sv = (!(budget > 40)) ? 1 : Math.max(0.86, Math.min(1, budget / (H + pad))); 556 plate.style.transformOrigin = "top right"; 557 var xf = []; 558 if (sv < 0.999) { 559 xf.push("scale(" + sv.toFixed(3) + ")"); 560 plate.style.marginBottom = Math.round((sv - 1) * H) + "px"; 561 } 562 if (ride) xf.push("translateY(" + ride + "px)"); 563 plate.style.transform = xf.length ? xf.join(" ") : "none"; 564 } 565 566 function fitHero(box) { 567 var g = box._bzf; 568 if (!g || !g.heroStack) return; 569 var img = q(box, ".bzf-presenter-mob"); 570 var col = q(box, ".bzf-col"); 571 var plate = q(box, ".bzf-plate"); 572 var legal = q(box, ".bzf-legal"); 573 var heroEl = q(box, ".bzf-hero"); 574 if (!img || !col || !plate || !heroEl) return; 575 var cap = Math.max(90, Math.round(g.heroH)); 576 var cur = Math.round(parseFloat(img.style.height) || 180); 577 var cardBottom = plate.getBoundingClientRect().bottom - (g.plateYRide || 0); 578 var limit = (legal ? legal.getBoundingClientRect().top : heroEl.getBoundingClientRect().bottom) - 52; 579 var slack = Math.round(limit - cardBottom); 580 var want = cur; 581 if (slack < -1) want = cur + slack; 582 else if (slack > 14 && cur < cap) want = cur + (slack - 10); 583 want = Math.max(72, Math.min(cap, Math.round(want / 4) * 4)); 584 var shareW = g.heroWShare * (col.offsetWidth || 320); 585 var floorH = Math.max(96, Math.round((heroEl.clientHeight || 400) * 0.22)); 586 want = Math.max(floorH, Math.round(Math.min(want, shareW / (601 / 545)) / 4) * 4); 587 if (want !== cur && (box._bzfHeroPass = (box._bzfHeroPass || 0) + 1) <= 6) { 588 img.style.height = want + "px"; 589 } 590 } 591 592 function layout(box) { 593 if (box._bzfLock) return; 594 box._bzfLock = true; 595 try { 596 apply(box); 597 fitPlateWidth(box); 598 fitTitle(box); 599 fitLabels(box); 600 fitPlateHeight(box); 601 fitHero(box); 602 } finally { 603 box._bzfLock = false; 604 } 605 } 606 607 function boot() { 608 var box = document.getElementById("banner-private-hp-ai-fiber"); 609 if (!box) return; 610 var run = function () { layout(box); }; 611 run(); 612 [60, 200, 500].forEach(function (t) { setTimeout(run, t); }); 613 if (document.fonts && document.fonts.ready) document.fonts.ready.then(run); 614 if (typeof ResizeObserver !== "undefined") { 615 var ro = new ResizeObserver(function () { run(); }); 616 ro.observe(box); 617 } else { 618 window.addEventListener("resize", run); 619 } 620 } 621 622 if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot); 623 else boot(); 624})();
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.