/*------------------------------------------ Defining variables */ :root { --spacing : 24px; --half-spacing : 12px; --interface-height : 80px; --l-bar-width : 280px; --r-bar-width : 540px; --small-radius : 8px; --medium-radius : 16px; --large-radius : 32px; --parr-regular : 16px; --title-main : 50px; --title-regular : 24px; --title-big : 36px; --title-small : 18px; --button-text : var(--parr-regular); --button-height : 60px; --button-h-pad : 16px; } /*------------------------------------------ Switches */ .mob-only { display: block; } .tab-v-only { display: none; } .tab-h-only { display: none; } .lap-only { display: none; } .des-only { display: none; } .mob-off { display: none; } .tab-v-off { display: block; } .tab-h-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); } /*------------------------------------------------------------------------------------ Text */ body, p, .label-style { font-size: var(--parr-regular); } a { text-decoration: none; transition: 0.2s linear; } /*------------------------------------------------------------------------------------ Label */ .label-style { margin-bottom: calc(var(--spacing) / 6); } /*------------------------------------------------------------------------------------ Titles */ .title-style { 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); } /*------------------------------------------------------------------------------------ Links */ .link-style { text-decoration: none; cursor: pointer; position: relative; font-size: var(--link-text); } .link-style.upper { font-size: var(--link-text-u); } .link-style.compact { font-size: var(--link-comp-text); } .link-style.compact.upper { font-size: var(--link-comp-text-u); } .link-style:after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; border-bottom-style: solid; border-bottom-width: 1px; } /*------------------------------------------------------------------------------------ Buttons */ .button-style { cursor: pointer; display: inline-flex; align-items: center; font-size: var(--button-text); height: var(--button-height); padding: 0 var(--button-h-pad); border-radius: var(--small-radius); gap: var(--button-gap); } .button-style.compact { height: var(--button-comp-height); padding: 0 var(--button-comp-h-pad); gap: var(--button-comp-gap); } .button-style .icon { height: var(--button-text); width: var(--button-text); } @media(min-width: 900px){ /* -------------------------------------------- */ /*------------------------------------------ Defining variables */ :root { --spacing : 28px; --half-spacing : 14px; --interface-height : 0; --l-bar-width : 280px; --r-bar-width : 540px; --parr-regular : 17px; --title-main : 40px; --title-regular : 22px; --button-text : var(--parr-regular); --button-height : 64px; --button-h-pad : 18px; } /*------------------------------------------ Switches */ .mob-only { display: none; } .tab-v-only { display: block; } .tab-h-only { display: none; } .lap-only { display: none; } .des-only { display: none; } .mob-off { display: block; } .tab-v-off { display: none; } .tab-h-off { display: block; } .lap-off { display: block; } .des-off { display: block; } } @media(min-width: 1200px){ /* -------------------------------------------- */ /*------------------------------------------ Defining variables */ :root { --spacing : 28px; --half-spacing : 14px; --interface-height : 0; --l-bar-width : 280px; --r-bar-width : 540px; --parr-regular : 17px; --title-main : 40px; --title-regular : 22px; --button-text : var(--parr-regular); --button-height : 64px; --button-h-pad : 18px; } /*------------------------------------------ Switches */ .mob-only { display: none; } .tab-v-only { display: none; } .tab-h-only { display: block; } .lap-only { display: none; } .des-only { display: none; } .mob-off { display: block; } .tab-v-off { display: block; } .tab-h-off { display: none; } .lap-off { display: block; } .des-off { display: block; } .big-only { display: block; } .big-off { display: none; } } @media(min-width: 1400px){ /* -------------------------------------------- */ /*------------------------------------------ Defining variables */ :root { --spacing : 32px; --half-spacing : 16px; --interface-height : 0; --l-bar-width : 340px; --r-bar-width : 620px; --parr-regular : 18px; --title-main : 60px; --title-regular : 24px; --button-text : var(--parr-regular); --button-height : 64px; --button-h-pad : 18px; } /*------------------------------------------ Switches */ .mob-only { display: none; } .tab-v-only { display: none; } .tab-h-only { display: none; } .lap-only { display: block; } .des-only { display: none; } .mob-off { display: block; } .tab-v-off { display: block; } .tab-h-off { display: block; } .lap-off { display: none; } .des-off { display: block; } } @media(min-width: 1600px){ /* -------------------------------------------- */ /*------------------------------------------ Defining variables */ :root { --spacing : 32px; --half-spacing : 16px; --interface-height : 0; --l-bar-width : 380px; --r-bar-width : 620px; --parr-regular : 18px; --title-main : 60px; --title-regular : 24px; --button-text : var(--parr-regular); --button-height : 64px; --button-h-pad : 18px; } /*------------------------------------------ Switches */ .mob-only { display: none; } .tab-v-only { display: none; } .tab-h-only { display: none; } .lap-only { display: none; } .des-only { display: block; } .mob-off { display: block; } .tab-v-off { display: block; } .tab-h-off { display: block; } .lap-off { display: block; } .des-off { display: none; } } @media(hover: hover) { /* -------------------------------------------- */ /*------------------------------------------ Switches */ .hover-only { display: block; } .hover-off { display: none; } /*------------------------------------------------------------------------------------ Text */ a:hover { opacity: 0.5; } }