Font Family Everything
font-family: azo-sans-web,sans-serif
All required font weights: 300, 400, 500, 700
root element
font-size: 18px

Headings

H1 – H3
text-transform: uppercase;
letter-spacing: .02em;
line-height: 1.12;
letter-spacing: .02em;
Default font weight: 700
Font weight for
.light
: 300

H5, H6: no text transform, no letter letter-spacing
line-height: 1.3;
h5 {font-weight: 500}
h6 {font-weight: 400}

H1 66PX LOREM IPSUM DOLOR

H1 66PX LOREM IPSUM DOLOR

H2 48PX LOREM IPSUM DOLOR

H2 48PX LOREM IPSUM DOLOR

H3 42PX LOREM IPSUM DOLOR

H3 42PX LOREM IPSUM DOLOR

H4 36PX LOREM IPSUM DOLOR

H4 36PX LOREM IPSUM DOLOR

H5 26px Lorem Ipsum Dolor sit Amet
H6 22px Lorem Ipsum Dolor sit Amet

Mobile Headings

H1 42PX LOREM IPSUM DOLOR

H1 42PX LOREM IPSUM DOLOR

H2 34PX LOREM IPSUM DOLOR

H2 34PX LOREM IPSUM DOLOR

H3 28PX LOREM IPSUM DOLOR

H3 28PX LOREM IPSUM DOLOR

H4 24 PX LOREM IPSUM DOLOR

H4 24PX LOREM IPSUM DOLOR

H5 20px Lorem Ipsum Dolor sit Amet
H6 18px Lorem Ipsum Dolor sit Amet
Subtle typography
opacity: .66

Visibility classes for spans and breaks and whatever
display: none;
1. max 767px
.hide-mobile
2. max 1024px
.hide-tablet
3. min 1025px
.hide-desktop

Size adjustment classes (fell free to rename)
.small {
font-size: .9em}
.smaller {
font-size: .8em}
.large {
font-size: 1.2em}
.larger {
font-size: 1.4em}

Paragraph TEXT

Default
font-weight: 300;
font-size: 18px;
line-height: 1.5;
Bold/strong
font-weight: 500;

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.

Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben.

Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.

  • Es packte seine sieben Versalien, schob sich
  • sein Initial in den Gürtel und machte sich auf den
  • Weg als es die ersten Hügel des Kursivgebirges
  • erklommen hatte, warf es einen letzten Blick
  • zurück auf die Skyline 

BUTTONS

Elementor button class:
.elementor-widget-button
All buttons
border-radius: 0;
font-weight: 400;
border: solid 3px;
line-height: 1.2;
letter-spacing: .02em;
text-transform: uppercase;
Default button
font-size: 22px;

Buttons Light Bg

.main
.alt
.subtle

Buttons dark Bg

.main
.alt
.subtle

Slant Design

DESKTOP ONLY min device width: 1025px

Elementor classes:
.elementor-row
.elementor-column
Style selector idea:
.row-slant-right
.elementor-column:first-child
.elementor-column:last-child
second column dark slant right
.row-slant-right .elementor-column:last-child::before {
    content:"";
    display: block;
    position: absolute;
    height: 100%;
    width: 90px;
    top: 0;
    left: -42px;
    transform: skew(-6deg);
    background: #2E2D2C;
}

.row-slant-right .elementor-column:last-child {
    z-index: 2;
}
first column background slant left
.row-slant-right .elementor-column:first-child::before {
    content:"";
    display: block;
    position: absolute;
    height: 100%;
    width: 90px;
    top: 0;
    right: -48px;
    background: #fff;
    opacity: 1;
    z-index: 1;
    transform: skew(-6deg)
}
first column dark slant left
selector:before {
    content:"";
    display: block;
    position: absolute;
    height: 100%;
    width: 90px;
    top: 0;
    right: -42px;
    transform: skew(-6deg);
    background: #2E2D2C;
}

selector {
    z-index: 2;
}
second column background slant right
selector:before {
    content:"";
    display: block;
    position: absolute;
    height: 100%;
    width: 90px;
    top: 0;
    left: -48px;
    background: #fff;
    opacity: 1;
    z-index: 1;
    transform: skew(-6deg)
}

Browser Styles

1. Remove all focused elements outlines (e.g: links, buttons, inputs, select lists …)
outline: none;
2. Selection color:
::-moz-selection {
background: #DF5C16;
color: #fff
}

::selection {
background: #DF5C16;
color: #fff
}

Adis Pezerovic

waterdrop™
Online Marketing Experte
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.

Anmeldung