/************************************************************************************************************** ***** COMPONENTS ********************************************************************************************** **************************************************************************************************************/ .components .container{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--padding-sectionY-double, 160px); } .component--images .grid-column{overflow: hidden;} .component--images picture{ height: clamp(500px, 100%, 750px);} .component--images picture img{ width: 100%; height: 100%; object-fit: cover; /*min-height: 400px; height: 100%; max-width: 750px;*/ } /***************************/ /* Single Page/Post ********/ /***************************/ main section.single-page{ padding-top: var(--padding-sectionY-triple, 240px); padding-bottom: var(--padding-sectionY-double, 160px); } .single-page{max-width: var(--mxw-md, 960px);margin-inline: auto;} .single-page .single-page-header{margin-bottom: var(--gap-700, 48px);} h1.hero-title, h1.page-title, h1.post-title{text-transform: uppercase;text-align: center;} @media(max-width:767px){ main section.single-page{padding-bottom: var(--padding-sectionY, 50px);} .single-page .single-page-header{margin-bottom: var(--gap-500, 24px);} } /***************************/ /* Hero Section ************/ /***************************/ #hero{position:relative;isolation: isolate;} #hero .hero-content{width: 100%;max-width: var(--mxw-md, 960px);margin-inline: auto;} #hero .hero-content h1, #hero .hero-content p{text-align: center;} #hero .hero-content .hero-title + .hero-description:not(:empty){margin-top: var(--gap, 16px);} #hero .hero-content .hero-actions{display: flex; gap:var(--gap-500, 24px);} @media(max-width:1024px){ #hero{padding-top: var(--padding-sectionY-double, 100px);padding-bottom: var(--padding-sectionY, 50px);} #hero .hero-content .hero-actions{flex-wrap: wrap;gap: var(--gap-300, 12px);} } /***************************/ /* Section Header **********/ /***************************/ .section-header{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: var(--gap, 16px);} .section-header .section-title{} .section-header .section-description, .section-header .section-description p{font-size: var(--fs-500, 22px);} .section-header .section-actions{margin-top: var(--gap-700, 48px);} .section-header .section-description:empty{display: none;} @media(max-width:1024px){} /***************************/ /* Jumbo Image **********/ /***************************/ section#hero-image.jumbo-image{padding-top: var(--padding-sectionY-double, 160px);} .jumbo-image{overflow:hidden;padding-inline: 0;} .jumbo-image picture, .jumbo-image picture img{width: 100%;height: inherit;} .jumbo-image picture{clip-path: polygon(var(--clip-path-min, 5%) var(--clip-path-min, 5%), var(--clip-path-min, 5%) var(--clip-path-max, 95%), var(--clip-path-max, 95%) var(--clip-path-max, 95%), var(--clip-path-max, 95%) var(--clip-path-min, 5%));} .jumbo-image picture img{transform: scale(1.0);object-fit: cover;} /***************************/ /* Marquee *****************/ /***************************/ /* This Project */ section#marquee{isolation: isolate;} section#marquee{padding-bottom:280px;} section > .marquee{position: absolute;z-index: -1;bottom: -20%;font-size: clamp(20px, 20vw, 400px);text-transform: uppercase;color: black;opacity: 0.05;} /** * Only run animations when reduced motion is not set * Thanks @patrick_h_lauke@mastodon.social for the heads up! * * ::before ****************************************************************** * Abusing `content` property and `attr` function to duplicate content in CSS * * *** 0% ******************************************************************** * -2% is used to start scrolling with an offset (visual only) * * *** 100% ****************************************************************** * -2% offset has to be preserved * * Content is duplicated 20 times * 100% / 20 = 5 % = "1 content length" * * -1px seems to prevent a small jump between each loop **/ .marquee{--translate-3d-x: -5%;overflow: hidden;display: flex;align-items: center;} .marquee::before { display: block; white-space: pre; content: attr(data-text) " " attr(data-text) " " attr(data-text) " " attr(data-text) " " attr(data-text) " " attr(data-text) " " attr(data-text) " " attr(data-text) " " attr(data-text) " " attr(data-text) " " attr(data-text) " " attr(data-text) " " attr(data-text) " " attr(data-text) " " attr(data-text) " " attr(data-text) " " attr(data-text) " " attr(data-text) " " attr(data-text) " " attr(data-text); width:-webkit-fit-content; width:-moz-fit-content; width:fit-content; transform: translate3d(var(--translate-3d-x, -2%), 0, 0); will-change: transform; } @media (prefers-reduced-motion: no-preference) { .marquee::before {animation: marquee 20s linear infinite;} /* .marquee--reverse::before {animation-direction: reverse;}*/ } @keyframes marquee { 0% {transform: translate3d(var(--translate-3d-x, -2%), 0, 0);} 100% {transform: translate3d(calc(var(--translate-3d-x) - 5% - 1px), 0, 0);} } @media(max-width:767px){ section#marquee{padding-bottom:var(--padding-sectionY, 50px)} section > .marquee{bottom:-5%;font-size: clamp(50px, 50vw, 100px);} } /***************************/ /* Floating Image **********/ /***************************/ #floating-image .floating-space{background-color: #00000000;position:relative;width: 100%;height: 100%;} #floating-image .floating-space__image, #floating-image .floating-space__text{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);user-select: none;} #floating-image .floating-space__text{width: 100%;max-width: var(--mxw-xl, 1420px);text-transform: uppercase;padding-inline: var(--padding-sectionX, 50px);} #floating-image .floating-space__text.front{color: transparent;-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: rgba(255, 255, 255, .8);} #floating-image .floating-space__image{ width: clamp(200px, 20%, 500px); aspect-ratio: 3/4; pointer-events: none; position: relative; } .floating-space__image .space__image_bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background-image: url('../images/sample-floating-image.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; } @media(max-width:1024px){ #floating-image.full-height{min-height: 700px;height: 70vh;height: 70svh;} #floating-image .floating-space__image{width: clamp(250px, 40%, 80vw);} #floating-image .floating-space__text{padding-inline: 0;} } @media(max-width:767px){ #floating-image.full-height {min-height: 450px;height: 40vh;height: 40svh;padding-top:120px;} #floating-image .floating-space__image{width: clamp(250px, 60%, 80vw);} } @media(max-width:1024px){.floating-space__image .floating-effect{animation: float 5s ease-in-out infinite;}} @keyframes float { 0%, 100% {transform: translatey(10px);} 50%{transform: translatey(-10px);} } /***************************/ /* Component Services ******/ /***************************/ #component-services{padding-inline: 0;} #component-services .container-fluid{position: relative;} #component-services .bg-item{position: absolute;inset: 0;clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);} #component-services .section-header{margin-bottom: var(--gap-1000, 96px);} #component-services .services__body > .grid{grid-template-columns: 8fr 5fr;gap: calc(var(--container-grid-column, 100px) + var(--container-grid-gap, 20px));} /* Thumbnails */ #component-services .services__thumbnails{position: relative;position:sticky;width: 100%;aspect-ratio: 4/5;max-height: 580px;overflow: hidden;} #component-services .services__thumbnails picture{position: absolute;inset:0;width: 100%;height: 100%;} #component-services .services__thumbnails picture img{width: 100%;height: 100%;object-fit: cover;} /* Thumnails -- DEMO CSS */ /*#component-services .services__thumbnails{overflow: visible;}*/ #component-services .services__thumbnails picture.current img{transform: translate(0%, 0%) scale(1.2);} /* Accordion */ #component-services .accordion-tab{--icon:42px;border-bottom: 1px solid var(--color-accent-alt, #8F6913);margin-bottom: 0;} #component-services .accordion-head{padding-block: var(--gap-600, 32px);font-size: var(--fs-700, 42px);line-height: var(--lh-200, 1.20);text-transform: uppercase;color: var(--color-accent-alt, #8F6913);} #component-services .accordion-head > *{pointer-events: none;} #component-services .accordion-content .content{padding-top: 0;padding-bottom: var(--gap-400, 16px);} #component-services .accordion-content .content{display: grid;grid-template-columns: 1fr var(--icon, 42px);gap:var(--gap-400, 16px);align-items: end;} #component-services .accordion-content .content a{pointer-events: all;overflow: hidden;} #component-services .accordion-content .content a img{transition: var(--trans);transform: translate(-100%, -100%);transition-delay: var(--trans-duration);} #component-services .accordion-content .accordion__text{max-width: var(--mxw-sm, 700px);} #component-services .accordion-tab[aria-selected="true"] .content a img{transform: translate(0%, 0%);transition-delay: var(--trans-duration-500);} #component-services .accordion-tab[aria-selected="true"] .accordion-head{color: var(--color-text, black);} @media(max-width:767px){ #component-services .container.py-2{padding-bottom: var(--padding-sectionX);} #component-services .section-header{margin-bottom: var(--gap-500, 24px);} #component-services .services__body > .grid{grid-template-columns: 1fr;gap: var(--gap-500, 24px);} /* Thumbnails */ #component-services .services__thumbnails{width: calc(100% - var(--padding-sectionX, 20px) * 2);max-height: 350px;margin-inline: auto;} /* Accordion */ #component-services .accordion-tab{--icon:32px;padding-inline: var(--padding-sectionX, 20px);} #component-services .accordion-tab:last-child{border-bottom: 0;} #component-services .accordion-head{padding-block: var(--gap-500, 24px);font-size: var(--fs-600, 42px);} } /************************************************************************************************************** ***** ARCHIVES ************************************************************************************************ **************************************************************************************************************/ /***************************/ /* Project *****************/ /***************************/ .project-card{ width: 100%; /* max-width: 820px;*/ display: block; margin-inline: auto; } .project-card .card__thumbnail{position: relative;width: 100%;height: 0px;max-height: 500px;padding-top: 60%;overflow: hidden;} .project-card .card__thumbnail img{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;} @supports(aspect-ratio: 1){ .project-card .card__thumbnail{height: auto;padding-top:0;} .project-card .card__thumbnail img{position: relative;aspect-ratio: 1.6;} } .project-card .card__content{ margin-top: var(--gap-600, 32px); padding-inline: var(--gap-600, 32px); /* display: none;*/ } .project-card .card__title, .project-card .card__description{ text-align: center; } .project-card .card__title{ margin-bottom: var(--gap-400, 16px); font-size: var(--fs-700, 42px); line-height: var(--lh-200, 1.20); } @media(max-width:1024px){ .project-card .card__content{padding: 0;} } /***************************/ /* Project In Slider *******/ /***************************/ .swiper--projects .swiper-slide{ /*min-height: 100vh; min-height: 100svh;*/ position: relative; display: flex; } .swiper--projects .swiper-slide .project-card{ width: 100%; /*position: absolute; top: 0%; left: 50%; transform: translate(-50%, 0%); transition: var(--trans);*/ } /* .swiper--projects .swiper-slide.swiper-slide-prev .project-card{top: 0%;transform: translate(-50%, 0%);} .swiper--projects .swiper-slide.swiper-slide-active .project-card{top: 50%;transform: translate(-50%, -50%);} .swiper--projects .swiper-slide.swiper-slide-next .project-card{top:100%; ;transform: translate(-50%, -100%);} .swiper--projects .swiper-slide .project-card .card__thumbnail{ clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%); transition: var(--trans); } .swiper--projects .swiper-slide.swiper-slide-active .project-card .card__thumbnail{ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } @media(max-width:1024px){ .swiper--projects .swiper-slide{min-height: unset;} .swiper--projects .swiper-slide .project-card{position: relative;left: 0;transform: translate(0px, 0px);} .swiper--projects .swiper-slide.swiper-slide-prev .project-card, .swiper--projects .swiper-slide.swiper-slide-active .project-card, .swiper--projects .swiper-slide.swiper-slide-next .project-card{top: 0%;transform: translate(0%, 0%);} #carousel--projects .swiper-actions{margin-top: var(--gap-500, 24px);} } */ /************************************************************************************************************** ***** PAGES *************************************************************************************************** **************************************************************************************************************/ /***************************/ /* Homepage ****************/ /***************************/ @media(min-width:1025px){ #carousel--projects{padding-top:var(--padding-sectionY-double, 160px)} #carousel--projects .section-header{transform: translateY(50%);} #carousel--projects .swiper-slide .card__content{transform:translateY(150px);transition: all 800ms ease-in-out;} #carousel--projects .swiper-slide.swiper-slide-active .card__content{transform:translateY(0px);} } /***************************/ /* Projects Page ***********/ /***************************/ #arc_projects{} .filters-controls{margin-bottom: var(--gap-900, 96px);display: flex;justify-content: center;align-items: center;gap: var(--gap-700, 48px);flex-wrap:wrap;} .filters-controls button{position: relative;padding:var(--gap-200, 8px);font-family: var(--ff-sans);font-size: var(--fs-btn, 16px);color:var(--color-text, #000000);letter-spacing: var(--ls-100, 0.1em);text-transform: uppercase;flex-shrink: 0;isolation:isolate;} .filters-controls button::before{content: '';position: absolute;inset: 50% 100% 0 0;background-color: var(--color-accent, #FDB52B);z-index: -1;transition: var(--trans);} .filters-controls button:hover::before, .filters-controls button:focus::before, .filters-controls button[aria-selected="true"]::before{inset: 50% 0% 0 0;} .filters-panel.gap{column-gap: var(--padding, 20px);row-gap: var(--gap-900, 96px);} .filters-actions{margin-top: var(--gap-900, 96px);} @media(max-width:1024px){.filters-controls {margin-bottom: var(--gap-600, 32px);gap: var(--gap);justify-content:flex-start;}} /***************************/ /* Single Project Post *****/ /***************************/ /* Single Project - Details */ #project-details{} #project-details .details-title{margin-bottom: var(--gap-700, 48px);text-transform: uppercase;text-align: center;} #project-details .details-grid.grid[data-columns="2"]{grid-template-columns: 5fr 7fr;gap:var(--gap-600, 32px);} #project-details .details-list-item{display: grid;grid-template-columns: 1fr 3fr;gap:var(--gap-600, 32px);} #project-details .details-list-item:not(:last-child){margin-bottom: var(--gap-300, 12px);} #project-details .details-list-item .details__icon{flex-shrink: 0;} #project-details .details-list-item .details__label{font-family: var(--ff-sans);font-size: var(--fs-400, 18px);text-transform: uppercase;} #project-details .details-list-item .details__label.btn-mark{padding-top: var(--gap-100, 4px);} /* #project-details .details-list-item .details__label.btn-mark::before{inset: 100% 0 0 0;} #project-details .details-list-item .details__label.btn-mark:hover::before{inset: 60% 0 0 0;} */ #project-details .details-attached{margin-top: var(--gap-600, 32px);} #project-details .details-attached .details__val.multiple{display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;} #project-details .details-attached .details-list-item--subitem{display: inline-flex;gap: var(--gap-300, 12px);} /* Single Project - Gallery */ #project-gallery{overflow: hidden;padding-inline:0;} /*#project-gallery .swiper-slide,*/ #project-gallery .swiper-slide img{transition: var(--trans-image-600);} /*#project-gallery .swiper-slide{clip-path: polygon(0% 10%, 100% 10%, 100% 90%, 0% 90%);} #project-gallery .swiper-slide.swiper-slide-active{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}*/ #project-gallery .swiper-slide img{transform: scale(1);} #project-gallery .swiper-slide.swiper-slide-active img{transform: scale(1.05);} @media(max-width:1024px){ /* Single Project - Details */ #project-details .details-grid.grid[data-columns="2"]{grid-template-columns: 1fr;gap:var(--gap-700, 48px);} /* Single Project - Gallery */ #project-gallery{ padding-block: var(--padding-sectionY, 60px); padding-inline: var(--padding-sectionX, 30px); } } /***************************//***************************/ /* Contact Page ************//* Request Page ************/ /***************************//***************************/ #contact, #request{padding-top: var(--padding-sectionY-triple, 240px);} #contact .hero-content, #request .hero-content{margin-bottom: var(--gap-900, 80px);} @media(max-width:767px){ #contact .hero-content, #request .hero-content{margin-bottom: var(--gap-700, 48px);} } /***************************/ /* Contact Page ************/ /***************************/ #contact .hero-content{margin-bottom: var(--gap-900, 80px);} #contact .grid-column-header{margin-bottom: var(--gap-700, 48px);} #contact .grid-column-header .heading.heading--sub{margin-top: var(--gap-300, 12px);} #contact #column-form .heading.heading--sub{font-size: var(--fs-300, 16px);} #contact address a.btn-mark{font-size: unset;line-height: unset;text-transform: none;letter-spacing: 0;margin-left: calc(-1 * var(--gap-200, 8px));} @media(max-width:767px){ #contact #column-info{display: none;} #contact .grid-column-header{margin-bottom: var(--gap-500, 24px);} } /***************************/ /* Request Page ************/ /***************************/ #request-page{} /***************************/ /* Policy Pages ************/ /***************************/ #policy-page{padding-top: var(--padding-sectionY-triple, 240px);padding-bottom: var(--padding-sectionY-double, 160px);} #policy-page.single-page .single-page-header{margin-bottom: var(--gap-1000, 96px);} #policy-page .content h1, #policy-page .content h2, #policy-page .content h3, #policy-page .content h4, #policy-page .content h5, #policy-page .content h6{font-size: var(--fs-800, 52px);} #policy-page .content h1:not(:first-child), #policy-page .content h2:not(:first-child), #policy-page .content h3:not(:first-child), #policy-page .content h4:not(:first-child), #policy-page .content h5:not(:first-child), #policy-page .content h6:not(:first-child), #policy-page .content .lineChildren:not(:first-child) h1, #policy-page .content .lineChildren:not(:first-child) h2, #policy-page .content .lineChildren:not(:first-child) h3, #policy-page .content .lineChildren:not(:first-child) h4, #policy-page .content .lineChildren:not(:first-child) h5, #policy-page .content .lineChildren:not(:first-child) h6{margin-top: 120px;} @media(max-width:767px){ #policy-page{padding-bottom: var(--padding-sectionY, 50px);} #policy-page.single-page .single-page-header{margin-bottom: var(--gap-700, 48px);} #policy-page .content h1:not(:first-child), #policy-page .content h2:not(:first-child), #policy-page .content h3:not(:first-child), #policy-page .content h4:not(:first-child), #policy-page .content h5:not(:first-child), #policy-page .content h6:not(:first-child), #policy-page .content .lineChildren:not(:first-child) h1, #policy-page .content .lineChildren:not(:first-child) h2, #policy-page .content .lineChildren:not(:first-child) h3, #policy-page .content .lineChildren:not(:first-child) h4, #policy-page .content .lineChildren:not(:first-child) h5, #policy-page .content .lineChildren:not(:first-child) h6{margin-top: var(--gap-700, 48px)} }