*,
*::after,
*::before {
box-sizing: border-box;
}
:root{
--amedea--preset--color--white : #fff;
--amedea--preset--color--black : #000;
}
html, body {
scroll-behavior: auto;
}
.ki-description{
width:100%;
}
.unbutton {
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
cursor: pointer;
}
.unbutton:focus {
outline: none;
} .splitting .word,
.splitting .char {
display: inline-block;
}
.splitting .char {
position: relative;
}
.splitting .char::before,
.splitting .char::after {
content: attr(data-char);
position: absolute;
top: 0;
left: 0;
visibility: hidden;
transition: inherit;
user-select: none;
}
.splitting {
--word-center: calc((var(--word-total) - 1) / 2);
--char-center: calc((var(--char-total) - 1) / 2);
--line-center: calc((var(--line-total) - 1) / 2);
}
.splitting .word {
--word-percent: calc(var(--word-index) / var(--word-total));
--line-percent: calc(var(--line-index) / var(--line-total));
}
.splitting .char {
--char-percent: calc(var(--char-index) / var(--char-total));
--char-offset: calc(var(--char-index) - var(--char-center));
--distance: calc(
(var(--char-offset) * var(--char-offset)) / var(--char-center)
);
--distance-sine: calc(var(--char-offset) / var(--char-center));
--distance-percent: calc((var(--distance) / var(--char-center)));
}
.splitting.cells img {
width: 100%;
display: block;
}
@supports (display: grid) {
.splitting.cells {
position: relative;
overflow: hidden;
background-size: cover;
visibility: hidden;
}
.splitting .cell-grid {
background: inherit;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
grid-template: repeat(var(--row-total), 1fr) / repeat(
var(--col-total),
1fr
);
}
.splitting .cell {
background: inherit;
position: relative;
overflow: hidden;
}
.splitting .cell-inner {
background: inherit;
position: absolute;
visibility: visible;
width: calc(100% * var(--col-total));
height: calc(100% * var(--row-total));
left: calc(-100% * var(--col-index));
top: calc(-100% * var(--row-index));
}
.splitting .cell {
--center-x: calc((var(--col-total) - 1) / 2);
--center-y: calc((var(--row-total) - 1) / 2);
--offset-x: calc(var(--col-index) - var(--center-x));
--offset-y: calc(var(--row-index) - var(--center-y));
--distance-x: calc(
(var(--offset-x) * var(--offset-x)) / var(--center-x)
);
--distance-y: calc(
(var(--offset-y) * var(--offset-y)) / var(--center-y)
);
}
} .light .project__name,
.light .project__date,
.light .project__title-line {
color: var(--wp--preset--color--white);
}
.dark .project__name,
.dark .project__date,
.dark .project__title-line {
color: var(--wp--preset--color--black);
}
main {
position: relative;
width: 100%;
overflow: hidden;
}
.unbutton {
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
cursor: pointer;
}
.unbutton:focus {
outline: none;
}
.project {
max-width: 1000px;
margin: 20vh auto 5vh;
display: grid;
grid-column-gap: 7vw;
grid-row-gap: 0.5rem;
}
.project--intro {
grid-template-columns: 1fr;
grid-template-areas:
"label-name"
"name"
"label-date"
"date"
"title"
"label-mission"
"mission";
}
.project--details {
grid-template-areas: "label-default" "paragraph";
grid-template-columns: 1fr;
}
.project--left {
justify-content: start;
}
.project--right {
justify-content: end;
}
.project--details p {
grid-area: paragraph;
max-width: 400px;
}
.project__label--default {
grid-area: label-default;
}
.project p {
line-height: 1.4;
margin: 0;
color: #575757;
}
.project__label {
color: #adadad;
}
.project__label--name {
grid-area: label-name;
}
.project__label--date {
grid-area: label-date;
}
.project__label--mission {
grid-area: label-mission;
}
.project__name {
grid-area: name;
}
.project__date {
grid-area: date;
}
.project__mission {
grid-area: mission;
line-height: 1.4;
}
.project__mission p:first-child {
grid-area: p1;
}
.project__mission p:child {
grid-area: p2;
}
.project__mission p {
color: #575757;
}
.project__title {
grid-area: title;
font-size: clamp(2rem, 13vw, 8rem);
font-weight: 400;
margin: 10vh 0;
line-height: 1;
}
.project__heading {
color: #adadad;
font-weight: inherit;
font-size: inherit;
margin: 0;
}
.heading__small i {
margin-right: 10px;
}
.content__in span {
opacity: 0.75;
}
.light .content__in span {
color: var(--wp--preset--color--white);
}
.heading__small {
margin-top: 48px;
font-size: 14px;
letter-spacing: 1px;
color: var(--wp--preset--color--black);
align-self: center;
}
.light .heading__small {
color: var(--wp--preset--color--white);
}
.light .heading__small,
.light .heading__details,
.light .heading__details.size__medium {
color: var(--wp--preset--color--white);
}
.content__inner span.subsize__medium,
.content__in span.subsize__medium {
line-height: 1.6vw;
font-size: 1.4vw;
letter-spacing: -1px;
}
.content__inner span.subsize__large,
.content__in span.subsize__large {
line-height: 2.0vw;
font-size: 1.6vw;
letter-spacing: -1px;
}
.text__center {
text-align: center;
}
p.text__link {
margin: 25px 0 0;
}
.text__link {
color: var(--wp--preset--color--white);
}
.text__center p.text__link {
margin: 25px auto;
}
.project--vertical {
grid-column-gap: 0;
grid-template-areas: inherit;
grid-template-columns: inherit;
max-width: 700px;
}
.project--vertical.project--left {
margin: 20vh 10vh 0 10vh;
}
.intro__page.welcome__page {
min-height: 120vw;
}
.content__image .grid__left {
grid-column: 1/7;
}
.content__text.content__info {
margin: 8.33333vw;
color: #fff;
font-size: 18px;
}
.content__text {
grid-column-gap: 2.2vw;
display: grid;
align-items: flex-start;
margin: 0 8.35vw;
}
.content__info {
grid-column-gap: 2.2vw;
grid-template-columns: repeat(12, 1fr);
display: grid;
grid-column: 1/13;
}
.welcome__page.content__page {
height: 110vw;
}
.content__page {
display: grid;
grid-template-rows: 100vh 1fr auto;
grid-template-columns: 100%;
width: 100vw;
--imgRatio: 1344 / 896;
height: calc(var(--imgRatio) * 100vw);
padding: 0;
position: relative;
}
.content__image {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-position: 50% 50%;
background-size: cover;
opacity: 1;
}
.content__image__page {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-position: 50% 50%;
background-size: cover;
opacity: 1;
}
.welcome__home .text__title {
font-weight: 600;
letter-spacing: -10px;
font-size: 17vw;
line-height: 15vw;
margin-top: 100px;
}
.welcome__page .text__title {
font-weight: 600;
letter-spacing: -5px;
font-size: 10vw;
line-height: 10vw;
margin-top: 300px;
margin-bottom: 50px;
}
.content__image .text__title {
margin-left: -15px;
color: var(--wp--preset--color--white);
display: flex;
grid-row: 2;
}
.content__image .text__intro {
color: var(--wp--preset--color--white);
grid-column: 1/7;
max-width: 37vw;
padding-top: 20vw;
font-size: 2vw;
line-height: 2.3vw;
letter-spacing: -1px;
}
.content__image .text__second .text__intro {
padding-top: 0.6vw;
}
.content__image .text__intro {
grid-row: 1;
}
.content__image .text__intro__second {
grid-row: 3;
color: var(--wp--preset--color--white);
margin-bottom: 250px;
}
.content__info h4 {
margin-bottom: 2vh;
}
.content__image .text__link {
grid-row: 2;
padding-top: 0.55556vw;
}
.content__image .text__desc {
color: var(--wp--preset--color--white);
max-width: 37vw;
grid-row: 3;
}
.light .content__image .text__desc {
color: var(--wp--preset--color--white);
}
.light .heading__details {
color: var(--wp--preset--color--white);
}
@media screen and (max-width: 53em) {
.content__image .text__intro {
max-width: 74vw;
padding-top: 40vw;
font-size: 4vw;
line-height: 4.6vw;
}
.welcome__home .text__title {
letter-spacing: -5px;
}
.welcome__page.content__page {
height: calc((var(--imgRatio) * 100vw) + 30vw);
}
.welcome__page .text__title {
font-size: 17vw;
line-height: 15vw;
}
.content__page {
--imgRatio: 2688 / 896;
}
.heading__details.size__small {
letter-spacing: -1px;
font-size: 5vw;
}
.heading__details.size__medium {
letter-spacing: -1px; }
.heading__details.size__large {
font-size: 10vw;
line-height: 9vw;
}
.content__image .grid__right {
grid-column: 1/12;
}
.project {
padding: 1rem 3rem;
text-align: center;
}
.text__left {
text-align: center;
}
.content__inner span.subsize__medium,
.content__in span.subsize__medium {
font-size: inherit;
}
.heading__details.size__large {
letter-spacing: -1px;
}
.content__text {
grid-template-columns: repeat(2, 1fr);
margin: 0 16vw;
}
.content__text.content__info {
margin: 8vw 16vw;
}
}
@media screen and (min-width: 53em) {
.project--intro {
grid-template-columns: auto 1fr;
grid-template-areas:
"label-name name"
"label-date date"
"title title"
"label-mission mission";
}
.project--details {
grid-template-areas: "label-default paragraph";
grid-template-columns: auto auto;
}
.project__label {
text-align: right;
}
.project__mission {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-template-areas: "p1 ..." "... p2";
column-gap: 2rem;
}
.content__inner span.subsize__small,
.content__inner span,
.content__in span.subsize__small,
.content__in span {
font-size: 1.2vw;
}
.heading__details.size__small {
letter-spacing: -1px;
font-size: 2.5vw;
}
.heading__details.size__medium {
letter-spacing: -1px;
font-size: 3.5vw;
}
.heading__details.size__large {
letter-spacing: -4px;
font-size: 10vw;
line-height: 9vw;
}
.content__image .grid__right {
grid-column: 7/13;
}
.project {
padding: 1rem;
}
.text__left {
text-align: left;
}
.content__inner span.subsize__medium,
.content__in span.subsize__medium {
line-height: 1.6vw;
}
.heading__details.size__large {
letter-spacing: -4px;
}
.content__text {
grid-template-columns: repeat(12, 1fr);
margin: 0 8vw;
}
.content__client {
grid-column: 1/3;
}
.content__services {
grid-column: 3/5;
}
.content__category {
grid-column: 5/7;
}
.contant__date {
grid-column: 7/9;
}
} .image-tooltip:hover .tool-tip {
display: block;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.tool-tip {
display: none;
margin-top: 20px;
padding: 10px;
min-width: 100%;
position: fixed;
z-index: 1000;
}
.tool-tip span {
position: relative;
left: -10px;
border-radius: 4px;
width: 100%;
height: 100%;
padding: 10px;
}
.tooltip--circle span {
position: absolute;
top: 50%;
background: transparent !important;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
height: auto !important;
}
.tool-tip.tooltip--circle {
min-width: 128px;
min-height: 128px;
border-radius: 300%;
background: #000;
color: #fff;
margin-top: -64px;
margin-left: -64px;
cursor: none;
}
.image-tooltip {
transition: opacity 0.25s ease-in-out;
}
.project-gallery:hover .image-tooltip {
opacity: 0.25;
}
.project-gallery:hover .image-tooltip:hover {
opacity: 1;
} .marquee__container {
--marquee-width: 100vw;
--offset: 20vw;
--move-initial: calc(-25% + var(--offset));
--move-final: calc(-50% + var(--offset));
--item-font-size: 15vw;
height: 100%;
padding: 150px 0;
}
.marquee { width: var(--marquee-width);
overflow: visible;
pointer-events: none;
}
.marquee__inner {
width: fit-content;
display: flex;
position: relative;
transform: translate3d(var(--move-initial), 0, 0);
animation: marquee 20s linear infinite;
transition: opacity 0.1s;
}
.marquee__inner {
animation-play-state: running;
opacity: 1;
transition-duration: 0.6s;
}
.marquee span {
text-align: center;
white-space: nowrap;
font-size: 10vw;
padding: 0 1vw;
line-height: 1.15;
letter-spacing: -5px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
}
.light .marquee span {
color: var(--wp--preset--color--white);
}
.dark .marquee span {
color: var(--wp--preset--color--black);
}
@keyframes marquee {
0% {
transform: translate3d(var(--move-initial), 0, 0);
}
100% {
transform: translate3d(var(--move-final), 0, 0);
}
} .header-title {
width: 100%;
min-height: 85vh;
display: flex;
align-items: self-end;
}
.header-title h1 {
padding: 0 125px;
font-weight: 600;
}
.header-title h1.small{
line-height: 4vw;
letter-spacing: -3px;
}
.header-title h1.large{
font-size: 9vw;
line-height: 10vw;
letter-spacing: -5px;
}
.header-title h1.light {
font-size: 8vw;
text-transform: uppercase;
letter-spacing: 5px;
font-style: italic;
font-weight: 200;
}
.header-title h1 span {
font-size: 1.3vw;
letter-spacing: 1px;
display: block;
font-weight: 400;
text-transform: uppercase;
}
h1.absolute-h {
position: absolute;
top: 50%;
text-align: center;
left: 50%;
transform: translate(-50%, -50%);
font-weight: 600;
font-size: 6vw;
line-height: 6vw;
}
.parallax {
height: 100%;
width: 100%;
}
.bg {
min-height: 100vh;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
z-index: 20;
position: relative;
padding: 10vw 20vw;
}
.bg.contain--{
background-size: contain;
}
.bg.cover--{
background-size: cover;
}
.bg__img {
margin: auto;
display: block;
margin: 20vw auto;
width: 100%;
}
.light .header-title h1,
.light h1.absolute-h {
color: var(--wp--preset--color--white);
}
.dark .header-title h1,
.dark h1.absolute-h{
color: var(--wp--preset--color--black);
}
@media screen and (min-width: 53em) {
.h1.absolute-h{
letter-spacing: -5px;
}
} .contact__container {
overflow: hidden;
}
.map__image {
height: 50vh;
filter: invert(1);
}
.contact__page {
display: flex;
grid-template-rows: 100vh 1fr auto;
grid-template-columns: 100%;
width: 100vw;
height: min-content;
min-height: 100vh;
padding: 0;
position: relative;
}
.contact__page .content__inner {
align-self: start;
justify-self: start;
}
.contact__minimal {
grid-column-gap: 2.3vw;
grid-template-columns: repeat(12, 1fr);
display: grid;
align-items: flex-start;
}
.contact__default {
grid-column-gap: 2.3vw;
grid-template-columns: repeat(12, 1fr);
display: grid;
align-items: flex-start;
margin: 9vw;
}
.contact__form {
grid-column-gap: 2.3vw;
grid-template-columns: repeat(12, 1fr);
display: grid;
align-items: flex-end;
margin: 15vw 2.5vw;
}
.contact__page .contact__form p {
margin: 24px 0;
}
.form__inner_third {
grid-column: 9/12;
}
.text__inner {
grid-column: 2/7;
padding-bottom: 50px;
}
.form__inner_second h1 {
position: relative;
letter-spacing: -1px;
font-weight: 600;
}
.contact__image {
width: 25vw;
height: 40vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-5%, -50%);
}
.contact__image_form {
width: 25vw;
height: 40vw;
position: absolute;
top: 12%;
}
.contact__default .text__inner {
grid-column: 2/5;
padding-bottom: 50px;
}
.marquee__contact.marquee__container {
padding: 0 !important;
}
.contact__page p {
font-size: 17px;
font-weight: 300;
line-height: 27px;
margin: 0 0 24px 0;
}
.contact__page h2 {
letter-spacing: -1px;
font-weight: 700;
font-size: 36px;
line-height: 48px;
}
.contact__page h5 {
text-transform: inherit;
margin-bottom: 13px;
}
.contact__page .text__link {
text-shadow: none;
}
@media screen and (max-width: 53em) {
.text__inner_second {
grid-column: 2/10;
}
.text__inner_third {
grid-column: 2/10;
}
.text__inner_last {
padding-top: 50px;
grid-column: 2/10;
}
.form__inner {
grid-column: 4/10;
}
.form__inner_second {
grid-column: 4/10;
text-align: center;
}
.text__inner.inner_marquee{
padding-top: 100px;
}
.contact__minimal {
margin: 15vw 15vw;
}
.contact__minimal .text__inner,
.contact__minimal .text__inner_second {
grid-column: 2/12;
}
}
@media screen and (min-width: 53em) {
.text__inner_second {
grid-column: 2/4;
}
.text__inner_third {
grid-column: 4/6;
}
.text__inner_last {
padding-top: 50px;
grid-column: 11/13;
}
.form__inner {
grid-column: 1/3;
}
.form__inner_second {
grid-column: 4/9;
}
.form__inner_second h1 {
left: -15vw;
padding-bottom: 150px;
}
.contact__minimal {
margin: 15vw 2.5vw;
}
}
.dark .contact__page .text__link,
.dark .contact__page .text__link a,
.dark .contact__page .content__inner,
.dark .marquee span {
color: var(--wp--preset--color--black);
}
.light .contact__page .text__link,
.light .contact__page .text__link a,
.light .contact__page .content__inner,
.light .marquee span {
color: var(--wp--preset--color--white);
} .about__container {
padding: 14.5vw 8.5vw;
width: 100vw;
height: 100%;
}
.about__image {
position: fixed;
right: 0;
top: 0;
width: 50vw;
height: 100vh;
background-position: center center;
background-size: cover;
}
.about__split {
width: 30vw;
}
.text--vertical {
position: fixed;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
font-size: 127px;
line-height: 70px;
margin-bottom: 25px;
top: 7vw;
left: 45.5%;
font-weight: 700;
opacity: 0.1;
z-index: 10;
}
.about__split h1 {
padding-bottom: 150px;
letter-spacing: -1px;
font-weight: 600;
}
.about__split h1:after {
position: absolute;
display: block;
width: 5%;
background: #000;
height: 3px;
content: "";
margin: 20px 0 0;
}
.about__split h5 {
line-height: 1.6em;
font-weight: 200;
padding: 15px 0;
text-transform: inherit;
font-size: 21px;
}
ul.split--social-icons {
list-style-type: none;
padding-inline-start: 0;
margin-top: 100px;
}
.about__minimal h1 {
font-weight: 600;
letter-spacing: -10px;
font-size: 10vw;
margin-bottom: 0;
}
.about__minimal .about__text {
max-width: 680px;
}
.about__minimal.image {
width: 30vw;
height: 100vh;
position: fixed;
top: 0;
right: 0;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
background-size: cover;
}
.about__minimal ul.split--social-icons li:first-child {
margin-bottom: 25px;
}
@media screen and (max-width: 53em) {
.about__minimal {
width: 50vw;
margin-left: 10vw;
}
.about__minimal h1 {
letter-spacing: -5px;
}
.about__minimal.image {
opacity:0;
}
}