html {
overflow: hidden auto;
}
.wrapper {
padding: 0 124px;
}
body {
background: #f5f5f5;
overflow-y: auto;
}
header {
&.hide {
opacity: 0;
}
&.small {
background-color: #fff;
position: fixed;
.logo {
filter: invert(1);
}
}
}
.promo {
.preview {
position: relative;
img {
height: calc(100dvh - 160px);
min-height: calc(100dvh - 160px);
transition: height 1.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
p {
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
transition: bottom 1.2s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 1.2s cubic-bezier(0.075, 0.82, 0.165, 1);
opacity: 1;
max-width: 80%;
color: #f5f5f5;
text-align: center;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.32px;
text-transform: uppercase;
}
}
.box {
display: flex;
justify-content: space-between;
align-items: end;
gap: 24px;
margin-top: 48px;
h1 {
font-size: 60px;
line-height: 1.6;
text-transform: uppercase;
position: relative;
transition: bottom 1.2s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
opacity: 1;
}
span {
color: #7a7a7a;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.32px;
text-transform: uppercase;
margin-bottom: 24px;
position: relative;
bottom: 0px;
transition: bottom 1.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
}
.info {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 64px 0 80px;
p,
span {
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.32px;
text-transform: uppercase;
}
span {
color: #7a7a7a;
}
}
}
.pink-madness .project-wrapper {
.img-box:nth-child(13) {
margin-bottom: 8px;
}
}
.project-wrapper {
img {
height: 100%;
object-fit: cover;
}
.mobile {
display: none;
}
.img-box {
gap: 8px;
justify-content: center;
margin-bottom: 120px;
&:has(+ .img-box-12-2) {
margin-bottom: 10px;
}
&:not(.wrapper) {
display: grid;
grid-template-columns: repeat(2, 1fr);
> div {
&:first-child {
grid-column: span 2;
}
}
> div:nth-child(even):not(:has(+ div)) {
grid-column: span 2;
}
&:not(:has(> div:nth-child(3))):has(> div:nth-child(2)) > div {
grid-column: auto;
}
}
&.wrapper {
display: flex;
img {
width: 100%;
height: 100%;
}
}
&:has(+ .text-box) {
margin-bottom: 0;
}
&.gallery {
display: flex;
> div {
position: relative;
display: flex;
flex: 1;
&:has(video) {
&::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 3;
}
}
video {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
}
&:has(>div:nth-child(4)) {
> div {
aspect-ratio: 1;
}
}
}
}
.text-box {
margin: 48px 0 120px;
color: #7a7a7a;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.32px;
text-transform: uppercase;
padding-right: calc(100% - 916px);
}
.mobile-text {
display: none;
}
}
footer {
position: relative;
height: 1024px;
overflow: hidden;
video {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
img {
position: absolute;
z-index: 1;
bottom: -430px;
width: 2026px;
}
display: block;
aspect-ratio: 1440/1024;
padding: 0;
.wrapper {
width: 120px;
display: flex;
flex-direction: column;
gap: 52px;
margin: 0 auto;
padding: 0;
padding-top: 220px;
}
* {
color: #262626;
}
nav.main-menu {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
a {
display: flex;
text-align: center;
font-size: 14px;
}
}
.social-menu {
display: flex;
align-items: center;
gap: 24px;
.social {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
&::after {
font-family: 'icon-social';
font-size: 24px;
}
&.email::after {
content: '\e001';
}
&.inst::after {
content: '\e002';
}
&.whatsapp::after {
content: '\e003';
}
}
a:first-of-type {
display: none;
}
}
.button-box {
display: inline-block;
position: relative;
width: fit-content;
button {
display: inline-block;
color: #262626;
line-height: 1.5;
letter-spacing: 0.32px;
text-transform: uppercase;
margin: 24px 24px 0 0;
transition: .2s linear;
background: none;
margin: 0;
&.active + .chip {
animation: chip-animation-2 2s;
}
}
.chip {
&::before {
content: '\e900';
font-family: icon;
line-height: 1;
font-weight: 100;
color: inherit;
font-size: 16px;
}
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 9px 12px 7px;
background: #7a7a7a;
display: flex;
align-items: center;
gap: 6px;
width: fit-content;
white-space: nowrap;
color: #f5f5f5;
font-size: 12px;
line-height: 1;
letter-spacing: 0.32px;
text-transform: uppercase;
pointer-events: none;
opacity: 0;
}
}
a,
.lang {
margin: 0;
}
}
@media (max-width:1439px) {
.wrapper {
padding: 0 100px;
}
.project-wrapper {
.img-box {
margin-bottom: 96px;
}
.text-box {
margin: 48px 0 96px;
padding-right: 0;
max-width: 850px;
}
}
footer {
aspect-ratio: 120/96;
}
}
@media (max-width:1199px) {
.wrapper {
padding: 0 84px;
}
& .project-wrapper {
.promo {
.box {
margin-top: 24px;
}
.info {
margin: 56px 0 80px;
}
}
.img-box {
margin-bottom: 80px;
}
.text-box {
margin: 48px 0 80px;
padding-right: 0%;
max-width: 728px;
}
}
footer {
height: 768px;
aspect-ratio: 120/96;
img {
bottom: -123px;
width: 973px;
}
.wrapper {
padding-top: 198px;
}
}
}
@media (max-width:1023px) {
.project-wrapper {
.wrapper {
padding: 0 52px;
}
.promo {
.preview {
img {
height: calc(100dvh - 100px);
}
p {
max-width: 90%;
font-size: 14px;
letter-spacing: 0.28px;
line-height: 1.43;
}
}
.box {
h1 {
font-size: 44px;
line-height: 1.45;
}
span {
margin-bottom: 10px;
}
}
.info {
margin: 40px 0 48px;
flex-direction: column;
align-items: start;
gap: 24px;
}
}
.img-box {
margin-bottom: 48px;
}
.text-box {
margin: 28px 0 48px;
padding-right: 17px;
}
}
footer {
height: 512px;
aspect-ratio: 768/512;
background: url(../images/footer2.webp) left 0 bottom 0 / 100% auto no-repeat, #d8d8d8;
img {
width: 100%;
bottom: -165px;
}
.wrapper {
padding-top: 93px;
}
}
}
@media (max-width:767px) {
header .logo {
max-width: 60px;
}
.project-wrapper {
.wrapper {
padding: 0 28px;
}
.promo {
.preview {
height: calc(100dvh - 70px);
img {
height: calc(100dvh - 70px);
}
p {
width: 100%;
bottom: 17px;
font-size: 14px;
letter-spacing: 0.24px;
line-height: 1.33;
text-transform: none;
}
}
.box {
h1 {
font-size: 32px;
line-height: 1.5;
}
span {
display: none;
}
}
.info {
margin: 24px 0 28px;
p,
span {
font-size: 14px;
line-height: 1.43;
letter-spacing: 0.28px;
text-transform: none;
}
}
}
.img-box {
margin-bottom: 28px;
}
.text-box {
margin: 20px 0 28px;
padding-right: 28px;
text-transform: none;
}
}
footer {
aspect-ratio: 48/40;
height: 400px;
.wrapper {
padding-top: 54px;
}
img {
width: 100%;
bottom: -80px;
}
.social-menu a:first-of-type {
display: flex;
}
.button-box {
display: none;
}
}
header.small {
padding-top: 32px;
.logo {
max-width: 60px;
}
}
}
@media (max-width:479px) {
header {
position: fixed;
top: 0;
transition: .3s linear;
&.white {
background-color: #f5f5f5;
.logo,
.burger {
filter: invert(1);
}
&.show {
background-color: #d7d7d7;
}
}
}
.project-wrapper {
display: flex;
flex-direction: column;
.wrapper {
padding: 0 16px;
&.img-box {
padding: 0;
}
}
.promo {
margin-bottom: 60px;
order: -5;
.preview {
min-height: calc(100dvh - 90px);
height: calc(100dvh - 90px);
img {
height: 100%;
}
}
.preview p {
bottom: 16px;
width: calc(100% - 32px);
}
.box {
margin-top: 16px;
h1 {
bottom: -15px;
left: 15px;
font-size: 24px;
}
}
.info {
margin: 44px 0 0;
padding: 0 32px;
}
}
.img-box {
margin: 0 32px 60px !important;
&.wrapper:not(.gallery),
&:not(.wrapper) {
display: flex;
flex-direction: column;
gap: 60px;
}
&.gallery {
&:not(:has(div:nth-child(4))) {
flex-direction: column;
gap: 60px;
}
&:has(div:nth-child(4)) {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
&.img-box-1.wrapper {
display: contents;
div {
margin: 0 32px 60px;
&:first-child {
order: -2;
}
}
+ p + .gallery,
+ .gallery {
order: -1;
}
}
}
.mobile-text {
display: flex;
flex-direction: column;
width: 80%;
margin: 0 auto 60px;
gap: 20px;
p {
color: #7a7a7a;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.28px;
font-weight: 400;
}
}
.mobile {
display: flex;
flex-direction: column;
width: 80%;
gap: 60px;
margin: 0 auto;
margin-bottom: 60px;
}
.text-box {
margin: 16px 0;
font-size: 14px;
line-height: 1.4;
letter-spacing: 0.28px;
padding-right: 16px;
}
.text-box {
display: none;
}
}
footer {
height: 568px;
aspect-ratio: 320/568;
background: url(../images/footer4.webp) left 0 bottom 0 / 100% auto no-repeat, #d8d8d8;
.wrapper {
width: 100%;
padding-top: 159px;
flex-direction: column;
align-items: center;
gap: 50px;
}
img {
width: 100%;
height: 160px;
bottom: 0;
}
nav {
align-items: center;
gap: 17px;
a {
font-size: 14px;
}
}
}
}