/* ===== 1hero.html ===== */
/* =========================================================
ABOUT HERO
========================================================= */
.mcs-about-hero {
--orange: var(--mcs-orange);
--offwhite: var(--mcs-white);
--black: var(--mcs-black);
position: relative;
width: 100%;
min-height: var(--mcs-hero-min);
box-sizing:
border-box;
overflow:
hidden;
background:
var(--black);
color:
var(--offwhite);
font-family:
inherit;
}
/* =========================================================
IMAGE
========================================================= */
.mcs-about-hero__image {
position:
absolute;
inset:
0;
overflow:
hidden;
}
.mcs-about-hero__image img {
width:
100%;
height:
100%;
object-fit:
cover;
object-position:
center center;
transform:
scale(1.02);
animation:
mcsAboutImageIn
1.5s
cubic-bezier(.16,1,.3,1)
forwards;
}
@keyframes mcsAboutImageIn {
from {
transform:
scale(1.065);
}
to {
transform:
scale(1.02);
}
}
/* =========================================================
IMAGE TREATMENT
========================================================= */
.mcs-about-hero__image-shade {
position: absolute;
inset: 0;
pointer-events:
none;
background:
linear-gradient(
90deg,
rgba(5,5,5,.74) 0%,
rgba(5,5,5,.46) 31%,
rgba(5,5,5,.15) 60%,
rgba(5,5,5,.02) 100%
),
linear-gradient(
0deg,
rgba(5,5,5,.68) 0%,
rgba(5,5,5,.15) 36%,
rgba(5,5,5,0) 66%
),
linear-gradient(
180deg,
rgba(5,5,5,.30) 0%,
rgba(5,5,5,0) 30%
);
}
/* =========================================================
CONTENT
========================================================= */
.mcs-about-hero__content {
position:
relative;
z-index:
2;
display:
flex;
flex-direction:
column;
justify-content:
space-between;
width:
100%;
min-height: var(--mcs-hero-min);
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;
}
/* =========================================================
TOP
========================================================= */
.mcs-about-hero__top {
display:
flex;
align-items:
center;
justify-content:
space-between;
padding-bottom:
15px;
border-bottom:
1px solid rgba(255,255,255,.18);
opacity:
0;
transform:
translateY(-10px);
animation:
mcsAboutReveal
.8s
.08s
cubic-bezier(.16,1,.3,1)
forwards;
}
.mcs-about-hero__meta {
color:
rgba(255,255,255,.35);
font-size:
var(--mcs-text-nano);
font-weight:
600;
line-height:
1;
letter-spacing:
.16em;
}
/* =========================================================
HEADLINE
========================================================= */
.mcs-about-hero__headline {
width:
min(970px, 80vw);
margin-top:
auto;
margin-bottom:
auto;
padding-top:
30px;
opacity:
0;
transform:
translateY(30px);
animation:
mcsAboutReveal
1s
.20s
cubic-bezier(.16,1,.3,1)
forwards;
}
.mcs-about-hero__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-about-hero__title {
margin:
0 !important;
color:
var(--mcs-white) !important;
}
/* =========================================================
BOTTOM
========================================================= */
.mcs-about-hero__bottom {
display:
flex;
align-items:
flex-end;
justify-content:
space-between;
gap:
40px;
padding-top:
17px;
opacity:
0;
transform:
translateY(18px);
animation:
mcsAboutReveal
.8s
.38s
cubic-bezier(.16,1,.3,1)
forwards;
}
.mcs-about-hero__bottom-text {
width:
min(clamp(420px, 34vw, 640px), 100%);
margin:
0 !important;
color:
var(--mcs-ink-73);
}
/* =========================================================
INDICATOR
========================================================= */
.mcs-about-hero__indicator {
display:
flex;
align-items:
center;
gap:
14px;
color:
rgba(255,255,255,.38);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.14em;
}
.mcs-about-hero__indicator > div {
position:
relative;
width:
70px;
height:
1px;
overflow:
hidden;
background:
rgba(255,255,255,.18);
}
.mcs-about-hero__indicator i {
position:
absolute;
top:
0;
left:
-25px;
width:
25px;
height:
1px;
background:
var(--orange);
animation:
mcsAboutLine
2.2s
ease-in-out
infinite;
}
@keyframes mcsAboutLine {
0% {
left:
-25px;
}
60%,
100% {
left:
75px;
}
}
/* =========================================================
LOAD
========================================================= */
@keyframes mcsAboutReveal {
to {
opacity:
1;
transform:
translateY(0);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
/* the hero keeps the shared full-screen height and padding */
.mcs-about-hero__meta {
display:
none;
}
.mcs-about-hero__headline {
width:
100%;
}
.mcs-about-hero__bottom {
flex-direction:
column;
align-items:
flex-start;
gap:
24px;
}
.mcs-about-hero__bottom-text {
max-width:
340px;
}
.mcs-about-hero__indicator {
display:
none;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.mcs-about-hero__image img {
animation:
none;
}
.mcs-about-hero__top,
.mcs-about-hero__headline,
.mcs-about-hero__bottom {
opacity:
1;
transform:
none;
animation:
none;
}
.mcs-about-hero__indicator i {
animation:
none;
}
}
/* ===== 2team.html ===== */
/* =========================================================
INTRO
========================================================= */
.mcs-team__intro {
display:
grid;
grid-template-columns:
minmax(0, 1fr)
minmax(260px, 370px);
gap:
clamp(50px, 8vw, 150px);
align-items:
end;
padding-bottom:
clamp(42px, 4vw, 60px);
}
.mcs-team__kicker {
margin-bottom:
22px;
}
/* =========================================================
TITLE — deliberately restrained
========================================================= */
.mcs-team__title {
margin:
0 !important;
color:
var(--black) !important;
}
/* =========================================================
INTRO RIGHT
========================================================= */
.mcs-team__intro-right {
padding-bottom:
4px;
}
.mcs-team__index {
padding-bottom:
12px;
margin-bottom:
19px;
border-bottom:
1px solid var(--line);
color:
var(--orange);
font-size:
var(--mcs-text-nano);
font-weight:
600;
line-height:
1;
letter-spacing:
.16em;
}
.mcs-team__intro-right-text {
max-width:
330px;
margin:
0 !important;
color:
rgba(0,0,0,.53);
line-height:
1.65;
}
/* =========================================================
IMAGE
========================================================= */
.mcs-team__image-wrap {
position:
relative;
width:
100%;
overflow:
hidden;
background:
#111;
}
.mcs-team__image {
display:
block;
width:
100%;
height:
auto;
min-height:
480px;
max-height:
72vh;
object-fit:
cover;
object-position:
center;
transform:
scale(1.001);
transition:
transform
1.2s
cubic-bezier(.16,1,.3,1);
}
/* extremely subtle — not an obvious hover gimmick */
.mcs-team__image-wrap:hover
.mcs-team__image {
transform:
scale(1.012);
}
/* on wide screens the frame is portrait-tall and shows only the left half
of the photo, so start at the very left edge to keep both founders
centred and uncropped */
@media (min-width:1300px) {
.mcs-founders__image {
object-position:
0% 50%;
}
}
/* =========================================================
IMAGE META
Small technical treatment only.
No copy over people's faces.
========================================================= */
.mcs-team__image-meta {
position:
absolute;
left:
18px;
right:
18px;
bottom:
15px;
display:
flex;
align-items:
center;
justify-content:
space-between;
pointer-events:
none;
color:
rgba(255,255,255,.58);
font-size:
var(--mcs-text-nano);
font-weight:
600;
line-height:
1;
letter-spacing:
.15em;
text-shadow:
0 1px 8px rgba(0,0,0,.5);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.mcs-team__intro {
grid-template-columns:
1fr 300px;
gap:
50px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.mcs-team__intro {
grid-template-columns:
1fr;
gap:
34px;
padding-bottom:
40px;
}
.mcs-team__intro-right {
max-width:
330px;
}
.mcs-team__image {
min-height:
360px;
max-height:
none;
}
.mcs-team__image-meta {
left:
12px;
right:
12px;
bottom:
11px;
font-size:
6px;
}
.mcs-team__image-meta span:last-child {
display:
none;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.mcs-team__image {
transition:
none;
}
}
/* ===== 3founders.html ===== */
/* =========================================================
FOUNDERS
========================================================= */
.mcs-founders {
--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;
}
/* =========================================================
TOP
========================================================= */
.mcs-founders__top {
display:
flex;
align-items:
center;
justify-content:
space-between;
padding-bottom:
15px;
margin-bottom:
clamp(42px, 4vw, 60px);
border-bottom:
1px solid var(--line);
}
.mcs-founders__meta {
color:
rgba(255,255,255,.27);
font-size:
var(--mcs-text-nano);
font-weight:
600;
line-height:
1;
letter-spacing:
.16em;
}
/* =========================================================
MAIN GRID
========================================================= */
.mcs-founders__main {
display:
grid;
/*
The story column has to hold the section-size title
("A REAL PROBLEM.") on one line; the photograph takes the rest.
*/
grid-template-columns:
minmax(0, 1.2fr)
minmax(360px, 1fr);
gap:
clamp(45px, 6vw, 100px);
align-items:
stretch;
}
/* =========================================================
IMAGE
Spans the full height of the row (matching the story
column) and crops to fill via object-fit: cover.
========================================================= */
.mcs-founders__image-wrap {
position:
relative;
width:
100%;
height:
100%;
overflow:
hidden;
background:
#161616;
}
.mcs-founders__image {
display:
block;
width:
100%;
height:
100%;
object-fit:
cover;
/* both founders sit in the left half of the photo: keep that half in
frame instead of the default centre crop that cut Fabian off */
object-position:
6% 50%;
transform:
scale(1);
transition:
transform
1.2s
cubic-bezier(.16,1,.3,1);
}
.mcs-founders__image-wrap:hover
.mcs-founders__image {
transform:
scale(1.008);
}
/* =========================================================
IMAGE META
========================================================= */
.mcs-founders__image-meta {
position:
absolute;
left:
16px;
right:
16px;
bottom:
14px;
display:
flex;
justify-content:
space-between;
align-items:
center;
color:
rgba(255,255,255,.58);
font-size:
var(--mcs-text-nano);
font-weight:
600;
line-height:
1;
letter-spacing:
.15em;
pointer-events:
none;
text-shadow:
0 1px 8px rgba(0,0,0,.65);
}
/* =========================================================
STORY
========================================================= */
.mcs-founders__story {
display:
flex;
flex-direction:
column;
padding:
3px 0 0;
}
/* =========================================================
INDEX
========================================================= */
.mcs-founders__index {
padding-bottom:
13px;
margin-bottom:
clamp(35px, 3vw, 48px);
border-bottom:
1px solid var(--line);
color:
var(--orange);
font-size:
var(--mcs-text-nano);
font-weight:
600;
line-height:
1;
letter-spacing:
.16em;
}
/* =========================================================
KICKER
========================================================= */
.mcs-founders__kicker {
margin-bottom:
14px;
color:
var(--orange);
font-size:
var(--mcs-text-micro);
font-weight:
600;
line-height:
1;
letter-spacing:
.17em;
}
/* =========================================================
TITLE
========================================================= */
.mcs-founders__title {
margin:
0 !important;
color:
var(--white) !important;
}
/* =========================================================
COPY
========================================================= */
.mcs-founders__copy {
margin-top:
clamp(28px, 3vw, 42px);
}
.mcs-founders__copy-text {
margin:
0 !important;
color:
var(--mcs-ink-60);
line-height:
1.7;
}
.mcs-founders__copy-text--divider {
margin-top:
18px !important;
}
/* =========================================================
FOUNDER PEOPLE
Central instead of pushed to the bottom.
========================================================= */
.mcs-founders__people {
display:
grid;
grid-template-columns:
1fr 1fr;
gap:
0;
margin-top:
clamp(38px, 4vw, 58px);
border-top:
1px solid var(--line);
border-bottom:
1px solid var(--line);
}
/* =========================================================
INDIVIDUAL FOUNDER
========================================================= */
.mcs-founder {
position:
relative;
min-width:
0;
padding:
20px
clamp(14px, 1.5vw, 24px)
19px
0;
}
.mcs-founder + .mcs-founder {
padding-left:
clamp(14px, 1.5vw, 24px);
padding-right:
0;
border-left:
1px solid var(--line);
}
/* =========================================================
FOUNDER TOP LINE
========================================================= */
.mcs-founder__topline {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
10px;
margin-bottom:
17px;
}
.mcs-founder__number {
color:
var(--orange);
font-size:
var(--mcs-text-nano);
font-weight:
600;
line-height:
1;
letter-spacing:
.14em;
}
.mcs-founder__role {
color:
rgba(255,255,255,.27);
font-size:
var(--mcs-text-label);
font-weight:
600;
line-height:
1;
letter-spacing:
.12em;
text-align:
right;
}
/* =========================================================
NAME
THIS IS NOW A REAL VISUAL ELEMENT.
========================================================= */
.mcs-founder__name {
color:
rgba(255,255,255,.93);
/*
Local size, not --mcs-text-title: this column is nested
two levels of grid deep (.8fr story column, then split in
half again for the two founders), so it's much narrower
than other places that token is used. Tuned so the longest
surname (HASSELSTRAND) fits on one line at any width from
the 1000px single-column breakpoint upward.
*/
font-size:
clamp(19px, 1.7vw, 28px);
font-weight:
500;
line-height:
.94;
letter-spacing:
-.025em;
text-transform:
uppercase;
overflow-wrap:
break-word;
transition:
color .25s ease,
transform .35s cubic-bezier(.16,1,.3,1);
}
/* =========================================================
AREA
========================================================= */
.mcs-founder__area {
margin-top:
17px;
color:
rgba(255,255,255,.26);
font-size:
var(--mcs-text-label);
font-weight:
600;
line-height:
1;
letter-spacing:
.13em;
}
/* =========================================================
FOUNDER HOVER
========================================================= */
.mcs-founder:hover
.mcs-founder__name {
color:
var(--orange);
transform:
translateX(4px);
}
/* =========================================================
BOTTOM
========================================================= */
.mcs-founders__bottom {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
30px;
margin-top:
clamp(42px, 4vw, 60px);
padding-top:
18px;
border-top:
1px solid var(--line);
color:
rgba(255,255,255,.25);
font-size:
var(--mcs-text-nano);
font-weight:
600;
line-height:
1;
letter-spacing:
.15em;
}
/* =========================================================
BOTTOM STATEMENT
========================================================= */
.mcs-founders__bottom-statement {
display:
flex;
align-items:
center;
gap:
12px;
color:
rgba(255,255,255,.48);
}
.mcs-founders__bottom-statement span {
width:
32px;
height:
1px;
background:
var(--orange);
}
/* =========================================================
REVEAL
========================================================= */
[data-founder-reveal] {
opacity:
0;
transform:
translateY(20px);
transition:
opacity .8s ease,
transform .9s cubic-bezier(.16,1,.3,1);
}
[data-founder-reveal].is-visible {
opacity:
1;
transform:
translateY(0);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1050px) {
/* Below this, the two-column split leaves the photo too narrow for
its forced row-height crop (object-fit: cover centers on the
frame, not on either founder) — Fabian or Anton falls out of
frame. Stack instead and let the photo keep its natural height,
same as mobile: no crop, nobody goes missing. */
.mcs-founders__main {
grid-template-columns:
1fr;
gap:
40px;
}
.mcs-founders__image {
width:
100%;
height:
auto;
}
.mcs-founders__people {
grid-template-columns:
1fr;
}
.mcs-founder {
padding:
18px 0;
}
.mcs-founder + .mcs-founder {
padding:
18px 0;
border-left:
0;
border-top:
1px solid var(--line);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.mcs-founders {
padding:
var(--mcs-section-pad-y) var(--mcs-section-pad-x);
}
.mcs-founders__meta {
display:
none;
}
.mcs-founders__main {
grid-template-columns:
1fr;
gap:
45px;
}
.mcs-founders__image-meta {
left:
12px;
right:
12px;
bottom:
11px;
font-size:
6px;
}
.mcs-founders__story {
padding:
0;
}
.mcs-founders__index {
margin-bottom:
33px;
}
.mcs-founders__copy {
margin-top:
30px;
}
.mcs-founders__people {
grid-template-columns:
1fr;
margin-top:
38px;
}
.mcs-founder {
padding:
20px 0;
}
.mcs-founder + .mcs-founder {
padding:
20px 0;
border-left:
0;
border-top:
1px solid var(--line);
}
.mcs-founder__name {
font-size:
22px;
}
.mcs-founders__bottom {
flex-direction:
column;
align-items:
flex-start;
gap:
18px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
[data-founder-reveal] {
opacity:
1;
transform:
none;
transition:
none;
}
.mcs-founders__image,
.mcs-founder__name {
transition:
none !important;
}
}
/* ===== 4people.html ===== */
/* =========================================================
TEAM DIRECTORY
========================================================= */
.mcs-team-directory {
--orange: var(--mcs-orange);
--black: var(--mcs-black);
--offwhite: var(--mcs-white);
--line: var(--mcs-line-onlight);
position: relative;
width: 100%;
padding:
var(--mcs-section-pad-y)
var(--mcs-section-pad-x);
box-sizing: border-box;
overflow: hidden;
background:
var(--offwhite);
color:
var(--black);
font-family:
inherit;
}
.mcs-team-directory__meta {
color:
rgba(0,0,0,.29);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.16em;
}
/* =========================================================
SECTION HEADERS
========================================================= */
.mcs-team-directory__section-head {
margin-top:
clamp(48px, 5vw, 80px);
display:
flex;
align-items:
center;
justify-content: space-between;
padding:
13px 0;
border-top:
1px solid var(--line);
border-bottom:
1px solid var(--line);
}
.mcs-team-directory__section-head > span {
color:
var(--orange);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.14em;
}
.mcs-team-directory__section-head strong {
color:
rgba(0,0,0,.72);
font-size:
var(--mcs-text-micro);
font-weight:
600;
letter-spacing:
.14em;
}
.mcs-team-directory__section-head small {
color:
rgba(0,0,0,.27);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.15em;
}
/* =========================================================
CORE TEAM GRID
========================================================= */
.mcs-team-directory__core {
display:
grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
border-bottom:
1px solid var(--line);
}
/* =========================================================
CORE PERSON
========================================================= */
.mcs-person--core {
/* the name column beside the photo is narrow, so the shared title step
is brought down here (via the token, not a one-off size), otherwise
HASSELSTRAND / SÄVENSTRAND run past the card edge on desktop */
--mcs-text-title:
clamp(22px, 2.2vw, 40px);
position:
relative;
min-height:
295px;
padding:
clamp(28px, 3vw, 45px);
box-sizing:
border-box;
border-bottom:
1px solid var(--line);
transition:
background .3s ease;
}
.mcs-person--core:nth-child(odd) {
border-right:
1px solid var(--line);
}
.mcs-person--core:nth-last-child(-n+2) {
border-bottom:
0;
}
.mcs-person--core:hover {
background:
rgba(0,0,0,.025);
}
/* Below 1100px the two-column grid leaves each name column too narrow
for the longest names (HASSELSTRAND, SÄVENSTRAND), so cards go full
width. Phones (<=767px) already use one column, restated below. */
@media (max-width: 1100px) {
.mcs-team-directory__core {
grid-template-columns:
minmax(0, 1fr);
}
.mcs-person--core:nth-child(odd) {
border-right:
0;
}
.mcs-person--core:nth-last-child(-n+2) {
border-bottom:
1px solid var(--line);
}
.mcs-person--core:last-child {
border-bottom:
0;
}
}
/* =========================================================
PERSON TOP
========================================================= */
.mcs-person__top {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
20px;
margin-bottom:
clamp(38px, 4vw, 60px);
}
.mcs-person__index {
color:
var(--orange);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.14em;
}
/* =========================================================
PERSON BODY
Photo on the left, name/role/areas on the right. Every photo
is the same fixed 4:5 box.
========================================================= */
.mcs-person__body {
position: relative;
display: flex;
gap: 1vw;
}
.mcs-person__photo {
/* identical box for every portrait: the source images are pre-cropped
to 4:5, so nothing stretches with the text column next to it */
width: 160px;
aspect-ratio: 4 / 5;
height: auto;
align-self: flex-start;
flex: 0 0 auto;
object-fit: cover;
object-position: center;
border: 1px solid var(--line);
filter: grayscale(1);
transition: filter .3s ease;
}
.mcs-person--core:hover
.mcs-person__photo {
filter:
grayscale(0);
}
.mcs-person__type {
color:
rgba(0,0,0,.27);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.14em;
}
/* =========================================================
NAME
========================================================= */
.mcs-person__name {
margin:
0 !important;
color:
var(--black) !important;
transition:
color .25s ease,
transform .4s cubic-bezier(.16,1,.3,1);
}
.mcs-person--core:hover .mcs-person__name {
color:
var(--orange) !important;
transform:
translateX(5px);
}
/* =========================================================
ROLE
========================================================= */
.mcs-person__role {
margin-top:
19px;
color:
rgba(0,0,0,.53);
font-size:
var(--mcs-text-label);
font-weight:
600;
letter-spacing:
.12em;
}
/* =========================================================
AREAS
========================================================= */
.mcs-person__areas {
display:
flex;
flex-wrap:
wrap;
gap:
7px;
margin-top:
27px;
}
.mcs-person__areas span {
padding:
7px 9px;
border:
1px solid rgba(0,0,0,.13);
color:
rgba(0,0,0,.34);
font-size:
var(--mcs-text-label);
font-weight:
600;
line-height:
1;
letter-spacing:
.13em;
}
/* =========================================================
ENGINEERING HEADER
========================================================= */
.mcs-team-directory__section-head--engineering {
margin-top:
clamp(65px, 6vw, 95px);
}
/* =========================================================
ENGINEERING LIST
========================================================= */
.mcs-team-directory__engineering {
border-bottom:
1px solid var(--line);
}
/* =========================================================
ENGINEER ROW
========================================================= */
.mcs-engineer {
position:
relative;
display:
grid;
grid-template-columns:
55px
minmax(180px, .75fr)
minmax(240px, 1fr)
minmax(150px, .55fr)
25px;
gap:
clamp(18px, 3vw, 45px);
align-items:
center;
min-height:
100px;
padding:
20px 0;
border-bottom:
1px solid var(--line);
transition:
padding .4s cubic-bezier(.16,1,.3,1),
background .3s ease;
}
.mcs-engineer:last-child {
border-bottom:
0;
}
.mcs-engineer:hover {
padding-left:
8px;
}
/* =========================================================
ENGINEER INDEX
========================================================= */
.mcs-engineer__index {
color:
var(--orange);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.14em;
}
/* =========================================================
ENGINEER NAME
========================================================= */
.mcs-engineer__name {
color:
var(--black);
font-size:
var(--mcs-text-title);
font-weight:
500;
line-height:
1;
letter-spacing:
-.025em;
transition:
color .25s ease;
}
.mcs-engineer:hover
.mcs-engineer__name {
color:
var(--orange);
}
/* =========================================================
ENGINEER ROLE
========================================================= */
.mcs-engineer__role strong {
display:
block;
color:
rgba(0,0,0,.60);
font-size:
var(--mcs-text-label);
font-weight:
600;
line-height:
1.2;
letter-spacing:
.11em;
}
.mcs-engineer__role span {
display:
block;
margin-top:
7px;
color:
rgba(0,0,0,.31);
font-size:
var(--mcs-text-body-sm);
line-height:
1.3;
}
/* =========================================================
AREA
========================================================= */
.mcs-engineer__area {
color:
rgba(0,0,0,.33);
font-size:
var(--mcs-text-label);
font-weight:
600;
letter-spacing:
.13em;
}
/* =========================================================
MARK
========================================================= */
.mcs-engineer__mark {
justify-self:
end;
color:
rgba(0,0,0,.17);
font-size:
var(--mcs-text-body-sm);
transition:
color .25s ease,
transform .35s cubic-bezier(.16,1,.3,1);
}
.mcs-engineer:hover
.mcs-engineer__mark {
color:
var(--orange);
transform:
translate(3px,3px);
}
/* =========================================================
BOTTOM
========================================================= */
.mcs-team-directory__bottom {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
30px;
padding-top:
clamp(45px, 4vw, 65px);
}
.mcs-team-directory__bottom > span {
color:
rgba(0,0,0,.27);
font-size:
var(--mcs-text-nano);
font-weight:
600;
letter-spacing:
.15em;
}
.mcs-team-directory__bottom strong {
display:
flex;
align-items:
center;
gap:
13px;
color:
rgba(0,0,0,.48);
font-size:
var(--mcs-text-micro);
font-weight:
600;
letter-spacing:
.12em;
}
.mcs-team-directory__bottom i {
width:
20px;
height:
1px;
background:
var(--orange);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.mcs-engineer {
grid-template-columns:
40px
minmax(170px,.8fr)
1fr
25px;
}
.mcs-engineer__area {
display:
none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.mcs-team-directory {
padding:
var(--mcs-section-pad-y) var(--mcs-section-pad-x);
}
.mcs-team-directory__meta {
display:
none;
}
/* SECTION HEAD */
.mcs-team-directory__section-head {
grid-template-columns:
35px
1fr;
}
.mcs-team-directory__section-head small {
display:
none;
}
/* CORE */
.mcs-team-directory__core {
grid-template-columns:
1fr;
}
.mcs-person--core {
min-height:
245px;
padding:
30px 0;
border-right:
0 !important;
border-bottom:
1px solid var(--line) !important;
}
.mcs-person--core:last-child {
border-bottom:
0 !important;
}
.mcs-person__top {
margin-bottom:
35px;
}
/* Photo above the name: beside it, the name column is under 175px wide,
less than half of HASSELSTRAND. */
.mcs-person__body {
flex-direction:
column;
gap:
22px;
}
.mcs-person__photo {
width:
120px;
align-self:
flex-start;
}
/* ENGINEERING */
.mcs-team-directory__section-head--engineering {
margin-top:
60px;
}
.mcs-engineer {
grid-template-columns:
30px
1fr
22px;
gap:
12px;
align-items:
start;
min-height:
0;
padding:
24px 0;
}
.mcs-engineer__index {
padding-top:
4px;
}
.mcs-engineer__name {
font-size:
22px;
}
.mcs-engineer__role {
grid-column:
2 / 4;
padding-top:
4px;
}
.mcs-engineer__area {
display:
none;
}
.mcs-engineer__mark {
grid-column:
3;
grid-row:
1;
}
/* BOTTOM */
.mcs-team-directory__bottom {
flex-direction:
column;
align-items:
flex-start;
gap:
20px;
}
.mcs-team-directory__bottom strong {
flex-wrap:
wrap;
line-height:
1.5;
}
}