:root {
--black: #000; --white: #ffffff; --gray: #ccc; --light-gray: #E6E6E6; --stone: #999; --basalt: #0E0C0C; --slate: #333; --shale: #1A1A1A; --gravel: #838383; --obsidian: #070707; --ember: #F9711A; --mobile-horizontal-padding: 20px;
--mobile-vertical-padding: 60px;
--desktop-horizontal-padding: 80px;
--desktop-vertical-padding: 128px;
}
img {
max-width: 100%;
vertical-align: middle;
}
h1 {
margin: 0;
color: var(--basalt);
font-size: 92px;
line-height: 104px;
letter-spacing: -1.84px;
font-weight: 600;
font-family: Lora, serif;
}
h2 {
font-size: 64px;
line-height: 72px;
letter-spacing: -1.28px;
font-weight: 600;
font-family: Lora, serif;
color: var(--basalt);
margin: 0 0 20px;
}
h3 {
color: var(--basalt);
font-size: 48px;
line-height: 54px;
letter-spacing: -0.96px;
font-weight: 600;
font-family: Lora, serif;
margin: 0 0 16px;
}
h4 {
color: var(--text-color-2);
font-size: 24px;
line-height: 34px;
letter-spacing: -0.24px;
font-weight: 600;
font-family: Inter, sans-serif;
margin: 0 0 12px;
}
body, p {
color: var(--basalt);
font-family: Inter, sans-serif;
font-size: 18px;
line-height: 26px;
font-weight: 400;
margin: 0 0 16px;
}
body {
margin-bottom: 0;
}
p:last-child, p:last-of-type {
margin-bottom: 0;   
}
ul {
margin: 0;
padding-left: 25px;
}
ol li,
ul li {
color: var(--basalt);
font-family: Inter, sans-serif;
font-size: 18px;
line-height: 26px;
font-weight: 400;
margin-bottom: 16px;
}
ol li:last-child,
ul li:last-child {
margin-bottom: 0;   
}
a {
transition: color 0.3s ease;
}
a:hover {
color: var(--ember) !important;
}
.wp-block-button a {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
font-size: 18px;
line-height: 18px;
padding: 0 32px;
letter-spacing: -0.36px;
font-weight: 600;
font-family: Inter, sans-serif;
margin: 42px 0 0;
transition: background 0.3s ease, color 0.3s ease;
}
.wp-block-button a:hover {
background: var(--ember);
color: var(--obsidian) !important;
}
figure.wp-block-image {
margin: 0;
}
figure.wp-block-image img {
min-width: 100vw !important;
height: 500px !important;
object-fit: cover;
} #mobile-menu #press-room-link-mobile,
.header-nav #press-room-link {
display: none;
}
@media (max-width: 992px) {
h1 {
font-size: 52px;
line-height: 56px;
letter-spacing: -1.04px;
}
h2 {
font-size: 32px;
line-height: 46px;
margin: 0 0 16px;
}
h3 {
font-size: 32px;
line-height: 36px;
letter-spacing: -0.64px;
}
h4 {
font-size: 20px;
line-height: 28px;
}
body, p {
font-size: 15px;
line-height: 22px;
}
ul li {
font-size: 16px;
line-height: 23px;
}
.wp-block-button a {
font-size: 15px;
line-height: 15px;
letter-spacing: -0.3px;
margin-top: 32px;
}
figure.wp-block-image img {
height: 300px !important;
}
}
header {
height: 140px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 80px;
background: #fff;
position: relative;
}
.dark-mode header {
background: var(--obsidian) !important;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1440px;
}
.header-logo {
position: relative;
width: 204px;
}
.header-logo-group {
display: flex;
align-items: end;
gap: 6px;
cursor: pointer;
transition: opacity 0.3s ease 0s; 
}
.header-logo .fox-logo { display: none; }
.header-logo .fox-logo img {
width: 101px;
}
.header-logo-group .dark {
display: none;
}
.dark-mode .header-logo-group .dark {
display: inline-block;
}
.dark-mode .header-logo-group .light {
display: none;
}
.header-logo .logo-mod {
width: 111px;
}
.header-logo .logo-plus {
width: 18px;
}
.header-logo .logo-co {
width: 63px;
}
.logo-plus {
margin-bottom: 6px;
transition: transform 0.4s ease;
}  .header-nav {
position: relative;
}
.header-subnav {
display: flex;
align-items: center;
justify-content: flex-end;
padding-bottom: 12px;
}
.header-subnav .divider {
color: #999;
margin: 0 32px;
}
.mode-toggle {
color: var(--slate);
font-family: 'Space Grotesk', monospace;
font-weight: 400;
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
line-height: 12px;
}
.dark-mode .mode-toggle {
color: #B3B3B3;
font-weight: 700;
}
.header-subnav a {
display: flex;
align-items: center;
}
.header-subnav a img {
width: 19px;
}
.header-subnav-menu {
display: flex;
gap: 24px;
}
.header-subnav-menu a {
text-decoration: none;
color: var(--slate);
font-size: 12px;
line-height: 12px;
font-family: 'Space Grotesk', monospace;
}
.dark-mode .header-subnav-menu a {
color: #B3B3B3;
}
.header-subnav-menu a.active {
color: var(--ember);
}
.header-nav-menu {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 42px;
padding-top: 12px;
border-top: 1px solid #999;
}
.header-nav-menu a {
color: var(--shale);
text-decoration: none;
font-family: 'Lora', serif;
font-size: 20px;
line-height: 28px;
letter-spacing: -0.2px;
font-weight: 500;
}
.dark-mode .header-nav-menu a {
color: #ccc;
}
.header-nav-menu a.active {
color: var(--ember) !important;
text-decoration: underline;
text-underline-offset: 2px;
} .toggle-switch {
position: relative;
display: inline-block;
width: 24px;
height: 13px;
} .toggle-switch input {
opacity: 0;
width: 0;
height: 0;
} .slider {
position: absolute !important;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--slate);
-webkit-transition: .4s;
transition: .4s;
border-radius: 24px; display: flex;
align-items: center;
padding-left: 2px;
}
.dark-mode .slider {
background-color: var(--ember);
}
.slider:before {
position: absolute !important;
content: "";
height: 10px;
width: 10px;
left: 1.5px;
bottom: 1.5px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%; }
input:checked + .slider {
background-color: var(--black);
}
.dark-mode input:checked + .slider {
background-color: var(--ember);
}
input:checked + .slider:before {
-webkit-transform: translateX(11px);
-ms-transform: translateX(11px);
transform: translateX(11px); }
.hamburger-menu {
display: none;
width: 30px;
}
.hamburger-menu .close {
display: none;
}
.caps-subnav {
position: absolute;
background: #fff;
z-index: 10;
top: 77px;
left: 80px;
width: 287px;
height: 270px;
box-sizing: border-box;
padding: 48px 32px 42px;
border-radius: 0 0 24px 24px;
display: none;
}
.dark-mode .caps-subnav {
background: var(--obsidian);
}
.caps-subnav .subnav-heading {
margin: 0 0 32px;
color: #838383;
font-family: "Space Grotesk";
font-size: 12px;
font-weight: 400;
line-height: 12px;
}
.caps-subnav a {
text-decoration: underline;
text-underline-offset: 2px;
display: block;
color: #5B572F;
font-size: 16px;
line-height: 16px;
font-weight: 500;
font-family: Lora;
margin: 0 0 24px;
}
.dark-mode .caps-subnav a {
color: #98B7AF;
}
.caps-subnav a:nth-of-type(2) {
color: #6E3A4C;
}
.dark-mode .caps-subnav a:nth-of-type(2) {
color: #F0C3D2;
}
.caps-subnav a:nth-of-type(3) {
color: #455568;
}
.dark-mode .caps-subnav a:nth-of-type(3) {
color: #A8BDD6;
}
.caps-subnav a:nth-of-type(4) {
color: #473B67;
margin: 0;
}
.dark-mode .caps-subnav a:nth-of-type(4) {
color: #AD9BDA;
}
.mobile-menu {
display: none;
position: absolute;
top: 99px;
left: 0;
box-sizing: border-box;
width: 100%;
background: #F6F6F6;
height: calc(100vh - 100px);
text-align: right;
padding: 24px 24px;
z-index: 2000;
}
.dark-mode .mobile-menu {
background: var(--obsidian);
}
.mobile-menu a {
display: block;
color: var(--slate);
text-decoration: none;
font-family: 'Lora', serif;
font-size: 24px;
line-height: 32px;
font-weight: 400;
margin-bottom: 16px;
text-align: center;
}
.dark-mode .mobile-menu a {
color: #ccc;
}
.mobile-menu a.active {
color: var(--ember);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 500;
}
.mobile-menu .mobile-menu-items {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.mobile-menu .mode-toggle {
margin: 0;
padding-right: 0;
font-size: 24px;
line-height: 24px;
padding-top: 16px;
}
.mobile-menu .mode-toggle .toggle-switch {
width: 42px;
height: 20px;
}
.mobile-menu .slider {
padding-left: 3px;
}
.mobile-menu .slider:before {
height: 14px;
width: 14px;
left: 3px;
bottom: 3.25px;
}
.mobile-menu input:checked + .slider:before {
-webkit-transform: translateX(21.5px);
-ms-transform: translateX(21.5px);
transform: translateX(21.5px);
}
@media (max-width: 992px) {
header {
height: 100px;
padding: 0 24px;
position: sticky;
top: 0;
z-index: 2000;
background: #fff;
}
.dark-mode header {
background: var(--obsidian) !important;
}
.header-logo {
width: auto;
}
.header-logo-group {
gap: 4px;
}
.header-logo-group .logo-mod {
width: 83px;
}
.logo-plus {
width: 13px;
margin-bottom: 4px;
}
.header-logo-group .logo-co {
width: 47px;
}
.header-logo .fox-logo img {
width: 53px;
}
.header-subnav, .header-nav-menu {
display: none;
}
.hamburger-menu {
display: block;
cursor: pointer;
}
}
footer {
padding: 42px 120px;
background-color: var(--white);
color: var(--footer-color);
font-size: 12px;
line-height: 17px;
font-weight: 400;
font-family: "Space Grotesk", serif;
}
.dark-mode footer {
background-color: var(--obsidian);
color: var(--light-gray);
}
.footer-inner {
max-width: 1440px;
box-sizing: border-box;
margin: 0 auto;
}
footer a {
color: var(--slate);
display: block;
margin-bottom: 10px;
white-space: nowrap;
display: flex;
align-items: center;
}
.dark-mode footer a {
color: var(--light-gray);
}
.footer-top {
display: flex;
gap: 64px;
}
.footer-contact, .footer-explore, .footer-social {
flex: 0 1 16%;
}
.footer-contact .footer-item:last-child a {
align-items: start;
}
.footer-contact .footer-item:last-child a img {
height: 13px;
padding-top: 1px;
}
.footer-contact .footer-item span.address {
display: inline-flex;
flex-direction: column;
}
.footer-bottom {
display: flex;
justify-content: space-between;
padding-top: 12px;
}
.footer-bottom .footer-legal a {
text-decoration: underline;
}
.footer-legal {
display: flex;
gap: 24px;
align-items: end;
padding-bottom: 20px;
}
.footer-legal .footer-item {
color: var(--slate);
font-family: "Space Grotesk";
}
.dark-mode .footer-legal .footer-item {
color: var(--light-gray);
}
.footer-legal .footer-item a {
margin-bottom: 0;
}
.footer-logo {
width: 81px;
}
.footer-logo .desktop-logo {
display: flex;
flex-wrap: wrap;
}
.footer-logo .logo-top {
margin-bottom: 5px;
flex: 0 0 100%;
}
.footer-logo-plus {
width: 13px;
height: 14px;
margin-top: 4px;
margin-right: 4px;
transition: transform 0.4s ease, margin 0.4s ease;
}
.footer-logo .logo-bottom {
width: 48px;
}
.footer-logo:hover .footer-logo-plus {
transform: rotate(45deg);
}
.footer-logo .dark-mode-logo,
.footer-logo .mobile-logo {
display: none;
}
.dark-mode .footer-logo .light-mode-logo {
display: none;
}
.dark-mode .footer-logo .desktop-logo.dark-mode-logo {
display: flex;
}
.footer-heading {
font-weight: 700;
color: var(--obsidian);
margin: 0 0 10px;
white-space: nowrap;
}
.dark-mode .footer-heading {
color: var(--light-gray);
}
.footer-item a {
text-decoration: none;
}
.footer-item img {
width: 13px;
margin-right: 8px;
}
.footer-item .dark-mode {
display: none;
}
.dark-mode .footer-item .dark-mode {
display: inline;
}
.dark-mode .footer-item .light-mode {
display: none;
}
.footer-social .footer-item a {
display: flex;
align-items: center;
}
.footer-search form button, .footer-search form label {
display: none;
}
.footer-search form input {
background: url(https://modand.co/images/mod-rebrand/magnifyingglass.png) no-repeat 12px center;
background-color: var(--light-gray);
border: 0;
border-radius: 8px;
color: var(--slate);
font-size: 12px;
line-height: 16px;
box-sizing: border-box;
padding: 0 0 0 28px;
display: flex;
align-items: center;
width: 286px;
height: 32px;
font-family: 'Inter', sans-serif;
}
.dark-mode .footer-search form input {
background: url(https://modand.co/images/mod-rebrand/magnifyingglass_dark_mode.png) no-repeat 12px center;
background-color: var(--stone);
color: var(--slate);
}
.footer-search form input::placeholder {
color: #9A9A9A !important;
opacity: 1;
font-style: normal;
}
.dark-mode .footer-search form input::placeholder {
color: var(--slate) !important;
}
.footer-mobile, .footer-logo-mobile {
display: none;
}
@media (max-width: 992px) {
footer {
padding: 48px;
flex-wrap: wrap;
height: auto;
}
.footer-mobile {
display: block;
}
.footer-mobile-row {
display: flex;
justify-content: space-between;
gap: 30px;
margin-bottom: 16px;
color: var(--slate);
}
.dark-mode .footer-mobile-row, .dark-mode .footer-mobile-row span {
color: var(--light-gray) !important;
}
.footer-mobile-row:last-child {
margin-bottom: 0;
}
.footer-mobile-row a {
text-decoration: none;
}
.footer-logo, .footer-top, .footer-bottom {
display: none;
}
.footer-logo-mobile {
display: block;
width: 100px;
margin-bottom: 16px;
}
.dark-mode .footer-logo-mobile .mobile-logo.dark-mode-logo,
.footer-logo-mobile .mobile-logo {
display: block;
}
.dark-mode .footer-logo-mobile .mobile-logo.light-mode-logo,
.footer-logo-mobile .mobile-logo.dark-mode-logo {
display: none;
}
}
.home-hero {
height: 539px;
overflow: hidden;
position: relative;
background: #000;
}
.home-hero video {
position: relative;
width: 100%;
min-height: 100%;
object-fit: cover;
}
.home-hero-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0 var(--desktop-horizontal-padding);
display: flex;
flex-direction: column;
justify-content: center;
max-width: 50%;
background: linear-gradient(90deg, #000 20%, rgba(0, 0, 0, 0.00) 80%);
}
.hero-content-wrapper {
margin-left: auto;
max-width: 720px;
}
.home-hero-overlay h1 {
color: var(--gray);
font-family: Lora, sans-serif;
font-size: 52px;
line-height: 60px;
letter-spacing: -1.04px;
font-weight: 500;
margin-bottom: 16px;
}
.home-hero-overlay h1 span {
font-weight: 700;
color: var(--ember);
}
.home-hero-overlay .hero-subtext {
color: var(--light-gray);
font-family: Inter, sans-serif;
font-size: 22px;
line-height: 32px;
font-weight: 500;
margin-bottom: 52px;
max-width: 620px;
}
.hero-links {
display: flex;
align-items: center;
}
.hero-links img {
margin-right: 12px;
width: 35px;
}
.hero-links a {
color: var(--light-gray);
font-family: Inter, sans-serif;
font-size: 22px;
line-height: 31px;
font-weight: 600;
margin-right: 42px;
}
@media (max-width: 992px) {
.home-hero {
height: 523px;
}
.home-hero video {
width: 170%;
right: 60%;
}
.home-hero-overlay {
padding: 0 var(--mobile-horizontal-padding) 64px;
justify-content: flex-end;
bottom: 0;
max-width: 100%;
background: linear-gradient(180deg, rgba(19, 19, 19, 0.00) 14.54%, #000 90%);
}
.hero-content-wrapper {
margin-left: 0;
}
.home-hero-overlay h1 {
font-size: 25px;
line-height: 29px;
letter-spacing: -0.75px;
max-width: 330px;
}
.home-hero-overlay .hero-subtext {
font-size: 15px;
line-height: 22px;
margin-bottom: 32px;
max-width: 300px;
}
.hero-links img {
display: none;
}
.hero-links a {
font-size: 15px;
line-height: 21px;
margin-right: 24px;
white-space: nowrap;
}
.hero-links a:last-child {
margin-right: 0;
}
}
@media (max-width: 480px) {
.home-hero-overlay {
background: linear-gradient(180deg, rgba(19, 19, 19, 0.00) 14.54%, #000 45%);
}
.home-hero video {
position: absolute;
min-height: 250px;
height: 250px;
width: auto;
right: -8%;
top: 0;
}
}