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

/* This is full copy-paste for the Elementotr PRO's Custom Code. In case you use "Simple custom CSS and JS" plugin, 
you'll have to separate the CSS from JS, and exclude the STYLE and SCRIPT tags */

<style>
[data-hover-img] .img-floater {
	position: absolute; 
	opacity: 0;
	width: 400px;
	height: 300px;
	top: -310px; /* or... 150px to center it vertically */

oooh-boi

<script>
;( function() {

	document.addEventListener( 'DOMContentLoaded', my_stuff );
  
  function my_stuff() {
		
		let is_mobile = false;
  
    let hero = document.querySelector( '#hero' ); 

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 !!! */

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

<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

<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

<?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

/* 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%;