146 lines
2.8 KiB
CSS
146 lines
2.8 KiB
CSS
footer {
|
|
@apply w-full mx-auto px-4 md:px-12 pb-6 md:pb-32;
|
|
|
|
.section-title {
|
|
@apply text-lg nunito uppercase font-bold tracking-widest mb-6;
|
|
}
|
|
|
|
.branding {
|
|
@apply w-full mb-12 grid relative mt-24 md:mt-32;
|
|
z-index: -1;
|
|
/* .square,
|
|
.rectangle-rotated {
|
|
z-index: -1;
|
|
} */
|
|
.square,
|
|
.rectangle-rotated,
|
|
.circle,
|
|
.rectangle-vertical {
|
|
z-index: -3;
|
|
}
|
|
|
|
.website-title {
|
|
z-index: -2;
|
|
}
|
|
|
|
&__shapes {
|
|
@apply w-full max-w-full grid gap-2 md:gap-24 xl:gap-32 2xl:gap-48 grid-cols-4 h-full absolute left-0;
|
|
top: 0px;
|
|
|
|
div.shape {
|
|
@apply shrink flex flex-col w-full h-full;
|
|
/* background-color: rgba(219, 234, 254, 0.5); */
|
|
top: 0;
|
|
flex-shrink: 1;
|
|
aspect-ratio: 1/1;
|
|
justify-self: center;
|
|
transform-origin: bottom center;
|
|
position: relative;
|
|
bottom: 0;
|
|
}
|
|
div.square:first-child,
|
|
div.rectangle-rotated {
|
|
@apply justify-end;
|
|
}
|
|
img {
|
|
@apply w-full h-fit object-contain;
|
|
aspect-ratio: 1/1;
|
|
flex-grow: 0;
|
|
width: 100%;
|
|
}
|
|
img:last-child {
|
|
@apply object-right;
|
|
}
|
|
}
|
|
|
|
.website-title {
|
|
@apply w-full;
|
|
}
|
|
}
|
|
|
|
.socials {
|
|
a {
|
|
@apply block;
|
|
}
|
|
}
|
|
|
|
ul.credits {
|
|
@apply w-full grid gap-y-12 gap-x-8 lg:gap-x-12 grid-cols-1 md:grid-cols-2; /* Mobile-first: 1 column */
|
|
|
|
@screen lg {
|
|
/* column-gap: 100px; */
|
|
grid-auto-flow: column;
|
|
grid-template-rows: repeat(2, auto);
|
|
grid-template-columns: repeat(4, 1fr);
|
|
|
|
/* > :first-child {
|
|
grid-row: span 2;
|
|
} */
|
|
}
|
|
h3 {
|
|
@apply nunito;
|
|
}
|
|
}
|
|
|
|
ul.mentions {
|
|
@apply w-full grid gap-y-6 gap-x-8 lg:gap-x-12 grid-cols-1 md:grid-cols-2 pt-12;
|
|
@screen lg {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
.mentions {
|
|
li,
|
|
p,
|
|
a {
|
|
@apply text-lg font-light;
|
|
}
|
|
a {
|
|
@apply underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 6px;
|
|
&:hover {
|
|
filter: brightness(1.3);
|
|
}
|
|
}
|
|
|
|
li {
|
|
@apply text-primary;
|
|
}
|
|
li.deligraph_credit {
|
|
@apply flex gap-x-1 items-center;
|
|
img {
|
|
transition: all 0.5s;
|
|
@apply w-5 h-5 filter-primary;
|
|
animation: fade-in-out 3.5s linear infinite;
|
|
/* scale: 1.2; */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes parallax {
|
|
from {
|
|
transform: translateY(-200px);
|
|
}
|
|
to {
|
|
transform: translateY(200px);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in-out {
|
|
10% {
|
|
opacity: 0;
|
|
scale: 0.8;
|
|
}
|
|
40%,
|
|
60% {
|
|
opacity: 1;
|
|
scale: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
scale: 0.8;
|
|
}
|
|
}
|