html {
scrollbar-gutter: stable;
}
ul {padding: 0 !important; margin: 0 !important; list-style: none;}
.btn {background: #7A8065;}
.btn:hover {background: #676d55;}
.menu-btn a {background: #7A8065;}
.menu-btn a:hover {background: #676d55;}
.mobile-menu .ct-menu-link {padding-left: 15px !important;}
.bg-black {background: var(--theme-palette-color-5) !important;}
.bg-grey {background: var(--theme-palette-color-6) !important}
/* =========================================
HIGHLINE SCROLL REVEAL
========================================= */
.highline-reveal {
opacity: 0;
transform: translateY(30px);
transition:
opacity .8s cubic-bezier(.2,.7,.2,1),
transform .8s cubic-bezier(.2,.7,.2,1);
will-change: opacity, transform;
}
.highline-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Slightly slower variant */
.highline-reveal--slow {
transition-duration: 1.1s;
}
/* Small delay */
.highline-reveal--delay-1 {
transition-delay: .1s;
}
.highline-reveal--delay-2 {
transition-delay: .2s;
}
.highline-reveal--delay-3 {
transition-delay: .3s;
}
/* =========================================
HIGHLINE OCCASIONAL SHINE
========================================= */
.highline-shine {
color: #f5f5f2;
padding-right: 10px;
background:
linear-gradient(
125deg,
#f5f5f2 0%,
#f5f5f2 42%,
rgba(255,255,255,.28) 50%,
#f5f5f2 58%,
#f5f5f2 100%
);
background-size: 300% 100%;
background-position: 150% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation:
highlineTextShine 5s
ease-in-out
infinite;
}
@keyframes highlineTextShine {
0% {
background-position: 150% 0;
}
100% {
background-position: -50% 0;
}
}
.highline-link {
display: inline-flex;
align-items: center;
gap: 12px;
color: #f5f5f2 !important;
background: transparent !important;
text-decoration: none !important;
font-size: 10px;
font-weight: 600;
letter-spacing: .15em;
cursor: pointer;
}
/* Arrow */
.highline-link::after {
content: "↗";
display: inline-block;
color: #f5f5f2;
font-size: 17px;
font-weight: 400;
line-height: 1;
background: #7A8065 !important;
transition: transform .3s ease;
padding: 0 3px 3px;
}
/* Hover */
.highline-link:hover::after {
transform: translate(4px, -4px);
background: #676d55 !important;
}
/* =========================================================
CINEMATIC SPLIT HERO
========================================================= */
.cinematic-hero {
position: relative;
height: 100vh;
min-height: 700px;
color: #f5f5f2;
background:
radial-gradient(
circle at 72% 48%,
rgba(115, 121, 96, .075),
transparent 38%
),
radial-gradient(
circle at 18% 65%,
rgba(255, 255, 255, .025),
transparent 30%
),
#090909;
}
.cinematic-hero__track {
position: relative;
top: auto;
width: 100%;
height: 100vh;
overflow: hidden;
}
.cinematic-hero__scene {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background:
radial-gradient(
circle at 70% 50%,
rgba(115, 121, 96, .045),
transparent 45%
),
#090909;
}
/* =========================================================
IMAGE FRAME
========================================================= */
.cinematic-hero__frame {
position: absolute;
top: 50%;
right: 8vw;
width: 51vw;
height: 72vh;
transform: translateY(-50%);
overflow: hidden;
z-index: 2;
/*background: #111;*/
/*border:*/
/* 1px solid*/
/* rgba(255,255,255,.07);*/
/*box-shadow:*/
/* 0 35px 90px*/
/* rgba(0,0,0,.48);*/
}
.cinematic-hero__frame::before {
content: "";
position: absolute;
inset: 0;
z-index: 20;
pointer-events: none;
/*border:*/
/* 1px solid*/
/* rgba(255,255,255,.035);*/
}
.cinematic-hero__frame::after {
content: "";
position: absolute;
left: -1px;
top: 15%;
width: 2px;
height: 70%;
z-index: 30;
/*background: rgba(115,121,96,.45);*/
opacity: .7;
}
/* =========================================================
IMAGE WRAPPER
========================================================= */
.cinematic-hero__image-wrap {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.cinematic-hero__transition-shadow {
position: absolute;
inset: 0;
z-index: 40;
pointer-events: none;
opacity: 0;
background:
linear-gradient(
90deg,
transparent 35%,
rgba(0,0,0,.16) 50%,
transparent 65%
);
transition: opacity 200ms ease;
}
.cinematic-hero__transition-edge {
position: absolute;
top: -20%;
left: 0;
width: 1px;
height: 140%;
z-index: 50;
background: rgba(255,255,255,.65);
opacity: 0;
transform:
translateX(0)
rotate(12deg);
transform-origin: center;
pointer-events: none;
box-shadow:
0 0 12px rgba(255,255,255,.12);
}
/* =========================================================
IMAGES
========================================================= */
.cinematic-hero__image {
position: absolute;
inset: 0;
opacity: 0;
clip-path:
polygon(
100% 0,
100% 0,
100% 100%,
100% 100%
);
transform:
scale(1.04)
translate3d(0, 0, 0);
will-change:
clip-path,
transform,
opacity;
}
.cinematic-hero__image.is-active {
opacity: 1;
clip-path:
polygon(
0 0,
100% 0,
100% 100%,
0 100%
);
transform:
scale(1)
translate3d(0, 0, 0);
}
.cinematic-hero__image::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(0,0,0,.10),
transparent 35%,
rgba(0,0,0,.08)
);
}
.cinematic-hero__image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
pointer-events: none;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.cinematic-hero__content {
margin-top: 30px;
position: absolute;
left: 8vw;
top: 50%;
transform:
translateY(-50%);
width: 30vw;
max-width: 480px;
z-index: 5;
}
.cinematic-hero__eyebrow {
display: none;
margin-bottom: 50px;
color: #9f9f9a;
font-size: 11px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
}
/*.cinematic-hero__content h1 {*/
/* margin: 0;*/
/* color: #f5f5f2;*/
/* font-size: clamp(52px, 5.2vw, 78px);*/
/* line-height: 0.94;*/
/* letter-spacing: -0.045em;*/
/* font-weight: 500;*/
/*}*/
/*.cinematic-hero__content h1 span {*/
/* color: #A3A3A0;*/
/*}*/
.cinematic-hero__content h1 {
margin: 0;
color: #f5f5f2;
font-size: clamp(50px, 6.5vw, 85px);
line-height: 1.35;
letter-spacing: -0.044em;
font-weight: 500;
}
.cinematic-hero__content h1 div {
position: relative;
}
.cinematic-hero__content h1 span.sub-text {
color: #A3A3A0;
font-size: clamp(20px, 4vw, 40px);
line-height: 1;
letter-spacing: -2px;
position: absolute;
top: -20px;
left: 0;
}
.cinematic-hero__content p {
max-width: 360px;
margin-top: 28px;
color: #a8a8a3;
font-size: 20px;
line-height: 1.6;
}
/* =========================================================
BUTTON
========================================================= */
.cinematic-hero__button {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 34px;
padding-bottom: 9px;
color: #f5f5f2;
/*border-bottom:*/
/* 1px solid*/
/* rgba(255,255,255,.45);*/
font-size: 11px;
font-weight: 600;
letter-spacing: .15em;
text-decoration: none;
transition:
gap 250ms ease,
border-color 250ms ease;
}
.cinematic-hero__button:hover {
gap: 16px;
color: #fff;
/*border-color: #fff;*/
}
/* Arrow */
.cinematic-hero__button::after {
content: "→";
display: inline-block;
color: #f5f5f2;
font-size: 18px;
font-weight: 400;
line-height: 1;
background: #7A8065 !important;
transition: transform .5s ease;
padding: 0 3px 3px;
}
/* Hover */
.cinematic-hero__button:hover::after {
background: #676d55 !important;
}
/* =========================================================
COUNTER
========================================================= */
.cinematic-hero__counter {
position: absolute;
right: 8vw;
bottom: 38px;
z-index: 30;
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: .12em;
color: #aaa;
}
.cinematic-hero__counter::after {
content: "";
position: absolute;
right: 0;
bottom: -10px;
width: 55px;
height: 1px;
background:
rgba(255,255,255,.18);
}
.cinematic-hero__counter span:first-child {
color: #f5f5f2;
}
/* =========================================================
SCROLL
========================================================= */
.cinematic-hero__scroll {
position: absolute;
left: 8vw;
bottom: 38px;
z-index: 10;
display: flex;
align-items: center;
gap: 14px;
color: #858580;
font-size: 10px;
letter-spacing: .18em;
}
.cinematic-hero__scroll-line {
width: 55px;
height: 1px;
background: #555;
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.cinematic-hero__image {
transition: none;
transform: none !important;
}
}
/* =========================================
HIGHLINE INTERNAL PAGE SYSTEM
========================================= */
.highline-page {
background: #0b0b0b;
color: #f5f5f2;
}
.highline-page-header {
padding: 140px 8vw 30px;
}
.highline-page-header__inner {
max-width: 1400px;
margin: 0 auto;
display: flex;
gap: 50px;
align-items: end;
}
.highline-page-header__eyebrow {
display: block;
margin-bottom: 24px;
color: #858580;
font-size: 10px;
line-height: 1.2;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
}
.highline-page-header h1 {
max-width: 1100px;
margin: 0;
padding-right: 10px;
padding-bottom: 30px;
font-size: clamp(60px, 8vw, 120px);
line-height: .9;
letter-spacing: -.055em;
font-weight: 500;
}
.highline-page-header p {
max-width: 430px;
margin-top: 35px;
margin-bottom: 30px;
color: #92928d;
font-size: 20px;
line-height: 1.65;
}
/* =========================================================
HIGHLINE SELECTED WORK
========================================================= */
.selected-work {
position: relative;
padding: 50px 8vw 80px;
background: #101010;
color: #f5f5f2;
}
/* INTRO */
.selected-work__intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
margin-bottom: 100px;
}
.section-eyebrow {
display: block;
margin-bottom: 25px;
color: #858580;
font-size: 10px;
font-weight: 600;
letter-spacing: .18em;
line-height: 1.2;
}
.selected-work h2 {
margin: 0;
max-width: 700px;
color: #f5f5f2;
font-size: clamp(
50px,
5.5vw,
78px
);
line-height: .94;
letter-spacing: -.05em;
font-weight: 500;
}
.selected-work__intro-right {
align-self: end;
max-width: 380px;
}
.selected-work__intro-right p {
margin: 0 0 30px;
color: #92928d;
font-size: 15px;
line-height: 1.65;
}
/* LINKS */
.selected-work__intro-right a,
.selected-work__footer a {
display: inline-flex;
align-items: center;
gap: 12px;
color: #f5f5f2;
font-size: 10px;
font-weight: 600;
letter-spacing: .15em;
text-decoration: none;
}
/*.selected-work a span {*/
/* display: inline-block;*/
/* font-size: 17px;*/
/* transition:*/
/* transform .25s ease;*/
/*}*/
/*.selected-work a:hover span {*/
/* transform:*/
/* translate(4px, -4px);*/
/*}*/
/* GRID */
.selected-work__grid {
display: grid;
grid-template-columns:
repeat(12, 1fr);
column-gap: 24px;
row-gap: 90px;
}
/* CARD */
.work-card {
grid-column:
span 3;
}
.work-card--large {
grid-column:
1 / span 7;
}
.work-card--wide {
grid-column:
6 / span 7;
}
/* MEDIA */
.work-card__media {
position: relative;
display: block;
width: 100%;
height: 38vw;
max-height: 520px;
overflow: hidden;
background: #161616;
}
.work-card--large
.work-card__media,
.work-card--wide
.work-card__media {
height: 48vw;
max-height: 680px;
}
.work-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform:
scale(1.02);
transition:
transform 900ms
cubic-bezier(.2,.7,.2,1);
}
.work-card__media:hover img {
transform:
scale(1.06);
}
/* PLACEHOLDER */
.work-card__placeholder {
width: 100%;
height: 100%;
background: #161616;
}
/* ARROW */
.work-card__arrow {
position: absolute;
right: 20px;
bottom: 20px;
display: flex !important;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
background:
rgba(0,0,0,.55);
backdrop-filter:
blur(8px);
color: #fff;
font-size: 18px;
opacity: 0;
transform:
translateY(8px);
transition:
opacity .3s ease,
transform .3s ease;
}
.work-card__media:hover
.work-card__arrow {
opacity: 1;
transform:
translateY(0);
}
/* INFORMATION */
.work-card__info {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 30px;
padding-top: 18px;
border-top:
1px solid
rgba(255,255,255,.10);
}
.work-card__category {
display: block;
margin-bottom: 8px;
color: #777772;
font-size: 9px;
font-weight: 600;
letter-spacing: .15em;
}
.work-card h3 {
margin: 0;
color: #e8e8e4;
font-size: 20px;
line-height: 1.2;
font-weight: 500;
}
.work-card__year {
color: #666661;
font-size: 10px;
letter-spacing: .1em;
}
/* FOOTER */
.selected-work__footer {
display: flex;
justify-content: center;
padding-top: 100px;
}
/* =========================================================
HIGHLINE WORK ARCHIVE
========================================================= */
/*.highline-work-page {*/
/* background: #101010;*/
/* color: #f5f5f2;*/
/*}*/
/* =========================================================
INTRO
========================================================= */
/*.highline-work-intro {*/
/* display: grid;*/
/* grid-template-columns: 1fr 1fr;*/
/* gap: 80px;*/
/* padding: 150px 8vw 100px;*/
/*}*/
/*.highline-work-intro__content {*/
/* max-width: 850px;*/
/*}*/
/*.highline-work-intro h1 {*/
/* margin: 0;*/
/* color: #f5f5f2;*/
/* font-size: clamp(*/
/* 52px,*/
/* 6vw,*/
/* 88px*/
/* );*/
/* line-height: .94;*/
/* letter-spacing: -.05em;*/
/* font-weight: 500;*/
/*}*/
/*.highline-work-intro__content p {*/
/* max-width: 400px;*/
/* margin: 35px 0 0;*/
/* color: #92928d;*/
/* font-size: 15px;*/
/* line-height: 1.7;*/
/*}*/
/* =========================================================
WORK FILTER
========================================================= */
.highline-work-filter {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding:
0
8vw
55px;
}
.highline-work-filter__item {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 14px;
border: 1px solid
rgba(255,255,255,.14);
border-radius: 0;
background: transparent !important;
color: #858580;
font-family: inherit;
font-size: 9px;
font-weight: 600;
line-height: 1;
letter-spacing: .15em;
cursor: pointer;
transition:
color .25s ease,
border-color .25s ease,
background .25s ease;
}
.highline-work-filter__item:hover {
color: #f5f5f2;
border-color:
rgba(255,255,255,.35);
background:
rgba(255,255,255,.04) !important;
}
.highline-work-filter__item.is-active {
color: #f5f5f2;
border-color:
rgba(255,255,255,.45);
background:
rgba(255,255,255,.07) !important;
}
/* =========================================================
GRID
========================================================= */
/*.highline-work-grid {*/
/* display: grid;*/
/* grid-template-columns: repeat(4, minmax(0, 1fr));*/
/*column-gap: 24px;*/
/*row-gap: 90px;*/
/* gap: 25px;*/
/* padding:*/
/* 0*/
/* 8vw*/
/* 80px;*/
/*}*/
/*.highline-work-grid .highline-work-card {*/
/* grid-column: span 3;*/
/*}*/
/*.highline-work-grid .highline-work-card--large {*/
/* grid-column: span 7;*/
/*}*/
/*.highline-work-grid .highline-work-card__media {*/
/* position: relative;*/
/* display: block;*/
/* width: 100%;*/
/* height: auto;*/
/* overflow: hidden;*/
/* background: #161616;*/
/*}*/
/*.highline-work-grid .highline-work-card__images {*/
/* position: relative;*/
/* width: 100%;*/
/* height: auto;*/
/*}*/
/*.highline-work-grid .highline-work-card__image {*/
/* position: absolute;*/
/* inset: 0;*/
/* width: 100%;*/
/* height: auto;*/
/* display: block;*/
/* opacity: 0;*/
/* transition: opacity .55s ease;*/
/* pointer-events: none;*/
/*}*/
/*.highline-work-grid .highline-work-card__image.is-active {*/
/* position: relative;*/
/* opacity: 1;*/
/*}*/
/*.highline-work-grid .highline-work-card__media img {*/
/* transform: scale(1.02);*/
/* transition:*/
/* transform 900ms cubic-bezier(.2,.7,.2,1);*/
/*}*/
/*.highline-work-grid .highline-work-card__media:hover img {*/
/* transform: scale(1.06);*/
/*}*/
/* =========================================================
HIGHLINE WORK — MASONRY
========================================================= */
.highline-work-grid {
column-count: 4;
column-gap: 25px;
padding:
0
8vw
80px;
}
/* =========================================================
CARD
========================================================= */
.highline-work-grid .highline-work-card {
display: inline-block;
width: 100%;
margin: 0 0 25px;
break-inside: avoid;
grid-column: auto;
}
/* =========================================================
MEDIA
========================================================= */
.highline-work-grid .highline-work-card__media {
position: relative;
display: block;
width: 100%;
height: auto;
max-height: none;
overflow: hidden;
background: #161616;
}
/* =========================================================
IMAGE CONTAINER
========================================================= */
.highline-work-grid .highline-work-card__images {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
}
/* =========================================================
ALL ROTATING MEDIA
========================================================= */
.highline-work-grid .highline-work-card__image {
display: block;
width: 100%;
opacity: 0;
pointer-events: none;
transition:
opacity .55s ease,
transform 900ms cubic-bezier(.2,.7,.2,1);
transform: scale(1.02);
}
/* =========================================================
FIRST IMAGE
Keeps the natural aspect ratio and determines
the card height.
========================================================= */
.highline-work-grid
.highline-work-card__image:first-child {
position: relative;
width: 100%;
height: auto;
object-fit: contain;
object-position: center;
}
/* =========================================================
OTHER IMAGES
Sit on top of the first image without changing
the masonry card height.
========================================================= */
.highline-work-grid
.highline-work-card__image:not(:first-child) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
/* =========================================================
ACTIVE
========================================================= */
.highline-work-grid
.highline-work-card__image.is-active {
opacity: 1;
}
/* =========================================================
HOVER
========================================================= */
.highline-work-grid
.highline-work-card__media:hover
.highline-work-card__image.is-active {
transform: scale(1.06);
}
/* =========================================================
FILTERED
========================================================= */
.highline-work-grid
.highline-work-card.is-filtered-out {
display: none;
}
/* =========================================================
CARD
========================================================= */
.highline-work-card {
opacity: 1;
transform:
translateY(0);
transition:
opacity .35s ease,
transform .35s ease;
}
.highline-work-card.is-filtered-out {
display: none;
}
.highline-work-card--large {
grid-column:
span 7;
}
.highline-work-card__media {
position: relative;
display: block;
width: 100%;
height: 30vw;
max-height: 560px;
overflow: hidden;
background: #161616;
}
.highline-work-card--large
.highline-work-card__media {
height: 48vw;
max-height: 680px;
}
.highline-work-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform:
scale(1.02);
transition:
transform 900ms
cubic-bezier(.2,.7,.2,1);
}
.highline-work-card__media:hover img {
transform: scale(1.06);
}
.highline-work-card__media {
position: relative;
display: block;
overflow: hidden;
}
.highline-work-card__media {
position: relative;
display: block;
overflow: hidden;
}
.highline-work-card__images {
position: relative;
width: 100%;
height: 100%;
}
.highline-work-card__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity .55s ease;
pointer-events: none;
}
.highline-work-card__image.is-active {
opacity: 1;
}
/* =========================================================
PLACEHOLDER
========================================================= */
.highline-work-card__placeholder {
width: 100%;
height: 100%;
background:
#161616;
}
/* =========================================================
ARROW
========================================================= */
.highline-work-card__arrow {
position: absolute;
right: 20px;
bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: rgba(0, 0, 0, .55);
backdrop-filter: blur(8px);
color: #fff;
opacity: 0;
transform: translateY(8px);
transition:
opacity .3s ease,
transform .3s ease;
}
/*
* Arrow head
*/
.highline-work-card__arrow::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
top: 15px;
right: 15px;
transform: rotate(0deg);
}
/*
* Arrow shaft
*/
.highline-work-card__arrow::after {
content: "";
position: absolute;
width: 18px;
height: 1px;
background: currentColor;
top: 22px;
left: 15px;
transform: rotate(-45deg);
transform-origin: center;
}
/*
* Hover
*/
.highline-work-card__media:hover .highline-work-card__arrow {
opacity: 1;
transform: translateY(0);
}
/* =========================================================
CARD INFO
========================================================= */
.highline-work-card__info {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 30px;
padding-top: 18px;
border-top:
1px solid
rgba(255,255,255,.10);
}
.highline-work-card__category {
display: block;
margin-bottom: 8px;
color: #777772;
font-size: 9px;
font-weight: 600;
letter-spacing: .15em;
}
.highline-work-card__info h2 {
margin: 0;
font-size: 21px;
line-height: 1.2;
font-weight: 500;
}
.highline-work-card__info h2 a {
color: #e8e8e4;
text-decoration: none;
}
.highline-work-card__year {
color: #666661;
font-size: 10px;
letter-spacing: .1em;
}
/* =========================================================
EMPTY
========================================================= */
.highline-work-empty {
grid-column:
1 / -1;
padding:
100px 0;
color:
#777772;
}
/* =========================================================
HIGHLINE — SINGLE PROJECT
========================================================= */
/* =========================================================
HEADER
========================================================= */
.highline-project-header {
padding:
140px
8vw
100px;
}
.highline-project-header__top {
display:
flex;
align-items:
center;
justify-content:
space-between;
/*margin-bottom:*/
/* 45px;*/
}
.highline-project-header__category {
color:
#777772;
font-size:
9px;
font-weight:
600;
letter-spacing:
.15em;
}
.highline-project-header h1 {
max-width:
1100px;
margin:
0;
font-size:
clamp(
60px,
8vw,
120px
);
line-height:
.9;
letter-spacing:
-.055em;
font-weight:
500;
}
/* =========================================================
META
========================================================= */
.highline-project-meta {
display:
flex;
flex-wrap:
wrap;
gap:
70px;
margin-top:
50px;
padding-top:
25px;
border-top:
1px solid
rgba(255,255,255,.12);
}
.highline-project-meta div {
display:
flex;
flex-direction:
column;
gap:
8px;
}
.highline-project-meta span {
color:
#666661;
font-size:
9px;
font-weight:
600;
letter-spacing:
.15em;
}
.highline-project-meta strong {
color:
#d8d8d4;
font-size:
14px;
font-weight:
400;
}
/* =========================================================
DESCRIPTION
========================================================= */
.highline-project-description {
display:
grid;
grid-template-columns:
1fr 1fr;
gap:
80px;
padding:
100px
8vw
130px;
border-top:
1px solid
rgba(255,255,255,.08);
}
.highline-project-description__content {
max-width:
600px;
color:
#999994;
font-size:
17px;
line-height:
1.7;
}
/* =========================================
PROJECT MEDIA MASONRY
========================================= */
/* =========================================
PROJECT MEDIA 3 COLUMN MASONRY
========================================= */
.highline-project-media {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
gap: 24px;
padding: 0 8vw 160px;
max-width: 1600px;
margin: 0 auto;
}
.highline-project-media__column {
display: flex;
flex-direction: column;
min-width: 0;
}
/* =========================================
MEDIA ITEM
========================================= */
.highline-project-media__item {
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
overflow: hidden;
background: #151515;
cursor: pointer;
text-align: left;
}
/* =========================================
IMAGE
========================================= */
.highline-project-media__item img {
display: block;
width: 100%;
height: auto;
transform: scale(1.001);
transition:
transform 900ms cubic-bezier(.2,.7,.2,1);
}
.highline-project-media__item:hover img {
transform: scale(1.025);
}
/* =========================================
VIDEO
========================================= */
.highline-project-media__item video {
display: block;
width: 100%;
height: auto;
background: #111;
}
/* =========================================
HIGHLINE LIGHTBOX
========================================= */
body.highline-lightbox-open {
overflow: hidden;
}
.highline-lightbox {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
background: rgba(7, 7, 7, .97);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .35s ease,
visibility .35s ease;
}
.highline-lightbox.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* =========================================
STAGE
========================================= */
.highline-lightbox__stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.highline-lightbox__loader {
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
width: 32px;
height: 32px;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition:
opacity .2s ease,
visibility .2s ease;
pointer-events: none;
}
.highline-lightbox__loader.is-visible {
opacity: 1;
visibility: visible;
}
.highline-lightbox__loader span {
width: 28px;
height: 28px;
border: 2px solid rgba(255, 255, 255, .18);
border-top-color: rgba(255, 255, 255, .9);
border-radius: 50%;
animation: highline-lightbox-spin .7s linear infinite;
}
@keyframes highline-lightbox-spin {
to {
transform: rotate(360deg);
}
}
.highline-lightbox__content {
display: flex;
align-items: center;
justify-content: center;
max-width: 85vw;
max-height: 88vh;
}
/* =========================================
IMAGE
========================================= */
.highline-lightbox__content img {
display: block;
max-width: 85vw;
max-height: 88vh;
width: auto;
height: auto;
object-fit: contain;
}
/* =========================================
VIDEO
========================================= */
.highline-lightbox__content video {
display: block;
max-width: 85vw;
max-height: 88vh;
width: auto;
height: auto;
object-fit: contain;
background: #050505;
}
/* =========================================
CLOSE
========================================= */
.highline-lightbox__close {
position: absolute;
top: 25px;
right: 30px;
z-index: 20;
width: 42px;
height: 42px;
padding: 0;
border: 0;
background: transparent !important;
color: #f5f5f2 !important;
cursor: pointer;
opacity: .7;
transition:
opacity .25s ease,
transform .25s ease;
}
/*
* Close icon
*/
.highline-lightbox__close::before,
.highline-lightbox__close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 22px;
height: 1px;
background: currentColor;
transform-origin: center;
}
.highline-lightbox__close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.highline-lightbox__close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.highline-lightbox__close:hover {
opacity: 1;
transform: rotate(90deg);
}
/* =========================================
COUNTER
========================================= */
.highline-lightbox__counter {
position: absolute;
top: 38px;
left: 30px;
z-index: 20;
display: flex;
gap: 7px;
color: #777772;
font-size: 9px;
font-weight: 600;
letter-spacing: .15em;
}
.highline-lightbox__counter [data-lightbox-current] {
color: #f5f5f2;
}
/* =========================================
NAVIGATION
========================================= */
.highline-lightbox__nav {
position: absolute;
top: 50%;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
padding: 0;
border: 0;
background: transparent !important;
color: #f5f5f2 !important;
cursor: pointer;
transform: translateY(-50%);
opacity: .55;
transition:
opacity .25s ease,
transform .25s ease;
}
.highline-lightbox__nav:hover {
opacity: 1;
}
/* =========================================
ARROW ICON
========================================= */
.highline-lightbox__nav::before {
content: "";
position: absolute;
width: 11px;
height: 11px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
}
/* Previous */
.highline-lightbox__prev::before {
transform: rotate(-135deg);
margin-left: 6px;
}
/* Next */
.highline-lightbox__next::before {
transform: rotate(45deg);
margin-right: 6px;
}
/* =========================================
POSITION
========================================= */
.highline-lightbox__prev {
left: 25px;
}
.highline-lightbox__next {
right: 25px;
}
/* =========================================
MEDIA GRID INTERACTION
========================================= */
.highline-project-media__item {
position: relative;
display: block;
width: 100%;
margin: 0 0 24px;
padding: 0;
border: 0;
border-radius: 0;
overflow: hidden;
background: #151515;
cursor: pointer;
text-align: left;
}
.highline-project-media__item img,
.highline-project-media__item video {
display: block;
width: 100%;
height: auto;
}
/* =========================================
VIDEO PLAY INDICATOR
========================================= */
.highline-project-media__play {
position: absolute;
right: 15px;
bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 30px;
padding: 0 10px;
border: 1px solid rgba(255,255,255,.3);
background: rgba(0,0,0,.5);
color: #f5f5f2;
font-size: 8px;
font-weight: 600;
letter-spacing: .15em;
backdrop-filter: blur(8px);
}
.highline-project-media__item img {
transition:
transform 900ms cubic-bezier(.2,.7,.2,1);
}
.highline-project-media__item:hover img {
transform: scale(1.025);
}
/* =========================================================
HIGHLINE ABOUT
========================================================= */
.highline-about {
padding: 50px 8vw 80px;
background:
#0b0b0b;
color:
#f5f5f2;
}
.highline-about__inner {
max-width:
1400px;
margin:
0 auto;
}
.highline-about__content {
display: grid;
grid-template-columns:
1.4fr .6fr;
gap:
100px;
}
.highline-about h2 {
margin:
0;
max-width:
850px;
font-size:
clamp(
50px,
5.5vw,
78px
);
line-height:
.94;
letter-spacing:
-.05em;
font-weight:
500;
}
.highline-about__text {
align-self:
end;
max-width:
360px;
}
.highline-about__text p {
margin:
0 0 22px;
color:
#92928d;
font-size:
15px;
line-height:
1.7;
}
.highline-about__text a {
display:
inline-flex;
align-items:
center;
gap:
12px;
margin-top:
15px;
color:
#f5f5f2;
font-size:
10px;
font-weight:
600;
letter-spacing:
.15em;
text-decoration:
none;
}
.highline-about__text a span {
font-size:
17px;
transition:
transform .25s ease;
}
.highline-about__text a:hover span {
transform:
translate(
4px,
-4px
);
}
/* =========================================================
HIGHLINE SERVICES
========================================================= */
section.highline-services {
padding: 50px 8vw 80px;
background:
#101010;
color:
#f5f5f2;
}
section.highline-services .highline-services__intro {
display:
grid;
grid-template-columns:
2fr 3fr;
margin-bottom:
100px;
}
section.highline-services .highline-services__description p {
max-width: 420px;
margin: 0 0 30px;
color: #92928d;
font-size: 15px;
line-height: 1.65;
}
section.highline-services .highline-services__intro h2 {
margin:
0;
font-size:
clamp(
52px,
5.5vw,
78px
);
line-height:
.94;
letter-spacing:
-.05em;
font-weight:
500;
padding-bottom: 25px;
}
section.highline-services .highline-services__list {
border-top:
1px solid
rgba(255,255,255,.12);
}
section.highline-services .highline-service {
display:
grid;
grid-template-columns:
70px
1fr
1fr;
gap:
40px;
padding:
30px 0;
border-bottom:
1px solid
rgba(255,255,255,.10);
}
section.highline-services .highline-service__number {
color: #666661;
font-size: 20px;
font-weight: 700;
}
section.highline-services .highline-service h3 {
margin:
0;
color:
#e8e8e4;
font-size:
24px;
font-weight:
500;
}
section.highline-services .highline-service p {
max-width:
360px;
margin:
0;
color:
#858580;
font-size:
14px;
line-height:
1.65;
}
section.highline-services .highline-services__footer {
display:
flex;
justify-content:
center;
padding-top:
80px;
}
section.highline-services .highline-services__footer a {
display:
inline-flex;
align-items:
center;
gap:
12px;
color:
#f5f5f2;
font-size:
10px;
font-weight:
600;
letter-spacing:
.15em;
text-decoration:
none;
}
/* =========================================================
HIGHLINE BRANDS
========================================================= */
.highline-brands {
padding: 50px 8vw 80px;
background:
#0b0b0b;
color:
#f5f5f2;
}
.highline-brands__inner {
max-width: 1400px;
margin: 0 auto;
}
.highline-brands__intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
margin-bottom: 100px;
}
.highline-brands h2 {
margin: 0;
max-width: 800px;
color: #f5f5f2;
font-size: clamp(52px, 5.5vw, 78px);
line-height: .94;
letter-spacing: -.05em;
font-weight: 500;
}
.highline-brands__description {
align-self: end;
max-width: 360px;
}
.highline-brands__description p {
margin: 0 0 30px;
color: #92928d;
font-size: 15px;
line-height: 1.65;
}
/* --------------------------------
BRAND CAROUSAL
-------------------------------- */
.highline-brands-carousel {
width: 100%;
overflow: hidden;
}
.highline-brands-carousel__viewport {
width: 100%;
overflow: hidden;
}
.highline-brands-carousel__track {
display: flex;
transition: transform 0.7s ease;
will-change: transform;
}
.highline-brand {
flex: 0 0 12.5%;
width: 12.5%;
padding: 25px 15px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.highline-brand img {
display: block;
width: 100%;
max-width: 200px;
height: auto;
object-fit: contain;
}
.highline-brand__name {
font-size: 14px;
text-align: center;
}
/* =========================
DOTS
========================= */
.highline-brands-carousel__dots {
display: none;
/*display: flex;*/
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 30px;
}
.highline-brands-carousel__dot {
width: 6px;
height: 6px;
padding: 0;
border: 0;
border-radius: 50%;
background: #c8c8c8;
cursor: pointer;
transition: all 0.3s ease;
}
.highline-brands-carousel__dot.is-active {
width: 20px;
border-radius: 10px;
background: #555;
}
/* =========================================================
HIGHLINE — ENQUIRY
========================================================= */
.highline-enquiry {
padding: 50px 8vw 80px;
background: #101010;
color: #f5f5f2;
}
.highline-enquiry__inner {
max-width:
1100px;
margin:
0 auto;
}
.highline-enquiry__inner.wide {
max-width: 1400px;
}
.highline-enquiry__inner .col-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 50px;
}
.highline-enquiry__inner .col-layout.even {
grid-template-columns: 1fr 1fr;
}
.highline-enquiry__inner .col-layout ul li {
margin-bottom: 10px;
}
/*.highline-enquiry .section-eyebrow {*/
/* color:*/
/* rgba(16,16,16,.55);*/
/*}*/
.highline-enquiry h2 {
margin:
0;
font-size:
clamp(
60px,
7vw,
105px
);
line-height:
.9;
letter-spacing:
-.055em;
font-weight:
500;
padding-bottom: 25px;
}
.highline-enquiry img {
margin-bottom: 30px;
}
.highline-enquiry__cta {
display:
inline-flex;
align-items:
center;
gap:
14px;
margin-top:
45px;
padding:
15px 0;
border-bottom:
1px solid
rgba(16,16,16,.45);
color:
#101010;
font-size:
11px;
font-weight:
700;
letter-spacing:
.15em;
text-decoration:
none;
}
.highline-enquiry__cta span {
font-size:
18px;
transition:
transform .25s ease;
}
.highline-enquiry__cta:hover span {
transform:
translate(
4px,
-4px
);
}
/* =========================================
HIGHLINE CLIENTS ARCHIVE
========================================= */
.highline-clients-page {
background: #0b0b0b;
color: #f5f5f2;
}
/* =========================================
CLIENT GRID SECTION
========================================= */
.highline-clients-archive {
padding: 0 8vw 170px;
}
.highline-clients-archive__inner {
max-width: 1400px;
margin: 0 auto;
}
/* =========================================
GRID
========================================= */
.highline-clients-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
border-top: 1px solid rgba(255,255,255,.10);
border-left: 1px solid rgba(255,255,255,.10);
}
/* =========================================
CLIENT CARD
========================================= */
.highline-client-card {
position: relative;
min-height: 180px;
border-right: 1px solid rgba(255,255,255,.10);
border-bottom: 1px solid rgba(255,255,255,.10);
background: transparent;
transition:
background .35s ease;
}
.highline-client-card__inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 180px;
padding: 40px;
}
/* =========================================
LOGO
========================================= */
.highline-client-card img {
display: block;
width: auto;
max-width: 160px;
max-height: fit-content;
object-fit: contain;
transition:
opacity .35s ease,
filter .35s ease,
transform .35s ease;
}
/* =========================================
TEXT FALLBACK
========================================= */
.highline-client-card__name {
color: #858580;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
letter-spacing: .15em;
text-align: center;
text-transform: uppercase;
transition:
color .35s ease;
}
/* =========================================
HOVER
========================================= */
.highline-client-card:hover {
background: rgba(255,255,255,.025);
}
.highline-client-card:hover img {
transform: scale(1.04);
}
.highline-client-card:hover .highline-client-card__name {
color: #f5f5f2;
}
/* =========================================
REVEAL
========================================= */
.highline-client-card.highline-reveal {
transition:
opacity .8s cubic-bezier(.2,.7,.2,1),
transform .8s cubic-bezier(.2,.7,.2,1),
background .35s ease;
}
.highline-client-card.is-visible {
transition-delay: var(--client-delay);
}
/* =========================================
EMPTY STATE
========================================= */
.highline-clients-empty {
margin: 0;
color: #777772;
font-size: 14px;
line-height: 1.6;
}
/* =========================================
CTA
========================================= */
.highline-clients-cta {
padding: 150px 8vw 170px;
background: #676d55;
color: #0b0b0b;
}
.highline-clients-cta__inner {
max-width: 1400px;
margin: 0 auto;
}
.highline-clients-cta .section-eyebrow {
color: rgba(11,11,11,.55);
}
.highline-clients-cta h2 {
max-width: 950px;
margin: 0;
color: #0b0b0b;
font-size: clamp(58px, 7vw, 105px);
line-height: .91;
letter-spacing: -.055em;
font-weight: 500;
}
/* =========================================
CTA LINK
========================================= */
.highline-clients-cta .highline-link {
margin-top: 45px;
}
/* =========================================
ENQUIRE MODAL
========================================= */
body.enquire-modal-open {
overflow: hidden;
}
.highline-enquire {
position: fixed;
inset: 0;
z-index: 99999;
visibility: hidden;
pointer-events: none;
}
.highline-enquire.is-open {
visibility: visible;
pointer-events: auto;
}
/* =========================================
BACKDROP
========================================= */
.highline-enquire__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.72);
opacity: 0;
transition:
opacity 0.45s
cubic-bezier(0.22, 1, 0.36, 1);
z-index: 1;
}
.highline-enquire.is-open
.highline-enquire__backdrop {
opacity: 1;
}
/* =========================================
PANEL
========================================= */
.highline-enquire__panel {
position: absolute;
top: 0;
right: 0;
width: min(720px, 92vw);
height: 100%;
background: #f3f1ed;
z-index: 2;
transform:
translate3d(100%, 0, 0);
transition:
transform 0.75s
cubic-bezier(0.22, 1, 0.36, 1);
overflow-y: auto;
}
.highline-enquire.is-open
.highline-enquire__panel {
transform:
translate3d(0, 0, 0);
}
/* =========================================
PANEL INNER
========================================= */
.highline-enquire__inner {
min-height: 100%;
padding:
clamp(40px, 7vw, 90px)
clamp(28px, 6vw, 80px);
display: flex;
flex-direction: column;
}
/* =========================================
CLOSE
========================================= */
.highline-enquire__close {
position: absolute;
top: 28px;
right: 32px;
width: 46px;
height: 46px;
border: 0;
background: transparent;
cursor: pointer;
z-index: 5;
}
.highline-enquire__close span {
position: absolute;
left: 50%;
top: 50%;
width: 26px;
height: 1px;
background: #111;
transform-origin: center;
}
.highline-enquire__close span:first-child {
transform:
translate(-50%, -50%)
rotate(45deg);
}
.highline-enquire__close span:last-child {
transform:
translate(-50%, -50%)
rotate(-45deg);
}
/* =========================================
INTRO
========================================= */
.highline-enquire__intro {
max-width: 520px;
margin-bottom: clamp(45px, 7vw, 5px);
}
.highline-enquire__intro .section-eyebrow {
display: block;
margin-bottom: 22px;
}
.highline-enquire__intro h2 {
margin: 0;
font-size:
clamp(48px, 7vw, 82px);
line-height: 0.92;
letter-spacing: -0.045em;
font-weight: 500;
}
.highline-enquire__intro p {
max-width: 450px;
margin:
30px 0 0;
font-size: 16px;
line-height: 1.6;
color: #555;
}
/* =========================================
CONTACT FORM 7
========================================= */
.highline-cf7-field {
margin-bottom: 15px;
}
.highline-cf7-field label {
display: block;
font-size: 11px !important;
line-height: 1;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #555;
}
.highline-cf7-field input,
.highline-cf7-field select,
.highline-cf7-field textarea {
width: 100%;
border: 0 !important;
border-bottom: 1px solid #bdbab4 !important;
border-radius: 0;
background: transparent;
color: #111 !important;
font-family: inherit;
font-size: 17px;
outline: none;
box-shadow: none;
transition:
border-color 0.3s ease;
}
.highline-cf7-field input:focus,
.highline-cf7-field select:focus,
.highline-cf7-field textarea:focus {
border-bottom-color:
#111;
box-shadow: none;
}
.highline-cf7-field input::placeholder,
.highline-cf7-field textarea::placeholder {
color: #8b8985;
}
.highline-cf7-field textarea {
min-height: 120px;
resize: vertical;
}
/* =========================================
SELECT
========================================= */
.highline-cf7-field select {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(
45deg,
transparent 50%,
#111 50%
),
linear-gradient(
135deg,
#111 50%,
transparent 50%
);
background-position:
calc(100% - 8px) 50%,
calc(100% - 3px) 50%;
background-size:
5px 5px,
5px 5px;
background-repeat:
no-repeat;
}
/* =========================================
SUBMIT
========================================= */
.highline-cf7-submit {
position: relative;
margin: 15px 0;
}
.highline-cf7-submit input[type="submit"] {
width: 100%;
min-height: 64px;
padding: 0 24px;
border: 1px solid #111;
border-radius: 0;
background: #111;
color: #fff;
font-family: inherit;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition:
background 0.3s ease,
color 0.3s ease;
}
.highline-cf7-submit input[type="submit"]:hover {
background:
transparent;
color:
#111;
}
/* =========================================
NOTE
========================================= */
.highline-cf7-note {
margin: 0;
font-size: 11px;
color: #777;
}
/* =========================================
CF7 DEFAULT UI CLEANUP
========================================= */
.highline-enquire .wpcf7 {
margin: 0;
}
.highline-enquire .wpcf7-form-control-wrap {
display: block;
}
.highline-enquire .wpcf7-not-valid-tip {
margin-top:
7px;
font-size:
11px;
color:
#b00020;
}
.highline-enquire .wpcf7 form.invalid {
border-color: #b00020;
}
.highline-enquire .wpcf7-response-output {
margin: 20px 0 0 !important;
padding: 12px 0 !important;
border: 0 !important;
font-size: 12px !important;
color: #111 !important;
}
.highline-enquire .wpcf7-spinner {
position: absolute;
top: 20px;
}
/* =========================================
CONTACT PAGE
========================================= */
/* =========================================
CONTACT INFORMATION
========================================= */
.highline-contact-info {
padding:
clamp(50px, 8vw, 80px)
clamp(24px, 5vw, 50px);
}
.highline-contact-info__grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap:
50px;
max-width:
1200px;
margin:
0 auto;
}
.highline-contact-info__item {
min-height:
180px;
}
.highline-contact-info__item
.section-eyebrow {
display: block;
margin-bottom:
30px;
}
.highline-contact-info__content {
display: flex;
flex-direction: column;
gap: 8px;
}
.highline-contact-info__content p {
margin: 0;
font-size: 16px;
line-height: 1.6;
}
.highline-contact-info__content p + p {
margin-top: 8px;
max-width: 260px;
}
.highline-contact-info__content a {
text-decoration: none;
font-size: 16px;
transition:
opacity 0.3s ease;
display: flex;
gap: 3px;
}
.highline-contact-info__content a:hover {
opacity: 0.55;
}
/* =========================================
CONTACT CTA
========================================= */
.highline-contact-cta {
padding:
clamp(80px, 8vw, 80px)
24px;
background: #111;
color: #fff;
}
.highline-contact-cta__inner {
max-width:
1000px;
margin:
0 auto;
}
.highline-contact-cta
.section-eyebrow {
display: block;
color: #999;
margin-bottom:
30px;
}
.highline-contact-cta h2 {
max-width:
800px;
margin: 0;
font-size:
clamp(56px, 9vw, 130px);
line-height:
0.9;
letter-spacing:
-0.055em;
font-weight:
500;
}
.highline-contact-cta p {
max-width:
500px;
margin:
45px 0 40px;
font-size:
17px;
line-height:
1.6;
color:
#aaa;
}
.highline-contact-cta__button {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 80px;
min-width: 260px;
padding:
20px 24px;
border:
1px solid #555;
background:
transparent;
color:
#fff;
font-family:
inherit;
font-size:
12px;
letter-spacing:
0.1em;
text-transform:
uppercase;
cursor:
pointer;
transition:
background 0.35s ease,
color 0.35s ease,
border-color 0.35s ease;
}
.highline-contact-cta__button:hover {
background:
#fff;
color:
#111;
border-color:
#fff;
}
.highline-contact-cta__button span:last-child {
font-size:
20px;
transition:
transform 0.3s ease;
}
.highline-contact-cta__button:hover
span:last-child {
transform:
translateX(6px);
}
.highline-kids-gallery {
width: min(1200px, calc(100% - 48px));
margin: 0 auto 120px;
}
/*
* WordPress Gallery block
*/
.highline-kids-gallery
.wp-block-gallery {
display: grid !important;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 12px !important;
margin: 0 !important;
}
/*
* Individual gallery item
*/
.highline-kids-gallery
.wp-block-gallery
.wp-block-image {
position: relative;
width: 100% !important;
margin: 0 !important;
overflow: hidden;
}
/*
* Image
*/
.highline-kids-gallery
.wp-block-gallery
.wp-block-image img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
transition:
transform .7s cubic-bezier(.2, .7, .2, 1);
}
/*
* Hover
*/
@media (hover: hover) and (pointer: fine) {
.highline-kids-gallery
.wp-block-gallery
.wp-block-image:hover
img {
transform: scale(1.035);
}
}
/* =========================================
HIGHLINE FOOTER
========================================= */
.highline-footer {
background: #111;
color: #f3f1ed;
padding: 100px 5vw 30px;
}
/* =========================================
MAIN
========================================= */
.highline-footer__main {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr 1fr;
gap: 60px;
padding-bottom: 100px;
}
/* =========================================
BRAND
========================================= */
.highline-footer__logo {
display: inline-flex;
flex-direction: column;
color: #f3f1ed;
text-decoration: none;
font-size: 25px;
line-height: 0.9;
font-weight: 600;
letter-spacing: 2px;
}
.highline-footer__logo span {
font-size: 15px;
letter-spacing: 0.3em;
margin-top: 8px;
opacity: 0.55;
}
.highline-footer__brand p {
max-width: 300px;
margin-top: 35px;
font-size: 15px;
line-height: 1.7;
color: rgba(243, 241, 237, 0.55);
}
/* =========================================
LABEL
========================================= */
.highline-footer__label, .widget-title {
display: block;
margin-bottom: 25px;
font-size: 12px !important;
letter-spacing: 0.18em !important;
font-weight: 500 !important;
color: rgba(243, 241, 237, 0.4);
}
/* =========================================
LINKS
========================================= */
.highline-footer__column, .ct-widget {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.highline-footer__column a:not(.highline-footer__logo), .ct-widget a:not(.highline-footer__logo) {
display: inline-block;
margin-bottom: 12px;
color: #f3f1ed;
text-decoration: none;
font-size: 14px;
line-height: 1.5;
transition:
opacity 0.3s ease,
transform 0.3s ease;
}
.highline-footer__column a:not(.highline-footer__logo):hover, .ct-widget a:not(.highline-footer__logo):hover {
opacity: 0.55;
transform: translateX(4px);
}
/* =========================================
WORDPRESS MENU
========================================= */
.highline-footer__menu, #menu-footer-menu {
list-style: none;
margin: 0;
padding: 0;
}
.highline-footer__menu li, #menu-footer-menu li {
margin: 0 0 12px;
}
.highline-footer__menu a, #menu-footer-menu a {
margin: 0;
}
/* =========================================
LOCATION
========================================= */
.highline-footer__location {
margin-top: 25px;
font-size: 14px !important;
line-height: 1.7 !important;
}
/* =========================================
BOTTOM
========================================= */
.highline-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 25px;
border-top: 1px solid
rgba(243, 241, 237, 0.12);
font-size: 11px;
color: rgba(243, 241, 237, 0.4);
}
/* =========================================
ZEIORE CREDIT
========================================= */
.highline-footer__credit {
font-size: 14px !important;
}
.highline-footer__credit a {
color: #f3f1ed;
text-decoration: none;
transition: opacity 0.3s ease;
}
.highline-footer__credit a:hover {
opacity: 0.5;
}
/* =========================================
ABOUT PAGE
========================================= */
/* =========================================
INTRO
========================================= */
.highline-about-intro {
display: grid;
grid-template-columns: 1fr 5fr;
padding: 140px 8vw;
border-top: 1px solid rgba(17,17,17,0.12);
}
.highline-about-intro__label {
padding-top: 10px;
}
.highline-about-intro__content {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 80px;
}
.highline-about-intro h2 {
margin: 0;
font-size: clamp(42px, 5vw, 82px);
line-height: 0.95;
letter-spacing: -0.045em;
font-weight: 500;
}
.highline-about-intro h2 em {
font-style: italic;
}
.highline-about-intro__text {
max-width: 420px;
}
.highline-about-intro__text p {
margin: 0 0 25px;
font-size: 16px;
line-height: 1.75;
color: #92928d
}
/* =========================================
APPROACH
========================================= */
/*.highline-about-belief {*/
/* padding: 120px 5vw;*/
/* background: #111;*/
/* color: #f3f1ed;*/
/*}*/
/*.highline-about-belief__label {*/
/* margin-bottom: 80px;*/
/*}*/
/*.highline-about-belief__content {*/
/* display: grid;*/
/* grid-template-columns: repeat(4, 1fr);*/
/* gap: 40px;*/
/*}*/
/*.highline-about-belief__item {*/
/* padding-top: 25px;*/
/* border-top: 1px solid rgba(243,241,237,0.2);*/
/*}*/
/*.highline-about-belief__number {*/
/* display: block;*/
/* margin-bottom: 45px;*/
/* font-size: 20px;*/
/* font-weight: 700;*/
/* letter-spacing: 0.12em;*/
/* opacity: 0.4;*/
/*}*/
/*.highline-about-belief__item h3 {*/
/* margin: 0 0 20px;*/
/* color: #e8e8e4;*/
/* font-size: 24px;*/
/* font-weight: 500;*/
/* letter-spacing: -0.025em;*/
/*}*/
/*.highline-about-belief__item p {*/
/* margin: 0;*/
/* max-width: 270px;*/
/* font-size: 14px;*/
/* line-height: 1.7;*/
/* color: #92928d;*/
/*}*/
/* =========================================
LOCATIONS
========================================= */
.highline-about-locations {
display: grid;
grid-template-columns: 1fr 5fr;
padding: 140px 8vw;
background: #111;
color: #f3f1ed;
}
.highline-about-locations__content {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 80px;
}
.highline-about-locations h2 {
margin: 0;
font-size: clamp(45px, 5vw, 80px);
line-height: 0.95;
letter-spacing: -0.045em;
font-weight: 500;
}
.highline-about-locations h2 em {
font-style: italic;
}
.highline-about-locations p {
max-width: 400px;
margin: 10px 0 0;
font-size: 16px;
line-height: 1.7;
color: #92928d;
}
/* =========================================
CTA
========================================= */
.highline-about-cta {
padding: 140px 8vw;
}
.highline-about-cta__inner {
max-width: 1000px;
}
.highline-about-cta h2 {
margin: 30px 0 50px;
font-size: clamp(60px, 9vw, 150px);
line-height: 0.85;
letter-spacing: -0.06em;
font-weight: 500;
}
.highline-about-cta h2 em {
font-style: italic;
}
/* =========================================
SERVICES PAGE
========================================= */
/* =========================================
SERVICES LIST
========================================= */
.highline-services-list {
border-top: 1px solid rgba(17,17,17,0.12);
}
/* =========================================
SERVICE ITEM
========================================= */
.highline-service {
display: grid;
grid-template-columns: 1fr 5fr;
padding: 100px 8vw;
border-bottom: 1px solid rgba(17,17,17,0.12);
}
.highline-service__number {
color: #666661;
padding-top: 10px;
font-size: 30px;
font-weight: 700;
}
.highline-service__main {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 50px;
}
.highline-service h2 {
margin: 0;
font-size: clamp(48px, 6vw, 100px);
line-height: 0.88;
letter-spacing: -0.05em;
font-weight: 500;
padding-bottom: 25px;
}
.highline-service h2 em {
display: block;
font-style: italic;
}
.highline-service__main > p {
max-width: 400px;
margin: 10px 0 35px;
font-size: 16px;
line-height: 1.7;
}
.highline-service ul {
grid-column: 2;
margin: 0;
padding: 0;
list-style: none;
}
.highline-service li {
padding: 11px 0;
border-bottom: 1px solid rgba(17,17,17,0.12);
font-size: 16px;
}
/* =========================================
PROCESS
========================================= */
.highline-services-process {
display: grid;
grid-template-columns: 1fr 3fr;
padding: 140px 5vw;
background: #101010;
}
.highline-services-process__content h2 {
margin: 0 0 100px;
font-size: clamp(45px, 5vw, 80px);
line-height: 0.9;
letter-spacing: -0.05em;
font-weight: 500;
}
.highline-services-process__content h2 em {
font-style: italic;
}
.highline-services-process__steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.highline-services-process__steps > div {
padding-top: 20px;
border-top: 1px solid rgba(17,17,17,0.2);
}
.highline-services-process__steps span {
display: block;
margin-bottom: 35px;
font-size: 10px;
color: rgba(17,17,17,0.4);
}
.highline-services-process__steps strong {
display: block;
margin-bottom: 15px;
font-size: 20px;
font-weight: 400;
}
.highline-services-process__steps p {
margin: 0;
font-size: 13px;
line-height: 1.7;
color: rgba(17,17,17,0.55);
}
/* =========================================
CTA
========================================= */
.highline-services-cta {
padding: 140px 5vw;
background: #111;
color: #f3f1ed;
}
.highline-services-cta h2 {
max-width: 1000px;
margin: 35px 0 55px;
font-size: clamp(60px, 9vw, 150px);
line-height: 0.85;
letter-spacing: -0.06em;
font-weight: 500;
}
.highline-services-cta h2 em {
font-style: italic;
}
/* =========================================
WORK PAGINATION
========================================= */
.highline-work-page .navigation.pagination {
width: 100%;
margin: 0 0 80px;
padding: 0;
}
.highline-work-page .navigation.pagination .nav-links {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* -----------------------------------------
PAGE NUMBERS
----------------------------------------- */
.highline-work-page .navigation.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
color: rgba(255, 255, 255, 0.55);
font-size: 12px;
font-weight: 500;
line-height: 1;
text-decoration: none;
transition:
color 0.25s ease,
background-color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}
/* -----------------------------------------
CURRENT PAGE
----------------------------------------- */
.highline-work-page .navigation.pagination .page-numbers.current {
color: #fff;
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.22);
}
/* -----------------------------------------
HOVER
----------------------------------------- */
.highline-work-page .navigation.pagination a.page-numbers:hover {
color: #fff;
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.22);
transform: translateY(-2px);
}
/* -----------------------------------------
NEXT ARROW
----------------------------------------- */
.highline-work-page .navigation.pagination .page-numbers.next {
min-width: 42px;
font-size: 16px;
padding-bottom: 1px;
}
/* -----------------------------------------
IMAGE ROTATOR
----------------------------------------- */
.image-rotator {
position: relative;
overflow: hidden;
background: #101010;
}
.image-rotator__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.3s ease;
}
.image-rotator__image:first-child {
position: relative;
}
.image-rotator__image.is-active {
opacity: 1;
}
.video-container {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
background: #101010;
}
.video-container .video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}