/*
Theme Name: House of Warm
Theme URI: https://aryss.studio
Author: Kasia & Piotr Aryss
Author URI: https://aryss.studio
Description: Szablon graficzny strony Trans-Lex.
Version: 1.0
*/
:root {
--global-how-scale: 0.9;
--global-how-gap-xs: .25rem;
--global-how-gap-sm: .5rem;
--global-how-gap-md: .75rem;
--global-how-gap-lg: 1rem;
--global-how-gap-xl: 1.25rem;
--global-how-gap-2xl: 1.5rem;
--global-how-gap-3xl: 1.75rem;
--global-how-gap-4xl: 2rem;
--global-how-gap-5xl: 2.25rem;
--global-how-gap-6xl: 2.5rem;
--global-how-gap-7xl: 2.75rem;
--global-how-gap-8xl: 3rem;
--global-how-radius-xs: .25rem;
--global-how-radius-sm: .5rem;
--global-how-radius-md: .75rem;
--global-how-radius-lg: 1rem;
--global-how-radius-xl: 1.25rem;
--global-how-radius-2xl: 1.5rem;
--global-how-radius-3xl: 1.75rem;
--global-how-radius-4xl: 2rem;
--global-how-radius-5xl: 2.25rem;
--global-how-radius-6xl: 2.5rem;
--global-how-radius-7xl: 2.75rem;
--global-how-radius-8xl: 3rem;
--global-how-color-base: #4A2353;
--global-how-color-klima: #091F79;
--global-how-color-obsluga: #8D2A0D;
--global-how-color-primary: var(--global-how-color-base);
--global-how-font-size-base: calc(1.125rem * var(--global-how-scale));
--global-how-font-size-xs: calc(0.75rem * var(--global-how-scale));
--global-how-font-size-sm: calc(1rem * var(--global-how-scale));;
--global-how-font-size-md: calc(1.25rem * var(--global-how-scale));
--global-how-font-size-lg: calc(1.5rem * var(--global-how-scale));
--global-how-font-size-xl: calc(1.75rem * var(--global-how-scale));
--global-how-font-size-2xl: calc(2rem * var(--global-how-scale));
--global-how-font-size-3xl: calc(2.25rem * var(--global-how-scale));
--global-how-font-size-4xl: calc(2.5rem * var(--global-how-scale));
--global-how-font-size-5xl: calc(2.75rem * var(--global-how-scale));
--global-how-font-size-6xl: calc(3rem * var(--global-how-scale));
--global-how-font-size-7xl: calc(3.25rem * var(--global-how-scale));
--global-how-font-size-8xl: calc(3.5rem * var(--global-how-scale));
--global-how-font-size-body: var(--global-how-font-size-sm);
--global-how-body-padding-x: var(--global-how-gap-lg);
}
@media screen and (min-width: 768px) {
:root {
--global-how-scale: 0.95;
--global-how-body-padding-x: var(--global-how-radius-2xl);
}
body {
--global-how-font-size-body: var(--global-how-font-size-base);
}
}
@media screen and (min-width: 1025px) {
:root {
--global-how-scale: 1;
}
}
html {
scroll-behavior: smooth;
}
body {
font-size: var(--global-how-font-size-body) !important;
}
body.how-area-klima {
--global-how-color-primary: var(--global-how-color-klima);
}
body.how-area-obsluga {
--global-how-color-primary: var(--global-how-color-obsluga);
}
body p,
body ol,
body ul {
line-height: 1.5;
}
section {
scroll-margin-top: var(--header-height);
}
/*----------------------
WP STANDARD CSS
----------------------*/
.wp-block-list li:not(:last-child) {
margin-bottom: var(--global-how-gap-sm);
}
/*----------------------
HEADERS
----------------------*/
.how__heading1 {
font-size: var(--global-how-font-size-xl);
font-weight: 700;
color: var(--global-how-color-primary);
}
.how__heading2 {
font-size: var(--global-how-font-size-xl);
font-weight: 300;
color: black;
}
@media screen and (min-width: 768px) {
.how__heading1 {
font-size: var(--global-how-font-size-2xl);
}
.how__heading2 {
font-size: var(--global-how-font-size-2xl);
}
}
/*----------------------
BUTTONS
----------------------*/
.how__btn {
padding: var(--global-how-gap-lg) calc(var(--global-how-gap-lg) * 1.25);
border-radius: var(--global-how-radius-sm);
border-width: 1px;
border-style: solid;
border-color: transparent;
text-decoration: none;
background-color: var(--global-how-color-primary);
color: white;
display: inline-flex;
align-items: center;
flex-direction: row;
opacity: 1;
transition: all 0.2s ease-in-out 0s;
font-family: inherit;
font-size: inherit;
}
.how__btn:hover {
opacity: .85;
}
.how__btn:not(:disabled) {
cursor: pointer;
}
.how__btn-xs {
padding: var(--global-how-gap-xs) calc(var(--global-how-gap-xs) * 1.25);
}
.how__btn-sm {
padding: var(--global-how-gap-sm) calc(var(--global-how-gap-sm) * 1.25);
}
.how__btn-lg { /* SAME AS BASE */
padding: var(--global-how-gap-lg) calc(var(--global-how-gap-lg) * 1.25);
}
.how__btn-xl {
padding: var(--global-how-gap-xl) calc(var(--global-how-gap-xl) * 1.25);
}
.how__btn-outline {
background-color: transparent;
border-color: var(--global-how-color-primary);
}
.how__btn-outline:hover {
background-color: rgba(255, 255, 255, 0.25);
}
.how__btn-outline .how__btn-label {
color: var(--global-how-color-primary);
text-align: center;
}
/*----------------------
FORMS
----------------------*/
input.how__form-input[type="text"],
input.how__form-input[type="email"],
textarea.how__form-input {
padding: var(--global-how-gap-lg) calc(var(--global-how-gap-lg) * 1.25);
border: solid 1px var(--global-how-color-primary);
border-radius: var(--global-how-radius-sm);
font-family: inherit;
font-size: inherit;
}
input.how__form-input[type="checkbox"] {
appearance: none;
position: relative;
border: none;
background-color: transparent;
color: transparent;
padding: 0;
margin: 0;
width: 28px;
height: 28px;
outline: none !important;
}
input.how__form-input[type="checkbox"]::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: solid 1px var(--global-how-color-primary);
border-radius: var(--global-how-radius-xs);
}
input.how__form-input[type="checkbox"]:is(:checked)::after {
content: "";
position: absolute;
left: 3px;
top: 3px;
width: 24px;
height: 24px;
background-color: var(--global-how-color-primary);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
background-size: contain;
}