Style Guide

GeneratePress

Style Guide

I am the Elementor Hero template

Typography

Poppins

Poppins 17px Normal

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZZ

Poppins 17px 700

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZZ

Geometric sans serif typefaces have been a popular design tool ever since these actors took to the world’s stage. Poppins is one of the new comers to this long tradition. 

With support for the Devanagari and Latin writing systems, it is an internationalist take on the genre.

The Devanagari is designed by Ninad Kale. The Latin is by Jonny Pinhorn.

Elementor headings

Poppins 17px 700

H1 Heading

H2 Heading

Theme typography - single posts

H1 Heading

H2 Heading

H3 Heading

H4 Heading

#FF00A6

#00BCFF

#CCC

#111122

#FFF

Additional CSS

Elementor

CONTROL absolute positioning

overflow-x-hidden class used on hero template and sections with absolutely positioned elements

no-abs-mobile class to disable absolutely positioned elements on mobile devices

/* Control overflow on hero image */
.elementor-editor-active .overflow-x-hidden,
.overflow-x-hidden {
    overflow-x: hidden !important;
}

/* Mobile Disable absolute positioned elements */
@media(max-width: 767px) {
    .no-abs-mobile,
    .elementor-editor-active .no-abs-mobile {
        position: static !important;
    }
}    

blobs are set to background overlay

no-mobile-bg-overlay class removes overlay backgrounds such as Blobs on mobile devices

/* no-mobile-bg-overlay - remove overlay on small devices */
@media(max-width: 1024px) {
    .no-mobile-bg-overlay .elementor-background-overlay,
    .elementor-editor-active .no-mobile-bg-overlay .elementor-background-overlay {
        display: none;
    }
}

adjust button float anim and shadow

no-hover-shadow class hides shadow unless button is hovered. Also applied to theme elements

/* Adjust button shadow and float animation */
.no-hover-shadow .elementor-button:not(:hover),
.button:not(:hover),
input[type="submit"]:not(:hover) {
    box-shadow: 0 15px 25px -12px rgba(2, 62, 83, 0) !important;
}

.elementor-animation-float:active,
.elementor-animation-float:focus,
.elementor-animation-float:hover {
    transform: translateY(-4px);
}

Additional CSS

GeneratePress

add top border to site footer

/* Add Border to top of theme footer */
.site-footer {
    border-top: 1px solid #ccc
}

style buttons to match elementor

/* Theme Buttons */
.button,
input[type="submit"] {
    color: #FFFFFF;
    border-radius: 50px 50px 50px 50px;
    -webkit-box-shadow: rgba(2, 62, 83, 0.67) 0px 15px 15px -12px;
    padding: 20px 25px 20px 25px;
}

.button,
input[type="submit"] {
    transition: 0.3s ease-in-out;
}

Dies ist die Überschrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.