/* ---------------------------------------------------- Marc's cool custom pop-ups (v1.1.2 finally out of beta!) ..for Time Out Sports Updated: 2025-02-26 ---------------------------------------------------- */ /* -- Custom pop-ups ------------------------------- */ /* ------------------------------------------------- */ .box {                                /* conatainer for 'size chart' BUTTON */ /* old.. width: 40%; */ /* new..  width: 100%; height: 100%;  ----- */ margin: 0 auto; background: rgba(255,255,255,0.2); padding: 0px; border: 2px solid #fff; border-radius: 2px/5px; background-clip: padding-box; text-align: center; } .button { font-size: 1em; padding: 10px; color: #fff; border: 2px solid #06D85F; border-radius: 20px/50px; text-decoration: none; cursor: pointer; transition: all 0.3s ease-out; } .button:hover { background: #06D85F; }  /* ------------------------------ */  .overlayModal {                                /* this is the POP-UP container (when someone adds an img URL to the metafields: Marc's Size Chart URL 1-4) */ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); overflow-y: auto; } .overlayModal img {                            /* this fits the image to its container (so it's visible no matter the resolution) */ position: absolute; top: 20%; left: 50%; transform: translateX(-50%); height: auto; @media (max-width: 767px) {             /* MOBILE view */ width: 90%; } @media (min-width: 768px) {             /* DESKTOP view */ width: 75%; } } .overlayModal:target { visibility: visible; opacity: 1; }  .overlay {                                /* this is the POP-UP container */ z-index: 1000000000000; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms;              /* fade-in */ visibility: hidden; opacity: 0; overflow-y: auto; } .overlay img {                            /* this fits the image to its container (so it's visible no matter the resolution) */ position: absolute; top: 20%; left: 50%; transform: translateX(-50%); height: auto; @media (max-width: 767px) {             /* MOBILE view */ width: 90%; } @media (min-width: 768px) {             /* DESKTOP view */ width: 50%; } } .overlay:target { visibility: visible; opacity: 1; }  .overlayWideImg {                         /* this is the POP-UP container ..for wide images */ z-index: 1000000000000; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms;              /* fade-in */ visibility: hidden; opacity: 0; overflow-x: auto; /* overflow-y: auto; (not needed) */ } .overlayWideImg img {                     /* this fits the image to its container (so it's visible no matter the resolution) */ position: absolute; top: 20%; left: 50%; transform: translateX(-50%); height: auto; @media (max-width: 767px) {             /* MOBILE view */ /*                                    Rotate 90 degrees -cool idea, but meh- ... -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform: rotate(90deg); ... */ width: 90%; } @media (min-width: 768px) {             /* DESKTOP view */ width: 70%; } } .overlayWideImg:target { visibility: visible; opacity: 1; }  .overlayTab {                                /* this is the POP-UP container */ z-index: 1000000000000; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms;              /* fade-in */ visibility: hidden; opacity: 0; overflow-y: auto; } .overlayTab img {                            /* this fits the image to its container (so it's visible no matter the resolution) */ position: absolute; top: 20px; left: 0; height: auto; width: 100%; } .overlayTab:target { visibility: visible; opacity: 1; }  .overlayWideImgTab {                         /* this is the POP-UP container ..for wide images */ z-index: 1000000000000; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms;              /* fade-in */ visibility: hidden; opacity: 0; overflow-x: auto; /* overflow-y: auto; (not needed) */ } .overlayWideImgTab img {                     /* this fits the image to its container (so it's visible no matter the resolution) */ position: absolute; top: 20px; left: 0; height: auto; width: 100%; } .overlayWideImgTab:target { visibility: visible; opacity: 1; } /* ------------------------------------------------- */