/* Sugeneruota tools/css-bundle.mjs – neredaguoti. Šaltiniai: fonts/fonts.css, css/tokens.css, css/base.css, css/layout.css, css/components.css, css/effects.css, css/header.css, css/footer.css, css/home.css, css/pages.css, css/shop.css, css/wordpress.css */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/font-01.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/font-02.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/font-03.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/font-04.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/font-05.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/font-06.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/font-07.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/font-08.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/font-09.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/font-10.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/font-11.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/font-12.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/font-13.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/font-14.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/font-15.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/font-16.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/font-17.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/font-11.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/font-12.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/font-13.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/font-14.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/font-15.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/font-16.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/font-17.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/font-11.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/font-12.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/font-13.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/font-14.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/font-15.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/font-16.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/font-17.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/font-11.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/font-12.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/font-13.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/font-14.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/font-15.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/font-16.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/font-17.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(../fonts/font-18.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(../fonts/font-19.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(../fonts/font-20.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(../fonts/font-21.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(../fonts/font-22.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(../fonts/font-18.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(../fonts/font-19.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(../fonts/font-20.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(../fonts/font-21.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(../fonts/font-22.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/font-18.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/font-19.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/font-20.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/font-21.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/font-22.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/font-18.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/font-19.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/font-20.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/font-21.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/font-22.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--mm-black: #050506;
--mm-bg: #0a0a0b;
--mm-bg-alt: #0d0d0f;
--mm-surface: #101013;
--mm-surface-2: #17171b;
--mm-surface-3: #1e1e23;
--mm-line: rgba(255, 255, 255, 0.08);
--mm-line-soft: rgba(255, 255, 255, 0.05);
--mm-line-strong: rgba(255, 255, 255, 0.16);
--mm-red: #e01b24;
--mm-red-bright: #ff2e3a;
--mm-red-deep: #8e0f16;
--mm-red-ink: #3a070b;
--mm-red-glow: rgba(224, 27, 36, 0.45);
--mm-red-wash: rgba(224, 27, 36, 0.08);
--mm-text: #ffffff;
--mm-text-2: #a9abb0;
--mm-text-3: #6c6e73;
--mm-text-4: #47484c;
--mm-sla: #4c9dff;
--mm-fdm: #f5c518;
--mm-scan: #2fd37e;
--mm-model: #e01b24;
--mm-paint: #a87bff;
--mm-rest: #e0812f;
--mm-form: #c9a27a;
--mm-accent: var(--mm-red);
--mm-accent-glow: var(--mm-red-glow);
--mm-success: #2fd37e;
--mm-warning: #f5a524;
--mm-danger: #ff4d4f;
--mm-font-display: "Oswald", "Barlow Condensed", "Arial Narrow", "Helvetica Neue Condensed", "Liberation Sans Narrow", sans-serif;
--mm-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mm-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--mm-fs-hero: clamp(2.75rem, 1.2rem + 6.4vw, 6.5rem);
--mm-fs-h1: clamp(2.25rem, 1.25rem + 4.2vw, 4.25rem);
--mm-fs-h2: clamp(1.75rem, 1.1rem + 2.8vw, 3rem);
--mm-fs-h3: clamp(1.375rem, 1rem + 1.5vw, 2rem);
--mm-fs-h4: clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem);
--mm-fs-lead: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
--mm-fs-body: 1rem;
--mm-fs-sm: 0.875rem;
--mm-fs-xs: 0.8125rem;
--mm-fs-eyebrow: 0.75rem;
--mm-lh-tight: 1.04;
--mm-lh-snug: 1.22;
--mm-lh-body: 1.72;
--mm-ls-display: 0.02em;
--mm-ls-eyebrow: 0.22em;
--mm-ls-nav: 0.14em;
--mm-ls-button: 0.16em;
--mm-1: 0.25rem;
--mm-2: 0.5rem;
--mm-3: 0.75rem;
--mm-4: 1rem;
--mm-5: 1.5rem;
--mm-6: 2rem;
--mm-7: 2.5rem;
--mm-8: 3rem;
--mm-9: 4rem;
--mm-10: 5rem;
--mm-11: 6.5rem;
--mm-12: 8rem;
--mm-section: clamp(3.5rem, 2rem + 6vw, 7.5rem);
--mm-section-sm: clamp(2.5rem, 1.5rem + 4vw, 5rem);
--mm-maxw: 1440px;
--mm-maxw-narrow: 900px;
--mm-maxw-text: 68ch;
--mm-gutter: clamp(1.125rem, 0.5rem + 2.4vw, 3rem);
--mm-header-h: 84px;
--mm-topbar-h: 38px;
--mm-radius-sm: 3px;
--mm-radius: 4px;
--mm-radius-lg: 6px;
--mm-radius-pill: 999px;
--mm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
--mm-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
--mm-shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, 0.95);
--mm-glow: 0 0 0 1px var(--mm-red-wash), 0 12px 48px -12px var(--mm-red-glow);
--mm-ease: cubic-bezier(0.22, 1, 0.36, 1);
--mm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--mm-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--mm-dur-fast: 180ms;
--mm-dur: 320ms;
--mm-dur-slow: 620ms;
--mm-dur-reveal: 900ms;
--mm-z-grain: 9000;
--mm-z-cursor: 9500;
--mm-z-header: 800;
--mm-z-drawer: 900;
--mm-z-modal: 1000;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--mm-header-h) + var(--mm-4));
background: var(--mm-bg);
color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
margin: 0;
background: var(--mm-bg);
color: var(--mm-text-2);
font-family: var(--mm-font-body);
font-size: var(--mm-fs-body);
line-height: var(--mm-lh-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
text-rendering: optimizeLegibility;
}
body.mm-locked {
overflow: hidden;
}
.mm-grain {
position: fixed;
inset: 0;
z-index: var(--mm-z-grain);
pointer-events: none;
opacity: 0.035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
will-change: transform;
animation: mm-grain-shift 640ms steps(2) infinite;
}
@keyframes mm-grain-shift {
0% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(-2%, 1%, 0); }
100% { transform: translate3d(1%, -2%, 0); }
}
@media (prefers-reduced-motion: reduce) {
.mm-grain { animation: none; }
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: var(--mm-font-display);
font-weight: 300;
line-height: var(--mm-lh-tight);
letter-spacing: var(--mm-ls-display);
color: var(--mm-text);
text-transform: uppercase;
text-wrap: balance;
}
h1 { font-size: var(--mm-fs-h1); }
h2 { font-size: var(--mm-fs-h2); }
h3 { font-size: var(--mm-fs-h3); line-height: var(--mm-lh-snug); }
h4 { font-size: var(--mm-fs-h4); line-height: var(--mm-lh-snug); }
h5, h6 { font-size: var(--mm-fs-body); line-height: var(--mm-lh-snug); }
p {
margin: 0 0 var(--mm-4);
text-wrap: pretty;
}
p:last-child { margin-bottom: 0; }
strong, b { color: var(--mm-text); font-weight: 600; }
a {
color: inherit;
text-decoration: none;
transition: color var(--mm-dur-fast) var(--mm-ease);
}
ul, ol { margin: 0 0 var(--mm-4); padding-left: 1.15em; }
li { margin-bottom: var(--mm-2); }
img, svg, video, canvas {
display: block;
max-width: 100%;
height: auto;
}
figure { margin: 0; }
hr {
border: 0;
border-top: 1px solid var(--mm-line);
margin: var(--mm-7) 0;
}
blockquote {
margin: 0;
padding-left: var(--mm-5);
border-left: 2px solid var(--mm-red);
font-size: var(--mm-fs-lead);
color: var(--mm-text);
}
code, pre { font-family: var(--mm-font-mono); font-size: 0.9em; }
::selection {
background: var(--mm-red);
color: #fff;
}
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--mm-red-bright);
outline-offset: 3px;
border-radius: var(--mm-radius-sm);
}
.mm-skip-link {
position: absolute;
top: -100px;
left: var(--mm-4);
z-index: 10000;
padding: var(--mm-3) var(--mm-5);
background: var(--mm-red);
color: #fff;
font-size: var(--mm-fs-sm);
font-weight: 600;
border-radius: var(--mm-radius);
transition: top var(--mm-dur) var(--mm-ease);
}
.mm-skip-link:focus-visible { top: var(--mm-4); }
.mm-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.mm-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--mm-3);
margin-bottom: var(--mm-4);
font-family: var(--mm-font-body);
font-size: var(--mm-fs-eyebrow);
font-weight: 600;
letter-spacing: var(--mm-ls-eyebrow);
text-transform: uppercase;
color: var(--mm-accent);
}
.mm-eyebrow--line::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
opacity: 0.6;
}
.mm-rule {
width: 32px;
height: 2px;
margin: var(--mm-3) 0 var(--mm-5);
background: var(--mm-red);
}
.mm-lead {
font-size: var(--mm-fs-lead);
line-height: 1.65;
color: var(--mm-text-2);
max-width: var(--mm-maxw-text);
}
.mm-muted { color: var(--mm-text-3); }
.mm-tint { color: var(--mm-accent); }
.mm-text-center { text-align: center; }
@media (max-width: 700px) {
br.mm-br-wide { display: none; }
}
.mm-mono {
font-family: var(--mm-font-mono);
font-variant-numeric: tabular-nums;
}
.mm-index {
font-family: var(--mm-font-display);
font-weight: 200;
font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
line-height: 1;
color: var(--mm-accent);
opacity: 0.9;
font-variant-numeric: tabular-nums;
}
.mm-divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--mm-line), transparent);
border: 0;
margin: 0;
}
.mm-container {
width: 100%;
max-width: var(--mm-maxw);
margin-inline: auto;
padding-inline: var(--mm-gutter);
}
.mm-container--narrow { max-width: var(--mm-maxw-narrow); }
.mm-container--wide { max-width: 1680px; }
.mm-container--flush { padding-inline: 0; }
.mm-section {
position: relative;
padding-block: var(--mm-section);
}
.mm-section--sm { padding-block: var(--mm-section-sm); }
.mm-section--flush-top { padding-top: 0; }
.mm-section--flush-bottom { padding-bottom: 0; }
.mm-section--alt { background: var(--mm-bg-alt); }
.mm-section--deep { background: var(--mm-black); }
.mm-section--lit {
isolation: isolate;
}
.mm-section--lit::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(
60% 70% at 78% 8%,
var(--mm-red-wash) 0%,
transparent 70%
);
pointer-events: none;
}
.mm-section-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--mm-5) var(--mm-8);
margin-bottom: var(--mm-8);
}
.mm-section-head__text { max-width: 62ch; }
.mm-section-head__title { margin-bottom: var(--mm-4); }
.mm-section-head__title:last-child { margin-bottom: 0; }
.mm-section-head--stack {
flex-direction: column;
align-items: flex-start;
}
.mm-section-head--center {
flex-direction: column;
align-items: center;
text-align: center;
}
.mm-section-head--center .mm-section-head__text { margin-inline: auto; }
.mm-grid {
display: grid;
gap: var(--mm-5);
}
.mm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mm-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mm-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mm-grid--auto {
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.mm-grid--auto-sm {
grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
.mm-grid--auto-lg {
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}
.mm-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(var(--mm-6), 4vw, var(--mm-10));
}
.mm-split--text-narrow { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.mm-split--visual-narrow { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mm-split--cta-visual { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto minmax(0, 3fr); }
.mm-cta-visual { justify-self: end; }
.mm-cta-visual img {
display: block;
width: auto;
max-width: 100%;
max-height: 230px;
mask-image: radial-gradient(closest-side, #000 58%, rgba(0, 0, 0, 0.35) 84%, transparent 100%);
-webkit-mask-image: radial-gradient(closest-side, #000 58%, rgba(0, 0, 0, 0.35) 84%, transparent 100%);
}
.mm-split--top { align-items: start; }
@media (max-width: 900px) {
.mm-grid--3,
.mm-grid--4,
.mm-grid--5,
.mm-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-split,
.mm-split--text-narrow,
.mm-split--visual-narrow,
.mm-split--cta-visual { grid-template-columns: minmax(0, 1fr); }
.mm-cta-visual { justify-self: center; }
}
@media (max-width: 560px) {
.mm-grid--2,
.mm-grid--3,
.mm-grid--4,
.mm-grid--5,
.mm-grid--6 { grid-template-columns: minmax(0, 1fr); }
}
.mm-panel {
position: relative;
background: var(--mm-surface);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
padding: clamp(var(--mm-5), 3vw, var(--mm-8));
}
.mm-panel--flush { padding: 0; overflow: hidden; }
.mm-panel--tight { padding: var(--mm-5); }
.mm-panel--ghost { background: transparent; }
.mm-panel--cta {
overflow: hidden;
background:
radial-gradient(80% 140% at 88% 50%, rgba(224, 27, 36, 0.14), transparent 62%),
var(--mm-surface);
}
.mm-panel--quiet { background: var(--mm-surface); }
.mm-panel--photo {
display: flex;
align-items: center;
min-height: 520px;
}
.mm-panel__photo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 38%;
}
.mm-panel__video {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 38%;
opacity: 0;
transition: opacity 600ms var(--mm-ease);
pointer-events: none;
}
.mm-panel--photo.is-playing .mm-panel__video { opacity: 1; }
.mm-panel--photo::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg, rgba(5, 5, 6, 0.42) 0%, rgba(5, 5, 6, 0.1) 48%, rgba(5, 5, 6, 0) 70%),
linear-gradient(90deg, rgba(5, 5, 6, 0.88) 0%, rgba(5, 5, 6, 0.66) 34%, rgba(5, 5, 6, 0.2) 62%, rgba(5, 5, 6, 0.34) 100%);
}
.mm-panel--photo > .mm-split {
position: relative;
z-index: 2;
width: 100%;
}
@media (max-width: 900px) {
.mm-panel--photo {
min-height: 0;
}
.mm-panel--photo::before {
background: linear-gradient(180deg, rgba(5, 5, 6, 0.34), rgba(5, 5, 6, 0.72));
}
.mm-panel--photo h2,
.mm-panel--photo .mm-lead,
.mm-panel--photo .mm-feature__title,
.mm-panel--photo .mm-feature__text {
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.92);
}
}
.mm-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
border-top: 1px solid var(--mm-line);
border-bottom: 1px solid var(--mm-line);
}
.mm-strip > * {
padding: var(--mm-6) var(--mm-5);
border-right: 1px solid var(--mm-line);
}
.mm-strip > *:last-child { border-right: 0; }
@media (max-width: 900px) {
.mm-strip > * { border-right: 0; border-bottom: 1px solid var(--mm-line); }
.mm-strip > *:last-child { border-bottom: 0; }
}
.mm-pagehead {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
min-height: clamp(400px, 47vw, 600px);
overflow: hidden;
background: var(--mm-black);
}
.mm-pagehead__text {
position: relative;
z-index: 2;
padding: var(--mm-9) 0 var(--mm-9) var(--mm-gutter);
max-width: 640px;
margin-left: auto;
width: 100%;
}
.mm-pagehead--plain {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}
.mm-pagehead--plain .mm-pagehead__text {
max-width: var(--mm-container, 1280px);
margin-inline: auto;
padding-block: var(--mm-8);
padding-inline: var(--mm-gutter);
}
.mm-pagehead__title { margin-bottom: var(--mm-5); }
.mm-pagehead__lead { margin-bottom: var(--mm-6); }
.mm-pagehead__lead:last-child { margin-bottom: 0; }
.mm-pagehead__media {
position: relative;
align-self: stretch;
min-height: 260px;
overflow: hidden;
}
.mm-pagehead__media img {
position: absolute;
inset: -4% 0;
width: 100%;
height: 108%;
object-fit: cover;
}
.mm-pagehead__media--materials img,
.mm-pagehead__media--materials .mm-pagehead__video {
object-position: 50% 54%;
}
.mm-pagehead__media--business img,
.mm-pagehead__media--business .mm-pagehead__video {
object-position: 0% center;
}
.mm-pagehead__media--custom img,
.mm-pagehead__media--custom .mm-pagehead__video {
object-position: 100% center;
}
@media (min-width: 901px) {
.mm-pagehead--overlay .mm-pagehead__media {
position: absolute;
inset: 0;
z-index: 0;
width: auto;
min-width: 0;
max-width: none;
aspect-ratio: auto;
}
.mm-pagehead--overlay .mm-pagehead__media::after {
background: linear-gradient(
90deg,
rgba(5, 5, 6, 0.96) 0%,
rgba(5, 5, 6, 0.92) 34%,
rgba(5, 5, 6, 0.82) 50%,
rgba(5, 5, 6, 0.62) 58%,
rgba(5, 5, 6, 0.3) 68%,
rgba(5, 5, 6, 0.08) 78%,
transparent 88%,
rgba(5, 5, 6, 0.35) 100%
);
}
}
.mm-pagehead__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 600ms var(--mm-ease);
pointer-events: none;
}
.mm-pagehead__media.is-playing .mm-pagehead__video { opacity: 1; }
.mm-pagehead__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
var(--mm-black) 0%,
rgba(5, 5, 6, 0.72) 22%,
rgba(5, 5, 6, 0) 62%,
rgba(5, 5, 6, 0.14) 100%
);
}
.mm-pagehead__media--left img { object-position: 32% center; }
@media (min-width: 901px) {
.mm-pagehead__media {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: auto;
aspect-ratio: var(--mm-head-ratio, 16 / 9);
min-width: 50%;
max-width: 78%;
z-index: 0;
}
.mm-pagehead__media::after {
background: linear-gradient(
90deg,
rgba(5, 5, 6, 0.94) 0%,
rgba(5, 5, 6, 0.88) 20%,
rgba(5, 5, 6, 0.66) 31%,
rgba(5, 5, 6, 0.32) 44%,
rgba(5, 5, 6, 0.1) 57%,
transparent 72%,
rgba(5, 5, 6, 0.3) 100%
);
}
}
.mm-pagehead__marks {
display: flex;
flex-wrap: wrap;
gap: var(--mm-5) var(--mm-6);
padding-top: var(--mm-5);
border-top: 1px solid var(--mm-line);
}
@media (max-width: 900px) {
.mm-pagehead {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}
.mm-pagehead__text {
order: 2;
max-width: none;
padding: var(--mm-8) var(--mm-gutter);
}
.mm-pagehead__media {
order: 1;
height: clamp(200px, 52vw, 320px);
}
.mm-pagehead__media::after {
background: linear-gradient(
180deg,
transparent 0%,
transparent 58%,
rgba(5, 5, 6, 0.5) 82%,
var(--mm-black) 100%
);
}
}
.mm-icon {
width: 1.25em;
height: 1.25em;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.mm-icon--sm { width: 1em; height: 1em; }
.mm-icon--lg { width: 1.75em; height: 1.75em; }
.mm-icon--xl { width: 2.25em; height: 2.25em; stroke-width: 1.25; }
.mm-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mm-4);
padding: 1.0625rem var(--mm-6);
border: 1px solid transparent;
border-radius: var(--mm-radius);
background: transparent;
color: var(--mm-text);
font-family: var(--mm-font-body);
font-size: var(--mm-fs-xs);
font-weight: 600;
letter-spacing: var(--mm-ls-button);
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
isolation: isolate;
-webkit-appearance: none;
appearance: none;
transition:
color var(--mm-dur) var(--mm-ease),
border-color var(--mm-dur) var(--mm-ease),
box-shadow var(--mm-dur) var(--mm-ease),
transform var(--mm-dur) var(--mm-ease);
}
.mm-btn::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
transform: scaleY(0);
transform-origin: bottom;
transition: transform var(--mm-dur) var(--mm-ease-out-expo);
}
.mm-btn:hover { transform: translateY(-2px); }
.mm-btn:active { transform: translateY(0); }
.mm-btn .mm-icon {
transition: transform var(--mm-dur) var(--mm-ease-out-expo);
}
.mm-btn:hover .mm-icon { transform: translateX(5px); }
.mm-btn--primary {
background: var(--mm-red);
color: #fff;
box-shadow: 0 10px 30px -14px var(--mm-red-glow);
}
.mm-btn--primary::before { background: var(--mm-red-bright); }
.mm-btn--primary:hover::before { transform: scaleY(1); }
.mm-btn--primary:hover {
box-shadow: 0 16px 42px -14px var(--mm-red-glow);
}
.mm-btn--outline {
border-color: var(--mm-red);
color: var(--mm-text);
}
.mm-btn--outline::before { background: var(--mm-red); }
.mm-btn--outline:hover {
color: #fff;
border-color: var(--mm-red);
}
.mm-btn--outline:hover::before { transform: scaleY(1); }
.mm-btn--line {
border-color: var(--mm-line-strong);
color: var(--mm-text-2);
}
.mm-btn--line::before { background: rgba(255, 255, 255, 0.06); }
.mm-btn--line:hover {
color: var(--mm-text);
border-color: var(--mm-text-3);
}
.mm-btn--line:hover::before { transform: scaleY(1); }
.mm-btn--sm { padding: 0.8125rem var(--mm-5); font-size: 0.75rem; }
.mm-btn--lg { padding: 1.25rem var(--mm-7); font-size: var(--mm-fs-sm); }
.mm-btn--block { display: flex; width: 100%; }
.mm-btn[disabled],
.mm-btn[aria-disabled="true"] {
opacity: 0.45;
pointer-events: none;
}
.mm-btn-row {
display: flex;
flex-wrap: wrap;
gap: var(--mm-4);
align-items: center;
}
.mm-arrow-link {
display: inline-flex;
align-items: center;
gap: var(--mm-3);
padding-bottom: var(--mm-2);
font-size: var(--mm-fs-xs);
font-weight: 600;
letter-spacing: var(--mm-ls-nav);
text-transform: uppercase;
color: var(--mm-accent);
border-bottom: 1px solid currentColor;
transition: gap var(--mm-dur) var(--mm-ease-out-expo), color var(--mm-dur-fast) var(--mm-ease);
align-self: flex-start;
}
.mm-arrow-link .mm-icon {
width: 1.05em;
height: 1.05em;
transition: transform var(--mm-dur) var(--mm-ease-out-expo);
}
.mm-arrow-link:hover { gap: var(--mm-4); }
.mm-arrow-link:hover .mm-icon { transform: translateX(3px); }
.mm-arrow-link--plain {
border-bottom-color: transparent;
color: var(--mm-text-2);
}
.mm-arrow-link--plain:hover { color: var(--mm-text); }
.mm-badge {
display: inline-flex;
align-items: center;
gap: var(--mm-2);
padding: 0.3125rem var(--mm-3);
border-radius: var(--mm-radius-sm);
background: var(--mm-red);
color: #fff;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1;
}
.mm-badge--ghost {
background: rgba(255, 255, 255, 0.07);
color: var(--mm-text-2);
border: 1px solid var(--mm-line);
}
.mm-badge--accent {
background: color-mix(in srgb, var(--mm-accent) 18%, transparent);
color: var(--mm-accent);
border: 1px solid color-mix(in srgb, var(--mm-accent) 34%, transparent);
}
.mm-feature {
display: flex;
align-items: flex-start;
gap: var(--mm-4);
min-width: 0;
}
.mm-feature > * { min-width: 0; }
.mm-feature__icon {
flex: none;
color: var(--mm-accent);
margin-top: 2px;
}
.mm-feature__title {
display: block;
margin-bottom: var(--mm-1);
font-family: var(--mm-font-body);
font-size: var(--mm-fs-xs);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--mm-text);
line-height: 1.35;
overflow-wrap: break-word;
}
.mm-feature__text {
font-size: var(--mm-fs-xs);
line-height: 1.5;
color: var(--mm-text-3);
overflow-wrap: break-word;
}
.mm-stat {
display: flex;
align-items: center;
gap: var(--mm-4);
}
.mm-stat__icon { flex: none; color: var(--mm-red); }
.mm-stat__value {
display: block;
font-family: var(--mm-font-display);
font-weight: 300;
font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);
line-height: 1;
color: var(--mm-text);
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.mm-stat__label {
display: block;
margin-top: var(--mm-2);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mm-text-3);
line-height: 1.4;
}
.mm-stat--stack {
flex-direction: column;
align-items: flex-start;
gap: var(--mm-4);
}
.mm-stat--center {
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--mm-3);
}
.mm-media {
position: relative;
overflow: hidden;
background: var(--mm-surface-2);
border-radius: var(--mm-radius);
}
.mm-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 42%, rgba(5, 5, 6, 0.82) 100%);
opacity: 0;
transition: opacity var(--mm-dur) var(--mm-ease);
pointer-events: none;
}
.mm-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 900ms var(--mm-ease-out-expo), filter var(--mm-dur) var(--mm-ease);
will-change: transform;
}
.mm-media--shaded::after { opacity: 1; }
a:hover > .mm-media img,
.mm-media:hover img,
.mm-card:hover .mm-media img { transform: scale(1.055); }
.mm-ratio-1 { aspect-ratio: 1 / 1; }
.mm-ratio-43 { aspect-ratio: 4 / 3; }
.mm-ratio-32 { aspect-ratio: 3 / 2; }
.mm-ratio-169 { aspect-ratio: 16 / 9; }
.mm-ratio-34 { aspect-ratio: 3 / 4; }
.mm-ratio-45 { aspect-ratio: 4 / 5; }
.mm-media--placeholder {
background:
radial-gradient(120% 90% at 50% 8%, rgba(224, 27, 36, 0.14), transparent 62%),
linear-gradient(160deg, var(--mm-surface-3), var(--mm-black));
display: grid;
place-items: center;
}
.mm-media--placeholder .mm-media__mark {
font-family: var(--mm-font-display);
font-size: 0.75rem;
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--mm-text-4);
}
.mm-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--mm-surface);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
overflow: hidden;
transition:
border-color var(--mm-dur) var(--mm-ease),
background var(--mm-dur) var(--mm-ease),
transform var(--mm-dur) var(--mm-ease-out-expo),
box-shadow var(--mm-dur) var(--mm-ease);
}
.mm-card:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--mm-accent) 40%, var(--mm-line));
box-shadow: var(--mm-shadow);
}
.mm-card__body {
display: flex;
flex-direction: column;
gap: var(--mm-3);
padding: var(--mm-5);
flex: 1;
}
.mm-card__title {
font-size: var(--mm-fs-h4);
color: var(--mm-text);
}
.mm-card__text {
font-size: var(--mm-fs-sm);
line-height: 1.6;
color: var(--mm-text-3);
}
.mm-card__foot {
margin-top: auto;
padding-top: var(--mm-4);
}
.mm-card__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.mm-card--lined::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--mm-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--mm-dur-slow) var(--mm-ease-out-expo);
z-index: 2;
}
.mm-card--lined:hover::before { transform: scaleX(1); }
.mm-checklist {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--mm-3);
}
.mm-checklist li {
position: relative;
margin: 0;
padding-left: var(--mm-6);
font-size: var(--mm-fs-sm);
line-height: 1.55;
color: var(--mm-text-2);
}
.mm-checklist li::before {
content: "";
position: absolute;
left: 0;
top: 0.42em;
width: 12px;
height: 7px;
border-left: 1.5px solid var(--mm-accent);
border-bottom: 1.5px solid var(--mm-accent);
transform: rotate(-45deg);
}
.mm-props {
display: flex;
flex-direction: column;
gap: var(--mm-3);
margin: 0;
}
.mm-prop {
display: grid;
grid-template-columns: 1fr 96px;
align-items: center;
gap: var(--mm-4);
}
.mm-prop__name {
font-size: 0.6875rem;
letter-spacing: 0.05em;
color: var(--mm-text-3);
line-height: 1.2;
}
.mm-prop__track {
position: relative;
height: 3px;
border-radius: var(--mm-radius-pill);
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.mm-prop__fill {
position: absolute;
inset-block: 0;
left: 0;
width: var(--mm-prop-value, 50%);
border-radius: inherit;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--mm-accent) 35%, transparent),
var(--mm-accent)
);
transform: scaleX(0);
transform-origin: left;
transition: transform 1100ms var(--mm-ease-out-expo);
}
.mm-prop__fill.is-filled { transform: scaleX(1); }
.mm-tabs {
display: flex;
gap: var(--mm-7);
border-bottom: 1px solid var(--mm-line);
margin-bottom: var(--mm-8);
overflow-x: auto;
scrollbar-width: none;
}
.mm-tabs::-webkit-scrollbar { display: none; }
.mm-tab {
position: relative;
padding: 0 0 var(--mm-4);
border: 0;
background: none;
color: var(--mm-text-3);
font-family: var(--mm-font-body);
font-size: var(--mm-fs-xs);
font-weight: 600;
letter-spacing: var(--mm-ls-nav);
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
transition: color var(--mm-dur-fast) var(--mm-ease);
}
.mm-tab::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: var(--mm-red);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--mm-dur) var(--mm-ease-out-expo);
}
.mm-tab:hover { color: var(--mm-text-2); }
.mm-tab[aria-selected="true"] { color: var(--mm-text); }
.mm-tab[aria-selected="true"]::after { transform: scaleX(1); }
.mm-tab.is-active { color: var(--mm-text); }
.mm-tab.is-active::after { transform: scaleX(1); }
.mm-tabpanel[hidden] { display: none; }
.mm-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--mm-2);
padding: var(--mm-3) 0;
}
.mm-filter {
display: inline-flex;
align-items: center;
gap: var(--mm-3);
padding: 0.6875rem var(--mm-5);
border: 1px solid transparent;
border-radius: var(--mm-radius);
background: none;
color: var(--mm-text-3);
font-family: var(--mm-font-body);
font-size: var(--mm-fs-xs);
font-weight: 600;
letter-spacing: 0.11em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: color var(--mm-dur-fast) var(--mm-ease), border-color var(--mm-dur-fast) var(--mm-ease), background var(--mm-dur-fast) var(--mm-ease);
}
.mm-filter:hover { color: var(--mm-text); background: rgba(255, 255, 255, 0.04); }
.mm-filter[aria-pressed="true"] {
color: var(--mm-text);
border-color: var(--mm-red);
}
.mm-gallerybar__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--mm-4);
align-items: center;
}
.mm-gallerybar__inner .mm-filters {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.mm-gallerybar__inner .mm-filters::-webkit-scrollbar { display: none; }
.mm-gallerybar__inner .mm-filter { flex: 0 0 auto; }
.mm-gallerybar__inner .mm-select {
justify-self: end;
width: auto;
min-width: 14rem;
}
@media (max-width: 60rem) {
.mm-gallerybar__inner { grid-template-columns: minmax(0, 1fr); }
.mm-gallerybar__inner .mm-select { justify-self: stretch; }
}
.mm-field { display: flex; flex-direction: column; gap: var(--mm-2); }
.mm-label {
font-size: var(--mm-fs-xs);
font-weight: 600;
letter-spacing: 0.06em;
color: var(--mm-text-2);
}
.mm-form-grid .mm-label { color: var(--mm-text); }
.mm-label__req { color: var(--mm-red); }
.mm-label__opt { color: var(--mm-text-2); font-weight: 400; letter-spacing: 0; }
.mm-input,
.mm-select,
.mm-textarea {
width: 100%;
padding: 1rem var(--mm-4);
background: var(--mm-bg);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
color: var(--mm-text);
font-family: var(--mm-font-body);
font-size: 1rem;
line-height: 1.5;
-webkit-appearance: none;
appearance: none;
transition: border-color var(--mm-dur-fast) var(--mm-ease), background var(--mm-dur-fast) var(--mm-ease), box-shadow var(--mm-dur-fast) var(--mm-ease);
}
.mm-input::placeholder,
.mm-textarea::placeholder { color: var(--mm-text-2); opacity: 1; }
.mm-input:hover,
.mm-select:hover,
.mm-textarea:hover { border-color: var(--mm-line-strong); }
.mm-input:focus,
.mm-select:focus,
.mm-textarea:focus {
outline: none;
border-color: var(--mm-red);
background: var(--mm-black);
box-shadow: 0 0 0 3px rgba(224, 27, 36, 0.12);
}
.mm-textarea { min-height: 130px; resize: vertical; }
@media (pointer: coarse) {
.mm-input,
.mm-select,
.mm-textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
font-size: max(16px, 1em);
}
}
.mm-select {
padding-right: var(--mm-8);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--mm-4) center;
background-size: 18px;
cursor: pointer;
}
.mm-select option { background: var(--mm-surface); color: var(--mm-text); }
.mm-check {
display: flex;
align-items: flex-start;
gap: var(--mm-3);
font-size: var(--mm-fs-xs);
line-height: 1.6;
color: var(--mm-text-2);
cursor: pointer;
}
.mm-check input {
flex: none;
width: 17px;
height: 17px;
margin: 3px 0 0;
border: 1px solid var(--mm-line-strong);
border-radius: var(--mm-radius-sm);
background: var(--mm-bg);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
display: grid;
place-content: center;
transition: background var(--mm-dur-fast) var(--mm-ease), border-color var(--mm-dur-fast) var(--mm-ease);
}
.mm-check input::before {
content: "";
width: 9px;
height: 5px;
border-left: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
transform: rotate(-45deg) scale(0);
transition: transform var(--mm-dur-fast) var(--mm-ease-out-expo);
margin-top: -2px;
}
.mm-check input:checked {
background: var(--mm-red);
border-color: var(--mm-red);
}
.mm-check input:checked::before { transform: rotate(-45deg) scale(1); }
.mm-check a { color: var(--mm-red); text-decoration: underline; text-underline-offset: 2px; }
.mm-field__error {
margin: 0;
font-size: 0.8125rem;
line-height: 1.45;
color: #ff9a9f;
}
.mm-input[aria-invalid="true"],
.mm-select[aria-invalid="true"],
.mm-textarea[aria-invalid="true"],
.mm-check input[aria-invalid="true"] { border-color: var(--mm-red); }
.mm-dropzone {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--mm-4);
padding: var(--mm-5);
border: 1px dashed color-mix(in srgb, var(--mm-red) 45%, transparent);
border-radius: var(--mm-radius);
background: var(--mm-red-wash);
cursor: pointer;
transition: border-color var(--mm-dur) var(--mm-ease), background var(--mm-dur) var(--mm-ease);
}
.mm-dropzone:hover,
.mm-dropzone.is-dragover {
border-color: var(--mm-red);
background: rgba(224, 27, 36, 0.14);
}
.mm-dropzone input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.mm-dropzone__main {
display: flex;
align-items: center;
gap: var(--mm-4);
}
.mm-dropzone__icon { color: var(--mm-red); }
.mm-dropzone__title {
display: block;
font-size: var(--mm-fs-xs);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--mm-text);
margin-bottom: 2px;
}
.mm-dropzone__hint { font-size: var(--mm-fs-xs); color: var(--mm-text-3); }
.mm-dropzone__files {
list-style: none;
margin: var(--mm-3) 0 0;
padding: 0;
width: 100%;
display: flex;
flex-wrap: wrap;
gap: var(--mm-2);
}
.mm-dropzone__files li {
margin: 0;
padding: var(--mm-1) var(--mm-3);
border-radius: var(--mm-radius-sm);
background: rgba(255, 255, 255, 0.06);
font-size: 0.6875rem;
color: var(--mm-text-2);
}
.mm-dropzone.is-invalid { border-color: var(--mm-red); }
.mm-dropzone__files li.is-error {
background: rgba(224, 27, 36, 0.18);
color: #ff9a9f;
text-decoration: line-through;
}
.mm-dropzone__files .mm-dropzone__error {
flex-basis: 100%;
background: none;
padding: var(--mm-1) 0 0;
font-size: 0.8125rem;
color: #ff9a9f;
}
.mm-dropzone.is-uploading { cursor: progress; }
.mm-dropzone.is-uploading input[type="file"] { pointer-events: none; }
.mm-dropzone__files .mm-dropzone__progress {
flex-basis: 100%;
display: grid;
gap: var(--mm-2);
padding: var(--mm-2) 0 0;
background: none;
}
.mm-dropzone__bar {
display: block;
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.mm-dropzone__bar span {
display: block;
height: 100%;
width: 0;
background: var(--mm-red);
transition: width 200ms linear;
}
.mm-dropzone__pct {
font-size: 0.8125rem;
color: var(--mm-text-2);
}
.mm-form-note {
font-size: var(--mm-fs-xs);
color: var(--mm-text-2);
}
.mm-formdone {
display: flex;
align-items: flex-start;
gap: var(--mm-5);
padding: var(--mm-7) var(--mm-6);
border: 1px solid color-mix(in srgb, var(--mm-success) 40%, transparent);
border-radius: var(--mm-radius);
background: rgba(47, 211, 126, 0.07);
}
.mm-formdone .mm-icon { color: var(--mm-success); flex: none; }
.mm-formdone strong { display: block; margin-bottom: var(--mm-2); color: var(--mm-text); }
.mm-formdone span { font-size: var(--mm-fs-sm); color: var(--mm-text-2); }
.mm-marquee {
display: flex;
overflow: hidden;
user-select: none;
gap: 0;
min-width: 0;
max-width: 100%;
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.mm-marquee__track {
display: flex;
flex: none;
align-items: center;
gap: var(--mm-8);
padding-right: var(--mm-8);
min-width: 100%;
animation: mm-marquee var(--mm-marquee-dur, 34s) linear infinite;
}
.mm-marquee:hover .mm-marquee__track { animation-play-state: paused; }
@keyframes mm-marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-100%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.mm-marquee__track { animation: none; }
}
.mm-marquee__item {
display: inline-flex;
align-items: center;
gap: var(--mm-3);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mm-text-3);
white-space: nowrap;
}
.mm-marquee__item .mm-icon { color: var(--mm-red); }
.mm-accordion { border-top: 1px solid var(--mm-line); }
.mm-accordion__item { border-bottom: 1px solid var(--mm-line); }
.mm-accordion__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mm-5);
width: 100%;
padding: var(--mm-5) 0;
border: 0;
background: none;
color: var(--mm-text);
font-family: var(--mm-font-display);
font-size: var(--mm-fs-h4);
font-weight: 300;
letter-spacing: var(--mm-ls-display);
text-transform: uppercase;
text-align: left;
cursor: pointer;
transition: color var(--mm-dur-fast) var(--mm-ease);
}
.mm-accordion__trigger:hover { color: var(--mm-red-bright); }
.mm-accordion__sign {
flex: none;
position: relative;
width: 16px;
height: 16px;
color: var(--mm-red);
}
.mm-accordion__sign::before,
.mm-accordion__sign::after {
content: "";
position: absolute;
background: currentColor;
transition: transform var(--mm-dur) var(--mm-ease-out-expo), opacity var(--mm-dur) var(--mm-ease);
}
.mm-accordion__sign::before { inset: 7px 0; height: 2px; }
.mm-accordion__sign::after { inset: 0 7px; width: 2px; }
.mm-accordion__trigger[aria-expanded="true"] .mm-accordion__sign::after {
transform: scaleY(0);
opacity: 0;
}
.mm-accordion__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--mm-dur-slow) var(--mm-ease-out-expo);
}
.mm-accordion__panel.is-open { grid-template-rows: 1fr; }
.mm-accordion__panel > div { overflow: hidden; }
.mm-accordion__panel p {
padding-bottom: var(--mm-5);
font-size: var(--mm-fs-sm);
color: var(--mm-text-3);
max-width: var(--mm-maxw-text);
}
.mm-media__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 600ms var(--mm-ease);
pointer-events: none;
}
.mm-media.is-playing .mm-media__video { opacity: 1; }
.mm-js [data-mm-reveal] {
opacity: 0;
transform: translate3d(0, 26px, 0);
transition:
opacity var(--mm-dur-reveal) var(--mm-ease-out-expo),
transform var(--mm-dur-reveal) var(--mm-ease-out-expo),
clip-path var(--mm-dur-reveal) var(--mm-ease-out-expo);
transition-delay: var(--mm-reveal-delay, 0ms);
will-change: opacity, transform;
}
.mm-js [data-mm-reveal="left"] { transform: translate3d(-38px, 0, 0); }
.mm-js [data-mm-reveal="right"] { transform: translate3d(38px, 0, 0); }
.mm-js [data-mm-reveal="scale"] { transform: scale(0.94); }
.mm-js [data-mm-reveal="fade"] { transform: none; }
.mm-js [data-mm-reveal="wipe"] {
opacity: 1;
transform: none;
clip-path: inset(100% 0 0 0);
}
.mm-js [data-mm-reveal="wipe-left"] {
opacity: 1;
transform: none;
clip-path: inset(0 100% 0 0);
}
.mm-js [data-mm-reveal].is-visible {
opacity: 1;
transform: none;
clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
.mm-js [data-mm-reveal] {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
transition: none !important;
}
}
.mm-split-line {
display: block;
overflow: hidden;
}
.mm-split-line > span {
display: block;
transform: translate3d(0, 105%, 0);
transition: transform 1000ms var(--mm-ease-out-expo);
transition-delay: var(--mm-line-delay, 0ms);
}
.is-visible .mm-split-line > span,
.mm-split-line.is-visible > span { transform: translate3d(0, 0, 0); }
@media (prefers-reduced-motion: reduce) {
.mm-split-line > span { transform: none !important; transition: none; }
}
[data-mm-parallax] {
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
[data-mm-parallax] { transform: none !important; }
}
.mm-progress {
position: absolute;
left: 0;
bottom: -1px;
height: 2px;
width: 100%;
transform: scaleX(0);
transform-origin: left;
background: linear-gradient(90deg, var(--mm-red-deep), var(--mm-red-bright));
pointer-events: none;
}
.mm-cursor {
position: fixed;
top: 0;
left: 0;
z-index: var(--mm-z-cursor);
width: 28px;
height: 28px;
margin: -14px 0 0 -14px;
border: 1px solid var(--mm-red);
border-radius: 50%;
pointer-events: none;
opacity: 0;
mix-blend-mode: difference;
transition:
width 260ms var(--mm-ease-out-expo),
height 260ms var(--mm-ease-out-expo),
margin 260ms var(--mm-ease-out-expo),
opacity 200ms linear,
background 260ms var(--mm-ease);
will-change: transform;
}
.mm-cursor.is-active { opacity: 1; }
.mm-cursor.is-hover {
width: 54px;
height: 54px;
margin: -27px 0 0 -27px;
background: rgba(224, 27, 36, 0.12);
}
.mm-cursor__dot {
position: fixed;
top: 0;
left: 0;
z-index: var(--mm-z-cursor);
width: 4px;
height: 4px;
margin: -2px 0 0 -2px;
border-radius: 50%;
background: var(--mm-red-bright);
pointer-events: none;
opacity: 0;
transition: opacity 200ms linear;
will-change: transform;
}
.mm-cursor__dot.is-active { opacity: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
.mm-cursor,
.mm-cursor__dot { display: none; }
}
[data-mm-magnetic] {
will-change: transform;
transition: transform 420ms var(--mm-ease-out-expo);
}
[data-mm-tilt] {
transform-style: preserve-3d;
transition: transform 480ms var(--mm-ease-out-expo);
}
[data-mm-tilt] > * { transform: translateZ(0); }
@media (hover: none), (prefers-reduced-motion: reduce) {
[data-mm-tilt] { transform: none !important; }
}
[data-mm-spotlight] {
position: relative;
isolation: isolate;
}
[data-mm-spotlight]::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
opacity: 0;
transition: opacity var(--mm-dur) var(--mm-ease);
background: radial-gradient(
320px circle at var(--mm-mx, 50%) var(--mm-my, 50%),
color-mix(in srgb, var(--mm-accent) 16%, transparent),
transparent 70%
);
pointer-events: none;
}
[data-mm-spotlight]:hover::before { opacity: 1; }
.mm-curtain {
position: fixed;
inset: 0;
z-index: 9800;
background: var(--mm-black);
pointer-events: none;
transform-origin: top;
animation: mm-curtain-lift 900ms var(--mm-ease-out-expo) forwards;
}
.mm-curtain::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(50% 50% at 50% 50%, var(--mm-red-wash), transparent 70%);
}
@keyframes mm-curtain-lift {
0% { transform: scaleY(1); }
100% { transform: scaleY(0); }
}
@media (prefers-reduced-motion: reduce) {
.mm-curtain { display: none; }
}
[data-mm-count] { font-variant-numeric: tabular-nums; }
.mm-compare {
position: relative;
overflow: hidden;
border-radius: var(--mm-radius);
background: var(--mm-surface-2);
touch-action: pan-y;
cursor: ew-resize;
user-select: none;
}
.mm-compare img {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.mm-compare__after {
position: absolute;
inset: 0;
clip-path: inset(0 0 0 var(--mm-compare, 50%));
}
.mm-compare__handle {
position: absolute;
top: 0;
bottom: 0;
left: var(--mm-compare, 50%);
width: 2px;
background: var(--mm-red);
transform: translateX(-1px);
pointer-events: none;
box-shadow: 0 0 24px var(--mm-red-glow);
}
.mm-compare__grip {
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
margin: -22px 0 0 -22px;
border: 1px solid var(--mm-red);
border-radius: 50%;
background: rgba(5, 5, 6, 0.72);
backdrop-filter: blur(6px);
display: grid;
place-items: center;
color: var(--mm-red);
}
.mm-compare__label {
position: absolute;
bottom: var(--mm-4);
padding: var(--mm-2) var(--mm-3);
border-radius: var(--mm-radius-sm);
background: rgba(5, 5, 6, 0.7);
backdrop-filter: blur(6px);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mm-text-2);
pointer-events: none;
}
.mm-compare__label--before { left: var(--mm-4); }
.mm-compare__label--after { right: var(--mm-4); }
.mm-lightbox {
position: fixed;
inset: 0;
z-index: var(--mm-z-modal);
display: grid;
grid-template-rows: auto 1fr auto;
background: rgba(4, 4, 5, 0.96);
backdrop-filter: blur(14px);
opacity: 0;
visibility: hidden;
transition: opacity var(--mm-dur) var(--mm-ease), visibility var(--mm-dur);
}
.mm-lightbox.is-open { opacity: 1; visibility: visible; }
.mm-lightbox__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mm-4);
padding: var(--mm-5) var(--mm-gutter);
border-bottom: 1px solid var(--mm-line);
}
.mm-lightbox__count {
font-family: var(--mm-font-mono);
font-size: var(--mm-fs-xs);
color: var(--mm-text-3);
}
.mm-lightbox__stage {
position: relative;
display: grid;
grid-template-rows: minmax(0, 1fr);
place-items: center;
padding: var(--mm-5) var(--mm-gutter);
min-height: 0;
}
.mm-lightbox__stage img {
max-width: min(1100px, 100%);
max-height: 100%;
object-fit: contain;
border-radius: var(--mm-radius);
opacity: 0;
transform: scale(0.97);
transition: opacity var(--mm-dur) var(--mm-ease), transform var(--mm-dur-slow) var(--mm-ease-out-expo);
}
.mm-lightbox.is-open .mm-lightbox__stage img { opacity: 1; transform: none; }
.mm-lightbox__foot {
padding: var(--mm-5) var(--mm-gutter) var(--mm-7);
border-top: 1px solid var(--mm-line);
text-align: center;
}
.mm-lightbox__title {
font-family: var(--mm-font-display);
font-size: var(--mm-fs-h4);
font-weight: 300;
text-transform: uppercase;
letter-spacing: var(--mm-ls-display);
color: var(--mm-text);
margin-bottom: var(--mm-2);
}
.mm-lightbox__meta { font-size: var(--mm-fs-xs); color: var(--mm-text-3); }
.mm-iconbtn {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
background: none;
color: var(--mm-text-2);
cursor: pointer;
transition: color var(--mm-dur-fast) var(--mm-ease), border-color var(--mm-dur-fast) var(--mm-ease), background var(--mm-dur-fast) var(--mm-ease);
}
.mm-iconbtn:hover {
color: var(--mm-text);
border-color: var(--mm-red);
background: var(--mm-red-wash);
}
.mm-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
.mm-lightbox__nav--prev { left: var(--mm-gutter); }
.mm-lightbox__nav--next { right: var(--mm-gutter); }
.mm-rail {
display: flex;
gap: var(--mm-4);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: var(--mm-line-strong) transparent;
padding-bottom: var(--mm-4);
-webkit-overflow-scrolling: touch;
}
.mm-rail > * {
flex: none;
scroll-snap-align: start;
}
.mm-rail::-webkit-scrollbar { height: 3px; }
.mm-rail::-webkit-scrollbar-track { background: var(--mm-line-soft); }
.mm-rail::-webkit-scrollbar-thumb { background: var(--mm-line-strong); border-radius: var(--mm-radius-pill); }
.mm-rail::-webkit-scrollbar-thumb:hover { background: var(--mm-red); }
.mm-topbar {
position: relative;
z-index: calc(var(--mm-z-header) + 1);
height: var(--mm-topbar-h);
display: flex;
align-items: center;
background: var(--mm-black);
border-bottom: 1px solid var(--mm-line-soft);
}
.mm-topbar .mm-marquee { width: 100%; --mm-marquee-dur: 46s; }
@media (max-width: 700px) {
:root { --mm-topbar-h: 34px; }
.mm-topbar .mm-marquee { --mm-marquee-dur: 26s; }
}
.mm-header {
position: sticky;
top: 0;
z-index: var(--mm-z-header);
background: rgba(5, 5, 6, 0.72);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
border-bottom: 1px solid var(--mm-line);
transition: background var(--mm-dur) var(--mm-ease), border-color var(--mm-dur) var(--mm-ease);
}
.mm-header.is-stuck {
background: rgba(5, 5, 6, 0.94);
box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 1);
}
.mm-header.is-stuck .mm-header__inner { height: 68px; }
.mm-header__inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mm-5);
height: var(--mm-header-h);
transition: height var(--mm-dur) var(--mm-ease);
}
.mm-brand {
display: inline-flex;
align-items: center;
gap: var(--mm-3);
flex: none;
color: var(--mm-text);
}
.mm-brand__mark {
width: 46px;
height: 46px;
flex: none;
transition: transform var(--mm-dur-slow) var(--mm-ease-out-expo);
}
.mm-brand:hover .mm-brand__mark { transform: translateY(-2px) scale(1.04); }
.mm-brand__beam { animation: mm-beam 3.6s var(--mm-ease-in-out) infinite; transform-origin: center; }
@keyframes mm-beam {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.mm-brand__beam { animation: none; opacity: 0.8; }
}
.mm-brand__text { display: flex; flex-direction: column; gap: 3px; }
.mm-brand__name {
font-family: var(--mm-font-display);
font-size: clamp(1rem, 0.85rem + 0.5vw, 1.3125rem);
font-weight: 400;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mm-text);
white-space: nowrap;
}
.mm-brand__name em { font-style: normal; color: var(--mm-red); }
.mm-brand__tagline {
font-size: 0.5625rem;
font-weight: 600;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--mm-text-3);
line-height: 1;
white-space: nowrap;
}
@media (max-width: 420px) {
.mm-brand__mark { width: 38px; height: 38px; }
.mm-brand__tagline { letter-spacing: 0.3em; }
}
.mm-nav { display: flex; }
.mm-nav ul {
display: flex;
align-items: center;
gap: clamp(var(--mm-4), 1.55vw, var(--mm-6));
list-style: none;
margin: 0;
padding: 0;
}
.mm-nav li { margin: 0; position: relative; }
.mm-nav a {
position: relative;
display: block;
padding: var(--mm-2) 0;
font-size: var(--mm-fs-xs);
font-weight: 500;
letter-spacing: var(--mm-ls-nav);
text-transform: uppercase;
color: var(--mm-text-2);
white-space: nowrap;
}
.mm-nav a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1px;
background: var(--mm-red);
transform: scaleX(0);
transition: transform var(--mm-dur) var(--mm-ease-out-expo);
}
.mm-nav a:hover { color: var(--mm-text); }
.mm-nav a:hover::after { transform: scaleX(1); }
.mm-nav .current-menu-item > a,
.mm-nav .current_page_item > a,
.mm-nav a[aria-current="page"] {
color: var(--mm-red);
}
.mm-nav a[aria-current="page"]::after { transform: scaleX(1); }
.mm-nav ul ul {
position: absolute;
top: calc(100% + var(--mm-4));
left: 50%;
transform: translateX(-50%) translateY(-6px);
min-width: 232px;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--mm-2);
background: rgba(11, 11, 13, 0.97);
backdrop-filter: blur(18px);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
box-shadow: var(--mm-shadow);
opacity: 0;
visibility: hidden;
transition: opacity var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease-out-expo), visibility var(--mm-dur);
}
.mm-nav li:hover > ul,
.mm-nav li:focus-within > ul {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.mm-nav ul ul a {
padding: var(--mm-3) var(--mm-4);
border-radius: var(--mm-radius-sm);
letter-spacing: 0.08em;
transition: background var(--mm-dur-fast) var(--mm-ease), color var(--mm-dur-fast) var(--mm-ease);
}
.mm-nav ul ul a::after { display: none; }
.mm-nav ul ul a:hover { background: rgba(255, 255, 255, 0.05); color: var(--mm-text); }
@media (max-width: 1500px) {
.mm-nav ul { gap: var(--mm-4); }
.mm-nav a { font-size: 0.75rem; letter-spacing: 0.1em; }
}
@media (max-width: 1319px) {
.mm-nav { display: none; }
}
.mm-header__actions {
display: flex;
align-items: center;
gap: var(--mm-2);
flex: none;
}
.mm-header__cta { margin-left: var(--mm-2); }
@media (max-width: 620px) {
.mm-header__cta {
margin-left: 0;
min-height: 44px;
padding: 0.6rem 0.8rem;
gap: 0;
letter-spacing: 0.06em;
}
.mm-header__cta .mm-icon { display: none; }
.mm-header .mm-brand__tagline { display: none; }
}
@media (max-width: 360px) {
.mm-header__cta { padding: 0.55rem 0.6rem; font-size: 0.6875rem; letter-spacing: 0.03em; }
}
@media (max-width: 480px) {
.mm-header__inner { gap: var(--mm-2); }
.mm-header__actions { gap: 0; }
.mm-header__actions .mm-headicon--account { display: none; }
}
@media (max-width: 360px) {
.mm-header__actions .mm-headicon--search { display: none; }
.mm-brand__tagline { display: none; }
}
.mm-headicon {
position: relative;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 0;
background: none;
color: var(--mm-text-2);
cursor: pointer;
border-radius: var(--mm-radius);
transition: color var(--mm-dur-fast) var(--mm-ease), background var(--mm-dur-fast) var(--mm-ease);
}
.mm-headicon:hover { color: var(--mm-text); background: rgba(255, 255, 255, 0.05); }
.mm-searchpanel {
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: var(--mm-4) 0;
border-top: 1px solid var(--mm-line);
background: var(--mm-surface);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.mm-searchpanel[hidden] { display: none; }
.mm-searchpanel .mm-search {
display: flex;
gap: var(--mm-2);
width: 100%;
max-width: 720px;
margin-inline: auto;
}
.mm-searchpanel .mm-search .mm-input { flex: 1 1 auto; }
.mm-searchpanel .mm-search .mm-btn { flex: 0 0 auto; }
.mm-headicon__count {
position: absolute;
top: 4px;
right: 2px;
min-width: 17px;
height: 17px;
padding: 0 4px;
display: grid;
place-items: center;
border-radius: var(--mm-radius-pill);
background: var(--mm-red);
color: #fff;
font-size: 0.625rem;
font-weight: 700;
line-height: 1;
}
.mm-burger {
display: none;
place-items: center;
width: 42px;
height: 42px;
border: 0;
background: none;
cursor: pointer;
color: var(--mm-text);
}
@media (max-width: 1319px) {
.mm-burger { display: grid; }
}
.mm-burger__box {
position: relative;
width: 22px;
height: 12px;
}
.mm-burger__box span {
position: absolute;
left: 0;
width: 100%;
height: 1.5px;
background: currentColor;
transition: transform var(--mm-dur) var(--mm-ease-out-expo), opacity var(--mm-dur-fast) var(--mm-ease);
}
.mm-burger__box span:nth-child(1) { top: 0; }
.mm-burger__box span:nth-child(2) { top: 50%; margin-top: -0.75px; }
.mm-burger__box span:nth-child(3) { bottom: 0; }
.mm-burger[aria-expanded="true"] .mm-burger__box span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.mm-burger[aria-expanded="true"] .mm-burger__box span:nth-child(2) { opacity: 0; }
.mm-burger[aria-expanded="true"] .mm-burger__box span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }
.mm-drawer {
position: fixed;
inset: 0;
z-index: var(--mm-z-drawer);
display: grid;
grid-template-rows: auto 1fr auto;
background: var(--mm-black);
transform: translateY(-100%);
visibility: hidden;
transition: transform var(--mm-dur-slow) var(--mm-ease-out-expo), visibility var(--mm-dur-slow);
overflow-y: auto;
}
.mm-drawer.is-open { transform: translateY(0); visibility: visible; }
.mm-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mm-4);
padding: var(--mm-5) var(--mm-gutter);
border-bottom: 1px solid var(--mm-line);
}
.mm-drawer__body { padding: var(--mm-7) var(--mm-gutter); }
.mm-drawer__nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.mm-drawer__nav li {
margin: 0;
border-bottom: 1px solid var(--mm-line-soft);
opacity: 0;
transform: translateY(18px);
transition: opacity var(--mm-dur-slow) var(--mm-ease-out-expo), transform var(--mm-dur-slow) var(--mm-ease-out-expo);
transition-delay: var(--mm-item-delay, 0ms);
}
.mm-drawer.is-open .mm-drawer__nav li { opacity: 1; transform: none; }
.mm-drawer__nav a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mm-4);
padding: var(--mm-4) 0;
font-family: var(--mm-font-display);
font-size: clamp(1.375rem, 1.1rem + 1.6vw, 2rem);
font-weight: 300;
letter-spacing: var(--mm-ls-display);
text-transform: uppercase;
color: var(--mm-text);
}
.mm-drawer__nav a:hover { color: var(--mm-red); }
.mm-drawer__nav a .mm-icon { color: var(--mm-red); opacity: 0; transform: translateX(-8px); transition: opacity var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease-out-expo); }
.mm-drawer__nav a:hover .mm-icon { opacity: 1; transform: none; }
.mm-drawer__nav ul ul { padding: 0 0 var(--mm-4) var(--mm-4); }
.mm-drawer__nav ul ul li { border: 0; }
.mm-drawer__nav ul ul a {
font-family: var(--mm-font-body);
font-size: var(--mm-fs-sm);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--mm-text-3);
padding: var(--mm-2) 0;
}
.mm-drawer__foot {
padding: var(--mm-6) var(--mm-gutter) var(--mm-8);
border-top: 1px solid var(--mm-line);
display: flex;
flex-direction: column;
gap: var(--mm-5);
}
.mm-drawer__contacts {
display: flex;
flex-direction: column;
gap: var(--mm-3);
font-size: var(--mm-fs-sm);
}
.mm-drawer__contacts a { display: inline-flex; align-items: center; gap: var(--mm-3); color: var(--mm-text-2); }
.mm-drawer__contacts a:hover { color: var(--mm-text); }
.mm-drawer__contacts .mm-icon { color: var(--mm-red); }
.mm-socials {
display: flex;
gap: var(--mm-3);
list-style: none;
margin: 0;
padding: 0;
}
.mm-socials li { margin: 0; }
.mm-socials a {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
color: var(--mm-text-2);
transition: color var(--mm-dur-fast) var(--mm-ease), border-color var(--mm-dur-fast) var(--mm-ease), background var(--mm-dur-fast) var(--mm-ease), transform var(--mm-dur) var(--mm-ease-out-expo);
}
.mm-socials a:hover {
color: #fff;
border-color: var(--mm-red);
background: var(--mm-red);
transform: translateY(-3px);
}
.mm-socials svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.mm-endcta { padding-block: var(--mm-section-sm); }
.mm-endcta__panel {
position: relative;
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
align-items: center;
gap: var(--mm-6);
overflow: hidden;
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
background: var(--mm-surface);
min-height: 300px;
}
.mm-endcta__content {
position: relative;
z-index: 2;
padding: clamp(var(--mm-6), 4vw, var(--mm-9));
}
.mm-endcta__title { margin-bottom: var(--mm-4); }
.mm-endcta__text { margin-bottom: var(--mm-6); max-width: 46ch; }
.mm-endcta__media {
position: absolute;
inset: 0 0 0 42%;
z-index: 1;
}
.mm-endcta__media img { width: 100%; height: 100%; object-fit: cover; }
.mm-endcta__media video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 600ms var(--mm-ease);
pointer-events: none;
}
.mm-endcta__media.is-playing video { opacity: 1; }
.mm-endcta__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--mm-surface) 2%, rgba(16, 16, 19, 0.6) 34%, transparent 78%);
}
.mm-endcta__marks {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: var(--mm-5);
padding: clamp(var(--mm-6), 4vw, var(--mm-8)) clamp(var(--mm-5), 3vw, var(--mm-8));
}
.mm-endcta__marks .mm-feature {
padding-left: var(--mm-5);
border-left: 1px solid var(--mm-line);
}
.mm-endcta__marks::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgba(10, 10, 12, 0.56);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
pointer-events: none;
}
.mm-endcta__marks .mm-feature__title,
.mm-endcta__marks .mm-feature__text {
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.7);
}
.mm-endcta__marks .mm-feature__text { color: var(--mm-text-2); }
@media (max-width: 1020px) {
.mm-endcta__panel { grid-template-columns: minmax(0, 1fr); }
.mm-endcta__media { inset: 0; opacity: 0.86; }
.mm-endcta__media::after {
background: linear-gradient(180deg, rgba(16, 16, 19, 0.28), rgba(16, 16, 19, 0.8) 92%);
}
.mm-endcta__title,
.mm-endcta__text {
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.mm-endcta__marks { flex-direction: row; flex-wrap: wrap; padding-top: 0; background: none; }
.mm-endcta__marks::before { display: none; }
.mm-endcta__marks .mm-feature { flex: 1 1 200px; }
}
@media (max-width: 620px) {
.mm-endcta__marks .mm-feature { flex-basis: 100%; }
}
.mm-trustbar {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--mm-line);
border-bottom: 1px solid var(--mm-line);
}
.mm-trustbar > * {
padding: var(--mm-6) var(--mm-5);
border-right: 1px solid var(--mm-line);
}
.mm-trustbar > *:last-child { border-right: 0; }
.mm-trustbar .mm-feature__icon { color: var(--mm-text-3); transition: color var(--mm-dur) var(--mm-ease); }
.mm-trustbar > *:hover .mm-feature__icon { color: var(--mm-red); }
@media (max-width: 1180px) { .mm-trustbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .mm-trustbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1180px) {
.mm-trustbar > *:nth-child(3n) { border-right: 0; }
.mm-trustbar > * { border-bottom: 1px solid var(--mm-line); }
.mm-trustbar > *:nth-last-child(-n + 3) { border-bottom: 0; }
}
@media (max-width: 760px) {
.mm-trustbar > *:nth-child(3n) { border-right: 1px solid var(--mm-line); }
.mm-trustbar > *:nth-child(2n) { border-right: 0; }
.mm-trustbar > *:nth-last-child(-n + 3) { border-bottom: 1px solid var(--mm-line); }
.mm-trustbar > *:nth-last-child(-n + 2) { border-bottom: 0; }
}
.mm-footer {
position: relative;
background: var(--mm-black);
overflow: hidden;
}
.mm-footer__beacon {
position: absolute;
left: 50%;
bottom: 0;
width: min(760px, max(100%, 620px));
transform: translateX(-50%);
z-index: 0;
pointer-events: none;
opacity: 0.42;
mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 80%, rgba(0, 0, 0, 0.3) 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 80%, rgba(0, 0, 0, 0.3) 100%);
}
.mm-footer__beacon img { width: 100%; height: auto; }
.mm-footer__beacon video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 600ms var(--mm-ease);
}
.mm-footer__beacon.is-playing video { opacity: 1; }
.mm-footer__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr) minmax(0, 1.5fr);
gap: clamp(var(--mm-5), 3vw, var(--mm-8));
padding-block: var(--mm-9) var(--mm-8);
}
@media (max-width: 1280px) {
.mm-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-footer__brandcol { grid-column: 1 / -1; }
.mm-footer__news { grid-column: span 2; }
}
@media (max-width: 760px) {
.mm-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-footer__news { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
.mm-footer__inner { grid-template-columns: minmax(0, 1fr); }
.mm-footer__news { grid-column: auto; }
}
.mm-footer__brandcol {
display: flex;
flex-direction: column;
gap: var(--mm-5);
align-items: flex-start;
}
.mm-footer__blurb {
font-size: var(--mm-fs-sm);
line-height: 1.75;
color: var(--mm-text-3);
max-width: 34ch;
}
.mm-footer__title {
font-family: var(--mm-font-body);
font-size: var(--mm-fs-xs);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mm-text);
margin-bottom: var(--mm-3);
}
.mm-footer__title + .mm-rule { margin-top: 0; margin-bottom: var(--mm-5); }
.mm-footer__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--mm-3);
}
.mm-footer__list li { margin: 0; }
.mm-footer__list a {
position: relative;
display: inline-block;
font-size: var(--mm-fs-sm);
color: var(--mm-text-3);
transition: color var(--mm-dur-fast) var(--mm-ease), transform var(--mm-dur) var(--mm-ease-out-expo);
}
.mm-footer__list a:hover { color: var(--mm-text); transform: translateX(4px); }
.mm-footer__contacts {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--mm-4);
}
.mm-footer__contacts li {
display: flex;
align-items: flex-start;
gap: var(--mm-3);
margin: 0;
font-size: var(--mm-fs-sm);
line-height: 1.5;
color: var(--mm-text-3);
}
.mm-footer__contacts .mm-icon { color: var(--mm-red); margin-top: 3px; }
.mm-footer__contacts a { color: var(--mm-text-3); }
.mm-footer__contacts a:hover { color: var(--mm-text); }
.mm-footer__news {
display: flex;
flex-direction: column;
gap: var(--mm-4);
}
.mm-footer__news p {
font-size: var(--mm-fs-sm);
line-height: 1.7;
color: var(--mm-text-3);
margin: 0;
}
.mm-subscribe { display: flex; flex-direction: column; gap: var(--mm-3); }
.mm-subscribe__safe {
display: flex;
align-items: center;
gap: var(--mm-2);
font-size: 0.6875rem;
color: var(--mm-text-4);
}
.mm-subscribe__safe .mm-icon { width: 13px; height: 13px; }
.mm-footer__bar {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--mm-4) var(--mm-6);
padding-block: var(--mm-5);
border-top: 1px solid var(--mm-line);
}
.mm-footer__copy { font-size: var(--mm-fs-xs); color: var(--mm-text-4); }
.mm-footer__legal {
display: flex;
flex-wrap: wrap;
gap: var(--mm-2) var(--mm-5);
list-style: none;
margin: 0;
padding: 0;
}
.mm-footer__legal li { margin: 0; }
.mm-footer__legal a { font-size: var(--mm-fs-xs); color: var(--mm-text-4); }
.mm-footer__legal a:hover { color: var(--mm-text-2); }
.mm-pay {
display: flex;
align-items: center;
gap: var(--mm-4);
flex-wrap: wrap;
}
.mm-pay__label {
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mm-text-4);
}
.mm-pay__list {
display: flex;
align-items: center;
gap: var(--mm-2);
list-style: none;
margin: 0;
padding: 0;
background: #ffffff;
border-radius: var(--mm-radius);
padding: var(--mm-3) var(--mm-4);
}
.mm-pay__list li { margin: 0; display: grid; place-items: center; }
.mm-pay__list svg { height: 20px; width: auto; }
@media (max-width: 620px) {
.mm-footer__bar { flex-direction: column; align-items: flex-start; }
}
.mm-hero-split {
display: flex;
width: 100%;
min-height: clamp(520px, calc(100vh - var(--mm-header-h) - var(--mm-topbar-h)), 860px);
background: var(--mm-black);
overflow: hidden;
}
.mm-hero-col {
position: relative;
flex: 1 1 20%;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: clamp(var(--mm-6), 2.6vw, var(--mm-8)) clamp(var(--mm-4), 1.8vw, var(--mm-6));
border-right: 1px solid var(--mm-line);
overflow: hidden;
isolation: isolate;
transition: flex-grow 760ms var(--mm-ease-out-expo);
}
.mm-hero-col:last-child { border-right: 0; }
@media (hover: hover) and (min-width: 1024px) {
.mm-hero-split:hover .mm-hero-col { flex-grow: 0.86; }
.mm-hero-split .mm-hero-col:hover { flex-grow: 1.7; }
}
.mm-hero-col__bg {
position: absolute;
inset: 0;
z-index: -2;
}
.mm-hero-col__bg img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.04);
filter: grayscale(0) brightness(1);
transition: transform 1200ms var(--mm-ease-out-expo), filter 700ms var(--mm-ease);
}
.mm-hero-col:hover .mm-hero-col__bg img {
transform: scale(1.12);
filter: grayscale(0) brightness(1);
}
.mm-hero-col__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 520ms var(--mm-ease);
pointer-events: none;
}
.mm-hero-col.is-playing .mm-hero-col__video { opacity: 1; }
.mm-hero-col.is-playing .mm-hero-col__bg img { opacity: 0; }
.mm-hero-col__bg img { transition: transform 1200ms var(--mm-ease-out-expo), filter 700ms var(--mm-ease), opacity 520ms var(--mm-ease); }
@media (prefers-reduced-motion: reduce) {
.mm-hero-col__video { display: none; }
}
.mm-hero-col__bg::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(5, 5, 6, 0.66) 0%, rgba(5, 5, 6, 0.14) 42%, rgba(5, 5, 6, 0.88) 100%),
radial-gradient(90% 50% at 50% 98%, color-mix(in srgb, var(--mm-accent) 24%, transparent), transparent 70%);
transition: opacity var(--mm-dur-slow) var(--mm-ease);
}
.mm-hero-col::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 3px;
z-index: 2;
background: var(--mm-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 700ms var(--mm-ease-out-expo);
}
.mm-hero-col:hover::after { transform: scaleX(1); }
.mm-hero-col__title,
.mm-hero-col__text,
.mm-hero-col .mm-arrow-link {
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 0 18px rgba(0, 0, 0, 0.55);
}
.mm-hero-col__title {
font-size: clamp(1.125rem, 1.72vw, 2.125rem);
line-height: 1.28;
margin-bottom: var(--mm-5);
color: var(--mm-accent);
}
.mm-hero-col__text {
font-size: clamp(0.75rem, 0.9vw, 1rem);
line-height: 1.62;
color: var(--mm-text-2);
margin-bottom: var(--mm-6);
max-width: 30ch;
}
.mm-hero-col .mm-arrow-link {
color: var(--mm-accent);
margin-top: 0;
font-size: clamp(0.625rem, 0.76vw, 0.8125rem);
letter-spacing: 0.15em;
}
.mm-hero-col__cover {
position: absolute;
inset: 0;
z-index: 3;
}
@media (max-width: 1023px) {
.mm-hero-split {
flex-direction: column;
min-height: 0;
}
.mm-hero-col {
flex: none;
min-height: 230px;
border-right: 0;
border-bottom: 1px solid var(--mm-line);
justify-content: flex-end;
}
.mm-hero-col__title { font-size: clamp(1.375rem, 1.15rem + 1.4vw, 1.875rem); }
.mm-hero-col__text { font-size: var(--mm-fs-sm); max-width: 46ch; }
.mm-hero-col .mm-arrow-link { font-size: var(--mm-fs-xs); }
}
.mm-statement {
position: relative;
overflow: hidden;
background: var(--mm-black);
text-align: center;
padding-block: clamp(var(--mm-5), 2.9vw, var(--mm-8)) 0;
}
.mm-statement__bg {
position: absolute;
inset: -8% 0;
z-index: 0;
}
.mm-statement__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 45%;
filter: brightness(1);
}
.mm-statement__bg::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(56% 70% at 50% 45%, rgba(5, 5, 6, 0.52), transparent 72%),
linear-gradient(180deg, rgba(5, 5, 6, 0.62) 0%, rgba(5, 5, 6, 0.16) 40%, rgba(5, 5, 6, 0.78) 100%);
}
.mm-statement__inner {
position: relative;
z-index: 1;
padding-bottom: clamp(var(--mm-4), 1.5vw, var(--mm-6));
}
.mm-statement__title {
font-size: clamp(1.75rem, 3.65vw, 3.75rem);
line-height: 1.04;
margin-bottom: var(--mm-3);
}
.mm-statement__text {
max-width: 54ch;
margin: 0 auto var(--mm-5);
font-size: clamp(0.8125rem, 1vw, 1.0625rem);
color: var(--mm-text-2);
}
.mm-statement__stats {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--mm-line);
}
.mm-statement__stats > * {
display: flex;
align-items: center;
justify-content: center;
gap: var(--mm-4);
padding: clamp(var(--mm-3), 1.3vw, var(--mm-5)) var(--mm-4);
border-right: 1px solid var(--mm-line);
}
.mm-statement__stats .mm-stat__value { font-size: clamp(1.5rem, 2.2vw, 2.25rem); }
.mm-statement__stats > *:last-child { border-right: 0; }
@media (max-width: 860px) {
.mm-statement__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-statement__stats > *:nth-child(2n) { border-right: 0; }
.mm-statement__stats > *:nth-child(-n + 2) { border-bottom: 1px solid var(--mm-line); }
}
@media (max-width: 460px) {
.mm-statement__stats > * { flex-direction: column; text-align: center; gap: var(--mm-3); }
}
.mm-promises {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
}
.mm-promises > * {
padding: var(--mm-7) var(--mm-6);
border-right: 1px solid var(--mm-line);
}
.mm-promises > *:last-child { border-right: 0; }
.mm-promise__title {
font-family: var(--mm-font-display);
font-size: var(--mm-fs-h4);
font-weight: 300;
text-transform: uppercase;
letter-spacing: var(--mm-ls-display);
color: var(--mm-red);
margin-bottom: var(--mm-3);
}
.mm-promise__text {
font-size: var(--mm-fs-xs);
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1.7;
color: var(--mm-text-2);
}
@media (max-width: 860px) {
.mm-promises { grid-template-columns: minmax(0, 1fr); }
.mm-promises > * { border-right: 0; border-bottom: 1px solid var(--mm-line); }
.mm-promises > *:last-child { border-bottom: 0; }
}
.mm-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: var(--mm-5);
counter-reset: mm-step;
}
.mm-step {
position: relative;
display: flex;
flex-direction: column;
gap: var(--mm-3);
padding-top: var(--mm-6);
border-top: 1px solid var(--mm-line);
}
.mm-step::before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 1px;
background: var(--mm-red);
transform: scaleX(0);
transform-origin: left;
transition: transform 900ms var(--mm-ease-out-expo);
transition-delay: var(--mm-reveal-delay, 0ms);
}
.mm-step.is-visible::before { transform: scaleX(1); }
.mm-step__index {
font-family: var(--mm-font-display);
font-weight: 200;
font-size: 1.5rem;
color: var(--mm-red);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.mm-step__title {
font-size: var(--mm-fs-xs);
font-family: var(--mm-font-body);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mm-text);
}
.mm-step__text {
font-size: var(--mm-fs-xs);
line-height: 1.65;
color: var(--mm-text-3);
}
.mm-workstrip { display: grid; gap: var(--mm-4); }
.mm-workstrip__row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
gap: var(--mm-4);
}
.mm-work {
position: relative;
display: block;
overflow: hidden;
border-radius: var(--mm-radius);
background: var(--mm-surface-2);
}
.mm-work img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 900ms var(--mm-ease-out-expo), filter var(--mm-dur-slow) var(--mm-ease);
filter: brightness(1);
}
.mm-work:hover img { transform: scale(1.06); filter: brightness(1); }
.mm-work__veil {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 38%, rgba(5, 5, 6, 0.5) 64%, rgba(5, 5, 6, 0.94) 100%);
pointer-events: none;
}
.mm-work__body {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: var(--mm-5);
transform: translateY(10px);
transition: transform var(--mm-dur-slow) var(--mm-ease-out-expo);
}
.mm-work:hover .mm-work__body { transform: translateY(0); }
.mm-work__kicker {
display: block;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mm-red);
margin-bottom: var(--mm-2);
}
.mm-work__kicker,
.mm-work__title,
.mm-work__meta { text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9); }
.mm-work__title {
font-size: var(--mm-fs-h4);
color: var(--mm-text);
margin-bottom: var(--mm-2);
}
.mm-work__meta {
font-size: 0.6875rem;
color: var(--mm-text-3);
letter-spacing: 0.04em;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity var(--mm-dur-slow) var(--mm-ease), max-height var(--mm-dur-slow) var(--mm-ease);
}
.mm-work:hover .mm-work__meta { opacity: 1; max-height: 60px; }
.mm-work__plus {
position: absolute;
right: var(--mm-4);
bottom: var(--mm-4);
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid var(--mm-red);
border-radius: 50%;
color: var(--mm-red);
background: rgba(5, 5, 6, 0.55);
backdrop-filter: blur(4px);
transition: background var(--mm-dur) var(--mm-ease), color var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease-out-expo);
}
.mm-work:hover .mm-work__plus {
background: var(--mm-red);
color: #fff;
transform: rotate(90deg);
}
.mm-review {
display: flex;
flex-direction: column;
gap: var(--mm-5);
padding: var(--mm-6);
background: var(--mm-surface);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
height: 100%;
}
.mm-review__stars { display: flex; gap: 3px; color: var(--mm-red); }
.mm-review__stars svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.mm-review__text {
font-size: var(--mm-fs-sm);
line-height: 1.75;
color: var(--mm-text-2);
flex: 1;
}
.mm-review__who {
display: flex;
align-items: center;
gap: var(--mm-3);
padding-top: var(--mm-4);
border-top: 1px solid var(--mm-line);
}
.mm-review__avatar {
display: grid;
place-items: center;
width: 38px;
height: 38px;
flex: none;
border-radius: 50%;
background: var(--mm-surface-3);
color: var(--mm-red);
font-family: var(--mm-font-display);
font-size: 0.9375rem;
letter-spacing: 0.04em;
}
.mm-review__name {
display: block;
font-size: var(--mm-fs-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mm-text);
}
.mm-review__role { display: block; font-size: 0.6875rem; color: var(--mm-text-4); }
.mm-srv {
display: grid;
grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr);
gap: 0;
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
overflow: hidden;
background: var(--mm-surface);
scroll-margin-top: calc(var(--mm-header-h) + var(--mm-5));
}
.mm-srv + .mm-srv { margin-top: var(--mm-5); }
.mm-srv__text {
display: flex;
flex-direction: column;
gap: var(--mm-4);
padding: clamp(var(--mm-5), 2.6vw, var(--mm-7));
border-right: 1px solid var(--mm-line);
}
.mm-srv__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--mm-4);
}
.mm-srv__title {
font-size: var(--mm-fs-h3);
color: var(--mm-accent, var(--mm-text));
}
.mm-srv__mark {
flex: none;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 1px solid color-mix(in srgb, var(--mm-accent) 40%, transparent);
border-radius: var(--mm-radius);
color: var(--mm-accent);
background: color-mix(in srgb, var(--mm-accent) 8%, transparent);
}
.mm-srv__desc { font-size: var(--mm-fs-sm); line-height: 1.7; color: var(--mm-text-3); }
.mm-srv__text .mm-arrow-link { margin-top: auto; color: var(--mm-accent); }
.mm-srv__media {
display: grid;
grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
min-height: 300px;
}
.mm-srv__media--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-srv__media--trio { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); }
.mm-srv--steps { grid-template-columns: minmax(0, 1fr); }
.mm-srv--steps .mm-srv__text {
border-right: 0;
border-bottom: 1px solid var(--mm-line);
}
.mm-srv__media--steps {
grid-template-columns: repeat(4, minmax(0, 1fr));
min-height: 0;
}
.mm-srv__media--steps .mm-srv__shot {
aspect-ratio: var(--mm-shot-ratio, 4 / 5);
cursor: zoom-in;
}
.mm-srv__media--steps .mm-srv__shot img { object-fit: contain; }
.mm-srv__shot {
position: relative;
overflow: hidden;
border-right: 1px solid var(--mm-line);
background: var(--mm-surface-2);
}
.mm-srv__shot:last-child { border-right: 0; }
.mm-srv__shot img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 900ms var(--mm-ease-out-expo), filter var(--mm-dur-slow) var(--mm-ease);
filter: brightness(1);
}
.mm-srv__shot:hover img { transform: scale(1.06); filter: brightness(1.02); }
@media (max-width: 1020px) {
.mm-srv { grid-template-columns: minmax(0, 1fr); }
.mm-srv__text { border-right: 0; border-bottom: 1px solid var(--mm-line); }
.mm-srv__media { min-height: 220px; }
}
@media (max-width: 620px) {
.mm-srv__media,
.mm-srv__media--trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-srv__shot:nth-child(n + 3) { border-top: 1px solid var(--mm-line); }
.mm-srv__shot:nth-child(2n) { border-right: 0; }
}
.mm-mat {
display: flex;
flex-direction: column;
background: var(--mm-surface);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
overflow: hidden;
transition: border-color var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease-out-expo);
}
.mm-mat:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--mm-accent) 50%, var(--mm-line));
}
.mm-mat__head { padding: var(--mm-5) var(--mm-5) 0; }
.mm-mat__name {
font-family: var(--mm-font-display);
font-size: 1.25rem;
font-weight: 400;
letter-spacing: 0.03em;
text-transform: none;
color: var(--mm-accent);
line-height: 1.1;
}
.mm-mat__brand {
display: block;
font-size: 0.6875rem;
letter-spacing: 0.1em;
color: var(--mm-text-4);
margin-top: 2px;
}
.mm-mat__media {
aspect-ratio: 1 / 1;
overflow: hidden;
background: radial-gradient(80% 60% at 50% 100%, color-mix(in srgb, var(--mm-accent) 16%, transparent), transparent 70%);
}
.mm-mat__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--mm-4); }
.mm-mat__body {
display: flex;
flex-direction: column;
gap: var(--mm-5);
padding: 0 var(--mm-5) var(--mm-5);
flex: 1;
}
.mm-mat__desc { font-size: 0.8125rem; line-height: 1.6; color: var(--mm-text-3); }
.mm-mat__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--mm-2);
margin-top: auto;
}
.mm-mat__price,
.mm-fil__price {
color: var(--mm-accent, var(--mm-text-2));
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.mm-fil__price { margin-left: auto; }
.mm-fil {
display: grid;
grid-template-columns: 84px minmax(0, 1fr);
grid-template-rows: auto auto 1fr;
column-gap: var(--mm-3);
row-gap: var(--mm-2);
align-items: start;
padding: var(--mm-4);
background: var(--mm-surface);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
transition: border-color var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease-out-expo);
}
.mm-fil:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--mm-accent) 50%, var(--mm-line)); }
.mm-fil__media {
grid-column: 1;
grid-row: 1 / -1;
align-self: center;
aspect-ratio: 1;
background: none;
border-radius: 0;
overflow: visible;
}
.mm-fil__media img { width: 100%; height: 100%; object-fit: contain; padding: 0; }
.mm-fil__name,
.mm-fil__desc,
.mm-fil__tags { grid-column: 2; }
.mm-fil__name {
font-family: var(--mm-font-display);
font-size: 1.125rem;
font-weight: 400;
letter-spacing: 0.03em;
text-transform: none;
color: var(--mm-accent);
}
.mm-fil__desc { font-size: 0.8125rem; line-height: 1.55; color: var(--mm-text-3); }
.mm-fil__tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--mm-2);
margin-top: auto;
padding-top: var(--mm-2);
color: var(--mm-text-4);
}
.mm-fil__tags .mm-icon { width: 15px; height: 15px; }
.mm-legend {
display: flex;
flex-wrap: wrap;
gap: var(--mm-4) var(--mm-6);
padding-top: var(--mm-5);
margin-top: var(--mm-5);
border-top: 1px solid var(--mm-line);
}
.mm-legend__item {
display: flex;
align-items: center;
gap: var(--mm-2);
font-size: 0.6875rem;
letter-spacing: 0.04em;
color: var(--mm-text-4);
}
.mm-legend__item .mm-icon { width: 15px; height: 15px; color: var(--mm-text-3); }
.mm-gallerybar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--mm-4);
padding-block: var(--mm-3);
border-block: 1px solid var(--mm-line);
margin-bottom: var(--mm-7);
background: var(--mm-bg-alt);
}
.mm-gallerybar .mm-filters { flex: 1; }
.mm-gallerybar .mm-select { width: auto; min-width: 180px; padding-block: 0.625rem; }
.mm-gallerygrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
gap: var(--mm-4);
}
.mm-gallerygrid > *:nth-child(-n + 3) { grid-row: span 1; }
.mm-empty {
padding: var(--mm-9) var(--mm-5);
text-align: center;
border: 1px dashed var(--mm-line-strong);
border-radius: var(--mm-radius);
color: var(--mm-text-3);
font-size: var(--mm-fs-sm);
}
.mm-timeline {
position: relative;
display: flex;
flex-direction: column;
gap: var(--mm-7);
padding-left: var(--mm-8);
}
.mm-timeline::before {
content: "";
position: absolute;
top: 8px;
bottom: 8px;
left: 22px;
width: 1px;
background: linear-gradient(180deg, var(--mm-red), color-mix(in srgb, var(--mm-red) 20%, transparent));
}
.mm-tl {
position: relative;
display: grid;
grid-template-columns: 74px minmax(0, 1fr);
gap: var(--mm-5);
align-items: start;
}
.mm-tl__mark {
position: absolute;
left: calc(var(--mm-8) * -1);
top: 0;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 1px solid color-mix(in srgb, var(--mm-red) 45%, transparent);
border-radius: var(--mm-radius);
background: var(--mm-bg);
color: var(--mm-red);
}
.mm-tl__year {
font-family: var(--mm-font-display);
font-size: 1.5rem;
font-weight: 300;
color: var(--mm-text);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.mm-tl__title {
font-family: var(--mm-font-body);
font-size: var(--mm-fs-xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mm-red);
margin-bottom: var(--mm-2);
}
.mm-tl__text { font-size: var(--mm-fs-sm); line-height: 1.7; color: var(--mm-text-3); }
@media (max-width: 620px) {
.mm-tl { grid-template-columns: minmax(0, 1fr); gap: var(--mm-2); }
}
.mm-values {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
overflow: hidden;
}
.mm-value {
display: flex;
flex-direction: column;
gap: var(--mm-3);
padding: var(--mm-6) var(--mm-5);
border-right: 1px solid var(--mm-line);
background: var(--mm-surface);
transition: background var(--mm-dur) var(--mm-ease);
}
.mm-value:last-child { border-right: 0; }
.mm-value:hover { background: var(--mm-surface-2); }
.mm-value__icon { color: var(--mm-red); }
.mm-value__title {
font-family: var(--mm-font-body);
font-size: var(--mm-fs-xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mm-text);
}
.mm-value__text { font-size: var(--mm-fs-xs); line-height: 1.6; color: var(--mm-text-3); }
@media (max-width: 900px) {
.mm-value { border-right: 0; border-bottom: 1px solid var(--mm-line); }
.mm-value:last-child { border-bottom: 0; }
}
.mm-shots {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--mm-3);
}
.mm-shots a {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--mm-radius);
background: var(--mm-surface-2);
}
.mm-shots img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(1);
transition: transform 900ms var(--mm-ease-out-expo), filter var(--mm-dur-slow) var(--mm-ease);
}
.mm-shots a:hover img { transform: scale(1.08); filter: brightness(1); }
@media (max-width: 900px) { .mm-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mm-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mm-person {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: var(--mm-5);
align-items: stretch;
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
overflow: hidden;
background: var(--mm-surface);
}
.mm-person__media { background: var(--mm-surface-2); }
.mm-person__media img { width: 100%; height: 100%; object-fit: cover; }
.mm-person__body {
display: flex;
flex-direction: column;
gap: var(--mm-4);
padding: var(--mm-6);
}
.mm-person__name { font-size: var(--mm-fs-h4); color: var(--mm-red); }
.mm-person__role {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mm-text-4);
}
.mm-quote {
display: grid;
place-items: center;
padding: var(--mm-7);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
background:
radial-gradient(70% 100% at 100% 0%, var(--mm-red-wash), transparent 70%),
var(--mm-surface);
font-family: var(--mm-font-display);
font-size: var(--mm-fs-h3);
font-weight: 300;
line-height: 1.25;
letter-spacing: var(--mm-ls-display);
text-transform: uppercase;
color: var(--mm-text);
text-align: center;
}
@media (max-width: 900px) { .mm-person { grid-template-columns: minmax(0, 1fr); } }
.mm-paintsteps {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: var(--mm-4);
}
@media (max-width: 1280px) { .mm-paintsteps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .mm-paintsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mm-pstep { display: flex; flex-direction: column; gap: var(--mm-3); }
.mm-pstep__index {
font-family: var(--mm-font-display);
font-size: 1.375rem;
font-weight: 200;
color: var(--mm-red);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.mm-pstep__title {
font-family: var(--mm-font-body);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mm-text);
}
.mm-pstep__text { font-size: 0.75rem; line-height: 1.55; color: var(--mm-text-3); }
.mm-pstep__media {
margin-top: auto;
aspect-ratio: 4 / 5;
border-radius: var(--mm-radius);
overflow: hidden;
background: var(--mm-surface-2);
border: 1px solid var(--mm-line);
}
.mm-pstep__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 800ms var(--mm-ease-out-expo);
}
.mm-pstep:hover .mm-pstep__media img { transform: scale(1.06); }
.mm-levels {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
gap: var(--mm-5);
}
.mm-level {
display: flex;
align-items: flex-start;
gap: var(--mm-4);
padding-left: var(--mm-5);
border-left: 1px solid var(--mm-line);
}
.mm-level__icon { color: var(--mm-red); flex: none; }
.mm-level__title {
display: block;
font-size: var(--mm-fs-xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mm-text);
margin-bottom: var(--mm-1);
}
.mm-level__time { display: block; font-size: var(--mm-fs-xs); color: var(--mm-red); margin-bottom: var(--mm-2); }
.mm-level__text { font-size: var(--mm-fs-xs); line-height: 1.55; color: var(--mm-text-3); }
.mm-techs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
gap: var(--mm-5) var(--mm-6);
}
.mm-tech { display: flex; flex-direction: column; gap: var(--mm-2); }
.mm-tech__icon { color: var(--mm-red); margin-bottom: var(--mm-1); }
.mm-tech__title {
font-size: var(--mm-fs-xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mm-text);
}
.mm-tech__text { font-size: var(--mm-fs-xs); line-height: 1.55; color: var(--mm-text-3); }
.mm-flow {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--mm-3);
align-items: start;
}
@media (max-width: 1100px) { .mm-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .mm-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mm-flowstep {
position: relative;
display: flex;
flex-direction: column;
gap: var(--mm-3);
}
.mm-flowstep:not(:last-child)::after {
content: "»";
position: absolute;
top: 38%;
right: calc(var(--mm-3) * -0.75);
transform: translate(50%, -50%);
z-index: 2;
font-size: 1.125rem;
color: var(--mm-red);
line-height: 1;
pointer-events: none;
}
@media (max-width: 1100px) {
.mm-flowstep:nth-child(3n)::after { display: none; }
}
@media (max-width: 620px) {
.mm-flowstep:nth-child(3n)::after { display: block; }
.mm-flowstep:nth-child(2n)::after { display: none; }
}
.mm-flowstep__media {
aspect-ratio: 4 / 5;
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
overflow: hidden;
background: var(--mm-surface-2);
}
.mm-flowstep__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 800ms var(--mm-ease-out-expo);
}
.mm-flowstep:hover .mm-flowstep__media img { transform: scale(1.05); }
.mm-flowstep__title {
font-family: var(--mm-font-body);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mm-text);
}
.mm-flowstep__text { font-size: 0.75rem; line-height: 1.55; color: var(--mm-text-3); }
.mm-cando {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 250px;
padding: var(--mm-5);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
overflow: hidden;
background: var(--mm-surface);
isolation: isolate;
}
.mm-cando__bg { position: absolute; inset: 0; z-index: -2; }
.mm-cando__bg img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.95);
transition: transform 1000ms var(--mm-ease-out-expo), filter var(--mm-dur-slow) var(--mm-ease);
}
.mm-cando:hover .mm-cando__bg img { transform: scale(1.07); filter: brightness(1.04); }
.mm-cando__bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 34%, rgba(5, 5, 6, 0.55) 62%, rgba(5, 5, 6, 0.96) 100%);
}
.mm-cando__icon { color: var(--mm-red); margin-bottom: var(--mm-3); }
.mm-cando__title {
font-size: var(--mm-fs-xs);
font-family: var(--mm-font-body);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mm-text);
margin-bottom: var(--mm-2);
}
.mm-cando__text { font-size: var(--mm-fs-xs); line-height: 1.55; color: var(--mm-text-3); }
.mm-cando__title,
.mm-cando__text { text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9); }
@media (max-width: 900px) {
.mm-cando { aspect-ratio: 1 / 1; }
}
.mm-occasions {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0;
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
overflow: hidden;
}
@media (max-width: 1100px) { .mm-occasions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .mm-occasions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mm-occ {
position: relative;
display: flex;
flex-direction: column;
gap: var(--mm-4);
padding: var(--mm-5);
border-right: 1px solid var(--mm-line);
background: var(--mm-surface);
transition: background var(--mm-dur) var(--mm-ease);
}
.mm-occ:last-child { border-right: 0; }
.mm-occ:hover { background: var(--mm-surface-2); }
.mm-occ__head { display: flex; align-items: center; gap: var(--mm-3); }
.mm-occ__head .mm-icon { color: var(--mm-red); }
.mm-occ__title {
font-family: var(--mm-font-display);
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--mm-text);
}
.mm-occ__media {
aspect-ratio: 4 / 5;
border-radius: var(--mm-radius-sm);
overflow: hidden;
background: var(--mm-surface-2);
}
.mm-occ__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 900ms var(--mm-ease-out-expo);
}
.mm-occ:hover .mm-occ__media img { transform: scale(1.06); }
.mm-occ__text { font-size: var(--mm-fs-xs); line-height: 1.6; color: var(--mm-text-3); flex: 1; }
.mm-contact {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
gap: 0;
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
overflow: hidden;
background: var(--mm-surface);
}
@media (max-width: 900px) { .mm-contact { grid-template-columns: minmax(0, 1fr); } }
.mm-contact__form {
padding: clamp(var(--mm-5), 3vw, var(--mm-8));
border-right: 1px solid var(--mm-line);
}
@media (max-width: 900px) {
.mm-contact__form { border-right: 0; border-bottom: 1px solid var(--mm-line); }
}
.mm-contact__info { padding: clamp(var(--mm-5), 3vw, var(--mm-8)); }
.mm-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--mm-4);
}
.mm-form-grid > .mm-field--wide { grid-column: 1 / -1; }
@media (max-width: 620px) {
.mm-form-grid { grid-template-columns: minmax(0, 1fr); }
}
.mm-infolist {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--mm-5);
}
.mm-infolist li { display: flex; gap: var(--mm-4); margin: 0; }
.mm-infolist__icon {
flex: none;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid color-mix(in srgb, var(--mm-red) 35%, transparent);
border-radius: var(--mm-radius);
color: var(--mm-red);
}
.mm-infolist__label {
display: block;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mm-text-4);
margin-bottom: var(--mm-1);
}
.mm-infolist__value { font-size: var(--mm-fs-sm); line-height: 1.6; color: var(--mm-text); }
.mm-infolist__value a:hover { color: var(--mm-red); }
.mm-map {
position: relative;
overflow: hidden;
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
background:
radial-gradient(70% 90% at 50% 100%, var(--mm-red-wash), transparent 70%),
var(--mm-surface);
min-height: 380px;
display: grid;
}
.mm-map iframe {
width: 100%;
height: 100%;
min-height: 380px;
border: 0;
display: block;
filter: invert(0.92) hue-rotate(180deg) brightness(0.86) contrast(0.9) saturate(0.35);
}
.mm-map__intro {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--mm-4);
padding: var(--mm-8) var(--mm-5);
text-align: center;
}
.mm-map__intro::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.5;
background-image:
linear-gradient(var(--mm-line-soft) 1px, transparent 1px),
linear-gradient(90deg, var(--mm-line-soft) 1px, transparent 1px);
background-size: 46px 46px;
mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.mm-map__intro > * { position: relative; z-index: 1; }
.mm-map__pin {
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--mm-red-wash);
border: 1px solid color-mix(in srgb, var(--mm-red) 45%, transparent);
color: var(--mm-red);
}
.mm-map__pin svg { width: 26px; height: 26px; }
.mm-map__address {
font-family: var(--mm-font-display);
font-size: var(--mm-fs-h4);
font-weight: 300;
letter-spacing: var(--mm-ls-display);
text-transform: uppercase;
color: var(--mm-text);
}
.mm-map__where { font-size: var(--mm-fs-sm); color: var(--mm-text-3); }
.mm-map__consent {
max-width: 42ch;
font-size: 0.6875rem;
line-height: 1.6;
color: var(--mm-text-4);
}
.mm-map__actions {
display: flex;
flex-wrap: wrap;
gap: var(--mm-3);
justify-content: center;
}
.mm-doc {
max-width: 72ch;
font-size: var(--mm-fs-sm);
line-height: 1.85;
}
.mm-doc h2 {
font-size: var(--mm-fs-h3);
margin-top: var(--mm-8);
margin-bottom: var(--mm-4);
padding-top: var(--mm-6);
border-top: 1px solid var(--mm-line);
}
.mm-doc > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mm-doc h3 {
font-family: var(--mm-font-body);
font-size: var(--mm-fs-sm);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: none;
color: var(--mm-text);
margin-top: var(--mm-6);
margin-bottom: var(--mm-2);
}
.mm-doc p { margin-bottom: var(--mm-4); }
.mm-doc ul, .mm-doc ol { margin-bottom: var(--mm-4); padding-left: 1.3em; }
.mm-doc li { margin-bottom: var(--mm-2); }
.mm-doc li::marker { color: var(--mm-red); }
.mm-doc a {
color: var(--mm-red);
text-decoration: underline;
text-underline-offset: 3px;
}
.mm-doc a:hover { color: var(--mm-red-bright); }
.mm-doc dl {
display: grid;
grid-template-columns: minmax(140px, auto) 1fr;
gap: var(--mm-2) var(--mm-5);
margin: 0 0 var(--mm-4);
padding: var(--mm-5);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
background: var(--mm-surface);
}
.mm-doc dt { color: var(--mm-text-3); font-size: var(--mm-fs-xs); }
.mm-doc dd { margin: 0; color: var(--mm-text); }
@media (max-width: 560px) {
.mm-doc dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
.mm-doc dd { margin-bottom: var(--mm-3); }
}
.mm-doc__notice {
display: flex;
gap: var(--mm-4);
padding: var(--mm-5);
margin-bottom: var(--mm-7);
border-left: 2px solid var(--mm-warning);
border-radius: 0 var(--mm-radius) var(--mm-radius) 0;
background: rgba(245, 165, 36, 0.08);
font-size: var(--mm-fs-xs);
line-height: 1.6;
color: var(--mm-text-2);
}
.mm-doc__notice .mm-icon { color: var(--mm-warning); flex: none; margin-top: 2px; }
.mm-doc__updated {
font-size: var(--mm-fs-xs);
color: var(--mm-text-4);
margin-bottom: var(--mm-7);
}
.mm-plan {
display: flex;
flex-direction: column;
gap: var(--mm-5);
padding: var(--mm-6);
background: var(--mm-surface);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
height: 100%;
transition: border-color var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease-out-expo);
}
.mm-plan:hover { transform: translateY(-4px); border-color: var(--mm-line-strong); }
.mm-plan--featured {
border-color: var(--mm-red);
background: radial-gradient(80% 60% at 50% 0%, var(--mm-red-wash), transparent 70%), var(--mm-surface);
}
.mm-plan__name { font-size: var(--mm-fs-h4); color: var(--mm-text); }
.mm-plan__price {
font-family: var(--mm-font-display);
font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
font-weight: 300;
color: var(--mm-red);
line-height: 1;
}
.mm-plan__price small { font-size: 0.4em; color: var(--mm-text-3); letter-spacing: 0.06em; }
.mm-plan__foot { margin-top: auto; }
.mm-delivery {
position: relative;
display: grid;
grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto;
align-items: center;
gap: var(--mm-5) var(--mm-6);
min-height: 240px;
padding: var(--mm-6) clamp(200px, 23%, 300px) var(--mm-6) var(--mm-7);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
background: var(--mm-surface);
overflow: hidden;
isolation: isolate;
}
.mm-delivery__title {
font-size: clamp(1.375rem, 2vw, 2rem);
line-height: 1.1;
margin: var(--mm-3) 0 0;
}
.mm-delivery__lead {
font-size: var(--mm-fs-sm);
line-height: 1.6;
color: var(--mm-text-2);
margin-bottom: var(--mm-4);
}
.mm-delivery__carriers {
display: flex;
flex-wrap: wrap;
gap: var(--mm-2);
list-style: none;
margin: 0 0 var(--mm-4);
padding: 0;
}
.mm-delivery__carriers li {
padding: 0.3em 0.8em;
border: 1px solid var(--mm-line);
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mm-text-2);
background: rgba(255, 255, 255, 0.03);
}
.mm-delivery__price {
display: flex;
align-items: center;
gap: var(--mm-3);
font-size: var(--mm-fs-xs);
line-height: 1.5;
color: var(--mm-text-3);
margin: 0;
}
.mm-delivery__price .mm-icon { color: var(--mm-red); flex: none; }
.mm-delivery__price strong { color: var(--mm-text); font-weight: 700; }
.mm-delivery__visual {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: clamp(200px, 23%, 300px);
z-index: -1;
pointer-events: none;
}
.mm-delivery__visual img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 72% 62%;
mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}
@media (max-width: 1100px) {
.mm-delivery {
grid-template-columns: minmax(170px, auto) minmax(0, 1fr);
padding-right: clamp(180px, 22%, 260px);
}
.mm-delivery__action { grid-column: 1 / -1; }
.mm-delivery__visual { width: clamp(180px, 22%, 260px); }
}
@media (max-width: 900px) {
.mm-delivery {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
padding: var(--mm-6);
}
.mm-delivery__action .mm-btn {
width: 100%;
justify-content: center;
}
.mm-delivery__visual {
position: relative;
inset: auto;
width: auto;
height: 200px;
margin: var(--mm-2) calc(var(--mm-6) * -1) calc(var(--mm-6) * -1);
z-index: 0;
}
.mm-delivery__visual img {
object-position: 60% 55%;
mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
}
}
.mm-product {
position: relative;
display: flex;
flex-direction: column;
background: var(--mm-surface);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
overflow: hidden;
transition:
border-color var(--mm-dur) var(--mm-ease),
transform var(--mm-dur) var(--mm-ease-out-expo),
box-shadow var(--mm-dur) var(--mm-ease);
}
.mm-product:hover {
transform: translateY(-5px);
border-color: color-mix(in srgb, var(--mm-red) 45%, var(--mm-line));
box-shadow: var(--mm-shadow);
}
.mm-product__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background:
radial-gradient(90% 70% at 50% 100%, rgba(224, 27, 36, 0.16), transparent 70%),
var(--mm-surface-2);
}
.mm-product__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 900ms var(--mm-ease-out-expo);
}
.mm-product:hover .mm-product__media img { transform: scale(1.07); }
.mm-product__link { position: absolute; inset: 0; z-index: 2; }
.mm-product__badge {
position: absolute;
top: var(--mm-4);
left: var(--mm-4);
z-index: 3;
}
.mm-product__badge--sale { background: var(--mm-text); color: var(--mm-black); }
.mm-product__actions {
position: absolute;
top: var(--mm-4);
right: var(--mm-4);
z-index: 3;
display: flex;
flex-direction: column;
gap: var(--mm-2);
opacity: 0;
transform: translateX(12px);
transition: opacity var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease-out-expo);
}
.mm-product:hover .mm-product__actions,
.mm-product:focus-within .mm-product__actions { opacity: 1; transform: none; }
.mm-product__actions .mm-iconbtn {
width: 38px;
height: 38px;
background: rgba(5, 5, 6, 0.7);
backdrop-filter: blur(8px);
}
@media (hover: none) {
.mm-product__actions { opacity: 1; transform: none; }
}
.mm-product__body {
display: flex;
flex-direction: column;
gap: var(--mm-2);
padding: var(--mm-5);
flex: 1;
}
.mm-product__cat {
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mm-text-4);
}
.mm-product__title {
font-size: 1.0625rem;
font-family: var(--mm-font-display);
font-weight: 400;
letter-spacing: 0.03em;
text-transform: none;
color: var(--mm-text);
line-height: 1.25;
}
.mm-product__price {
font-family: var(--mm-font-display);
font-size: 1.125rem;
font-weight: 400;
color: var(--mm-red);
letter-spacing: 0.02em;
}
.mm-product__price del { color: var(--mm-text-4); font-size: 0.875em; margin-right: var(--mm-2); }
.mm-product__price ins { text-decoration: none; }
.mm-product__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mm-3);
margin-top: auto;
padding-top: var(--mm-4);
border-top: 1px solid var(--mm-line);
}
.mm-product__note { font-size: 0.6875rem; color: var(--mm-text-4); }
.mm-product__foot .mm-iconbtn {
position: relative;
z-index: 3;
width: 38px;
height: 38px;
}
.mm-product__foot .mm-iconbtn:hover { background: var(--mm-red); color: #fff; border-color: var(--mm-red); }
.mm-product--out .mm-product__media img { filter: grayscale(1) brightness(0.6); }
.mm-product__soldout {
position: absolute;
inset: auto 0 0 0;
z-index: 3;
padding: var(--mm-2);
background: rgba(5, 5, 6, 0.86);
text-align: center;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mm-text-2);
}
.mm-collection {
position: relative;
display: block;
overflow: hidden;
border-radius: var(--mm-radius);
aspect-ratio: 4 / 5;
background: var(--mm-surface-2);
}
.mm-collection img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(1);
transition: transform 1000ms var(--mm-ease-out-expo), filter var(--mm-dur-slow) var(--mm-ease);
}
.mm-collection:hover img { transform: scale(1.07); filter: brightness(1); }
.mm-collection::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(5, 5, 6, 0.94) 100%);
}
.mm-collection__body {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: var(--mm-5);
}
.mm-collection__title {
font-size: var(--mm-fs-h4);
color: var(--mm-text);
margin-bottom: var(--mm-1);
}
.mm-collection__count {
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mm-text-3);
}
.mm-collection__body::before {
content: "";
position: absolute;
left: var(--mm-5);
right: var(--mm-5);
bottom: 0;
height: 2px;
background: var(--mm-red);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--mm-dur-slow) var(--mm-ease-out-expo);
}
.mm-collection:hover .mm-collection__body::before { transform: scaleX(1); }
.mm-shopbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--mm-4);
padding-block: var(--mm-4);
border-block: 1px solid var(--mm-line);
margin-bottom: var(--mm-7);
}
.mm-shopbar__count { font-size: var(--mm-fs-xs); color: var(--mm-text-3); }
.mm-shopbar__tools { display: flex; align-items: center; gap: var(--mm-3); }
.mm-shopbar__tools .mm-select { width: auto; min-width: 190px; padding-block: 0.6875rem; }
.mm-single {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(var(--mm-6), 4vw, var(--mm-9));
align-items: start;
}
@media (max-width: 900px) {
.mm-single { grid-template-columns: minmax(0, 1fr); }
}
.mm-gallery { display: flex; flex-direction: column; gap: var(--mm-3); }
.mm-gallery__main {
position: relative;
overflow: hidden;
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
background:
radial-gradient(80% 60% at 50% 100%, rgba(224, 27, 36, 0.15), transparent 70%),
var(--mm-surface-2);
aspect-ratio: 4 / 5;
}
.mm-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.mm-gallery__thumbs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--mm-3);
}
.mm-gallery__thumb {
position: relative;
padding: 0;
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
overflow: hidden;
background: var(--mm-surface-2);
cursor: pointer;
aspect-ratio: 1 / 1;
transition: border-color var(--mm-dur-fast) var(--mm-ease), opacity var(--mm-dur-fast) var(--mm-ease);
opacity: 0.6;
}
.mm-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mm-gallery__thumb:hover { opacity: 1; }
.mm-gallery__thumb[aria-current="true"] { border-color: var(--mm-red); opacity: 1; }
.mm-summary { display: flex; flex-direction: column; gap: var(--mm-5); }
.mm-summary__title { font-size: var(--mm-fs-h2); }
.mm-summary__price {
font-family: var(--mm-font-display);
font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
font-weight: 300;
color: var(--mm-red);
line-height: 1;
}
.mm-summary__excerpt { font-size: var(--mm-fs-sm); line-height: 1.75; color: var(--mm-text-2); }
.mm-summary__meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
gap: var(--mm-4);
padding-block: var(--mm-5);
border-block: 1px solid var(--mm-line);
}
.mm-summary__metaitem { display: flex; flex-direction: column; gap: var(--mm-1); }
.mm-summary__metalabel {
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mm-text-4);
}
.mm-summary__metavalue { font-size: var(--mm-fs-sm); color: var(--mm-text); }
.mm-swatches { display: flex; flex-wrap: wrap; gap: var(--mm-2); }
.mm-swatch {
padding: 0.6875rem var(--mm-4);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
background: none;
color: var(--mm-text-2);
font-family: var(--mm-font-body);
font-size: var(--mm-fs-xs);
font-weight: 600;
letter-spacing: 0.06em;
cursor: pointer;
transition: border-color var(--mm-dur-fast) var(--mm-ease), color var(--mm-dur-fast) var(--mm-ease), background var(--mm-dur-fast) var(--mm-ease);
}
.mm-swatch:hover { color: var(--mm-text); border-color: var(--mm-line-strong); }
.mm-swatch[aria-pressed="true"] {
color: var(--mm-text);
border-color: var(--mm-red);
background: var(--mm-red-wash);
}
.mm-buy { display: flex; flex-wrap: wrap; gap: var(--mm-3); }
.mm-qty {
display: flex;
align-items: center;
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
overflow: hidden;
flex: none;
}
.mm-qty button {
width: 46px;
height: 52px;
border: 0;
background: none;
color: var(--mm-text-2);
font-size: 1.125rem;
cursor: pointer;
transition: background var(--mm-dur-fast) var(--mm-ease), color var(--mm-dur-fast) var(--mm-ease);
}
.mm-qty button:hover { background: rgba(255, 255, 255, 0.06); color: var(--mm-text); }
.mm-qty input {
width: 48px;
height: 52px;
border: 0;
border-inline: 1px solid var(--mm-line);
background: none;
color: var(--mm-text);
text-align: center;
font-family: var(--mm-font-body);
font-size: var(--mm-fs-sm);
-moz-appearance: textfield;
}
.mm-qty input::-webkit-outer-spin-button,
.mm-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mm-buy .mm-btn { flex: 1 1 220px; }
.mm-assure {
display: flex;
flex-direction: column;
gap: var(--mm-3);
list-style: none;
margin: 0;
padding: 0;
}
.mm-assure li {
display: flex;
align-items: center;
gap: var(--mm-3);
margin: 0;
font-size: var(--mm-fs-xs);
color: var(--mm-text-3);
}
.mm-assure .mm-icon { color: var(--mm-red); }
.mm-cart {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
gap: clamp(var(--mm-6), 3vw, var(--mm-8));
align-items: start;
}
@media (max-width: 900px) { .mm-cart { grid-template-columns: minmax(0, 1fr); } }
.mm-cartline {
display: grid;
grid-template-columns: 92px minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--mm-4);
padding-block: var(--mm-5);
border-bottom: 1px solid var(--mm-line);
}
.mm-cartline:first-child { border-top: 1px solid var(--mm-line); }
.mm-cartline__media {
aspect-ratio: 1 / 1;
border-radius: var(--mm-radius);
overflow: hidden;
background: var(--mm-surface-2);
}
.mm-cartline__media img { width: 100%; height: 100%; object-fit: cover; }
.mm-cartline__title { font-size: var(--mm-fs-sm); color: var(--mm-text); margin-bottom: var(--mm-1); }
.mm-cartline__variant { font-size: 0.6875rem; color: var(--mm-text-4); }
.mm-cartline__price {
font-family: var(--mm-font-display);
font-size: 1.125rem;
color: var(--mm-text);
white-space: nowrap;
}
@media (max-width: 620px) {
.mm-cartline { grid-template-columns: 72px minmax(0, 1fr) auto; }
.mm-cartline__price { grid-column: 2 / -1; }
}
.mm-ordersum {
position: sticky;
top: calc(var(--mm-header-h) + var(--mm-5));
display: flex;
flex-direction: column;
gap: var(--mm-4);
padding: var(--mm-6);
background: var(--mm-surface);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
}
.mm-ordersum__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--mm-4);
font-size: var(--mm-fs-sm);
color: var(--mm-text-3);
}
.mm-ordersum__row strong { color: var(--mm-text); }
.mm-ordersum__total {
padding-top: var(--mm-4);
border-top: 1px solid var(--mm-line);
font-family: var(--mm-font-display);
font-size: var(--mm-fs-h4);
color: var(--mm-text);
}
.mm-ordersum__total span:last-child { color: var(--mm-red); }
.mm-quickview {
position: fixed;
inset: 0;
z-index: var(--mm-z-modal);
display: grid;
place-items: center;
padding: var(--mm-gutter);
background: rgba(4, 4, 5, 0.9);
backdrop-filter: blur(12px);
opacity: 0;
visibility: hidden;
transition: opacity var(--mm-dur) var(--mm-ease), visibility var(--mm-dur);
}
.mm-quickview.is-open { opacity: 1; visibility: visible; }
.mm-quickview__panel {
position: relative;
width: min(960px, 100%);
max-height: 88vh;
overflow-y: auto;
padding: clamp(var(--mm-5), 3vw, var(--mm-8));
background: var(--mm-surface);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
transform: translateY(18px) scale(0.98);
transition: transform var(--mm-dur-slow) var(--mm-ease-out-expo);
}
.mm-quickview.is-open .mm-quickview__panel { transform: none; }
.mm-quickview__close { position: absolute; top: var(--mm-4); right: var(--mm-4); z-index: 2; }
.mm-wc { max-width: 1100px; }
.mm-wc .u-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
gap: var(--mm-6);
}
.mm-wc form.login,
.mm-wc form.register,
.mm-wc form.lost_reset_password {
max-width: 440px;
padding: var(--mm-6);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
background: var(--mm-surface);
}
.mm-wc .woocommerce-LostPassword { margin: var(--mm-4) 0 0; }
.mm-wc .woocommerce-LostPassword a { color: var(--mm-text-3); }
.mm-wc .woocommerce-LostPassword a:hover { color: var(--mm-red); }
.mm-wc .woocommerce form .form-row input[type="checkbox"] {
width: 16px;
min-width: 16px;
height: 16px;
margin: 0;
padding: 0;
accent-color: var(--mm-red);
}
.mm-wc .woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--mm-2);
text-transform: none;
letter-spacing: 0;
font-size: var(--mm-fs-sm);
color: var(--mm-text-2);
cursor: pointer;
}
.mm-wc .woocommerce form .form-row button[type="submit"] { justify-self: start; }
.mm-wc .password-input {
position: relative;
display: block;
width: 100%;
}
.mm-wc .show-password-input {
position: absolute;
top: 50%;
right: var(--mm-3);
transform: translateY(-50%);
width: 22px;
height: 22px;
padding: 0;
border: 0;
background: none;
color: var(--mm-text-4);
cursor: pointer;
}
.mm-wc .show-password-input::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: currentColor;
-webkit-mask: no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");
mask: no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");
}
.mm-wc .show-password-input:hover { color: var(--mm-text); }
.mm-wc .woocommerce-MyAccount-navigation { margin-bottom: var(--mm-5); }
.mm-wc .woocommerce-MyAccount-navigation ul {
display: flex;
flex-wrap: wrap;
gap: var(--mm-2);
margin: 0;
padding: 0;
list-style: none;
}
.mm-wc .woocommerce-MyAccount-navigation li a {
display: block;
padding: 0.6rem var(--mm-4);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
color: var(--mm-text-3);
font-size: var(--mm-fs-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
}
.mm-wc .woocommerce-MyAccount-navigation li a:hover {
border-color: var(--mm-line-strong);
color: var(--mm-text);
}
.mm-wc .woocommerce-MyAccount-navigation li.is-active a {
border-color: var(--mm-red);
color: var(--mm-text);
}
@media (min-width: 60rem) {
.mm-wc .woocommerce-MyAccount-navigation {
float: left;
width: 22%;
margin-bottom: 0;
}
.mm-wc .woocommerce-MyAccount-navigation ul { flex-direction: column; }
.mm-wc .woocommerce-MyAccount-content { float: right; width: 74%; }
.mm-wc .woocommerce::after { content: ""; display: table; clear: both; }
}
.mm-wc h2 { margin-bottom: var(--mm-4); }
.mm-notice {
margin: 0;
padding: var(--mm-4) var(--mm-5);
border: 1px solid var(--mm-line);
border-left: 3px solid var(--mm-text-3);
border-radius: var(--mm-radius-sm);
background: var(--mm-surface-2);
font-size: var(--mm-fs-sm);
line-height: var(--mm-lh-body);
color: var(--mm-text-2);
}
.mm-notice--ok {
border-left-color: var(--mm-success);
color: var(--mm-text);
}
.mm-notice--klaida {
border-left-color: var(--mm-danger);
color: var(--mm-text);
}
.mm-prose {
max-width: var(--mm-maxw-text);
font-size: var(--mm-fs-body);
line-height: var(--mm-lh-body);
color: var(--mm-text-2);
}
.mm-prose > * + * { margin-top: var(--mm-5); }
.mm-prose h2,
.mm-prose h3,
.mm-prose h4 {
margin-top: var(--mm-8);
color: var(--mm-text);
font-family: var(--mm-font-display);
text-transform: uppercase;
letter-spacing: var(--mm-ls-display);
line-height: var(--mm-lh-tight);
}
.mm-prose h2 { font-size: var(--mm-fs-h3); }
.mm-prose h3 { font-size: var(--mm-fs-h4); }
.mm-prose h4 { font-size: var(--mm-fs-lead); }
.mm-prose h2:first-child,
.mm-prose h3:first-child { margin-top: 0; }
.mm-prose a {
color: var(--mm-text);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--mm-red);
transition: color var(--mm-dur) var(--mm-ease);
}
.mm-prose a:hover { color: var(--mm-red-bright); }
.mm-prose ul,
.mm-prose ol { padding-left: var(--mm-5); }
.mm-prose li + li { margin-top: var(--mm-2); }
.mm-prose ul { list-style: disc; }
.mm-prose ol { list-style: decimal; }
.mm-prose strong { color: var(--mm-text); font-weight: 600; }
.mm-prose blockquote {
margin: 0;
padding-left: var(--mm-5);
border-left: 2px solid var(--mm-red);
color: var(--mm-text);
font-size: var(--mm-fs-lead);
font-style: italic;
}
.mm-prose code,
.mm-prose kbd {
padding: 0.15em 0.4em;
border-radius: var(--mm-radius-sm);
background: var(--mm-surface-3);
font-family: var(--mm-font-mono);
font-size: 0.9em;
}
.mm-prose pre {
overflow-x: auto;
padding: var(--mm-5);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
background: var(--mm-surface);
}
.mm-prose pre code { padding: 0; background: none; }
.mm-prose img,
.mm-prose figure img {
max-width: 100%;
height: auto;
border-radius: var(--mm-radius);
}
.mm-prose figcaption {
margin-top: var(--mm-2);
color: var(--mm-text-4);
font-size: var(--mm-fs-xs);
}
.mm-prose table {
display: block;
width: 100%;
overflow-x: auto;
border-collapse: collapse;
font-size: var(--mm-fs-sm);
}
.mm-prose th,
.mm-prose td {
padding: var(--mm-3) var(--mm-4);
border: 1px solid var(--mm-line);
text-align: left;
}
.mm-prose th { color: var(--mm-text); background: var(--mm-surface-2); }
.mm-prose hr {
border: 0;
border-top: 1px solid var(--mm-line);
}
.mm-prose .alignwide { width: min(100%, 1100px); margin-inline: auto; }
.mm-prose .alignfull { width: 100%; }
.mm-prose .aligncenter { display: block; margin-inline: auto; }
.mm-prose .alignleft { float: left; margin: 0 var(--mm-5) var(--mm-4) 0; }
.mm-prose .alignright { float: right; margin: 0 0 var(--mm-4) var(--mm-5); }
@media (max-width: 560px) {
.mm-prose .alignleft,
.mm-prose .alignright { float: none; margin: 0; }
}
.mm-tags {
display: flex;
flex-wrap: wrap;
gap: var(--mm-2);
margin-top: var(--mm-7);
padding-top: var(--mm-5);
border-top: 1px solid var(--mm-line);
}
.mm-tags a {
padding: 0.35em 0.8em;
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius-pill);
color: var(--mm-text-3);
font-size: var(--mm-fs-xs);
text-transform: uppercase;
letter-spacing: var(--mm-ls-eyebrow);
transition: color var(--mm-dur) var(--mm-ease), border-color var(--mm-dur) var(--mm-ease);
}
.mm-tags a:hover { color: var(--mm-text); border-color: var(--mm-red); }
.mm-pagination {
display: flex;
justify-content: center;
margin-top: var(--mm-9);
}
.mm-pagination .nav-links {
display: flex;
flex-wrap: wrap;
gap: var(--mm-2);
align-items: center;
}
.mm-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding-inline: var(--mm-3);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius-sm);
color: var(--mm-text-3);
font-family: var(--mm-font-mono);
font-size: var(--mm-fs-sm);
transition: color var(--mm-dur) var(--mm-ease), border-color var(--mm-dur) var(--mm-ease);
}
.mm-pagination .page-numbers:hover { color: var(--mm-text); border-color: var(--mm-line-strong); }
.mm-pagination .page-numbers.current {
border-color: var(--mm-red);
background: var(--mm-red);
color: #fff;
}
.mm-pagination .dots { border-color: transparent; }
.mm-postnav {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: var(--mm-4);
}
.mm-postnav__link {
display: block;
padding: var(--mm-5);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
color: var(--mm-text);
transition: border-color var(--mm-dur) var(--mm-ease), background var(--mm-dur) var(--mm-ease);
}
.mm-postnav__link:hover { border-color: var(--mm-red); background: var(--mm-surface); }
.mm-postnav__link--next { text-align: right; }
.mm-postnav__link .mm-eyebrow { display: block; margin-bottom: var(--mm-2); }
.mm-search {
display: flex;
gap: var(--mm-2);
max-width: 460px;
margin-top: var(--mm-6);
}
.mm-search .mm-input { flex: 1 1 auto; min-width: 0; }
.mm-widget + .mm-widget { margin-top: var(--mm-4); }
.mm-widget__title {
margin-bottom: var(--mm-3);
font-family: var(--mm-font-display);
font-size: var(--mm-fs-h4);
text-transform: uppercase;
letter-spacing: var(--mm-ls-display);
color: var(--mm-text);
}
.mm-widget ul { display: grid; gap: var(--mm-2); }
.mm-widget a { color: var(--mm-text-3); font-size: var(--mm-fs-sm); }
.mm-widget a:hover { color: var(--mm-text); }
.mm-comments { margin-top: var(--mm-8); }
.comment-list { display: grid; gap: var(--mm-5); }
.comment-list ol.children { margin-top: var(--mm-5); padding-left: var(--mm-6); }
.comment-body {
padding: var(--mm-5);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
background: var(--mm-surface);
}
.comment-author img { border-radius: 50%; }
.comment-metadata { color: var(--mm-text-4); font-size: var(--mm-fs-xs); }
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.screen-reader-text:focus {
z-index: var(--mm-z-modal);
top: var(--mm-3);
left: var(--mm-3);
width: auto;
height: auto;
padding: var(--mm-3) var(--mm-4);
clip: auto;
clip-path: none;
background: var(--mm-surface);
color: var(--mm-text);
}
.mm-shoplayout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--mm-7);
}
@media (min-width: 1024px) {
.mm-shoplayout { grid-template-columns: minmax(0, 1fr) 280px; }
}
.mm-shoplayout__side { display: grid; align-content: start; gap: var(--mm-4); }
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notice {
margin: 0 0 var(--mm-5);
padding: var(--mm-4) var(--mm-5);
border: 1px solid var(--mm-line);
border-left: 3px solid var(--mm-text-3);
border-radius: var(--mm-radius-sm);
background: var(--mm-surface-2);
list-style: none;
font-size: var(--mm-fs-sm);
color: var(--mm-text-2);
}
.woocommerce-message { border-left-color: var(--mm-success); }
.woocommerce-error { border-left-color: var(--mm-danger); }
.woocommerce-info { border-left-color: var(--mm-red); }
.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a { color: var(--mm-text); text-decoration: underline; }
.woocommerce table.shop_table,
.woocommerce table.shop_attributes {
width: 100%;
border-collapse: collapse;
font-size: var(--mm-fs-sm);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
padding: var(--mm-4);
border-bottom: 1px solid var(--mm-line);
text-align: left;
vertical-align: middle;
}
.woocommerce table.shop_table th { color: var(--mm-text); }
.woocommerce table.shop_table img { width: 64px; height: auto; border-radius: var(--mm-radius-sm); }
.woocommerce div.product {
display: grid;
gap: clamp(var(--mm-6), 4vw, var(--mm-10));
}
@media (min-width: 900px) {
.woocommerce div.product {
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
align-items: start;
}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells { grid-column: 1 / -1; }
}
.woocommerce div.product .product_title {
font-family: var(--mm-font-display);
font-size: var(--mm-fs-h2);
text-transform: uppercase;
letter-spacing: var(--mm-ls-display);
line-height: var(--mm-lh-tight);
color: var(--mm-text);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
font-family: var(--mm-font-mono);
font-size: var(--mm-fs-h4);
color: var(--mm-text);
}
.woocommerce div.product del { opacity: 0.5; }
.woocommerce div.product ins { text-decoration: none; color: var(--mm-red-bright); }
.woocommerce div.product img { border-radius: var(--mm-radius); }
.woocommerce div.product form.cart {
display: flex;
flex-wrap: wrap;
gap: var(--mm-3);
align-items: center;
margin-block: var(--mm-5);
}
.woocommerce .quantity input {
width: 84px;
padding: 0.7em;
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius-sm);
background: var(--mm-surface);
color: var(--mm-text);
font-family: var(--mm-font-mono);
text-align: center;
}
.woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: wrap;
gap: var(--mm-2);
margin-bottom: var(--mm-5);
padding: 0;
border-bottom: 1px solid var(--mm-line);
list-style: none;
}
.woocommerce-tabs ul.tabs a {
display: block;
padding: var(--mm-3) var(--mm-4);
color: var(--mm-text-3);
font-size: var(--mm-fs-sm);
text-transform: uppercase;
letter-spacing: var(--mm-ls-eyebrow);
}
.woocommerce-tabs ul.tabs li.active a {
color: var(--mm-text);
box-shadow: inset 0 -2px 0 var(--mm-red);
}
.woocommerce .button:not(.mm-btn):not(.mm-iconbtn) {
display: inline-flex;
align-items: center;
gap: var(--mm-2);
padding: 0.9em 1.6em;
border: 1px solid var(--mm-line-strong);
border-radius: var(--mm-radius-pill);
background: transparent;
color: var(--mm-text);
font-family: var(--mm-font-display);
font-size: var(--mm-fs-sm);
text-transform: uppercase;
letter-spacing: var(--mm-ls-button);
cursor: pointer;
transition: background var(--mm-dur) var(--mm-ease), border-color var(--mm-dur) var(--mm-ease);
}
.woocommerce .button:not(.mm-btn):not(.mm-iconbtn):hover {
border-color: var(--mm-red);
background: var(--mm-red);
color: #fff;
}
.woocommerce .button.alt,
.woocommerce #place_order {
border-color: var(--mm-red);
background: var(--mm-red);
color: #fff;
}
.woocommerce form .form-row { display: grid; gap: var(--mm-2); margin-bottom: var(--mm-4); }
.woocommerce form .form-row label { font-size: var(--mm-fs-xs); text-transform: uppercase; letter-spacing: var(--mm-ls-eyebrow); color: var(--mm-text-3); }
.woocommerce form .form-row input,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection {
width: 100%;
padding: 0.85em 1em;
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius-sm);
background: var(--mm-surface);
color: var(--mm-text);
font: inherit;
}
.woocommerce form .form-row input:focus-visible,
.woocommerce form .form-row textarea:focus-visible {
outline: 2px solid var(--mm-red);
outline-offset: 2px;
}
#payment ul.payment_methods {
padding: 0;
list-style: none;
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius);
}
#payment ul.payment_methods li { padding: var(--mm-4); border-bottom: 1px solid var(--mm-line); }
#payment ul.payment_methods li:last-child { border-bottom: 0; }
.woocommerce nav.woocommerce-pagination { display: flex; justify-content: center; margin-top: var(--mm-9); }
.woocommerce nav.woocommerce-pagination ul { display: flex; flex-wrap: wrap; gap: var(--mm-2); padding: 0; list-style: none; border: 0; }
.woocommerce nav.woocommerce-pagination a,
.woocommerce nav.woocommerce-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding-inline: var(--mm-3);
border: 1px solid var(--mm-line);
border-radius: var(--mm-radius-sm);
color: var(--mm-text-3);
font-family: var(--mm-font-mono);
font-size: var(--mm-fs-sm);
}
.woocommerce nav.woocommerce-pagination span.current {
border-color: var(--mm-red);
background: var(--mm-red);
color: #fff;
}
body.admin-bar .mm-header { top: 32px; }
body.admin-bar .mm-drawer { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar .mm-header { top: 46px; }
body.admin-bar .mm-drawer { top: 46px; }
}