/*------------------------------------------ Defining variables */ :root { --spacing : 28px; --half-spacing : 14px; --interface-height : 86px; --small-radius : 6px; --medium-radius : 12px; --large-radius : 24px; --parr-regular : 16px; --title-main : 32px; --title-big : 24px; --title-regular : 20px; --title-small : 16px; --button-text : 14px; --button-height : 46px; --button-h-pad : 16px; --button-gap : 10px; --input-text : 15px; --input-height : 54px; --input-h-pad : 18px; --input-gap : 22px; } /*------------------------------------------ Switches */ .mob-only { display: block; } .tab-only { display: none; } .lap-only { display: none; } .des-only { display: none; } .mob-off { display: none; } .tab-off { display: block; } .lap-off { display: block; } .des-off { display: block; } .big-only { display: none; } .big-off { display: block; } .hover-only { display: none; } .hover-off { display: block; } .off { display: none; } .obliterate { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .admin-bar .admin-off { display: none; } /*------------------------------------------ Padding and margin */ .padding { padding: var(--spacing); } .padding-v { padding-top: var(--spacing); padding-bottom: var(--spacing); } .padding-h { padding-left: var(--spacing); padding-right: var(--spacing); } .padding-no-top { padding: 0 var(--spacing) var(--spacing) var(--spacing); } .padding-no-bottom { padding: var(--spacing) var(--spacing) 0 var(--spacing); } .padding-no-left { padding: var(--spacing) var(--spacing) var(--spacing) 0; } .padding-no-right { padding: var(--spacing) 0 var(--spacing) var(--spacing); } .padding-top { padding-top: var(--spacing); } .padding-bottom { padding-bottom: var(--spacing); } .padding-left { padding-left: var(--spacing); } .padding-right { padding-right: var(--spacing); } .padding-grid { padding: var(--half-spacing); } .padding-grid-v { padding-top: var(--half-spacing); padding-bottom: var(--half-spacing); } .padding-grid-h { padding-left: var(--half-spacing); padding-right: var(--half-spacing); } .padding-grid-no-top { padding: 0 var(--half-spacing) var(--half-spacing) var(--half-spacing); } .padding-grid-no-bottom { padding: var(--half-spacing) var(--half-spacing) 0 var(--half-spacing); } .padding-grid-no-left { padding: var(--half-spacing) var(--half-spacing) var(--half-spacing) 0; } .padding-grid-no-right { padding: var(--half-spacing) 0 var(--half-spacing) var(--half-spacing); } .padding-grid-top { padding-top: var(--half-spacing); } .padding-grid-bottom { padding-bottom: var(--half-spacing); } .padding-grid-left { padding-left: var(--half-spacing); } .padding-grid-right { padding-right: var(--half-spacing); } .padding-interface { padding: calc(var(--interface-height) + var(--spacing)) var(--spacing) var(--spacing); } .padding-interface-v { padding-top: calc(var(--interface-height) + var(--spacing)); padding-bottom: var(--spacing); } .padding-interface-top { padding-top: calc(var(--interface-height)); } .padding-interface-no-bottom { padding: calc(var(--interface-height) + var(--spacing)) var(--spacing) 0; } .margin-top { margin-top: var(--spacing); } .margin-bottom { margin-bottom: var(--spacing); } .margin-left { margin-left: var(--spacing); } .margin-right { margin-right: var(--spacing); } .margin-grid-top { margin-top: var(--half-spacing); } .margin-grid-bottom { margin-bottom: var(--half-spacing); } .margin-grid-left { margin-left: var(--half-spacing); } .margin-grid-right { margin-right: var(--half-spacing); } /*------------------------------------------------------------------------------------ Titles */ .title-style, .title-style p { font-size: var(--title-regular); line-height: 1.2; } .title-style.size-main { font-size: var(--title-main); } .title-style.size-big { font-size: var(--title-big); } .title-style.size-small { font-size: var(--title-small); } /*------------------------------------------------------------------------------------ Buttons */ .button-style { cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; font-size: var(--button-text); height: var(--button-height); padding: 0 var(--button-h-pad); border-radius: 100px; gap: var(--button-gap); } .button-style .icon { height: var(--button-text); width: var(--button-text); } @media(min-width: 900px){ /* -------------------------------------------- */ /*------------------------------------------ Defining variables */ :root { --spacing : 32px; --half-spacing : 16px; --interface-height : 100px; --parr-regular : 18px; --title-main : 36px; --title-big : 26px; --title-regular : 22px; --title-small : 18px; --button-text : 15px; --button-height : 50px; --button-h-pad : 18px; --button-gap : 12px; --input-text : 16px; --input-height : 60px; --input-h-pad : 20px; --input-gap : 26px; } /*------------------------------------------ Switches */ .mob-only { display: none; } .tab-only { display: block; } .lap-only { display: none; } .des-only { display: none; } .mob-off { display: block; } .tab-off { display: none; } .lap-off { display: block; } .des-off { display: block; } } @media(min-width: 1200px){ /* -------------------------------------------- */ /*------------------------------------------ Defining variables */ :root { --spacing : 44px; --half-spacing : 22px; --interface-height : 110px; --parr-regular : 21px; --title-main : 44px; --title-big : 30px; --title-regular : 24px; --title-small : 18px; --button-text : 18px; --button-height : 60px; --button-h-pad : 32px; --button-gap : 12px; --input-text : 20px; --input-height : 72px; --input-h-pad : 24px; --input-gap : 32px; } /*------------------------------------------ Switches */ .mob-only { display: none; } .tab-only { display: none; } .lap-only { display: block; } .des-only { display: none; } .mob-off { display: block; } .tab-off { display: block; } .lap-off { display: none; } .des-off { display: block; } .big-only { display: block; } .big-off { display: none; } } @media(min-width: 1400px){ /* -------------------------------------------- */ /*------------------------------------------ Defining variables */ :root { --spacing : 42px; --half-spacing : 21px; --parr-regular : 22px; --title-main : 60px; --title-big : 52px; --title-regular : 42px; --title-small : 28px; --button-text : 20px; --button-height : 62px; --button-h-pad : 28px; --button-gap : 16px; --button-comp-height : 38px; --button-comp-h-pad : 16px; --button-comp-gap : 12px; --link-text : 18px; --link-text-u : 15px; --link-comp-text : 15px; --link-comp-text-u : 13px; } /*------------------------------------------ Switches */ .mob-only { display: none; } .tab-only { display: none; } .lap-only { display: none; } .des-only { display: block; } .mob-off { display: block; } .tab-off { display: block; } .lap-off { display: block; } .des-off { display: none; } } @media(hover: hover) { /* -------------------------------------------- */ /*------------------------------------------ Switches */ .hover-only { display: block; } .hover-off { display: none; } }