https://www.tatler.com/verso/static/3945.e9e8b5ac0471bfa292e0.js

1"use strict";(globalThis.webpackChunkverso=globalThis.webpackChunkverso||[]).push([[3945],{87098(e,t,o){o.d(t,{j:()=>r.A});var r=o(26022)},51257(e,t,o){o.d(t,{A:()=>S,W:()=>v});var r=o(96540),n=o(5556),i=o.n(n),s=o(32485),l=o.n(s),c=o(31989),a=o(76399),d=o(73730),h=o(49741),u=o(38080),p=o(31581),m=o(36185),b=o(13465),y=o(34967),g=o(60824);const f=()=>window.Kendra?.ADS??null,k=new URLSearchParams(window.location.search);function w(e){const t=e.replace(/.*\.(.*)$/,"$1");return parseInt(t.split("x")[1],10)}let $=null;function C(){if($)return $;const e=document.querySelector('[class*="StickyHeroAdWrapper"]');if(!e)return null;if(e.closest(".one-nav"))return null;const t=e.querySelector(".ad.should-hold-space"),o=e.querySelector(".ad__slot.ad__slot--hero");if(!t||!o)return null;const r=parseInt(window.getComputedStyle(o).height,10)||60,n=parseInt(window.getComputedStyle(t).minHeight,10)||60;return $={adWrapper:t,wrapper:e,adSlot:o,minHeight:n,height:r},$}function v(e,t){const o=C();if(!o)return e;const{wrapper:r,minHeight:n,height:i,adWrapper:s}=o,l=r.classList.contains("ad-stickyhero-issticky"),c=Math.abs(n-i),a=Math.max(0,n-c);return l&&e&&t>n?(s.style.minHeight=`${i}px`,!1):l&&!e&&t<a?(s.style.minHeight=`${n}px`,!0):e}function A(e){const{className:t,configuredComponentRef:o,defaultCreativeHeightDesktop:n,defaultCreativeHeightMobile:i,holdAdHeightsConfig:{shoulHoldStickyHeroAd:s=!1}={},isNoAds:p,isStickyDisabledMobile:b,navVariation:y="",onFilled:v,setIsHeroAdVisible:A}=e,[S,R]=(0,r.useState)(!1),[_,H]=(0,r.useState)(!1),[E,I]=(0,r.useState)(!1),[B,N]=(0,r.useState)(250),D=(0,r.useRef)(!1),T=(0,r.useRef)([]),L=(0,r.useRef)(null),M=(0,r.useRef)(null),x=(0,r.useRef)(null),W=(0,r.useRef)(null),z=(0,r.useRef)(null),K=(0,r.useRef)(null),q=(0,r.useRef)(null),O=(0,r.useRef)(null),Y="sticky-hero"===k?.get("test")||s,U=(0,r.useRef)(!1),V=(0,r.useCallback)(()=>{T.current.forEach(e=>e?.off?.()),T.current=[],L.current?.(),M.current?.(),x.current?.(),W.current?.(),z.current&&(clearTimeout(z.current),z.current=null),K.current&&(clearTimeout(K.current),K.current=null),q.current&&(clearTimeout(q.current),q.current=null),O.current&&(clearTimeout(O.current),O.current=null)},[]),P=(0,r.useCallback)(()=>{V(),H(e=>{if(!e)return e;const t=C();

1if(t){const{adWrapper:e,minHeight:o}=t;e.style.minHeight=`${o}px`}return N(e=>(window.pageYOffset<e/2?(I(!1),R(!1),A?.(!1)):(A?.(!1),K.current=setTimeout(()=>{I(!1),R(!1),A?.(!1)},1e3)),e)),!1})},[V,A]),Z=(0,r.useCallback)(()=>{const e=f();if(Y){if(e){const t=e.on(g.c.LIBRARY_SLOT_RENDER_ENDED_EMPTY,e=>{"hero_0"===e.slotElementId&&P()});T.current.push(t)}else window.cnBus&&(x.current=window.cnBus.on("#.hero_0.empty",()=>{P()}));window.cnBus&&(W.current=window.cnBus.on("cnePlayer.stickyVideo.activated",()=>{P()}))}else{z.current=setTimeout(()=>P(),3e4);const t=()=>{O.current=setTimeout(()=>{D.current||P()},2e3)};if(e){const o=e.on(g.c.LIBRARY_STICKY_HERO_IMPRESSION_VIEWABLE,t);T.current.push(o)}else window.cnBus&&(M.current=window.cnBus.on("ads.stickyBanner.hero.impressionViewable",t))}},[Y,P]),j=(0,r.useCallback)(e=>{R(!0),N(e),A?.(!0),q.current=setTimeout(()=>{I(!0),H(!0),Z()},1e3)},[A,Z]),F=(0,r.useCallback)(e=>{let t,o;if(e?.size)t=e.size[1]??250,o=e.size[0]??0;else{const[[e]]=window.cnBus.history("ads.stickyBanner.hero.slotRenderEnded.#");t=w(e);const r=e.replace(/.*\.(.*)$/,"$1");o=parseInt(r.split("x")[0],10)||0}let r=t;if($?.adWrapper){if(1===t&&o>0){r=$.adWrapper.offsetWidth/o}$.height=Math.round(r)}j(t)},[j]),G=(0,r.useCallback)(()=>{D.current=!0},[]);(0,r.useEffect)(()=>{if(U.current)return;U.current=!0;const e=f();if(e){const t=e.history().filter(e=>e.channel===g.c.LIBRARY_STICKY_HERO_RENDER_ENDED);if(0===t.length){const t=e.on(g.c.LIBRARY_STICKY_HERO_RENDER_ENDED,F);T.current.push(t)}else{const e=t[0].value,o=e.size?.[1]??250;N(o),R(!0),H(!0),Z(),A?.(!0)}}else if(window.cnBus?.history){const e=window.cnBus.history("ads.stickyBanner.hero.slotRenderEnded.#");if(0===e.length)L.current=window.cnBus.on("ads.stickyBanner.hero.slotRenderEnded.#",F);else{const t=w(e[0][0]);N(t),R(!0),H(!0),Z(),A?.(!0)}}},[F,Z,A]),(0,r.useEffect)(()=>()=>{V(),$=null},[V]);const X=y.toLowerCase().includes("withsearchbar"),J=(0,r.useMemo)(()=>{if(S)return{"ad-stickyhero-issticky":!0,"ad-stickyhero-sticky-animating":E,[`ad-stickyhero-sticky-${B}`]:!_,"ad-stickyhero-sticky-visible":_}},[S,E,B,_]);return p?null:r.createElement(m.IO,{ref:o,className:l()(t,"ad-stickyhero",b?"ad-stickyhero-disable-mobile":"ad-stickyhero-enable-mobile",{"with-link-banner":y.toLowerCase().includes("linkbanner"),"with-searchbar":X},J),"data-testid":"sticky-hero-ad",onMouseEnter:G,onTouchStart:G,defaultCreativeHeightDesktop:n,defaultCreativeHeightMobile:i},S&&_&&r.createElement(d.A.Utility,{isIconButton:!0,ButtonIcon:a.A,className:"ad-stickyhero-button",label:"Close",onClickHandler:P,role:"button","aria-expanded":a.A}),r.createElement(u.Z,{group:"ads"},r.createElement(c.A,{position:"hero",onFilled:v,shouldHoldSpace:!0})),r.createElement(u.Z,{group:"consumer-marketing"},r.createElement(h.A,{position:"display-hero"})))}A.propTypes={configuredComponentRef:i().func,defaultCreativeHeightDesktop:i().number,defaultCreativeHeightMobile:i().number,className:i().string,isNoAds:i().bool,isStickyDisabledMobile:i().bool,navVariation:i().string,onFilled:i().func,setIsHeroAdVisible:i().func,holdAdHeightsConfig:i().shape({shoulHoldStickyHeroAd:i().bool})},A.displayName="StickyHeroAd";const S=(0,y.A)((0,p.N)((0,b.y)(A,"StickyHeroAd")),{keysToPluck:["isNoAds","holdAdHeightsConfig"]})},69741(e,t,o){o.d(t,{dX:()=>g,tZ:()=>y});var r=o(38267),n=o(26865),i=o(96472),s=o(18730);const{timingButtonDefault:l}=i.L6,c=(0,n.Kq)(3),a=({selectionControlBackgroundColor:e,selectionControlBorderColor:t,selectionControlSize:o})=>r.AH`
2    transition-property: background, border;
3    transition-duration: ${l};
4    transition-timing-function: ease-in;
5    position: relative;
6    border-width: 1px;
7    border-style: solid;
8    ${({theme:e})=>(0,n._o)(e,"border-color",t)};
9    ${({theme:t})=>(0,n._o)(t,"background-color",e)};
10    width: ${o};
11    height: ${o};
12    pointer-events: none;
13
14    &::before {
15      display: block;
16      position: absolute;
17      top: 50%;
18      left: 50%;
19      transition-property: background, border;
20      transition-duration: ${l};
21      transition-timing-function: ease-in;
22      opacity: 0;
23      content: '';
24    }
25  `,d=r.Ay.div.withConfig({displayName:"DiscoverySelectionControlStyledCheckbox"})`

26  ${a({selectionControlBackgroundColor:"colors.interactive.base.white",selectionControlBorderColor:"colors.interactive.base.black",selectionControlSize:c})}
27
28  &::before {
29    ${(({checkboxIconBorderWidth:e,checkboxIconColor:t})=>r.AH`
30    transform: translate(-50%, -60%) rotate(45deg);
31    border-width: 0 ${e} ${e} 0;
32    border-style: solid;
33    ${({theme:e})=>(0,n._o)(e,"border-color",t)};
34    width: 25%;
35    height: 75%;
36  `)({checkboxIconBorderWidth:"2px",checkboxIconColor:"colors.interactive.base.white"})}
37  }
38`,h=r.Ay.div.withConfig({displayName:"DiscoverySelectionControlStyledRadio"})`
39  ${a({selectionControlBackgroundColor:"colors.interactive.base.white",selectionControlBorderColor:"colors.interactive.base.black",selectionControlSize:c})}
40
41  border-radius: 100%;
42
43  &::before {
44    ${({theme:e})=>(({radioIconColor:e,theme:t})=>`\n    border-radius: 100%;\n    transform: translate(-50%, -50%);\n    border-radius: 100%;\n    ${(0,n._o)(t,"border-color",e)};\n    width: 50%;\n    height: 50%;\n  `)({radioIconColor:"colors.interactive.base.black",theme:e})}
45  }
46`,u=({theme:e})=>r.AH`
47    ${(({selectionControlBackgroundColor:e,theme:t})=>`\n    &:checked,\n    &:active {\n      + ${h}::before {\n        opacity: 1;\n      }\n      + ${d} {\n        &::before {\n          opacity: 1;\n        }\n        ${(0,n._o)(t,"border-color","colors.interactive.base.brand-primary")};\n        ${(0,n._o)(t,"background-color",e)};\n      }\n    }\n\n    &:disabled {\n      + ${h},\n        + ${d} {\n        ${(0,n._o)(t,"border-color","colors.interactive.base.light")};\n      }\n    }\n\n    &:disabled:checked {\n      + ${d} {\n        ${(0,n._o)(t,"background-color","colors.interactive.base.light")};\n\n      + ${h}::before {\n        ${(0,n._o)(t,"background-color","colors.interactive.base.light")};\n      }\n    }\n  `)({selectionControlBackgroundColor:"colors.interactive.base.brand-primary",theme:e})}
48  `,p=({theme:e})=>r.AH`
49    cursor: default;
50    pointer-events: none;
51    ${(0,n._o)(e,"color","colors.interactive.base.light")};
52  `,m=r.Ay.input.withConfig({displayName:"DiscoverySelectionControlNativeRadio"})`
53  ${({theme:e})=>u({theme:e})}
54`,b=r.Ay.input.withConfig({displayName:"DiscoverySelectionControlNativeCheckbox"})`
55  ${({theme:e})=>u({theme:e})}
56`,y=r.Ay.label.withConfig({displayName:"DiscoverySelectionControlLabelWrapper"})`
57  display: grid;
58  position: relative;
59  grid-column-gap: ${(0,n.Kq)(2)};
60  grid-template-columns: ${c} auto;
61  grid-row-gap: ${(0,n.Kq)(.5)};
62
63  @media (min-width: ${i.LO.md}) {
64    grid-column-gap: ${(0,n.Kq)(2)};
65    grid-row-gap: ${(0,n.Kq)(1)};
66  }
67
68  &:hover {
69    ${d} {
70      ${({theme:e})=>(0,n._o)(e,"border-color","colors.interactive.base.brand-primary")};
71    }
72
73    ${h} {
74      ${({theme:e})=>(0,n._o)(e,"border-color","colors.interactive.base.brand-primary")};
75    }
76
77    ${b}:checked + ${d} {
78      ${({theme:e})=>(0,n._o)(e,"background","colors.interactive.base.black")};
79      ${({theme:e})=>(0,n._o)(e,"border-color","colors.interactive.base.black")};
80    }
81
82    ${m}:checked + ${h} {
83      ${({theme:e})=>(0,n._o)(e,"background","colors.interactive.base.white")};
84    }
85  }
86
87  ${({isDisabled:e,theme:t})=>e&&p({theme:t})};
88`,g=((0,r.Ay)(s.v).withConfig({displayName:"DiscoverySelectionControlContext"}).attrs(e=>({as:"div",colorToken:"colors.discovery.body.white.description",typeIdentity:"typography.definitions.globalEditorial.context-primary",...e}))`
89  ${({theme:e,typeIdentity:t})=>(0,n.Gg)(e,t)}
90  grid-column-start: 2;
91  margin-bottom: ${(0,n.Kq)(.5)};
92  ${({theme:e,colorToken:t})=>(0,n._o)(e,"color",t)};
93  ${({isDisabled:e,theme:t})=>e&&p({theme:t})};
94  @media (min-width: ${i.LO.md}) {
95    margin-bottom: 0;
96  }
97`,(0,r.Ay)(s.v).withConfig({displayName:"DiscoverySelectionControlHed"}).attrs(e=>({as:"span",colorToken:"colors.discovery.body.white.heading",typeIdentity:"typography.definitions.discovery.hed-core-secondary",...e}))`
98  ${({theme:e,typeIdentity:t})=>(0,n.Gg)(e,t)}
99  ${({theme:e,colorToken:t})=>(0,n._o)(e,"color",t)};
100  ${({isDisabled:e,theme:t})=>e&&p({theme:t})};
101`);(0,r.Ay)(s.v).withConfig({displayName:"DiscoverySelectionControlDek"}).attrs(e=>({as:"span",colorToken:"colors.discovery.body.white.description",typeIdentity:"typography.definitions.discovery.description-core",...e}))`
102  ${({theme:e,typeIdentity:t})=>(0,n.Gg)(e,t)}
103  ${({theme:e,colorToken:t})=>(0,n._o)(e,"color",t)};
104  grid-column-start: 2;
105  ${({isDisabled:e,theme:t})=>e&&p({theme:t})};
106`},79499(e,t,o){o.d(t,{Ay:()=>a});var r=o(29421);const{MultipleSelect:n}=r.A,{MultipleSelectSearchableWithMenuControls:i}=r.A,{MultipleSelectWithMenuControls:s}=r.A,{Searchable:l}=r.A,{Static:c}=r.A,a=r.A},62930(e,t,o){o.d(t,{Ay:()=>i,jl:()=>r.A});var r=o(32272),n=o(13644);const i={Circle:r.A,Vogue:n.A}},55918(e,t,o){o.d(t,{Ze:()=>n.Z});var r=o(57743),n=o(39836);r.u,n.Z},72550(){},57744(e,t,o){o.d(t,{M3:()=>s.A,Tk:()=>r.A,ro:()=>n.A,z5:()=>i.A});var r=o(82407),n=o(26410),i=(o(79810),o(27543)),s=o(34967)},68073(e,t,o){o.d(t,{A:()=>y});var r=o(58156),n=o.n(r),i=o(44383),s=o.n(i),l=o(18938),c=o.n(l),a=o(44377),d=o.n(a),h=o(15272),u=o(97906),p=o(25053),m=o(98183);const b={clip:e=>n()(e,"renditions.mp4",[]).find(e=>"master"===e.resolution)??{},photo:e=>n()(e,"aspectRatios.master",{})};function y(e,t,o,r,i){const l=h.A.get(o),a=(0,p.A)(e,r);if("clip"===e.modelName&&!e.renditions?.mp4)return{};const y=c()(t).map(([t,o])=>{const r={...o},c=s()(o,["aspectRatio","height","width","sizes"]);let d;"clip"!==e.modelName||r.resolution||function(e,{mp4:t}){if(t.length){const o=t.find(({resolution:e})=>"master"===e),{height:r,width:n}=o,i=`${n}:${r}`,{width:s,height:l,aspectRatio:c}=e,a=c&&"master"!==c?c:i,[d,h]=a.split(":"),u=l||s/(d/h)||o.height,p=t.reduce((e,t)=>

106t.height>=u&&t.height<e.height?t:e,o);e.resolution=p.resolution}}(r,e.renditions),"clip"===e.modelName&&e.isInlineEmbed?d=e.thumbnails[0]?new URL(e.thumbnails[0]):"":(d=new URL(l.buildUrl(e,r)),"clip"===e.modelName&&"master"!==r.resolution&&function(e,t){const o=e.pathname.split("/"),r=o.pop().split(".");r.length>1&&r.pop(),r.push(t),o.push(r.join(".")),e.pathname=o.join("/")}(d,"mp4"));const h={...c,url:d?.href||"",srcset:void 0},p=n()(h,"aspectRatio","master");if("master"===p){const t=b[e.modelName]??b.photo;!function(e,{height:t,width:o}){if(t>0&&o>0){const r=o/t;e.width?e.height=Math.round(e.width/r):e.height&&(e.width=Math.round(e.height*r))}}(h,t(e))}let y;if("clip"!==e.modelName&&h.width){const t=(0,u.A)(h.width,i);h.srcset=t.map(t=>{const r=new URL(l.buildUrl(e,{...o,width:t}));return a&&(y=(0,m.A)(t,h.height,p),r.searchParams.append("overlay",`${a}-${y}`)),`${r.href} ${t}w`}).join(", ")}else delete h.srcset;if(a){y=(0,m.A)(h.width,h.height,p);const e=new URL(h.url);e.searchParams.append("overlay",`${a}-${y}`),h.url=e.href}return[t,h]});return d()(y)}},86456(e,t,o){var r=o(84743);o.n(r)().defineLocale("zh-Hant-TW",{parentLocale:"zh-tw"})}}]);