%PDF-
%PDF-
Mini Shell
Mini Shell
@import "./custom/file-header.css";
/**
* The line above injects the WordPress file header. It needs to be first,
* before this comment.
*/
/**
* This injects custom `@font-face` rules.
*/
@import "./custom/fonts.css";
/**
* This injects Tailwind's base styles and any base styles registered by
* plugins, then adds custom base styles.
*/
@import "tailwindcss/base";
@import "./custom/base.css";
/**
* This injects Tailwind's component classes and any component classes
* registered by plugins, then adds custom component classes.
*
* The `@import-glob` line imports all CSS files from the `components`
* directory (except for `components.css`, which is imported on the following
* line). This is meant to simplify the process of integrating styles from
* JavaScript components or WordPress plugins.
*/
@import "tailwindcss/components";
@import-glob "./custom/components/**/!(components).css";
@import "./custom/components/components.css";
/**
* This injects Tailwind's utility classes and any utility classes registered
* by plugins, then adds custom utility classes.
*/
@import "tailwindcss/utilities";
@import "./custom/utilities.css";
.tmp {
box-shadow: 0px 0px 2px 0px #ff0000;
}
.btn {
@apply inline-block bg-i4-pink text-white font-semibold px-3 py-1.5 lg:px-6 lg:py-3 rounded-none appearance-none;
&.btn-md {
@apply text-xl px-7 py-3 leading-tight;
}
}
#menu-primary {
@apply flex;
> li {
@apply ml-8 xl:ml-10;
> a {
@apply relative;
&:before {
@apply block w-0 absolute bottom-[-3px] left-[50%] -translate-x-[50%] z-10;
content: '';
border-bottom: solid 1px #707070;
transition: all 0.3s ease-in-out;
}
}
&:hover {
> a {
&:before {
@apply w-full;
}
}
.sub-menu {
@apply flex flex-col;
}
}
}
.sub-menu {
@apply absolute bg-white/95 px-4 py-4 -mx-4 hidden;
> li {
> a {
transition: all 0.3s ease-in-out;
&:hover {
@apply text-i4-pink;
}
}
& + li {
@apply mt-1;
}
}
}
}
#mobile-menu {
@apply w-full;
a {
@apply block py-2 text-xl;
}
.sub-menu {
@apply pl-8;
a {
@apply block py-1 text-lg;
}
}
}
#menu-footer {
@apply flex;
li {
@apply mr-6;
a {
@apply text-sm;
}
}
}
.content {
h1 {
/* @apply text-5xl md:text-6xl leading-tight; */
@apply text-4xl md:text-[3.5rem] leading-[1.1];
}
h2 {
/* @apply text-4xl md:text-5xl leading-tight; */
@apply text-4xl md:text-[3rem] leading-[1.1];
}
h3 {
/* @apply text-3xl md:text-4xl leading-tight; */
@apply text-3xl md:text-[2.25rem] leading-[1.1];
}
h4 {
/* @apply text-2xl md:text-3xl leading-normal; */
@apply text-2xl md:text-[1.75rem] leading-[1.1];
}
h5 {
/* @apply text-xl md:text-2xl leading-normal; */
@apply text-xl md:text-[1.375rem] leading-normal;
}
h6 {
/* @apply text-lg md:text-xl leading-normal; */
@apply text-lg md:text-[1.25rem] leading-normal;
}
p {
@apply text-base;
}
h1,
h2,
h3,
h4,
h5,
h5,
h6 {
@apply font-normal;
strong {
@apply font-semibold;
}
}
& > * {
& + *:not(h1):not(h2):not(h3) {
@apply mt-4;
}
}
}
.text-page {
h1 {
/* @apply text-5xl md:text-6xl leading-tight; */
@apply text-4xl md:text-[2.5rem] leading-[1.1];
}
h2 {
/* @apply text-4xl md:text-5xl leading-tight; */
@apply text-4xl md:text-[2rem] leading-[1.1];
}
h3 {
/* @apply text-3xl md:text-4xl leading-tight; */
@apply text-3xl md:text-[1.75rem] leading-[1.1];
}
h4 {
/* @apply text-2xl md:text-3xl leading-normal; */
@apply text-2xl md:text-[1.50rem] leading-[1.1];
}
h5 {
/* @apply text-xl md:text-2xl leading-normal; */
@apply text-xl md:text-[1.375rem] leading-normal;
}
h6 {
/* @apply text-lg md:text-xl leading-normal; */
@apply text-lg md:text-[1.25rem] leading-normal;
}
h1,
h2,
h3,
h4,
h5,
h5,
h6 {
@apply font-semibold;
}
& > * {
& + * {
@apply mt-3;
}
}
p {
@apply text-base;
& + h1,
& + h2,
& + h3,
& + h4,
& + h5,
& + h6 {
@apply mt-6;
}
}
}
.section-i4-3d-carousel {
.content {
* {
@apply text-white;
}
}
}
.section-i4-hero-banner {
.content {
h1 {
@apply text-4xl md:text-5xl lg:text-[4rem];
}
br {
@apply hidden lg:inline;
}
}
}
.zoom-carousel {
.swiper-slide {
opacity: 0;
transition: all 0.3s ease-in-out;
.image-container {
background: rgba(255,255,255,0.3);
transition: background 0.3s ease-in-out;
}
&.swiper-slide-visible {
opacity: 1;
}
&.swiper-slide-prev,
&.swiper-slide-prev {
.image-container {
background: rgba(255,255,255,0.5);
}
}
&.swiper-slide-active {
.image-container {
background: rgba(255,255,255,0.7);
}
&:hover {
.swiper-description {
opacity: 1;
}
}
}
}
.swiper-wrapper {
@apply mb-20;
}
.swiper-pagination {
.swiper-pagination-bullet {
@apply w-[1.5rem] h-[1.5rem] rounded-none mx-3 bg-white opacity-100;
&.swiper-pagination-bullet-active {
@apply bg-tonal-dark-blue;
}
}
}
}
.resources-carousel {
.swiper-slide {
> .group {
transition: all 0.3s ease-in-out;
@apply opacity-10 md:opacity-0 scale-75 md:scale-100;
}
&.swiper-slide-visible {
.group {
@apply opacity-100 scale-100;
}
}
}
}
.blink {
display: flex;
align-items: center;
justify-content: center;
position: relative;
img {
height: 80px;
width: 100%;
max-width: none;
object-fit: contain;
background: #fff;
opacity: 1;
&.foreground {
position: absolute;
z-index: 2;
}
&.background {
position: relative;
z-index: 1;
}
&.blink-fade-out {
transition: all 1.4s ease-in-out;
opacity: 0;
}
}
}
#customers {
.blink {
img {
@apply h-[80px] md:h-[120px]
}
}
}
.team-carousel {
.swiper-wrapper {
-webkit-transition-timing-function:linear!important;
-o-transition-timing-function:linear!important;
transition-timing-function:linear!important;
}
.swiper-slide {
@apply w-[70px] lg:w-[100px];
}
}
.wpcf7 {
form {
.form-row {
@apply grid grid-cols-1 md:grid-cols-2 gap-0 md:gap-12 lg:gap-24;
}
.wpcf7-form-control-wrap {
@apply mb-3 block;
.form-field--wrapper {
@apply relative z-0 w-full block;
background: #fff;
input, textarea {
@apply block pt-2.5 pb-1.5 px-4 w-full text-gray-900 border-white appearance-none focus:outline-none focus:ring-0 focus:border-i4-pink z-10 relative;
background-color: transparent;
&:focus + label {
@apply transform -translate-y-3 translate-x-0 scale-75 top-2.5 right-0 origin-right text-i4-pink;
}
&:placeholder-shown + label {
@apply scale-100 translate-y-0 translate-x-full right-full text-gray-500;
}
}
label {
@apply pl-4 pr-2 absolute text-gray-400 duration-300 whitespace-nowrap z-0 transform -translate-y-3 translate-x-0 scale-75 top-2.5 right-0 origin-right;
}
}
}
.wpcf7-submit {
@apply btn text-xl px-7 py-3 leading-tight mt-4;
}
}
}
.wpcf7 form .wpcf7-response-output {
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
padding: 1rem 1.5rem;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450;
color: #46b450;
background: rgba(70,180,80,0.15);
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900;
color: #ffb900;
background: rgba(255,185,0,0.15);
}
.contact-form {
.wpcf7 {
form {
.wpcf7-form-control-wrap {
@apply mb-7 block;
.form-field--wrapper {
@apply relative z-0 w-full block;
background: #fff;
input, textarea {
@apply block pt-3.5 pb-3.5 px-6 w-full text-gray-900 border-white focus:outline-none focus:ring-0 focus:border-i4-pink;
&:focus + label {
@apply transform -translate-y-8 scale-75 top-2.5 left-0 origin-left text-i4-pink right-auto;
}
&:placeholder-shown + label {
@apply scale-100 translate-y-0 translate-x-0 left-6 top-3.5 text-gray-500 right-auto;
}
}
label {
@apply pr-2 pl-0 absolute text-gray-400 duration-300 whitespace-nowrap -z-10 transform -translate-y-8 scale-75 top-2.5 left-0 right-auto origin-left;
}
}
}
.wpcf7-submit {
@apply btn text-xl px-7 py-3 leading-tight mt-4;
}
}
}
}
.svg-loader--wrapper {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 9999;
display: none;
}
.svg-loader {
display: flex;
position: relative;
align-content: space-around;
justify-content: center;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
align-items: center;
background: rgba(255, 255, 255, 0.9);
}
.loader-svg {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
fill: none;
stroke-width: 5px;
stroke-linecap: round;
stroke: #3B8EDE;
}
.loader-svg.loader-bg {
stroke-width: 8px;
stroke: rgba(197, 197, 197, 0.4);
}
.loader-animate {
stroke-dasharray: 242.6;
animation: fill-animation 1s cubic-bezier(1, 1, 1, 1) 0s infinite;
}
@keyframes fill-animation {
0% {
stroke-dasharray: 40 242.6;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 141.3;
stroke-dashoffset: 141.3;
}
100% {
stroke-dasharray: 40 242.6;
stroke-dashoffset: 282.6;
}
}
.editor-styles-wrapper {
.swiper-wrapper {
display: flex !important;
padding: 0 10px !important;
.swiper-slide {
opacity: 1 !important;
margin: 0 5px !important;
.swiper-description {
display: none !important
}
.object-contain {
margin: 0 !important;
}
& > p {
position: relative !important;
font-size: 10px !important;
line-height: 1.2 !important;
}
}
}
.wp-block {
max-width: 1140px !important;
&.wp-block-acf-i4-3d-carousel,
&.wp-block-acf-i4-paragraph,
&.wp-block-acf-i4-video,
&.wp-block-acf-i4-tile-multiple,
&.wp-block-acf-i4-summary-overview,
&.wp-block-acf-i4-hero-banner,
&.wp-block-acf-i4-services,
&.wp-block-acf-i4-resources,
&.wp-block-acf-i4-resources-filter,
&.wp-block-acf-i4-tile-single,
&.wp-block-acf-i4-image-carousel,
&.wp-block-acf-i4-list,
&.wp-block-acf-i4-events,
&.wp-block-acf-i4-contact-us,
&.wp-block-acf-i4-map,
&.wp-block-acf-i4-blink-logos,
&.wp-block-acf-i4-team {
max-width: 90% !important;
.btn {
@apply text-white no-underline;
}
}
}
.acf-button {
text-decoration: none !important;
color: rgb(23,23,23) !important;
&.button-primary {
color: #fff !important;
}
}
.acf-tab-group {
li {
margin-top: 0 !important;
margin-bottom: 0 !important;
.acf-tab-button {
text-decoration: none;
color: rgb(23,23,23);
}
}
}
.wp-block-acf-i4-video {
.content {
* {
color: #ffffff !important;
}
}
}
}
Zerion Mini Shell 1.0