/* GLOBAL ----------------------------------------------------------------------------------------------------------------------------- */ /* Remove Scroll Bar ----- */ html { overflow-y: scroll; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer 10+ */ } html::-webkit-scrollbar { /* WebKit */ width: 0; height: 0; } /* Safari Header Render Fix ----- */ .header-wrapper { transform: translateZ(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); -webkit-transform: translateZ(0); -webkit-font-smoothing: antialiased; /* Safari */ } /* TYPOGRAPHY ------------------------------------------------------------------------------------------------------------------------- */ /* Text Selection Color ----- */ ::selection { background: #2480FF; /* WebKit/Blink Browsers */ color: #fff; } ::-moz-selection { background: #2480FF; /* Gecko Browsers */ color: #fff; } /* COMPONENTS ------------------------------------------------------------------------------------------------------------------------- */ /* Bunny HLS Background Video ----- */ /* Animation */ [data-bunny-background-init] :is(.bunny-bg__placeholder, .bunny-bg__loading) { transition: opacity 0.3s linear, visibility 0.3s linear; } /* Placeholder */ [data-bunny-background-init][data-player-status="playing"] .bunny-bg__placeholder, [data-bunny-background-init][data-player-status="paused"] .bunny-bg__placeholder, [data-bunny-background-init][data-player-activated="true"][data-player-status="ready"] .bunny-bg__placeholder { opacity: 0; visibility: hidden; } /* Play/Pause */ [data-bunny-background-init][data-player-status="playing"] .bunny-bg__play-svg, [data-bunny-background-init][data-player-status="loading"] .bunny-bg__play-svg { display: none; } [data-bunny-background-init][data-player-status="playing"] .bunny-bg__pause-svg, [data-bunny-background-init][data-player-status="loading"] .bunny-bg__pause-svg { display: block; } /* Loading */ [data-bunny-background-init][data-player-status="loading"] .bunny-bg__loading { opacity: 1; visibility: visible; } /* Custom Bunny HLS Player (Advanced) ----- */ /* Animation */ [data-bunny-player-init] :is(.bunny-player__placeholder, .bunny-player__dark, .bunny-player__playpause, .bunny-player__loading) { transition: opacity 0.3s linear, visibility 0.3s linear; } /* Placeholder */ [data-bunny-player-init][data-player-status="playing"] .bunny-player__placeholder, [data-bunny-player-init][data-player-status="paused"] .bunny-player__placeholder, [data-bunny-player-init][data-player-activated="true"][data-player-status="ready"] .bunny-player__placeholder { opacity: 0; visibility: hidden; } /* Dark Overlay */ [data-bunny-player-init][data-player-status="paused"] .bunny-player__dark, [data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__dark { opacity: 0.3; } [data-bunny-player-init][data-player-status="playing"] .bunny-player__dark { opacity: 0; } /* Play/Pause */ [data-bunny-player-init][data-player-status="playing"] .bunny-player__playpause, [data-bunny-player-init][data-player-status="loading"] .bunny-player__playpause { opacity: 0; } [data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__playpause { opacity: 1; } [data-bunny-player-init][data-player-status="playing"] .bunny-player__play-svg, [data-bunny-player-init][data-player-status="loading"] .bunny-player__play-svg { display: none; } [data-bunny-player-init][data-player-status="playing"] .bunny-player__pause-svg, [data-bunny-player-init][data-player-status="loading"] .bunny-player__pause-svg { display: block; } /* Loading */ [data-bunny-player-init][data-player-status="loading"] .bunny-player__loading { opacity: 1; visibility: visible; } /* Interface */ .bunny-player__interface { transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1); } [data-bunny-player-init][data-player-status="playing"] .bunny-player__interface, [data-bunny-player-init][data-player-status="loading"] .bunny-player__interface { opacity: 0; transform: translateY(1em) rotate(0.001deg); } [data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__interface, [data-bunny-player-init][data-player-status="loading"][data-player-hover="active"] .bunny-player__interface { opacity: 1; transform: translateY(0em) rotate(0.001deg); } /* Timeline */ [data-bunny-player-init][data-player-status="idle"][data-player-activated="false"] .bunny-player__timeline, [data-bunny-player-init][data-player-status="ready"][data-player-activated="false"] .bunny-player__timeline { pointer-events: none; } /* Timeline Handle */ [data-bunny-player-init] .bunny-player__timeline-handle { transition: transform 0.15s ease-in-out; } [data-bunny-player-init][data-timeline-drag="true"] .bunny-player__timeline-handle { transform: translate(-50%, -50%) scale(1); } /* Scrub Color */ [data-bunny-player-init] .bunny-player__timeline-progress, .bunny-player__timeline-handle { background-color: #2480ff; } /* Fullscreen */ [data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-shrink-svg { display: block; } [data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-scale-svg { display: none; } /* Mute */ [data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-mute-svg { display: block; } [data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-up-svg { display: none; } /* Cover Mode */ [data-bunny-player-init][data-player-update-size="cover"] { height: 100%; top: 0; left: 0; position: absolute; } [data-bunny-player-init][data-player-update-size="cover"] [data-player-before] { display: none; } [data-bunny-player-init][data-player-update-size="cover"][data-player-fullscreen="false"] .bunny-player__video { object-fit: cover; } /* PAGE SPECIFIC ---------------------------------------------------------------------------------------------------------------------- */ /* PROJECT PAGE */ /* Remove Trailing Element ----- */ .project-services p:last-child, .project-services h3:last-child { display: none; } /* PROJECTS TEMPLATE */ /* Dynamic Image Grid ----- */ .media-grid { display: flex; flex-wrap: wrap; gap: 5.208vw; } .media-grid .w-dyn-item[data-width="Full"] { flex: 0 0 100%; } .media-grid .w-dyn-item[data-width="Half"] { flex: 0 0 calc(50% - 2.604vw); }