117 lines
2.2 KiB
CSS
117 lines
2.2 KiB
CSS
.homegrade-blocks-highlight {
|
|
@apply p-12 rounding-radius my-8 max-w-screen-lg mx-auto;
|
|
|
|
&__titling {
|
|
@apply sm:flex items-center;
|
|
/* display: flex;
|
|
align-items: center; */
|
|
margin-bottom: 20px;
|
|
.icon {
|
|
@apply mb-2 sm:mb-0;
|
|
}
|
|
h3 {
|
|
@apply pb-4;
|
|
}
|
|
&--has-no-icon {
|
|
h3 {
|
|
@apply !text-4xl;
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
/* @apply max-w-5xl; */
|
|
@apply max-w-6xl;
|
|
margin-bottom: 10px;
|
|
}
|
|
&__block-title {
|
|
@apply !pb-0 !leading-none;
|
|
}
|
|
&__content {
|
|
@apply !pt-3 xl:!pt-0 flex flex-col-reverse xl:flex-row items-start gap-x-8 gap-y-2;
|
|
.homegrade-blocks-highlight__content__innerblocks {
|
|
@apply w-full;
|
|
}
|
|
}
|
|
&__logo {
|
|
@apply p-4 bg-white h-auto flex justify-center items-center rounded-3xl;
|
|
width: 150px;
|
|
height: 150px;
|
|
aspect-ratio: 1/1;
|
|
margin-top: -10px;
|
|
img {
|
|
@apply max-h-full max-w-full block;
|
|
}
|
|
}
|
|
.wp-block-buttons {
|
|
@apply gap-x-4;
|
|
}
|
|
.wp-block-button {
|
|
@apply mt-6 font-semibold;
|
|
}
|
|
.wp-block-button + * {
|
|
@apply mt-6;
|
|
}
|
|
&--classic {
|
|
@apply bg-primary text-white;
|
|
.icon {
|
|
@apply bg-secondary;
|
|
}
|
|
.wp-block-button__link {
|
|
@apply cta cta--secondary;
|
|
}
|
|
a {
|
|
@apply !text-white;
|
|
}
|
|
ol li::marker {
|
|
@apply !text-white;
|
|
}
|
|
ul li:before {
|
|
@apply bg-white;
|
|
}
|
|
}
|
|
&--warning {
|
|
@apply !bg-transparent !relative !text-secondary;
|
|
|
|
.icon {
|
|
@apply !bg-secondary;
|
|
}
|
|
.wp-block-button__link {
|
|
@apply cta cta--secondary;
|
|
}
|
|
wp-block-button__link ul li:before {
|
|
@apply bg-secondary;
|
|
}
|
|
.homegrade-blocks-highlight__block-title,
|
|
*::marker {
|
|
@apply !text-secondary;
|
|
}
|
|
p > a {
|
|
@apply !text-primary font-bold;
|
|
}
|
|
ul li {
|
|
&:before {
|
|
@apply !bg-secondary;
|
|
}
|
|
}
|
|
&:after {
|
|
@apply absolute
|
|
block
|
|
rounding-radius
|
|
w-full
|
|
h-full
|
|
!bg-secondary
|
|
top-0
|
|
left-0;
|
|
opacity: 0.05;
|
|
content: '';
|
|
/* z-index: -1; */
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
&--gray {
|
|
@apply bg-gray;
|
|
}
|
|
}
|