/* ══════════════════════════════════════════════════════════ VIDEO TESTIMONIAL HOVER (text + overlay only) ══════════════════════════════════════════════════════════ */ /* Default states */ [data-show-text] .trust__overlay { opacity: 0; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); } [data-show-text] [data-trust-text] { opacity: 0; transform: translateY(100%); transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } /* Hover state */ [data-show-text]:hover .trust__overlay { opacity: 1; } [data-show-text]:hover [data-trust-text] { opacity: 1; transform: translateY(0%); } /* ══════════════════════════════════════════════════════════ CURSOR ══════════════════════════════════════════════════════════ */ /* Hide cursor by default */ .cursor { opacity: 0; pointer-events: none; /*transition: opacity 0.3s ease, width 0.4s cubic-bezier(0.16, 1, 0.3, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1);*/ } /* Show cursor when inside .trust section */ body:has(.trust__grid:hover) .cursor { opacity: 1; } /* Expand cursor when hovering products */ body:has([data-show-product]:hover) .cursor { width: 8em; height: 2em; border-radius: 1em; } /* Show cursor text when hovering products */ body:has([data-show-product]:hover) .cursor__text { opacity: 1; transform: translateY(0%); } @media (hover: none) and (pointer: coarse) { .cursor { display: none; } } /* ══════════════════════════════════════════════════════════ CUSTOM CURSOR ══════════════════════════════════════════════════════════ */ /*body:has( a:hover) .cursor,*/ /*body:has( button:hover) .cursor,*/ /*body:has([data-show-product]:hover) .cursor {*/ /* width: 8em;*/ /* height: 2em;*/ /* border-radius: 1em;*/ /*background-color: rgba(255, 76, 36, 0.3);*/ /*}*/ /* Animate cursor text on product hover */ /*body:has([data-show-product]:hover) .cursor__text {*/ /* opacity: 1;*/ /* transform: translateY(0%);*/ /*}*/ /*@media (hover: none) and (pointer: coarse) {*/ /* .cursor {*/ /* display: none;*/ /* }*/ /*}*/ /* ══════════════════════════════════════════════════════════ TRUST TESTIMONIAL HOVER ANIMATION ══════════════════════════════════════════════════════════ */ /* Default state - Product elements hidden */ /*[data-trust-image-product] {*/ /* opacity: 0;*/ /* transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);*/ /*}*/ /*[data-trust-text] {*/ /* opacity: 0;*/ /* transform: translateY(100%);*/ /* transition:*/ /* opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),*/ /* transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);*/ /*}*/ /* Main image visible by default */ /*[data-trust-image-main] {*/ /* opacity: 1;*/ /* transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);*/ /*}*/ /* Hover state - Swap visibility */ /*[data-show-product]:hover [data-trust-image-main] {*/ /* opacity: 0;*/ /*}*/ [data-show-product]:hover [data-trust-image-product] { opacity: 1; } [data-show-product]:hover [data-trust-text] { opacity: 1; transform: translateY(0%); } /* Optional: Smooth pointer events to prevent flicker */ /*[data-trust-image-product],*/ /*[data-trust-text] {*/ /* pointer-events: none;*/ /*}*/ /*[data-show-product]:hover [data-trust-image-product],*/ /*[data-show-product]:hover [data-trust-text] {*/ /* pointer-events: auto;*/ /*}*/ /*---------------------------------------------------------------------------------——— */ /*———— MASK VIDEO SECTION ———— */ /*---------------------------------------------------------------------------------——— */ /* Section */ /*[data-video-mask-section] {*/ /* position: relative;*/ /* min-height: 100vh;*/ /* overflow: hidden;*/ /*}*/ /*.showreel__container {*/ /* position: relative;*/ /* width: 100%;*/ /* height: 100vh;*/ /*}*/ /* Video wrapper - will have CSS mask applied */ [data-video-mask-wrapper] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; /* Initial mask state - small nut shape */ -webkit-mask-size: 13em 13em; mask-size: 13em 13em; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Video itself */ /*.showreel__video {*/ /* width: 100%;*/ /* height: 100%;*/ /*}*/ /*.bunny-bg,*/ /*.bunny-bg__video {*/ /* width: 100%;*/ /* height: 100%;*/ /* object-fit: cover;*/ /*}*/ /* SVG Mask Container - visual reference */ /*[data-video-mask-container] {*/ /* position: absolute;*/ /* top: 50%;*/ /* left: 50%;*/ /* transform: translate(-50%, -50%);*/ /* width: 150px;*/ /* Match initial mask size */ /* height: auto;*/ /* pointer-events: none;*/ /* z-index: 10;*/ /* Will fade out during animation */ /* opacity: 1;*/ /* transition: opacity 0.4s ease;*/ /*}*/ [data-video-mask-container] svg { width: 100%; height: auto; display: block; } /* Hide SVG after reveal */ [data-video-mask-section].mask-revealed [data-video-mask-container] { opacity: 0; } /*Play button .showreel__play {*/ /* position: absolute;*/ /* top: 50%;*/ /* left: 50%;*/ /* transform: translate(-50%, -50%);*/ /* width: 60px;*/ /* height: 60px;*/ /* display: flex;*/ /* align-items: center;*/ /* justify-content: center;*/ /* background: rgba(255, 255, 255, 0.1);*/ /* border-radius: 50%;*/ /* backdrop-filter: blur(10px);*/ /* transition: all 0.3s ease;*/ /* pointer-events: auto;*/ /*}*/ /*.showreel__play:hover {*/ /* background: rgba(255, 255, 255, 0.2);*/ /* transform: translate(-50%, -50%) scale(1.1);*/ /*}*/ /*Optional: Decorative text .showreel__text {*/ /* position: absolute;*/ /* top: 20%;*/ /* left: 50%;*/ /* transform: translateX(-50%);*/ /* z-index: 5;*/ /* pointer-events: none;*/ /*}*/ /*---------------------------------------------------------------------------------——— */ /*———— NAVIGATION ———— */ /*---------------------------------------------------------------------------------——— */ :root { /*--nav-bg-height: 100vh;*/ /*--nav-bg-height: calc(100vh - 4em);*/ --nav-bg-height: calc(20em + calc(2em + 3em + 2.5em + 3em)); --cubic-default: cubic-bezier(0.525, 0, 0, 1); --duration-fast: 0.2s; --duration-normal: 0.450s; --color-dark: #2b1d15; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible { outline: 1px solid var(--color-dark); } .nav-bg { transition: height var(--duration-normal) var(--cubic-default); } .page-bg { transition: opacity var(--duration-fast) var(--cubic-default); } .nav { transition: color var(--duration-fast) var(--cubic-default); } .nav-button { transition: all var(--duration-fast) var(--cubic-default); } /* ———— SHOW DROPDOWN ———— */ .nav-dropdown { transition: all var(--duration-fast) ease, transform var(--duration-normal) var(--cubic-default); } [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover+.nav-dropdown, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-visible+.nav-dropdown, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:hover, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:focus-within { opacity: 1; visibility: visible; pointer-events: auto; } /*———— STYLING WHEN DROPDOWN IS OPEN ———— */ :is(body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover), body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-visible), body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within), body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:hover), body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:focus-within)) { .nav-bg { height: var(--nav-bg-height); } .page-bg { opacity: 1; } .nav { color: var(--color-dark); } .nav-button { border-color: var(--color-dark); color: var(--color-dark); } .nav-button.is--primary { background-color: var(--color-dark); border-color: var(--color-dark); color: #FFF; } } /*———— DROPDOWN TOGGLE ———— */ .nav-link__dropdown-icon { transition: transform var(--duration-normal) var(--cubic-default); } [data-dropdown-toggle] { transition: background-color var(--duration-fast) var(--cubic-default); } /*———— DESKTOP HOVER AND FOCUS ———— */ @media screen and (min-width: 768px) { [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover .nav-link__dropdown-icon, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus .nav-link__dropdown-icon, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within .nav-link__dropdown-icon, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:hover) .nav-link__dropdown-icon, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:focus-within) .nav-link__dropdown-icon { transform: rotate(180deg); } [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within, [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:hover), [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:focus-within) { background-color: #EBE7E4; } } /*———— DROPDOWN CONTENT LIST ITEMS ———— */ .nav-dropdown__content-li { transition: all var(--duration-normal) var(--cubic-default); transition-delay: 0.18s; opacity: 0; transform: translate(4em, 0px); } .nav-dropdown__content-li:nth-child(2) { transition-delay: 0.24s; } .nav-dropdown__content-li:nth-child(3) { transition-delay: 0.3s; } .nav-dropdown__content-li:nth-child(4) { transition-delay: 0.36s; } .nav-dropdown__content-li:nth-child(5) { transition-delay: 0.44s; } body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover) [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover+.nav-dropdown .nav-dropdown__content-li, body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-visible) .nav-dropdown__content-li, body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within) .nav-dropdown__content-li, body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:hover) .nav-dropdown__content-li, body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:focus-within) .nav-dropdown__content-li { opacity: 1; transform: translate(0em, 0px); } /*———— DROPDOWN LINKS + IMAGES ———— */ .nav-dropdown__link:hover .nav-dropdown__img-overlay, .nav-dropdown__link:focus-visible .nav-dropdown__img-overlay { opacity: 0; } .nav-dropdown__link:hover .nav-dropdown__img, .nav-dropdown__link:focus-visible .nav-dropdown__img { transform: scale(1.1); } /*———— DROPDOWN LINKS ———— */ .nav-dropdown__link.is--static:hover, .nav-dropdown__link.is--static:focus-visible { background: #D7D1CD; } /* ———— NAV LINKS ———— */ a.nav-link .nav-link__label::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: currentColor; transition: transform var(--duration-normal) var(--cubic-default); transform: scale(0, 1); transform-origin: right center; } a.nav-link:hover .nav-link__label::after, a.nav-link:focus-visible .nav-link__label::after { transform: scale(1, 1); transform-origin: left center; } /* ———— MOBILE STATE WITH BURGER MENU ———— */ @media screen and (max-width: 767px) { :root { --nav-bg-height: 100dvh; } .nav-dropdown__overflow { transition: grid-template-rows var(--duration-normal) var(--cubic-default); } .nav-center { transition: all var(--duration-normal) var(--cubic-default), opacity var(--duration-fast) var(--cubic-default); } .menu-button__line { transition: all var(--duration-normal) var(--cubic-default); } /* ———— STYLES WHEN MENU IS OPEN ———— */ :is([data-menu-status="open"]) { color: var(--color-dark); .menu-button__line:nth-of-type(1) { transform: translate(0px, 0.125em) rotate(135deg); background-color: #FFF; } .menu-button__line:nth-of-type(2) { transform: translate(0px, -0.175em) rotate(-135deg); background-color: #FFF; } .nav-bg { height: var(--nav-bg-height); } .page-bg { opacity: 1; } .nav-button.is--primary { background-color: var(--color-dark); border-color: var(--color-dark); color: #FFF; } .nav-center { opacity: 1; visibility: visible; transform: translate(0px, 0em); transition-delay: 0.1s; } } [data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__overflow { grid-template-rows: 1fr; } [data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li { opacity: 1; transform: translate(0em, 0px); } [data-dropdown-toggle="open"] .nav-link__dropdown-icon { transform: rotate(180deg); } }