/* ===== 1section.html ===== */
/* =========================================================
CONTACT — VARIABLES
========================================================= */
.mcs-contact-section {
--orange: var(--mcs-orange);
--black: var(--mcs-black);
--offwhite: var(--mcs-white);
--line: var(--mcs-line-onlight);
position: relative;
width: 100%;
min-height: var(--mcs-hero-min);
display: flex;
flex-direction: column;
padding:
calc(var(--mcs-header-h) + var(--mcs-hero-pad-top))
var(--mcs-section-pad-x)
var(--mcs-hero-pad-bottom);
box-sizing: border-box;
overflow: hidden;
background:
var(--offwhite);
color:
var(--black);
font-family:
inherit;
}
/* =========================================================
GRID
========================================================= */
.mcs-contact-grid {
opacity: .26;
background-image:
linear-gradient(
rgba(0,0,0,.065) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0,0,0,.065) 1px,
transparent 1px
);
background-size:
90px 90px;
-webkit-mask-image:
linear-gradient(
90deg,
rgba(0,0,0,1) 0%,
rgba(0,0,0,.60) 42%,
transparent 76%
);
mask-image:
linear-gradient(
90deg,
rgba(0,0,0,1) 0%,
rgba(0,0,0,.60) 42%,
transparent 76%
);
}
/* =========================================================
TOP
========================================================= */
.mcs-contact-top {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
border-bottom:
1px solid var(--line);
}
.mcs-contact-top-meta {
color:
rgba(0,0,0,.38);
font-size: var(--mcs-text-nano);
font-weight: 600;
line-height: 1;
letter-spacing: .17em;
}
/* =========================================================
MAIN LAYOUT
========================================================= */
.mcs-contact-main {
position: relative;
z-index: 2;
display: grid;
grid-template-columns:
minmax(0, 1.15fr)
minmax(350px, .85fr);
gap:
clamp(65px, 9vw, 155px);
padding:
clamp(24px, 4svh, 56px)
0;
/* fills the hero between the top row and the locations strip, with
its content centred in that space */
flex: 1;
align-content: center;
}
/* =========================================================
LEFT
========================================================= */
.mcs-contact-kicker {
margin-bottom: var(--mcs-hero-gap-sm);
color:
var(--orange);
font-size: var(--mcs-text-micro);
font-weight: 600;
line-height: 1;
letter-spacing: .18em;
}
.mcs-contact-intro__title {
margin:
0 !important;
max-width:
850px;
color:
var(--mcs-black) !important;
}
.mcs-contact-intro__lede {
max-width:
clamp(420px, 34vw, 640px);
margin:
var(--mcs-hero-gap-md) 0 0 !important;
color: var(--mcs-onlight-60);
}
/* =========================================================
RIGHT SIDE
========================================================= */
.mcs-contact-people {
display: flex;
flex-direction: column;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
/* PERSON */
.mcs-contact-person {
padding:
clamp(24px, 2.4vw, 32px);
background: var(--offwhite);
}
.mcs-contact-person-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom:
22px;
color:
rgba(0,0,0,.40);
font-size:
var(--mcs-text-label);
font-weight:
600;
line-height:
1;
letter-spacing:
.15em;
}
.mcs-contact-person-head strong {
color:
var(--orange);
font-size:
var(--mcs-text-nano);
font-weight:
500;
}
.mcs-contact-person__name {
margin:
0 !important;
color:
var(--black) !important;
}
.mcs-contact-role {
margin-top:
6px;
margin-bottom:
18px;
color:
rgba(0,0,0,.42);
font-size:
var(--mcs-text-label);
font-weight:
600;
letter-spacing:
.14em;
}
/* EMAIL / PHONE */
.mcs-contact-links {
border-top:
1px solid rgba(0,0,0,.08);
}
.mcs-contact-links a {
display: flex;
align-items: center;
justify-content: space-between;
gap:
20px;
padding:
10px 0;
border-bottom:
1px solid rgba(0,0,0,.08);
color:
rgba(0,0,0,.61) !important;
font-size:
var(--mcs-text-label);
line-height:
1.2;
text-decoration:
none !important;
transition:
color .25s ease,
padding .35s cubic-bezier(.16,1,.3,1);
}
.mcs-contact-links a strong {
color:
var(--orange);
font-size:
var(--mcs-text-caption);
font-weight:
400;
}
.mcs-contact-links a:hover {
padding-left:
7px;
color:
var(--orange) !important;
}
/* =========================================================
ROUTING
========================================================= */
.mcs-contact-routing {
margin-top:
18px;
padding-top:
23px;
border-top:
1px solid var(--line);
}
.mcs-contact-routing-label {
margin-bottom:
15px;
color:
rgba(0,0,0,.4);
font-size:
var(--mcs-text-micro);
font-weight:
600;
letter-spacing:
.15em;
}
.mcs-contact-routing > a {
display: flex;
align-items: center;
justify-content: space-between;
padding:
13px 0;
border-top:
1px solid rgba(0,0,0,.11);
color:
var(--black) !important;
font-size:
var(--mcs-text-label);
font-weight:
600;
line-height:
1;
letter-spacing:
.12em;
text-decoration:
none !important;
transition:
color .25s ease,
padding .35s cubic-bezier(.16,1,.3,1);
}
.mcs-contact-routing > a:last-child {
border-bottom:
1px solid rgba(0,0,0,.11);
}
.mcs-contact-routing > a strong {
color:
var(--orange);
font-size:
var(--mcs-text-body-sm);
font-weight:
400;
}
.mcs-contact-routing > a:hover {
padding-left:
8px;
color:
var(--orange) !important;
}
/* =========================================================
BOTTOM / NEXT SECTION
========================================================= */
.mcs-contact-bottom {
position: relative;
z-index: 2;
display: grid;
grid-template-columns:
1fr 1fr;
align-items: stretch;
border-top:
1px solid var(--line);
border-bottom:
1px solid var(--line);
}
.mcs-contact-bottom-left {
display: flex;
align-items: center;
gap:
18px;
padding:
21px 0;
}
.mcs-contact-bottom-number {
display: flex;
align-items: center;
justify-content: center;
width:
37px;
height:
37px;
border:
1px solid rgba(0,0,0,.18);
color:
var(--orange);
font-size:
var(--mcs-text-nano);
font-weight:
600;
}
.mcs-contact-bottom-left > div {
display: flex;
flex-direction: column;
gap:
5px;
}
.mcs-contact-bottom-left strong {
font-size:
var(--mcs-text-micro);
font-weight:
600;
letter-spacing:
.14em;
}
.mcs-contact-bottom-left > div span {
color:
rgba(0,0,0,.39);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.13em;
}
/* LOCATION CTA */
.mcs-contact-location-link {
display: flex;
align-items: center;
justify-content: space-between;
padding:
0 0 0 28px;
border-left:
1px solid var(--line);
color:
var(--black) !important;
font-size:
var(--mcs-text-label);
font-weight:
600;
letter-spacing:
.13em;
text-decoration:
none !important;
transition:
background .35s ease,
color .35s ease,
padding .4s cubic-bezier(.16,1,.3,1);
}
.mcs-contact-location-link strong {
display: flex;
align-items: center;
justify-content: center;
width:
70px;
align-self:
stretch;
border-left:
1px solid var(--line);
color:
var(--orange);
font-size:
var(--mcs-text-subtitle);
font-weight:
400;
transition:
background .35s ease,
color .35s ease;
}
.mcs-contact-location-link:hover {
padding-left:
38px;
background:
var(--black);
color:
#fff !important;
}
.mcs-contact-location-link:hover strong {
background:
var(--orange);
color:
#fff;
}
/* =========================================================
SIMPLE LOAD ANIMATION
========================================================= */
.mcs-contact-top,
.mcs-contact-intro,
.mcs-contact-people,
.mcs-contact-bottom {
opacity: 0;
transform:
translateY(18px);
animation:
mcsContactLoad
.8s
cubic-bezier(.16,1,.3,1)
forwards;
}
.mcs-contact-intro {
animation-delay:
.08s;
}
.mcs-contact-people {
animation-delay:
.16s;
}
.mcs-contact-bottom {
animation-delay:
.24s;
}
@keyframes mcsContactLoad {
to {
opacity: 1;
transform:
translateY(0);
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
/* Two columns leave the hero heading (its longest word alone is
~420px wide) too little room, so the people cards stack below it. */
.mcs-contact-main {
grid-template-columns:
minmax(0, 1fr);
gap:
58px;
}
}
/* =========================================================
PORTRAIT SCREENS
On any portrait screen, big tablets included (a 13" iPad Pro is
1032px wide), the co-founder cards sit below the links list instead of
beside the heading, which would leave the heading too little room.
On tablets the two cards then sit side by side; on phones they stack
one under the other (the column layout above).
========================================================= */
@media (orientation: portrait) {
.mcs-contact-main {
grid-template-columns:
minmax(0, 1fr);
gap:
58px;
}
}
@media (orientation: portrait) and (min-width: 601px) {
.mcs-contact-people {
flex-direction:
row;
}
.mcs-contact-person {
flex:
1 1 0;
min-width:
0;
/* each card is about half the width now: the name steps down through
the shared title token so HASSELSTRAND stays inside it */
--mcs-text-title:
clamp(22px, 2.6vw, 32px);
}
}
/* Tall portrait screens (13" iPad Pro): there is height to spare, so the
cards stack again, each full width, and fill the space the side-by-side
layout left empty. */
@media (orientation: portrait) and (min-width: 601px) and (min-height: 1300px) {
.mcs-contact-people {
flex-direction:
column;
}
.mcs-contact-person {
flex:
none;
--mcs-text-title:
clamp(28px, 3vw, 48px);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.mcs-contact-top-meta {
display:
none;
}
.mcs-contact-main {
display:
flex;
flex-direction:
column;
justify-content:
center;
padding:
57px 0 60px;
}
.mcs-contact-intro__lede {
max-width:
350px;
}
.mcs-contact-people {
margin-top:
58px;
}
.mcs-contact-bottom {
grid-template-columns:
1fr;
}
.mcs-contact-bottom-left {
padding:
17px 0;
}
.mcs-contact-location-link {
min-height:
65px;
padding-left:
0;
border-top:
1px solid var(--line);
border-left:
0;
}
.mcs-contact-location-link:hover {
padding-left:
10px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.mcs-contact-top,
.mcs-contact-intro,
.mcs-contact-people,
.mcs-contact-bottom {
opacity:
1;
transform:
none;
animation:
none;
}
}
/* ===== 2locations.html ===== */
/* =========================================================
BASE
========================================================= */
.mcs-locations-section {
--orange: var(--mcs-orange);
--black: var(--mcs-black);
--white: var(--mcs-white);
--line: var(--mcs-line);
position: relative;
width: 100%;
padding:
var(--mcs-section-pad-y)
var(--mcs-section-pad-x);
box-sizing:
border-box;
overflow:
hidden;
background:
var(--black);
color:
var(--white);
font-family:
inherit;
}
/* =========================================================
BACKGROUND GRID
========================================================= */
.mcs-locations-grid {
opacity:
.17;
background-size:
90px 90px;
}
/* =========================================================
HEADER
========================================================= */
.mcs-locations-header {
position:
relative;
z-index:
3;
display:
grid;
grid-template-columns:
1fr minmax(280px, 390px);
align-items:
end;
gap:
60px;
margin-bottom:
clamp(60px, 6vw, 95px);
}
/* EYEBROW */
.mcs-locations-kicker {
margin-bottom:
19px;
}
/* TITLE */
.mcs-locations-heading__title {
margin:
0 !important;
color:
var(--white) !important;
}
/* INTRO */
.mcs-locations-intro {
padding-bottom:
5px;
}
.mcs-locations-intro-text {
margin:
0 !important;
color:
rgba(255,255,255,.51);
line-height:
1.65;
}
.mcs-locations-intro-meta {
margin-top:
27px;
padding-top:
14px;
border-top:
1px solid var(--line);
color:
rgba(255,255,255,.3);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.16em;
}
/* =========================================================
EXPERIENCE
========================================================= */
.mcs-locations-experience {
position:
relative;
z-index:
3;
display:
grid;
grid-template-columns:
minmax(270px, 350px)
minmax(0, 1fr);
gap:
clamp(30px, 4vw, 65px);
}
/* =========================================================
SELECTOR
========================================================= */
.mcs-locations-selector {
display:
flex;
flex-direction:
column;
}
.mcs-location-option {
position:
relative;
width:
100%;
padding:
22px 0 28px;
border:
0;
border-top:
1px solid var(--line);
border-radius:
0;
background:
transparent;
color:
rgba(255,255,255,.34);
font-family:
inherit;
text-align:
left;
cursor:
pointer;
transition:
color .35s ease;
}
.mcs-location-option:last-of-type {
border-bottom:
1px solid var(--line);
}
/* =========================================================
SELECTOR TOP
========================================================= */
.mcs-location-option-top {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
15px;
margin-bottom:
22px;
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.14em;
line-height:
1;
}
.mcs-location-number {
color:
var(--orange);
}
.mcs-location-city-small {
color:
inherit;
text-align:
right;
}
/* =========================================================
LARGE SELECTOR TITLE
========================================================= */
.mcs-location-option-title {
max-width:
330px;
color:
inherit;
font-size:
var(--mcs-text-subtitle);
font-weight:
500;
line-height:
.96;
letter-spacing:
-.035em;
text-transform:
uppercase;
}
/* ADDRESS */
.mcs-location-option-address {
margin-top:
12px;
font-size:
var(--mcs-text-nano);
font-weight:
600;
line-height:
1;
letter-spacing:
.13em;
}
/* ACTIVE LINE */
.mcs-location-option-line {
position:
absolute;
left:
0;
bottom:
-1px;
width:
100%;
height:
2px;
overflow:
hidden;
}
.mcs-location-option-line::after {
content:
"";
position:
absolute;
inset:
0;
background:
var(--orange);
transform:
scaleX(0);
transform-origin:
left center;
transition:
transform .55s
cubic-bezier(.16,1,.3,1);
}
.mcs-location-option:hover {
color:
rgba(255,255,255,.72);
}
.mcs-location-option.is-active {
color:
#fff;
}
.mcs-location-option.is-active
.mcs-location-option-line::after {
transform:
scaleX(1);
}
/* The per-location panel (picture + address) is only used by the phone
accordion (see the MOBILE block); everywhere else the shared image
stage shows the open location. */
.mcs-location-panel {
display:
none;
}
/* SELECTOR FOOTER */
.mcs-selector-footer {
display:
flex;
justify-content:
space-between;
margin-top:
auto;
padding-top:
25px;
color:
rgba(255,255,255,.25);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.14em;
}
/* =========================================================
IMAGE STAGE
========================================================= */
.mcs-location-stage {
position:
relative;
min-width:
0;
}
/* =========================================================
IMAGE FRAME
========================================================= */
.mcs-location-image-frame {
position:
relative;
width:
100%;
height:
clamp(570px, 58vw, 760px);
overflow:
hidden;
background:
#161616;
}
/* IMAGE */
#mcs-location-image {
position:
absolute;
inset:
0;
width:
100%;
height:
100%;
object-fit:
cover;
object-position:
center;
transform:
scale(1.015);
opacity:
1;
transition:
opacity .32s ease,
transform 1.1s cubic-bezier(.16,1,.3,1);
}
#mcs-location-image.is-changing {
opacity:
0;
transform:
scale(1.055);
}
/* =========================================================
SIMPLE IMAGE SHADE
========================================================= */
.mcs-location-image-shade {
position:
absolute;
inset:
0;
pointer-events:
none;
background:
linear-gradient(
180deg,
rgba(0,0,0,.27) 0%,
rgba(0,0,0,0) 32%
),
linear-gradient(
0deg,
rgba(0,0,0,.72) 0%,
rgba(0,0,0,.07) 46%
);
}
/* =========================================================
MINIMAL TOP META
========================================================= */
.mcs-location-image-top {
position:
absolute;
top:
24px;
left:
27px;
z-index:
2;
color:
rgba(255,255,255,.68);
font-size:
var(--mcs-text-nano);
font-weight:
600;
line-height:
1;
letter-spacing:
.16em;
text-shadow:
0 1px 8px rgba(0,0,0,.3);
}
/* =========================================================
IMAGE BOTTOM
========================================================= */
.mcs-location-image-bottom {
position:
absolute;
left:
28px;
right:
28px;
bottom:
27px;
display:
flex;
align-items:
flex-end;
justify-content:
space-between;
/* the address block drops under the city name when they don't fit side by side */
flex-wrap:
wrap;
gap:
19px 35px;
z-index:
2;
}
/* TYPE */
.mcs-location-title > span {
display:
block;
margin-bottom:
9px;
color:
var(--orange);
font-size:
var(--mcs-text-micro);
font-weight:
600;
line-height:
1;
letter-spacing:
.17em;
}
/* CITY */
.mcs-location-title__text {
/* sized to share the row with the address block */
--mcs-text-section:clamp(34px,3.7vw,64px);
margin:
0 !important;
color:
#fff !important;
text-shadow:
0 2px 20px rgba(0,0,0,.18);
}
/* =========================================================
ADDRESS PANEL
========================================================= */
.mcs-location-address-panel {
width:
210px;
flex:
0 0 auto;
padding-left:
20px;
border-left:
1px solid rgba(255,255,255,.28);
}
.mcs-location-address-label {
margin-bottom:
10px;
color:
rgba(255,255,255,.43);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.15em;
}
.mcs-location-address {
color:
rgba(255,255,255,.80);
font-size:
var(--mcs-text-label);
line-height:
1.55;
}
/* MAP */
.mcs-location-address-panel a {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
20px;
margin-top:
17px;
padding-top:
12px;
border-top:
1px solid rgba(255,255,255,.20);
color:
#fff !important;
font-size:
var(--mcs-text-label);
font-weight:
600;
line-height:
1;
letter-spacing:
.14em;
text-decoration:
none !important;
transition:
color .25s ease,
padding .3s cubic-bezier(.16,1,.3,1);
}
.mcs-location-address-panel a strong {
color:
var(--orange);
font-size:
var(--mcs-text-body-sm);
font-weight:
400;
}
.mcs-location-address-panel a:hover {
padding-left:
5px;
color:
var(--orange) !important;
}
/* =========================================================
CONTROLS
========================================================= */
.mcs-location-controls {
display:
flex;
align-items:
center;
justify-content:
space-between;
margin-top:
14px;
}
/* COUNTER */
.mcs-location-counter {
display:
flex;
align-items:
baseline;
gap:
5px;
color:
rgba(255,255,255,.32);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.14em;
}
.mcs-location-counter strong {
color:
#fff;
font-size:
var(--mcs-text-label);
font-weight:
500;
}
/* ARROWS */
.mcs-location-arrows {
display:
flex;
gap:
7px;
}
.mcs-location-arrows button {
display:
flex;
align-items:
center;
justify-content:
center;
width:
43px;
height:
43px;
padding:
0;
border:
1px solid rgba(255,255,255,.19);
border-radius:
0;
background:
transparent;
color:
#fff;
font-family:
inherit;
font-size:
var(--mcs-text-body-sm);
cursor:
pointer;
transition:
background .25s ease,
border-color .25s ease,
color .25s ease;
}
.mcs-location-arrows button:hover {
border-color:
var(--orange);
background:
var(--orange);
color:
#fff;
}
/* =========================================================
NETWORK
========================================================= */
.mcs-location-network {
position:
relative;
z-index:
3;
display:
grid;
grid-template-columns:
1fr;
gap:
30px;
align-items:
center;
padding:
23px 0;
border-top:
1px solid var(--line);
border-bottom:
1px solid var(--line);
}
/* LABEL */
.mcs-network-title {
color:
rgba(255,255,255,.31);
font-size:
var(--mcs-text-micro);
font-weight:
600;
letter-spacing:
.16em;
}
/* ROUTE */
.mcs-network-route {
display:
grid;
grid-template-columns:
auto 1fr auto 1fr auto;
align-items:
center;
gap:
18px;
}
/* NODE */
.mcs-network-node {
display:
flex;
align-items:
center;
gap:
11px;
}
.mcs-network-node > span {
color:
var(--orange);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.12em;
}
.mcs-network-node div {
display:
flex;
flex-direction:
column;
gap:
4px;
}
.mcs-network-node strong {
color:
rgba(255,255,255,.88);
font-size:
var(--mcs-text-label);
font-weight:
600;
letter-spacing:
.12em;
}
.mcs-network-node small {
color:
rgba(255,255,255,.31);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.12em;
}
/* CONNECTION */
.mcs-network-line {
position:
relative;
height:
1px;
overflow:
hidden;
background:
rgba(255,255,255,.14);
}
.mcs-network-line i {
position:
absolute;
top:
0;
left:
-25%;
width:
24%;
height:
1px;
background:
var(--orange);
animation:
mcsNetworkPulse 4s linear infinite;
}
@keyframes mcsNetworkPulse {
from {
left:
-25%;
}
to {
left:
110%;
}
}
/* =========================================================
END STATEMENT
========================================================= */
.mcs-locations-end {
position:
relative;
z-index:
3;
display:
grid;
grid-template-columns:
1fr 1fr;
align-items:
end;
gap:
50px;
padding-top:
clamp(80px, 8vw, 130px);
}
.mcs-locations-end-label {
color:
rgba(255,255,255,.3);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.17em;
}
.mcs-locations-end-copy {
color:
var(--white);
font-size:
var(--mcs-text-headline);
font-weight:
500;
line-height:
.9;
letter-spacing:
-.045em;
text-align:
left;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.mcs-locations-experience {
grid-template-columns:
250px 1fr;
gap:
30px;
}
.mcs-location-image-frame {
min-height:
580px;
}
.mcs-location-address-panel {
width:
175px;
}
.mcs-location-option-title {
font-size:
22px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.mcs-locations-section {
padding:
var(--mcs-section-pad-y) var(--mcs-section-pad-x);
}
/* HEADER */
.mcs-locations-header {
grid-template-columns:
1fr;
gap:
27px;
margin-bottom:
52px;
}
.mcs-locations-intro {
max-width:
360px;
}
/* EXPERIENCE */
.mcs-locations-experience {
display:
flex;
flex-direction:
column;
gap:
24px;
}
/* SELECTOR: a vertical accordion, one location open at a time. Each
location's panel (picture + address) expands under its button; the
shared image stage below is not used on phones. */
.mcs-locations-selector {
display:
flex;
flex-direction:
column;
border-bottom:
1px solid var(--line);
}
.mcs-location-option {
min-width:
0;
padding:
18px 0 20px;
}
.mcs-location-option-top {
flex-direction:
row;
justify-content:
space-between;
align-items:
center;
gap:
12px;
margin-bottom:
12px;
}
.mcs-location-option-title {
font-size:
20px;
line-height:
.98;
}
.mcs-selector-footer {
display:
none;
}
.mcs-location-stage {
display:
none;
}
/* panel: collapses to nothing until its location is open */
.mcs-location-panel {
display:
grid;
grid-template-rows:
0fr;
visibility:
hidden;
transition:
grid-template-rows .6s var(--mcs-ease),
visibility 0s linear .6s;
}
.mcs-location-panel.is-active {
grid-template-rows:
1fr;
visibility:
visible;
transition:
grid-template-rows .6s var(--mcs-ease),
visibility 0s;
}
.mcs-location-panel__inner {
min-height:
0;
overflow:
hidden;
}
.mcs-location-panel__frame {
position:
relative;
aspect-ratio:
4 / 3;
/* wider screens in this range (small tablets) would get a huge picture */
max-height:
380px;
overflow:
hidden;
background:
var(--mcs-black);
}
.mcs-location-panel__image {
display:
block;
width:
100%;
height:
100%;
object-fit:
cover;
}
.mcs-location-panel__shade {
position:
absolute;
inset:
0;
background:
var(--mcs-glass-bg);
}
.mcs-location-panel__code {
position:
absolute;
top:
14px;
left:
14px;
color:
var(--mcs-ink-73);
font-size:
var(--mcs-text-label);
font-weight:
600;
letter-spacing:
.15em;
}
/* the space under the open panel is margin on this last child, not
padding on the collapsing wrapper, so it collapses with it */
.mcs-location-panel__details {
display:
grid;
gap:
8px;
padding-top:
18px;
margin-bottom:
24px;
}
.mcs-location-panel__label {
color:
var(--mcs-ink-42);
font-size:
var(--mcs-text-micro);
font-weight:
600;
letter-spacing:
.16em;
}
.mcs-location-panel__address {
color:
var(--mcs-ink-73);
font-size:
var(--mcs-text-body);
line-height:
1.5;
}
.mcs-location-panel__map {
display:
inline-flex;
align-items:
center;
gap:
10px;
width:
fit-content;
margin-top:
6px;
padding-bottom:
4px;
border-bottom:
1px solid var(--mcs-orange);
color:
var(--mcs-white);
font-size:
var(--mcs-text-label);
font-weight:
600;
letter-spacing:
.14em;
text-decoration:
none;
}
.mcs-location-panel__map-arrow {
color:
var(--mcs-orange);
}
/* IMAGE */
.mcs-location-image-frame {
height:
66svh;
min-height:
510px;
}
.mcs-location-image-top {
top:
18px;
left:
18px;
}
.mcs-location-image-bottom {
left:
18px;
right:
18px;
bottom:
18px;
flex-direction:
column;
align-items:
flex-start;
gap:
19px;
}
.mcs-location-address-panel {
width:
100%;
padding:
13px 0 0;
border-top:
1px solid rgba(255,255,255,.25);
border-left:
0;
}
.mcs-location-address-panel a {
max-width:
260px;
}
/* NETWORK */
.mcs-location-network {
grid-template-columns:
1fr;
gap:
19px;
margin-top:
70px;
}
.mcs-network-route {
grid-template-columns:
1fr;
align-items:
start;
gap:
13px;
}
.mcs-network-line {
width:
1px;
height:
18px;
margin-left:
4px;
}
.mcs-network-line i {
display:
none;
}
/* END */
.mcs-locations-end {
grid-template-columns:
1fr;
gap:
28px;
padding-top:
80px;
}
.mcs-locations-end-copy {
font-size:
clamp(38px, 12vw, 58px);
text-align:
left;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.mcs-network-line i {
animation:
none !important;
}
#mcs-location-image {
transition:
none !important;
}
}