{"id":18,"date":"2022-06-07T07:35:21","date_gmt":"2022-06-07T07:35:21","guid":{"rendered":"https:\/\/nicktesting.kinsta.cloud\/shopdiko1\/?page_id=18"},"modified":"2026-05-14T13:23:19","modified_gmt":"2026-05-14T13:23:19","slug":"home","status":"publish","type":"page","link":"https:\/\/villainww.com\/vi\/","title":{"rendered":"HOME"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"18\" class=\"elementor elementor-18\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4618ae0 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"4618ae0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5d784e1 elementor-widget elementor-widget-html\" data-id=\"5d784e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"mael-hero-wrap\" aria-label=\"Villain WW Hero Banner\">\r\n  <section class=\"mael-hero\" aria-label=\"Image banner slider\">\r\n    <div class=\"mael-slide\" id=\"maelHero\">\r\n\r\n      <div class=\"mael-media\">\r\n        <div class=\"mael-slider\" aria-hidden=\"true\">\r\n          <!-- Slide 1 -->\r\n          <div\r\n            class=\"mael-slider-img is-active\"\r\n            style=\"              --desktop-image:url('https:\/\/villainww.com\/wp-content\/uploads\/2026\/05\/VILLAIN-POST-WEB-169.png');              --mobile-image:url('https:\/\/villainww.com\/wp-content\/uploads\/2026\/05\/imgi_26_514197474_17981485673839629_7363728569570605042_n.jpg');            \"\r\n          ><\/div>\r\n\r\n          <!-- Slide 2 -->\r\n          <div\r\n            class=\"mael-slider-img\"\r\n            style=\"              --desktop-image:url('https:\/\/villainww.com\/wp-content\/uploads\/2026\/05\/VILLAIN-POST-WEB-169_1.png');              --mobile-image:url('https:\/\/villainww.com\/wp-content\/uploads\/2026\/05\/VILLAIN-POST-WEB-169_1.png');            \"\r\n          ><\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"mael-overlay\"><\/div>\r\n\r\n      <div class=\"mael-content\">\r\n        <div class=\"mael-eyebrow\">NEW ARRIVALS<\/div>\r\n        <h1 class=\"mael-brand\">VILLAIN WW<\/h1>\r\n        <div class=\"mael-line\"><\/div>\r\n\r\n        <div class=\"mael-actions\">\r\n          <a class=\"mael-btn mael-btn--primary\" href=\"https:\/\/villainww.com\/vi\/shop\/\">\r\n            <span>SHOP NOW<\/span>\r\n          <\/a>\r\n          <a class=\"mael-btn mael-btn--secondary\" href=\"https:\/\/villainww.com\/vi\/collection\/\">\r\n            <span>VIEW CAMPAIGN<\/span>\r\n          <\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"mael-pagination\" aria-label=\"Hero slider pagination\">\r\n        <button class=\"mael-dot is-active\" type=\"button\" aria-label=\"Slide 1\"><\/button>\r\n        <button class=\"mael-dot\" type=\"button\" aria-label=\"Slide 2\"><\/button>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n<\/section>\r\n\r\n<style>\r\n.mael-hero-wrap,\r\n.mael-hero-wrap *{\r\n  box-sizing:border-box;\r\n}\r\n\r\n.mael-hero-wrap{\r\n  position:relative;\r\n  width:100%;\r\n  overflow:hidden;\r\n  background:#000;\r\n  font-family:\"Cabin\",sans-serif !important;\r\n  color:#fff !important;\r\n}\r\n\r\n.mael-hero-wrap a,\r\n.mael-hero-wrap a:link,\r\n.mael-hero-wrap a:visited,\r\n.mael-hero-wrap a:hover,\r\n.mael-hero-wrap a:focus,\r\n.mael-hero-wrap a:active,\r\n.mael-hero-wrap h1,\r\n.mael-hero-wrap div,\r\n.mael-hero-wrap span{\r\n  color:#fff !important;\r\n  -webkit-text-fill-color:#fff !important;\r\n}\r\n\r\n.mael-hero{\r\n  position:relative;\r\n  width:100%;\r\n  overflow:hidden;\r\n  background:#000;\r\n}\r\n\r\n.mael-slide{\r\n  position:relative;\r\n  width:100%;\r\n  min-height:620px;\r\n  aspect-ratio:16 \/ 9;\r\n  background:#000;\r\n  isolation:isolate;\r\n  overflow:hidden;\r\n}\r\n\r\n.mael-media{\r\n  position:absolute;\r\n  inset:0;\r\n  z-index:0;\r\n  overflow:hidden;\r\n  background:#000;\r\n}\r\n\r\n.mael-slider,\r\n.mael-slider-img{\r\n  position:absolute;\r\n  inset:0;\r\n  width:100%;\r\n  height:100%;\r\n}\r\n\r\n.mael-slider{\r\n  z-index:1;\r\n  overflow:hidden;\r\n}\r\n\r\n.mael-slider-img{\r\n  background-image:var(--desktop-image);\r\n  background-position:center;\r\n  background-repeat:no-repeat;\r\n  background-size:cover;\r\n  opacity:0;\r\n  transform:scale(1.035);\r\n  transition:\r\n    opacity 1.25s cubic-bezier(.22,1,.36,1),\r\n    transform 6.8s cubic-bezier(.22,1,.36,1);\r\n  will-change:opacity,transform;\r\n}\r\n\r\n.mael-slider-img.is-active{\r\n  opacity:1;\r\n  transform:scale(1.01);\r\n  z-index:2;\r\n}\r\n\r\n.mael-overlay{\r\n  position:absolute;\r\n  inset:0;\r\n  z-index:3;\r\n  pointer-events:none;\r\n  background:\r\n    linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.04) 38%, rgba(0,0,0,.40)),\r\n    radial-gradient(900px 500px at 50% 72%, rgba(255,255,255,.02), rgba(0,0,0,0));\r\n}\r\n\r\n.mael-content{\r\n  position:absolute;\r\n  left:50%;\r\n  bottom:clamp(54px,6.4vw,96px);\r\n  transform:translateX(-50%);\r\n  z-index:4;\r\n  width:min(760px,92vw);\r\n  padding:0 18px;\r\n  text-align:center;\r\n}\r\n\r\n.mael-eyebrow{\r\n  margin:0 0 12px;\r\n  font-size:10px !important;\r\n  font-weight:600 !important;\r\n  line-height:1.2;\r\n  letter-spacing:.34em;\r\n  text-transform:uppercase;\r\n  color:rgba(255,255,255,.82) !important;\r\n  opacity:0;\r\n  transform:translateY(12px);\r\n  animation:maelFadeUp .9s cubic-bezier(.22,1,.36,1) .12s forwards;\r\n}\r\n\r\n.mael-brand{\r\n  margin:0 0 12px;\r\n  font-size:clamp(22px,2.5vw,36px) !important;\r\n  font-weight:700 !important;\r\n  line-height:1.04;\r\n  letter-spacing:-0.02em;\r\n  text-shadow:0 1px 12px rgba(0,0,0,.14);\r\n  opacity:0;\r\n  transform:translateY(16px);\r\n  animation:maelFadeUp .95s cubic-bezier(.22,1,.36,1) .26s forwards;\r\n}\r\n\r\n.mael-line{\r\n  width:32px;\r\n  height:1px;\r\n  margin:0 auto 18px;\r\n  background:rgba(255,255,255,.68);\r\n  opacity:0;\r\n  transform:scaleX(0);\r\n  transform-origin:center;\r\n  animation:maelLineReveal .85s cubic-bezier(.22,1,.36,1) .42s forwards;\r\n}\r\n\r\n.mael-actions{\r\n  display:flex;\r\n  justify-content:center;\r\n  align-items:center;\r\n  gap:10px;\r\n  flex-wrap:wrap;\r\n  width:100%;\r\n  opacity:0;\r\n  transform:translateY(16px);\r\n  animation:maelFadeUp .95s cubic-bezier(.22,1,.36,1) .62s forwards;\r\n}\r\n\r\n.mael-btn,\r\n.mael-btn:link,\r\n.mael-btn:visited,\r\n.mael-btn:hover,\r\n.mael-btn:focus,\r\n.mael-btn:active,\r\n.mael-btn span{\r\n  color:#fff !important;\r\n  -webkit-text-fill-color:#fff !important;\r\n  text-decoration:none !important;\r\n}\r\n\r\n.mael-hero-wrap a.mael-btn{\r\n  display:inline-flex !important;\r\n  align-items:center !important;\r\n  justify-content:center !important;\r\n  min-width:152px !important;\r\n  height:38px !important;\r\n  padding:0 18px !important;\r\n  border:1px solid rgba(255,255,255,.26) !important;\r\n  border-radius:3px !important;\r\n  font-size:10px !important;\r\n  font-weight:600 !important;\r\n  line-height:1 !important;\r\n  letter-spacing:.16em !important;\r\n  text-transform:uppercase;\r\n  white-space:nowrap;\r\n  background:rgba(255,255,255,.03) !important;\r\n  backdrop-filter:blur(6px);\r\n  -webkit-backdrop-filter:blur(6px);\r\n  box-shadow:none !important;\r\n  transition:\r\n    background .25s ease,\r\n    border-color .25s ease,\r\n    transform .25s ease,\r\n    opacity .25s ease;\r\n}\r\n\r\n.mael-hero-wrap a.mael-btn.mael-btn--primary{\r\n  background:rgba(255,255,255,.06) !important;\r\n  border-color:rgba(255,255,255,.34) !important;\r\n}\r\n\r\n.mael-hero-wrap a.mael-btn.mael-btn--secondary{\r\n  background:rgba(255,255,255,.015) !important;\r\n  border-color:rgba(255,255,255,.22) !important;\r\n}\r\n\r\n.mael-hero-wrap a.mael-btn:hover,\r\n.mael-hero-wrap a.mael-btn:focus{\r\n  transform:translateY(-1px);\r\n  background:rgba(255,255,255,.10) !important;\r\n  border-color:rgba(255,255,255,.52) !important;\r\n}\r\n\r\n\/* Pagination *\/\r\n.mael-pagination{\r\n  position:absolute;\r\n  left:50%;\r\n  bottom:clamp(18px,2.3vw,30px);\r\n  transform:translateX(-50%);\r\n  z-index:6;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  gap:8px;\r\n}\r\n\r\n.mael-dot{\r\n  appearance:none;\r\n  -webkit-appearance:none;\r\n  display:block;\r\n  width:34px;\r\n  height:1px;\r\n  padding:0;\r\n  margin:0;\r\n  border:0;\r\n  background:rgba(255,255,255,.32);\r\n  cursor:pointer;\r\n  overflow:hidden;\r\n  position:relative;\r\n  transition:\r\n    width .45s cubic-bezier(.22,1,.36,1),\r\n    background .35s ease;\r\n}\r\n\r\n.mael-dot::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  left:0;\r\n  top:0;\r\n  width:100%;\r\n  height:100%;\r\n  background:rgba(255,255,255,.92);\r\n  transform:scaleX(0);\r\n  transform-origin:left;\r\n  transition:transform .45s cubic-bezier(.22,1,.36,1);\r\n}\r\n\r\n.mael-dot.is-active{\r\n  width:48px;\r\n  background:rgba(255,255,255,.18);\r\n}\r\n\r\n.mael-dot.is-active::after{\r\n  transform:scaleX(1);\r\n}\r\n\r\n.mael-dot:hover{\r\n  background:rgba(255,255,255,.56);\r\n}\r\n\r\n@keyframes maelFadeUp{\r\n  from{\r\n    opacity:0;\r\n    transform:translateY(16px);\r\n  }\r\n  to{\r\n    opacity:1;\r\n    transform:translateY(0);\r\n  }\r\n}\r\n\r\n@keyframes maelLineReveal{\r\n  from{\r\n    opacity:0;\r\n    transform:scaleX(0);\r\n  }\r\n  to{\r\n    opacity:1;\r\n    transform:scaleX(1);\r\n  }\r\n}\r\n\r\n@media (max-width:767px){\r\n  .mael-slide{\r\n    aspect-ratio:auto;\r\n    height:85svh;\r\n    min-height:520px;\r\n  }\r\n\r\n  .mael-slider-img{\r\n    background-image:var(--mobile-image, var(--desktop-image));\r\n    background-position:center center;\r\n  }\r\n\r\n  .mael-content{\r\n    bottom:64px;\r\n    width:min(94vw,430px);\r\n    padding:0 14px;\r\n  }\r\n\r\n  .mael-eyebrow{\r\n    font-size:9px !important;\r\n    letter-spacing:.24em;\r\n    margin-bottom:10px;\r\n  }\r\n\r\n  .mael-brand{\r\n    font-size:clamp(20px,7vw,30px) !important;\r\n    margin-bottom:10px;\r\n  }\r\n\r\n  .mael-line{\r\n    width:26px;\r\n    margin-bottom:14px;\r\n  }\r\n\r\n  .mael-actions{\r\n    gap:8px;\r\n  }\r\n\r\n  .mael-hero-wrap a.mael-btn{\r\n    min-width:138px !important;\r\n    height:36px !important;\r\n    padding:0 14px !important;\r\n    font-size:9px !important;\r\n    letter-spacing:.12em !important;\r\n    border-radius:2px !important;\r\n  }\r\n\r\n  .mael-pagination{\r\n    bottom:24px;\r\n    gap:7px;\r\n  }\r\n\r\n  .mael-dot{\r\n    width:28px;\r\n  }\r\n\r\n  .mael-dot.is-active{\r\n    width:42px;\r\n  }\r\n}\r\n\r\n@media (max-width:480px){\r\n  .mael-slide{\r\n    height:82svh;\r\n    min-height:500px;\r\n  }\r\n\r\n  .mael-content{\r\n    bottom:58px;\r\n  }\r\n\r\n  .mael-hero-wrap a.mael-btn{\r\n    min-width:132px !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const hero = document.querySelector('#maelHero');\r\n  if (!hero) return;\r\n\r\n  const slides = hero.querySelectorAll('.mael-slider-img');\r\n  const dots = hero.querySelectorAll('.mael-dot');\r\n\r\n  if (!slides.length || !dots.length) return;\r\n\r\n  let current = 0;\r\n  let timer = null;\r\n  const delay = 5200;\r\n\r\n  function goToSlide(index){\r\n    current = index;\r\n\r\n    slides.forEach((slide, i) => {\r\n      slide.classList.toggle('is-active', i === current);\r\n    });\r\n\r\n    dots.forEach((dot, i) => {\r\n      dot.classList.toggle('is-active', i === current);\r\n    });\r\n  }\r\n\r\n  function nextSlide(){\r\n    const next = (current + 1) % slides.length;\r\n    goToSlide(next);\r\n  }\r\n\r\n  function startSlider(){\r\n    stopSlider();\r\n    timer = setInterval(nextSlide, delay);\r\n  }\r\n\r\n  function stopSlider(){\r\n    if (timer) {\r\n      clearInterval(timer);\r\n      timer = null;\r\n    }\r\n  }\r\n\r\n  dots.forEach((dot, index) => {\r\n    dot.addEventListener('click', function(){\r\n      goToSlide(index);\r\n      startSlider();\r\n    });\r\n  });\r\n\r\n  hero.addEventListener('mouseenter', stopSlider);\r\n  hero.addEventListener('mouseleave', startSlider);\r\n\r\n  startSlider();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>NEW ARRIVALS VILLAIN WW SHOP NOW VIEW CAMPAIGN<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/villainww.com\/vi\/wp-json\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/villainww.com\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/villainww.com\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/villainww.com\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/villainww.com\/vi\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":1294,"href":"https:\/\/villainww.com\/vi\/wp-json\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":17556,"href":"https:\/\/villainww.com\/vi\/wp-json\/wp\/v2\/pages\/18\/revisions\/17556"}],"wp:attachment":[{"href":"https:\/\/villainww.com\/vi\/wp-json\/wp\/v2\/media?parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}