oooh-boi

<?php
/*
* Exclude & Include in group control
*/
$this->add_group_control(
	Group_Control_Background::get_type(),
	[
		'name' => 'item_background',
		'label' => __( 'Background', 'happy-addons-pro' ),
		'types' => [ 'classic', 'gradient' ],

oooh-boi

;( function() { 

    document.addEventListener( 'DOMContentLoaded', unfold_content );
	
    function unfold_content() {
			
			let close_text = "Show Less";
			let the_unfolds = gsap.utils.toArray( '.ob-unfold' ); 
			
			the_unfolds.forEach( ( ob, i ) => { 

oooh-boi

@media only screen and (min-width: 768px) {
    selector .ob-wrapper {
        width: 84px !important;
        position: fixed;
        top: 0;
        right: 0;
        min-height: 100vh;
    }
    selector .ob-logo {
        height: 255px;

oooh-boi

<style>
	
.elementor-kit-4 h1 { font-size: clamp(2.369rem, 2.0686rem + 1.502vw, 4.209rem); }
.elementor-kit-4 h2 { font-size: clamp(1.777rem, 1.5517rem + 1.1265vw, 3.157rem); }
.elementor-kit-4 h3 { font-size: clamp(1.333rem, 1.1639rem + 0.8457vw, 2.369rem); }
.elementor-kit-4 h4 { font-size: clamp(1.333rem, 1.2605rem + 0.3624vw, 1.777rem); }
.elementor-kit-4 h5 { font-size: clamp(1.2rem, 1.1783rem + 0.1086vw, 1.333rem); }

.elementor-kit-XXX { /* replace XXX with your own Site Settings kit ID */
  --e-global-typography-XXXXXX-font-size: clamp(1.0625rem, 0.9707rem + 0.4592vw, 1.625rem); /* any custom font 1 ... replace XXXXXX with your own */

oooh-boi

<script>
;(function() {

    // locomotive scroll storage
    var loco_scroll = {};

    // wait until sfe_loco_scroll available
    var chck_if_sfe_loco_scroll_loaded = setInterval(function() {

        if (window.sfe_loco_scroll && Object.keys(window.sfe_loco_scroll).length !== 0 && window.gsap && window.ScrollTrigger) {

oooh-boi

/* be sure to copy-paste to the Image Widget Custom CSS panel */
selector, 
selector .elementor-widget-container, 
selector .elementor-image, 
selector .elementor-image > a {
    height: 100%;
}
selector .elementor-image img {
  object-fit: cover;
  object-position: 50% 50%;

oooh-boi

<script>
;( function() {

  // wait until gsap & ScrollTrigger available
  let chck_if_gsap_loaded = setInterval( function() {
    
    if( window.gsap && window.ScrollTrigger ) {
      
      // register scrolTrigger
      gsap.registerPlugin( ScrollTrigger );

oooh-boi

<script>
"use strict";
OB_ready(OB_doWhenReady);

function OB_doWhenReady() {
    // localize everything
    var ooohBoi = window.ooohBoi || {};
    // local scope variables
    ooohBoi.prev_scroll_pos = window.scrollY || document.body.scrollTop;
    ooohBoi.cur_scroll_pos;

oooh-boi

/* MAGICAL CSS Rule */
selector .elementor-container .elementor-row {
     flex-wrap: wrap;
     /* uncomment for columns alignment */
     /* justify-content: center; */
}

/* Responsive Columns Alignment - Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
	selector .elementor-container .elementor-row {

oooh-boi

body:not(.elementor-editor-active) .ob-unfold .ob-content { overflow: hidden; height: 200px; }
body:not(.elementor-editor-active) .ob-unfold .ob-blanket { cursor: pointer; z-index: 100; }
/* If you plan to use variable initial heights... */
/*
body:not(.elementor-editor-active) .ob-unfold .ob-content.ob-height-300 { height: 300px; }
body:not(.elementor-editor-active) .ob-unfold .ob-content.ob-height-toggle { height: 0px; }
*/
/* don't forget to append these classes to your ob-content in Elementor !!! */