196 lines
5.0 KiB
CSS
196 lines
5.0 KiB
CSS
/*@import url('https://fonts.googleapis.com/css2?family=Abel:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');*/
|
|
|
|
@font-face {
|
|
font-family: 'Heron';
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display:swap;
|
|
src: url("/fonts/HeronSans-Light.woff2") format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Heron';
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display:swap;
|
|
src: url("/fonts/HeronSans-Regular.woff2") format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Antique Olive Compact bold';
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display:swap;
|
|
src: url("/fonts/Antique Olive Std Compact.woff2") format('woff2');
|
|
}
|
|
|
|
* {
|
|
font-weight: 400;
|
|
box-sizing: border-box;
|
|
font-family: "Heron";
|
|
}
|
|
|
|
.promo{
|
|
font-weight: 700;
|
|
box-sizing: border-box;
|
|
font-family: "Antique Olive Compact bold";
|
|
color:#222222;
|
|
}
|
|
|
|
|
|
body{
|
|
@apply bg-[#efefef] min-w-[320px]
|
|
}
|
|
|
|
main{
|
|
@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
|
|
}
|
|
|
|
.button {
|
|
@apply w-full sm:w-min h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap
|
|
hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary
|
|
}
|
|
|
|
input, select, textarea{
|
|
@apply py-1.5 px-2.5 w-full outline-none;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="number"],
|
|
input[type="password"],
|
|
input[type="file"],
|
|
textarea,
|
|
select{
|
|
@apply p-1 min-h-[38px] ring-1 ring-black/15 rounded-sm}
|
|
|
|
input[type="file"]{@apply pt-[4px]}
|
|
|
|
input[type="checkbox"],input[type="radio"]{@apply inline-block accent-secondary h-[13px]}
|
|
|
|
input:disabled, input:read-only {
|
|
@apply lg:bg-gray-200 border-gray-500/15;
|
|
}
|
|
|
|
/*ARTICLE*/
|
|
|
|
article {
|
|
@apply w-full relative bg-white px-0 py-0 z-0;
|
|
|
|
hr {@apply mb-4 mt-4 border-primary;}
|
|
|
|
h1 {@apply pl-2 sm:pl-0 text-4xl font-normal mb-2;}
|
|
h2{@apply pl-2 sm:pl-0 text-2xl font-normal mb-2;}
|
|
h3 {@apply pl-2 sm:pl-0 text-xl font-normal ml-1;}
|
|
|
|
a {@apply text-blue-700 font-medium inline;}
|
|
|
|
p {@apply text-lg font-normal pl-2 pr-2 mb-4;}
|
|
li {@apply text-lg font-normal }
|
|
ul {@apply list-disc list-inside mb-4}
|
|
/*span {@apply text-secondary font-bold;}*/
|
|
|
|
}
|
|
|
|
|
|
/*SIDEBARS*/
|
|
|
|
/*BOXES*/
|
|
.box{
|
|
@apply rounded-lg
|
|
|
|
lg:shadow-box lg:ring-1 lg:ring-gray-300
|
|
xl:rounded-xl
|
|
|
|
}
|
|
|
|
.card:not(:last-child){@apply mb-5}
|
|
.card{@apply bg-white px-6 py-4;
|
|
|
|
h2 {@apply w-full [font-size:_clamp(8px,1.25vw,16px)] font-bold text-box-heading leading-6 pb-1 mb-4 border-b-[1px] border-primary/35}
|
|
hr {@apply my-0}
|
|
p {@apply text-lg}
|
|
a {@apply text-lg}
|
|
|
|
}
|
|
|
|
|
|
/*SIDEBAR-LEFT*/
|
|
|
|
/*NAVIGATION*/
|
|
|
|
.nav-element{@apply relative block cursor-pointer}
|
|
|
|
.nav-element:not(:first-child){@apply border-gray-200 border-t-[1px]}
|
|
|
|
.no-dropdown, .no-dropdown:hover{@apply text-black no-underline}
|
|
|
|
.nav-element:hover > .nav-element-child{
|
|
@apply !bg-primary !text-white cursor-pointer
|
|
}
|
|
|
|
.nav-element:hover > .nav-element-child .no-dropdown{
|
|
@apply !bg-primary !text-white cursor-pointer
|
|
}
|
|
|
|
|
|
.nav-element:hover > .dropdown-content{
|
|
@apply lg:visible lg:opacity-100 lg:block lg:ml-[calc(100%+2px)]
|
|
}
|
|
|
|
.nav-element:hover:first-child > .nav-element-child{
|
|
@apply !rounded-none
|
|
lg:!rounded-tl-xl lg:!rounded-tr-none
|
|
}
|
|
|
|
.nav-element:hover:last-child > .nav-element-child{
|
|
@apply !rounded-none
|
|
xl:!rounded-b-xl
|
|
}
|
|
|
|
.nav-element-child{
|
|
@apply px-4 py-2 w-full justify-start text-sm bg-white flex !no-underline text-black
|
|
xl:text-lg
|
|
}
|
|
|
|
.dropdown-content{
|
|
@apply !relative z-[1] !p-0 !scale-100 hidden
|
|
lg:!absolute lg:min-w-max lg:p-2 lg:shadow-lg lg:!top-0 lg:ring-gray-300 lg:ring-1;
|
|
|
|
li {@apply text-sm bg-white flex
|
|
xl:text-lg}
|
|
|
|
li a {@apply w-full text-sm px-4 py-2 rounded-none no-underline hover:text-white hover:bg-gradient-to-br from-secondary to-secondary-grad
|
|
lg:px-4 bg-[#efefef] text-black lg:hover:bg-secondary
|
|
xl:text-lg}
|
|
|
|
li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]}
|
|
}
|
|
|
|
.verbrauchsausweis li:nth-child(5), .bedarfsausweis li:nth-child(5){
|
|
@apply !border-primary !border-t-[1px]
|
|
}
|
|
|
|
#hamburger{
|
|
@apply my-1;
|
|
span {@apply block h-[3px] w-6 bg-white !transition-all}
|
|
span:nth-child(2) {@apply my-1}
|
|
}
|
|
|
|
.hamburger-swing-0{@apply origin-left rotate-45 -translate-y-[1.5px] !transition-all duration-500}
|
|
.hamburger-swing-1{@apply origin-center opacity-0 !transition-all}
|
|
.hamburger-swing-2{@apply origin-left -rotate-45 translate-y-[1.5px] !transition-all duration-500}
|
|
|
|
.show-dropdown-content{@apply block !visible !opacity-100 lg:!invisible}
|
|
.dd-symbol{ @apply absolute right-[20px] rotate-0 transition-all duration-300 origin-center md:transition-none}
|
|
.dd-symbol-clone{ @apply absolute right-[20px] lg:text-primary}
|
|
.rotate-symbol{@apply rotate-[90deg] transition-all duration-300 origin-center lg:rotate-0 md:transition-none}
|
|
|
|
|
|
|
|
/*NAVIGATION-ANIMATION*/
|
|
|
|
/*SIDEBAR-RIGHT*/
|
|
|
|
/*FOOTER*/ |