{"id":1712,"date":"2026-07-03T13:22:39","date_gmt":"2026-07-03T13:22:39","guid":{"rendered":"https:\/\/distinctiverepetition.com\/?page_id=1712"},"modified":"2026-09-04T13:11:23","modified_gmt":"2026-09-04T13:11:23","slug":"homepage-consectutive","status":"publish","type":"page","link":"https:\/\/distinctiverepetition.com\/","title":{"rendered":"Homepage 2026"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/distinctiverepetition.com\/?page_id=1712\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ================= VIDEO BACKGROUND ================= *\/\n\n.desktop-video {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  object-fit: cover;\n  z-index: -999999;\n  pointer-events: none;\n}\n\n\n\/* ================= MOBILE STAGE ================= *\/\n\n.mobile-stage {\n  position: fixed;\n  inset: 0;\n  z-index: -999999;\n  pointer-events: none;\n}\n\n\n\/* ================= MOBILE GIF ================= *\/\n\n#mobileGif {\n  position: fixed;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: none;\n  pointer-events: none;\n}\n\n#mobileGif.active {\n  display: block;\n  z-index: -999999;\n}\n\n\n\/* ================= UI ================= *\/\n\n.media-counter {\n  position: fixed;\n  bottom: 20px;\n  left: 40px;\n  z-index: -999;\n  font-size: 1rem;\n  font-family: inherit;\n  line-height: 1.5;\n}\n\n.media-back,\n.media-arrow {\n  position: fixed;\n  bottom: 20px;\n  z-index: -999;\n  font-family: inherit;\n  font-size: 1.5rem;\n  line-height: 1;\n  text-decoration: none;\n  color: inherit;\n  padding: 0 6px;\n}\n\n\n\/* ================= DESKTOP BREAKPOINTS ================= *\/\n\n@media (min-width: 1024px) {\n\n  .media-counter {\n    left: 60px;\n  }\n\n  .media-back {\n    right: 95px;\n  }\n\n  .media-arrow {\n    right: 75px;\n  }\n\n}\n\n\n@media (min-width: 1440px) {\n\n  .media-counter {\n    left: 135px;\n  }\n\n  .media-back {\n    right: 135px;\n  }\n\n  .media-arrow {\n    right: 115px;\n  }\n\n}\n\n\n@media (min-width: 1920px) {\n\n  .media-counter {\n    left: 160px;\n  }\n\n  .media-back {\n    right: 160px;\n  }\n\n  .media-arrow {\n    right: 140px;\n  }\n\n}\n\n\n\/* ================= MOBILE ================= *\/\n\n@media (max-width: 768px) {\n\n  .media-counter {\n    left: 50%;\n    transform: translateX(-50%);\n    text-align: center;\n  }\n\n  .media-back {\n    left: 20px;\n    right: auto;\n  }\n\n  .media-arrow {\n    right: 20px;\n    left: auto;\n  }\n\n  a.media-back,\n  a.media-arrow {\n    -webkit-tap-highlight-color: transparent;\n    color: #fff;\n  }\n\n}\n\n\n\/* ================= INVISIBLE HOTSPOTS ================= *\/\n\n.video-hotspot {\n  position: fixed;\n  top: 0;\n  z-index: 999999;\n  display: block;\n  background: transparent;\n  border: none;\n  text-decoration: none;\n}\n\n\n\/* LEFT HOTSPOT *\/\n\n.hotspot-left {\n  left: 0;\n  width: 50vw;\n  height: 100px;\n}\n\n\n\/* RIGHT HOTSPOT *\/\n\n.hotspot-right {\n  right: 0;\n  width: 50px;\n  height: 100px;\n}\n\n\n\/* MOBILE HOTSPOT SIZING *\/\n\n@media (max-width: 768px) {\n\n  .hotspot-left {\n    width: 50vw;\n    height: 50px;\n  }\n\n  .hotspot-right {\n    right: 0;\n    width: 100px;\n    height: 50px;\n  }\n\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  \/*\n   * BREAKPOINT\n   *\n   * 768px and below = MOBILE \/ GIFS\n   * 769px and above = DESKTOP \/ VIDEOS\n   *\/\n\n  const isDesktop = window.innerWidth >= 769;\n\n\n  \/* ================= DESKTOP VIDEOS ================= *\/\n\n  const desktopVideos = [\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/01\/DR_AA_Sequence_V6.mp4\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/01\/DR_DT_V7.mp4\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/06\/DR_DT_V8.mp4\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_DT_V9.mp4\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_DT_V10.mp4\"\n\n  ];\n\n\n  \/* ================= MOBILE GIFS ================= *\/\n\n  const mobileGIFs = [\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/01\/DR_MB_Gif_1.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/09\/DR_MB_23.gif\",\n    \n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/09\/DR_MB_V16.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/01\/DR_MB_Gif_2.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/06\/DR_MB_Gif_6.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/08\/DR_AA_MB_V2_1.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/01\/DR_MB_Gif_3.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V17.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V21.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/01\/DR_MB_Gif_4.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/08\/DR_MB_V8.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/01\/DR_MB_Gif_5.gif\",\n\n\"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V20_1.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V16.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V22.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/08\/DR_MB_V6.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V18.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V15.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/07\/DR_MB_V13.gif\",\n\n    \"https:\/\/distinctiverepetition.com\/wp-content\/uploads\/2026\/08\/DR_AA_MB_V2_2.gif\",\n\n  ];\n\n\n  \/* ================= STATE ================= *\/\n\n  let index = 0;\n\n\n  \/* ================= ELEMENTS ================= *\/\n\n  const counter = document.getElementById(\"mediaCounter\");\n\n  const nextBtn = document.getElementById(\"mediaArrow\");\n\n  const backBtn = document.getElementById(\"mediaBack\");\n\n  const desktopVideo = document.getElementById(\"desktopVideo\");\n\n  const mobileGif = document.getElementById(\"mobileGif\");\n\n\n  \/* ================= COUNTER ================= *\/\n\n  function updateCounter(total) {\n\n    if (!counter) return;\n\n    counter.textContent = `${index + 1} \/ ${total}`;\n\n  }\n\n\n  \/* ================= DESKTOP VIDEO LOOP ================= *\/\n\n  function enableLoop(video) {\n\n    if (!video || video.dataset.loopReady) return;\n\n    video.dataset.loopReady = \"true\";\n\n    video.addEventListener(\"ended\", function () {\n\n      video.currentTime = 0;\n\n      video.play().catch(() => {});\n\n    });\n\n  }\n\n\n  \/* ================= LOAD DESKTOP ================= *\/\n\n  function loadDesktop(i) {\n\n    if (!desktopVideo) return;\n\n    const total = desktopVideos.length;\n\n    const videoURL = desktopVideos[i % total];\n\n\n    enableLoop(desktopVideo);\n\n\n    \/*\n     * Stop the previous video\n     *\/\n\n    desktopVideo.pause();\n\n\n    \/*\n     * Load the new video\n     *\/\n\n    desktopVideo.src = videoURL;\n\n    desktopVideo.load();\n\n\n    \/*\n     * Start playback\n     *\/\n\n    desktopVideo.play().catch(() => {});\n\n\n    \/*\n     * Update counter\n     *\/\n\n    updateCounter(total);\n\n  }\n\n\n  \/* ================= LOAD MOBILE GIF ================= *\/\n\n  function loadMobile(i) {\n\n    if (!mobileGif) return;\n\n    const total = mobileGIFs.length;\n\n    const gifURL = mobileGIFs[i % total];\n\n\n    \/*\n     * Load GIF\n     *\/\n\n    mobileGif.src = gifURL;\n\n\n    \/*\n     * Show GIF\n     *\/\n\n    mobileGif.classList.add(\"active\");\n\n\n    \/*\n     * Update counter\n     *\/\n\n    updateCounter(total);\n\n  }\n\n\n  \/* ================= LOAD CURRENT MEDIA ================= *\/\n\n  function load(i) {\n\n    if (isDesktop) {\n\n      loadDesktop(i);\n\n    } else {\n\n      loadMobile(i);\n\n    }\n\n  }\n\n\n  \/* ================= NEXT ================= *\/\n\n  function next() {\n\n    const total = isDesktop\n      ? desktopVideos.length\n      : mobileGIFs.length;\n\n\n    index = (index + 1) % total;\n\n\n    load(index);\n\n  }\n\n\n  \/* ================= PREVIOUS ================= *\/\n\n  function prev() {\n\n    const total = isDesktop\n      ? desktopVideos.length\n      : mobileGIFs.length;\n\n\n    index = (index - 1 + total) % total;\n\n\n    load(index);\n\n  }\n\n\n  \/* ================= INITIAL LOAD ================= *\/\n\n  load(index);\n\n\n  \/* ================= NEXT BUTTON ================= *\/\n\n  if (nextBtn) {\n\n    nextBtn.addEventListener(\"click\", function (e) {\n\n      e.preventDefault();\n\n      next();\n\n    });\n\n  }\n\n\n  \/* ================= BACK BUTTON ================= *\/\n\n  if (backBtn) {\n\n    backBtn.addEventListener(\"click\", function (e) {\n\n      e.preventDefault();\n\n      prev();\n\n    });\n\n  }\n\n});\n<\/script>\n\n<div id=\"mediaCounter\" class=\"media-counter\"><\/div>\n\n<a href=\"#\" id=\"mediaBack\" class=\"media-back\">\u2190<\/a>\n<a href=\"#\" id=\"mediaArrow\" class=\"media-arrow\">\u2192<\/a>\n\n<!-- DESKTOP VIDEO -->\n\n<video id=\"desktopVideo\" class=\"desktop-video\" muted=\"\" playsinline=\"\" webkit-playsinline=\"\" autoplay=\"\" preload=\"auto\" disablepictureinpicture=\"\">\n<\/video>\n\n\n<!-- MOBILE GIF -->\n\n<div class=\"mobile-stage\">\n  <img id=\"mobileGif\" class=\"mobile-gif\" alt=\"\">\n<\/div>\n\n\n<!-- INVISIBLE HOTSPOTS -->\n\n<a class=\"video-hotspot hotspot-left\" href=\"https:\/\/distinctiverepetition.com\/\" aria-label=\"Left menu\">\n<\/a>\n\n<a class=\"video-hotspot hotspot-right\" href=\"https:\/\/distinctiverepetition.com\/?page_id=2\" aria-label=\"Right menu\">\n<\/a>\n","protected":false},"excerpt":{"rendered":"<p>\u2190 \u2192<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1712","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/distinctiverepetition.com\/index.php?rest_route=\/wp\/v2\/pages\/1712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/distinctiverepetition.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/distinctiverepetition.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/distinctiverepetition.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/distinctiverepetition.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1712"}],"version-history":[{"count":0,"href":"https:\/\/distinctiverepetition.com\/index.php?rest_route=\/wp\/v2\/pages\/1712\/revisions"}],"wp:attachment":[{"href":"https:\/\/distinctiverepetition.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}