online-energieausweis/src/style/global.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 transition-all;
}

.button:not([disabled]):hover {
	@apply bg-gradient-to-br from-secondary to-secondary-grad shadow-lg no-underline ring-2 ring-primary;
}

.button[disabled] {
	@apply bg-gray-400;
}

.button[disabled]:hover {
	@apply bg-gray-400;
}

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;
}

select option {
	font-family: "Heron", sans-serif !important;
}
select,
select option:disabled {
	@apply bg-white;
}

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 p-0 z-0 box rounded-tl-none sm:p-2 lg:p-12;

	hr {
		@apply mb-4 mt-4 border-primary;
	}

	h1 {
		@apply pl-2 font-normal mb-2
		 [font-size:_clamp(24px,1.5vw,36px)] leading-7 
		 sm:text-4xl;
	}
	h2 {
		@apply pl-2 font-normal mb-2
		[font-size:_clamp(24px,1.5vw,36px)] leading-7 
		sm:text-2xl;
	}
	h3 {
		@apply pl-2 sm:pl-0 text-xl font-normal ml-1 mb-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(6),
.bedarfsausweis li:nth-child(6) {
	@apply !border-primary !border-t-[1px];
}

#hamburger {
	@apply my-1;
	.burger {
		@apply w-6;
	}
	span {
		@apply block h-[4px] bg-white !transition-all;
	}
	span:nth-child(2) {
		@apply my-[3px];
	}
}

.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*/