Código do 10º episódio da série DO FIGMA PARA O ELEMENTOR | COMO FAZER UM SITE COM ELEMENTOR A PARTIR DE UM LAYOUT DESENVOLVIDO NO FIGMA.

serie-youtube-elementor-to-figma-ep10.css

/*Elementor Overflow Fix*/
.elementor-template-canvas {
  overflow-x: hidden;
}
.elementor {
  overflow: hidden;
}

/*Toggle navbar*/
.ui-menu-toggle .elementor-tab-title {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.ui-menu-toggle .elementor-toggle-title{
	color: white !important;
}

.ui-menu-toggle .elementor-toggle-icon {
  order: 1;
}

/*Gradient Icon*/

.ui-gradient-color-icon ::before {
  background: rgb(44, 122, 237);
  background: -moz-linear-gradient(
    90deg,
    rgba(44, 122, 237, 1) 0%,
    rgba(75, 195, 204, 1) 100%
  );
  background: -webkit-linear-gradient(
    90deg,
    rgba(44, 122, 237, 1) 0%,
    rgba(75, 195, 204, 1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(44, 122, 237, 1) 0%,
    rgba(75, 195, 204, 1) 100%
  );
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/*Formulário CF7*/

.ui-form {
  display: flex;
  gap: 16px;
  max-height: 36px;
}

.ui-form ::placeholder {
  color: var(--e-global-color-text);
}

.wpcf7 form.invalid .wpcf7-response-output {
  margin: 2.4em 0 0em;
  border-color:var(--e-global-color-7b32ea7);
  color:var(--e-global-color-text);
  background-color:var(--e-global-color-7b32ea7);
}

.wpcf7-not-valid-tip {
  position: absolute;
  top: 36px;
  color: var(--e-global-color-7b32ea7);
  font-size:.825rem
}



/*Only Small Screen*/
@media (max-width: 767px) {

	html{
		font-size:0.875rem;
	}

  .ui-sm-text-dark {
    color: var(--e-global-color-accent) !important;
  }

  .ui-sm-text-dark a {
    color: var(--e-global-color-accent) !important;
  }

  .ui-sm-text-dark .elementor-heading-title {
    color: var(--e-global-color-accent) !important;
  }

  .ui-sm-mobile-button {
    width: 100% !important;
  }
  .ui-sm-mobile-button .elementor-button {
    background-color: var(--e-global-color-secondary) !important;
    color: var(--e-global-color-7b32ea7) !important;
    width: 100%;
  }
	
	.ui-sm-menu-fixed{
		position: fixed;
		z-index:20;
	}
	
	  .ui-menu-toogle .elementor-toggle-icon ::before {
    color: var(--e-global-color-7b32ea7) !important;
  }

  .ui-sm-gradient-bg {
    background: rgb(44, 122, 237);
    background: linear-gradient(
      90deg,
      rgba(44, 122, 237, 1) 0%,
      rgba(75, 195, 204, 1) 100%
    );
  }

	.icon-sm-absolute{
		position: absolute;
		left: -90px;
	}
	
		
	.wpcf7-form.invalid .ui-form {
    gap: 36px;
  }

  .wpcf7-form.invalid .wpcf7-response-output {
    margin: 1em 0 0em !important;
  }

  .ui-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 200px;
  }
	
}

/* Only Tablet Screen */
@media (min-width: 768px) and (max-width: 1024px) {

	.ui-menu-toggle .elementor-toggle-title{
	color: var(--e-global-color-secondary) !important;
}
	
}

/* Only Desktop Screen */
@media (min-width: 1025px) {
	html{
		font-size:1rem;
	}
}