Reviews
:root {
–red: #EB2027;
–glow: #EB202709;
–font: ‘glue-gun’;
}
#judgeme_product_reviews .jdgm-rev-widg .jdgm-star.jdgm–on:before,
#main .jdgm-star {
color: var(–red);
}
#main .jdgm-histogram__bar {
background-color: #040404;
}
#main .jdgm-rev__icon::after, #main .jdgm-rev__buyer-badge {
background-color: var(–red);
}
#main .jdgm-histogram__bar-content {
background: var(–red)
}
#main .jdgm-paginate__page {
color: var(–red);
}
@font-face {
font-family: ‘glue-gun’;
src: url(“https://melonoptics.com/wp-content/themes/melonoptics/assets/fonts/Glue-Gun.otf”);
}
#main .product-title-wrap {
margin: 1rem auto 0.3rem;
max-width: 600px;
}
#main .product-title-wrap .product_title {
font-size: clamp( 32px, 8vw, 48px) !important;
}
#main .product-options .entry-summary {
display: flex;
flex-direction: column;
}
#main .product-options .entry-summary .availability_date {
order: 1;
margin: -1rem 0 1rem;
}
#main .product-options .entry-summary .melon-optics-product-info {
order: 2;
}
#main .product-title-wrap + .jdgm-widget {
margin :0 auto 0.3rem;
max-width: 600px;
width: 100%;
}
#main .product-title-wrap .product_title {
font-family: ‘glue-gun’ !important;
font-size: 48px;
letter-spacing: 1px;
font-weight: 400;
}
#main .jdgm-preview-badge .jdgm-star {
color: #EB2027;
}
@media (max-width: 1060px) {
.variations_form table.variations {
margin-top: 0 !important;
}
}
body.woocommerce.single-product #primary {
background-color: #fff;
}
.woocommerce div.product .woocommerce-product-gallery {
aspect-ratio: 5/4;
padding-block-end: 0 !important;
}
.woocommerce div.product .product-options div.images .woocommerce-product-gallery__trigger {
top: initial;
bottom: 0;
background: var(–red);
}
.woocommerce div.product .product-options div.images .woocommerce-product-gallery__trigger::before {
border-color: #fff;
}
.woocommerce div.product .product-options div.images .woocommerce-product-gallery__trigger::after {
background: #fff;
}
#main .iconic-woothumbs-images-wrap .slick-slider {
display: flex;
align-items: center;
}
#main .iconic-woothumbs-all-images-wrap .slick-dots {
height: 6px;
bottom: 0;
}
#main .iconic-woothumbs-all-images-wrap .slick-dots button {
height: 6px;
}
#main .iconic-woothumbs-all-images-wrap .slick-dots .slick-active button {
background-color: var(–red)!important;
}
#main .iconic-woothumbs-images-wrap .slick-slider,
#main .product-options .woocommerce-product-gallery .woocommerce-product-gallery__image {
aspect-ratio: 5/4;
}
@media (max-width: 1060px) {
#main .product-options .woocommerce-product-gallery__wrapper {
margin-top: 0 !important;
}
#main .iconic-woothumbs-images-wrap .slick-slider,
#main .product-options .woocommerce-product-gallery,
#main .product-options .woocommerce-product-gallery .woocommerce-product-gallery__image {
aspect-ratio: 5/3.5;
}
}
.woocommerce div.product div.images img {
height: 100%;
object-fit: contain;
}
.woocommerce div.product form.cart .variations .label {
text-transform: uppercase;
}
#main .variable-items-wrapper .variable-item {
border: solid #040404 2px;
border-radius: 0 !important;
color: #EB2027;
box-shadow: none;
font-size: 24px;
font-weight: 700;
flex: 1 1 auto;
height: auto;
}
#main .variable-items-wrapper .variable-item.selected {
border-color: #EB2027;
}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
display: flex;
flex-wrap: wrap;
}
.stock {
color: #EB2027;
}
.woocommerce div.product form.cart .variations td {
position: relative;
}
.reset_variations {
position: absolute;
right: 0px;
top: -24px;
line-height: 1;
color: #EB2027;
}
.stock.in-stock {
display: none;
}
.entry-summary .quantity {
display: none !important;
}
.quantity.spinners-added input.minus, .quantity.spinners-added input.plus {
color: #EB2027;
box-shadow: none;
padding: 0 0.5em;
line-height: 44px;
font-size: 21px;
font-style: normal;
}
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart .button:hover {
background-color: #EB2027;
color: #040404;
font-size: 28px;
flex: 1 1 auto;
letter-spacing: 0.4px;
height: 48px;
padding: 0;
}
#main .kt-blocks-accordion-header {
font-weight: 800;
}
.melon-optics-product-info {
padding: 0;
}
.melon-optics-product-info-pane .kt-accordion-panel .kt-accordion-panel-inner {
padding: 1px 12px 5px;
}
#main .section-heading {
font-family: ‘glue-gun’ !important;
font-size: clamp(60px, 15vw, 120px);
font-weight: 400;
font-style: normal;
margin: 1rem auto;
text-align: center;
line-height: 0.8;
-webkit-text-stroke-color: var(–red);
-webkit-text-stroke-width: clamp(1px, 2vw, 2px);
}
.skull-bg {
position: relative;
padding: 2rem 0;
margin: -2rem 0;
}
.skull-bg-wrap {
position: absolute;
top: 0;
bottom: 0;
left: -5vw;
right: -5vw;
display: flex;
flex-direction: column;
z-index: -1;
}
.skull-bg-line {
flex: 1 1 auto;
background-image: url(https://melonoptics-stg.cc02.convesio.saucal.io/eu/wp-content/uploads/sites/2/skull-space.svg);
background-repeat: repeat-x;
background-size: auto 100%;
opacity: 0.15;
}
.skull-bg-line-1 {
background-position: clamp(30px, 6vw, 50px) 0;
}
.max-width-5ch {
max-width: 5ch;
}
.woocommerce-product-details__short-description {
display: none;
}
#main .product-options .price {
margin: 0;
font-weight: 900;
font-style: italic;
font-size: 2rem;
position: relative;
}
/* #main .product-options .price::before {
content: “”;
height: 4px;
position: absolute;
bottom: 0;
width: 20%;
background: var(–red);
}
#main .product-options .price::after {
content: “”;
height: 4px;
display: block;
background-color: #040404;
} */
.style-1, .style-2, .style-3 {
max-width: 11ch;
margin: 0;
font-style: italic;
line-height: 0.9;
text-transform: uppercase;
font-weight: 900;
}
.style-4 {
font-weight: 900;
margin: 0;
}
.style-5 {
text-transform: uppercase;
font-size: 1.8rem;
line-height: 1;
font-weight: 900;
margin: -1rem 0 1rem 0 !important;
}
.heading-content {
margin: 11% 0 3%;
padding: 1rem 0;
}
.heading-content {
margin-top: clamp(4rem, 16%, 19rem);
}
.heading-content h2 {
margin: 0;
}
.heading-content:has(.zeiss-sonar-logo) {
margin-bottom: 0;
}
.heading-content:has(.zeiss-logo, .zeiss-sonar-logo) h2 {
max-width: 12ch;
}
[data-content] {
–offset-color: transparent;
–outline-size: clamp(1px, 0.02175em, 3px);
–stroke-offset: clamp(-10px, -0.2em, -1px);
position: relative;
color: var(–color);
-webkit-text-stroke: var(–outline-size) var(–stroke-color);
}
[data-content]::after {
color: var(–offset-color);
content: attr(data-content);
-webkit-text-stroke: var(–outline-size) var(–stroke-offset-color);
display: block;
position: absolute;
top: 0;
z-index: -1;
}
.style-1 {
–color: #4DB9A8;
–stroke-color: #000;
–offset-color: transparent;
–stroke-offset-color: #4DB9A8;
–stroke-offset: clamp(-32px, -0.1em, -2px);
margin: 0 auto;
display: block;
font-size: clamp(1.5rem, 2vw, 2rem);
text-align: center;
max-width: 20ch;
}
.style-1::after {
transform: translateX(var(–stroke-offset));
}
.style-3::after {
transform: translateX(var(–stroke-offset));
}
.style-2 {
max-width: 11ch;
line-height: 0.9;
text-transform: uppercase;
font-weight: 900;
–color: #000;
–stroke-color: #ff724b;
–offset-color: transparent;
–stroke-offset-color: #fff;
–stroke-offset: clamp(2px, 0.1em, 32px);
font-size: clamp(2.5rem, 9vw, 9rem);
text-align: center;
text-shadow: 8px 10px 10px rgb(132 129 255 / 0.7);
}
.style-2::after {
transition: all 0.3s ease-out;
opacity: 0;
}
.style-2:hover::after {
transform: translateX(var(–stroke-offset));
opacity: 1;
}
.style-3 {
–color: #fff;
–stroke-color: #000;
–offset-color: #4DB9A8;
–stroke-offset-color: #000;
–outline-size: clamp(1px, 0.02175em, 2px);
–stroke-offset: clamp(2px, 0.1em, 32px);
font-size: lamp(2.05rem, 6.55vw, 5rem);
text-align: left;
max-width: 90%;
}
.style-3::before {
content: “”;
top: clamp( 2px, 0.2vw, 4px );
bottom: clamp( 2px, 0.2vw, 4px );
right: clamp( -2rem, -2vw, -0.5rem );
left: clamp( -0.5rem, -1vw, -0.2rem );
position: absolute;
background-color: #000;
z-index: -2;
transform-origin: right center;
transform: skew(-12deg, 0deg) scaleX(0);
transition: transform 0.3s cubic-bezier(0.4, 0.14, 0.29, 0.9), opacity 0.3s cubic-bezier(0.4, 0.14, 0.29, 0.9);
opacity: 0;
}
.heading-2:hover .style-3::before {
transition-timing-function: cubic-bezier(0.4, 0.19, 0.28, 1.2);
transform-origin: left center;
transition-duration: 0.5s;
transform: skew(-12deg, 0deg) scaleX(1);
opacity: 1;
}
.style-3:nth-child(1):before {
transition-delay: 0;
}
.style-3:nth-child(2):before {
transition-delay: 0.05s;
}
.style-3:nth-child(3):before {
transition-delay: 0.1s;
}
.style-4 {
text-transform: none;
max-width: initial;
font-size: 1.5rem;
}
.bg {
max-width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
}
.heading {
max-width: 100%;
height: auto;
display: grid;
grid-template: “container”;
place-items: center;
margin: 4rem 0;
isolation: isolate;
}
.heading > * {
grid-area: container;
}
.heading-2 {
display: flex;
flex-direction: column;
align-items: self-start;
max-width: 1260px;
margin: 4rem auto;
padding-left: 2rem;
isolation: isolate;
font-style: italic;
line-height: 0.9;
text-transform: uppercase;
font-weight: 900;
}
.heading-2 > *:nth-child(2) {
transform: translateX(-0.175em)
}
.heading-2 > *:nth-child(3) {
transform: translateX(-0.5em);
}
.font-size-3 {
font-size: clamp(1.45rem, 4.7vw, 3.6rem);
}
.font-size-4 {
font-size: clamp(2.05rem, 6.55vw, 5rem);
}
.font-size-5 {
font-size: clamp(2.4rem, 7.7vw, 5.9rem);
}
.zeiss-sonar-logo {
margin-left: auto;
display: block;
max-width: max(120px, 10vw);
height: auto;
}
.zeiss-logo {
margin-left: auto;
display: block;
max-width: max(120px, 8vw);
height: auto;
}
.slider {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2rem;
max-width: 1260px;
margin: 0 auto;
overflow-x: auto;
padding: 0 3rem 2rem;
scroll-snap-type: x mandatory;
box-sizing: content-box;
isolation: isolate;
/* scroll-snap-align: start; */
}
.features {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 4rem;
max-width: 960px;
justify-content: space-around;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-width: 260px;
max-width: 50%;
}
.card img {
height: 125px;
width: auto;
max-width: 125px;
object-fit: contain;
}
.card h3 {
font-size: clamp(1.5rem, 4vw, 2.5rem);
max-width: 12ch;
line-height: 1;
margin: 1rem 0;
}
.card p {
font-size: clamp(0.9rem, 4vw, 1.2rem);
font-weight: 300;
max-width: 30ch;
}
.slide {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
max-width: 100vw;
min-width: 300px;
scroll-snap-align: center;
}
.slide img {
max-width: 100%;
height: auto;
}
.photo-wrap {
display: flex;
align-items: flex-end;
}
.slide .slide-heading {
flex: 1 1 auto;
display: flex;
align-items: center;
}
.slide .min-height-6 {
min-height: 6.5rem;
}
.slide .photo {
max-height: 340px;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.slide:hover .photo {
transform: rotateY(180deg);
}
.slide p {
flex: 10 1 auto;
margin: 1rem;
font-size: clamp(0.9rem, 4vw, 1.2rem);
font-weight: 300;
}
.slide strong {
font-size: 1.2rem;
}
.slide .slide-heading h2 {
margin: 1rem 0;
}
.wp-block-button__link {
font-family: ‘proxima-nova’, sans-serif !important;
font-size: clamp( 1.1rem, 2vw, 1.6rem ) !important;
padding-left: 1em !important;
padding-right: 1em !important;
}
.melon-review-info p {
margin: 0;
font-size: clamp(1.2rem, 2vw, 1.6rem);
}
.melon-review-info {
margin-bottom: 1rem !important;
}
.melon-review-score {
background-color: #8481FF;
color: #fff;
border: solid #040404 1px;
padding: 0 0.5rem;
}
.melon-reviews-info-section h3 {
font-style: italic;
font-size: clamp(1.4rem, 2vw, 2rem);
}
:root {
–page-width: min(5000px, 500vw);
}
@keyframes animate {
from {transform: translateX(calc( var(–page-width) * -1 – var(–shift)));}
to {transform: translateX(calc( var(–page-width) / -5 – var(–shift)));}
}
.banner {
–rotation: 5deg;
–animation-speed: 60s;
padding-block: 1rem;
width: 120%;
transform: rotate(calc(var(–rotation) * -1 )) translateX(-10%);
}
.banner-footer {
–rotation: 3deg;
transform: rotate(calc(var(–rotation) * -1 )) translate(-10%, calc(3rem + 1vw));
}
.banner-size-2 {
–animation-speed: 60s;
–letter-height: clamp(32px, 2vw, 196px);
}
.banner-line {
–shift: 0px;
width: calc( var(–page-width) * 2 );
height: var(–letter-height);
background-size: auto 100%;
transform: translateX(calc( var(–page-width) * -1 – var(–shift)));
animation-name: animate;
animation-duration: var(–animation-speed);
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
will-change: transform;
}
.banner-line:nth-child(odd) {
–shift: calc(var(–letter-height) * 3.4166666);
transform: translateX(calc( var(–page-width) * -1 – var(–shift)));
animation-duration: calc(var(–animation-speed) / 2);
animation-direction: alternate-reverse;
}
.banner-line-red-text {
background-image: url(https://melonoptics.com/wp-content/uploads/Banner-Text-v2.svg);
}
.banner-line-white-text {
background-image: url(https://melonoptics.com/wp-content/uploads/Banner-Text-White.svg);
}
.mb–3rem {
margin-block-end: -3rem;
}
#colophon {
z-index: 99;
}
#judgeme_product_reviews {
max-width: 1260px;
padding: 0 40px;
}
#judgeme_product_reviews .jdgm-rev-widg {
display: flex;
gap: 1rem 4rem;
flex-wrap: wrap;
justify-content: center;
}
#judgeme_product_reviews .jdgm-rev-widg .jdgm-rev-widg__body .jdgm-rev-widg__reviews {
padding: 0;
}
#judgeme_product_reviews .jdgm-rev-widg__summary {
float: none;
text-align: center;
}
.jdgm-widget-actions-wrapper {
display: none;
}
.jdgm-rev-widg__body {
flex: 1 1 480px;
}
.jdgm-histogram__row {
display: flex;
gap: 0.5rem 1rem;
}
.jdgm-histogram__clear-filter {
display: none;
}
.jdgm-rev-widg__paginate-spinner-wrapper {
flex: 1 1 100%;
}
(function ($) {
// $(‘.entry-summary .jdgm-preview-badge’).replaceWith( $(‘.product-description .jdgm-preview-badge’) );
$(“#judgeme_product_reviews .jdgm-rev-widg__summary”).prependTo(“#judgeme_product_reviews”);
const app = {
resize: {
init: () => {
window.addEventListener(‘resize’, () => {
clearTimeout(app.resize.timeOut);
app.resize.timeOut = setTimeout(app.title.calculate, 200);
})
},
timeOut: {},
},
title: {
calculate: () => {
if (screen.width .jdgm-widget’).prependTo(‘.product-options’);
$(‘.entry-summary > .product-title-wrap’).prependTo(‘.product-options’);
return;
}
$(‘.product-options > .jdgm-widget’).prependTo(‘.entry-summary’);
$(‘.product-options > .product-title-wrap’).prependTo(‘.entry-summary’);
}
}
}
app.title.calculate();
app.resize.init();
})(window.jQuery);
