100 lines
2.1 KiB
CSS
100 lines
2.1 KiB
CSS
.demo-components-home {
|
|
@apply bg-secondary container px-8 mx-auto py-12 my-12 rounded-3xl;
|
|
@apply text-white text-center;
|
|
h1 {
|
|
@apply text-base font-bold tracking-wider uppercase;
|
|
letter-spacing: 0.15em;
|
|
}
|
|
h2 {
|
|
@apply text-5xl font-bold tracking-wide max-w-3xl mx-auto py-8;
|
|
}
|
|
p {
|
|
@apply text-lg font-medium tracking-wider;
|
|
}
|
|
.cta--white:hover {
|
|
@apply bg-primary;
|
|
}
|
|
.buttons {
|
|
@apply flex justify-center mx-auto mt-8 gap-4;
|
|
}
|
|
}
|
|
|
|
.demo-components {
|
|
@apply homegrade-page-container;
|
|
|
|
&__section-title {
|
|
@apply text-white
|
|
text-6xl
|
|
text-center
|
|
bg-secondary
|
|
flex
|
|
flex-col
|
|
justify-center
|
|
items-center py-8;
|
|
height: 100vh;
|
|
max-width: 100vw;
|
|
margin: 2rem calc(50% - 50vw);
|
|
|
|
h2 {
|
|
@apply text-lg uppercase font-bold tracking-wide my-0;
|
|
}
|
|
h3 {
|
|
@apply text-6xl font-bold tracking-wide my-0 mt-4;
|
|
}
|
|
p {
|
|
@apply text-xl max-w-2xl mt-6 tracking-wide font-medium;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
.component {
|
|
@apply border-b border-neutral-300 py-16;
|
|
> * {
|
|
@apply !max-w-full w-full mx-auto;
|
|
}
|
|
}
|
|
.component-explanation {
|
|
@apply py-6 text-center pb-16;
|
|
&__title {
|
|
@apply text-3xl font-bold pb-2 text-secondary;
|
|
}
|
|
&__description {
|
|
@apply text-neutral-500 text-base font-medium pt-0 max-w-lg mx-auto;
|
|
}
|
|
&__options {
|
|
@apply mt-4 font-bold;
|
|
h3 {
|
|
@apply m-0 uppercase text-sm pt-4 text-secondary tracking-wide;
|
|
}
|
|
}
|
|
&__option {
|
|
@apply py-4;
|
|
}
|
|
|
|
&__option-title {
|
|
@apply text-neutral-900 text-base !font-bold;
|
|
}
|
|
|
|
&__option-description {
|
|
@apply text-neutral-500 text-base font-medium pt-0 max-w-sm mx-auto;
|
|
}
|
|
}
|
|
.buttons {
|
|
@apply py-32;
|
|
.buttons-example {
|
|
@apply flex justify-center gap-8;
|
|
}
|
|
}
|
|
|
|
#chapter-header .post-conseils-chapter-header {
|
|
@apply bg-energies-urbanisme-light;
|
|
}
|
|
}
|
|
|
|
#blocks-components {
|
|
@apply pb-64;
|
|
.block-content-page-header {
|
|
@apply px-16 rounded-3xl;
|
|
@apply shadowed bg-white;
|
|
}
|
|
}
|