.mm-container { width: 100%; max-width: var(--mm-container); margin-inline: auto; padding-inline: var(--mm-container-pad); } .mm-section { padding-block: var(--mm-space-12); } .mm-section--soft { background: var(--mm-surface-soft); } .mm-site { display: flex; flex-direction: column; min-height: 100vh; } .mm-main { flex: 1 0 auto; background: var(--mm-surface); } .mm-header { position: relative; z-index: 20; padding-block: var(--mm-space-4); } .mm-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--mm-space-6); } .mm-header--overlay { position: absolute; inset-inline: 0; top: 0; background: transparent; color: var(--mm-white); } .admin-bar .mm-header--overlay { top: 32px; } @media (max-width: 782px) { .admin-bar .mm-header--overlay { top: 46px; } } .mm-header--solid { background: var(--mm-primary); color: var(--mm-white); } .mm-header a { color: inherit; } .mm-brand { display: inline-flex; align-items: center; gap: var(--mm-space-2); flex: none; } .mm-brand__logo { flex: none; display: inline-flex; align-items: center; } .mm-brand__logo img, .mm-brand__logo svg { max-height: 48px; width: auto; } .mm-brand__logo--default svg { width: 44px; height: 44px; color: currentColor; } .mm-brand__logo--duo .mm-brand__logo-dark { display: none; } .mm-header--overlay .mm-brand__logo--duo .mm-brand__logo-light { display: none; } .mm-header--overlay .mm-brand__logo--duo .mm-brand__logo-dark { display: inline-block; } .mm-header__account svg { width: 48px; height: 48px; } .mm-brand__text { display: flex; flex-direction: column; line-height: 1.2; text-align: right; } .mm-brand__name { font-size: var(--mm-fs-base); font-weight: var(--mm-fw-bold); } .mm-brand__tagline { font-size: 12px; font-weight: var(--mm-fw-light); line-height: 16px; opacity: .75; } .mm-header .mm-btn { height: 48px; padding-block: 0; padding-inline: 32px; border-radius: var(--mm-radius-lg); font-size: var(--mm-fs-base); font-weight: var(--mm-fw-regular); line-height: 24px; } .mm-nav { flex: 1 1 auto; display: flex; justify-content: flex-start; padding-inline-start: var(--mm-space-8); } .mm-nav__list { display: flex; align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none; } .mm-nav__list > li { position: relative; display: flex; } .mm-nav__list > li + li { margin-inline-start: var(--mm-space-3); padding-inline-start: var(--mm-space-3); } .mm-nav__list > li + li::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 40px; background: var(--mm-border-on-dark); pointer-events: none; } .mm-nav__list > li > a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mm-space-1); min-width: 5rem; padding: var(--mm-space-1) var(--mm-space-2); font-size: var(--mm-fs-sm); white-space: nowrap; opacity: .92; } .mm-nav__list > li > a:hover, .mm-nav__list > li.current-menu-item > a { opacity: 1; } .mm-nav__icon { width: 24px; height: 24px; } .mm-nav .sub-menu { position: absolute; top: 100%; inset-inline-start: 0; min-width: 12rem; margin: 0; padding: var(--mm-space-2); list-style: none; background: var(--mm-surface); border-radius: var(--mm-radius-md); box-shadow: var(--mm-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--mm-transition), transform var(--mm-transition), visibility var(--mm-transition); } .mm-nav li:hover > .sub-menu, .mm-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .mm-nav .sub-menu a { display: block; padding: var(--mm-space-2) var(--mm-space-3); border-radius: var(--mm-radius-sm); color: var(--mm-text); font-size: var(--mm-fs-sm); } .mm-nav .sub-menu a:hover { background: var(--mm-surface-soft); color: var(--mm-primary); } .mm-header__actions { display: flex; flex-direction: row-reverse; align-items: center; gap: var(--mm-space-6); flex: none; } .mm-header__account { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--mm-radius-full); } .mm-header__account:hover { background: rgba(255, 255, 255, .12); } .mm-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid var(--mm-border-on-dark); border-radius: var(--mm-radius-md); color: inherit; cursor: pointer; } .mm-burger__bar, .mm-burger__bar::before, .mm-burger__bar::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--mm-transition), opacity var(--mm-transition); } .mm-burger__bar { position: relative; } .mm-burger__bar::before, .mm-burger__bar::after { content: ''; position: absolute; inset-inline-start: 0; } .mm-burger__bar::before { top: -6px; } .mm-burger__bar::after { top: 6px; } .mm-header.is-open .mm-burger__bar { background: transparent; } .mm-header.is-open .mm-burger__bar::before { transform: translateY(6px) rotate(45deg); } .mm-header.is-open .mm-burger__bar::after { transform: translateY(-6px) rotate(-45deg); } .mm-footer { background: var(--mm-primary); color: var(--mm-text-on-dark); font-size: 16px; line-height: 24px; } .mm-footer .mm-brand__name { font-size: 16px; font-weight: var(--mm-fw-extrabold); line-height: 24px; } .mm-footer .mm-brand__tagline { font-size: 12px; font-weight: var(--mm-fw-light); line-height: 16px; opacity: 1; } .mm-footer a { color: inherit; opacity: .85; } .mm-footer a:hover { color: var(--mm-white); opacity: 1; } .mm-footer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--mm-space-6); flex-wrap: wrap; min-height: 44px; padding-block: 24px; border-bottom: 1px solid var(--mm-border-on-dark); } .mm-footer__bar-menu { display: flex; flex-wrap: wrap; gap: 32px; margin: 0; padding: 0; list-style: none; } .mm-footer__bar-menu a { font-size: 16px; font-weight: var(--mm-fw-semibold); line-height: 24px; opacity: 1; } .mm-footer__about { padding-block: var(--mm-space-6); border-bottom: 1px solid var(--mm-border-on-dark); } .mm-footer__about p { margin: 0; font-size: 16px; font-weight: var(--mm-fw-regular); line-height: 28px; color: var(--mm-white); text-align: justify; } .mm-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mm-space-8); padding-block: var(--mm-space-8); } .mm-footer__col-title, .mm-footer__about h2 { position: relative; margin-bottom: 14px; font-size: 20px; font-weight: var(--mm-fw-semibold); line-height: 32px; } .mm-footer__col-title::after, .mm-footer__about h2::after { content: ''; position: absolute; inset-inline-start: 0; top: 32px; width: 24px; height: 2px; border-radius: 20px; background: var(--mm-accent); } .mm-footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; } .mm-footer__list a { display: inline-block; font-size: 16px; font-weight: var(--mm-fw-regular); line-height: 24px; color: var(--mm-white); opacity: 1; transition: color var(--mm-transition), transform var(--mm-transition); } .mm-footer__list a:hover, .mm-footer__list a:focus-visible { color: var(--mm-accent); transform: translateX(-4px); } .mm-footer__list a::before { transition: background-color var(--mm-transition); } .mm-footer__list a:hover::before, .mm-footer__list a:focus-visible::before { background: var(--mm-accent); } .mm-footer__list a::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-inline-end: 8px; border-radius: 50%; background: currentColor; vertical-align: middle; opacity: 1; } .mm-footer__contact { display: grid; gap: 16px; } .mm-footer__contact-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--mm-space-2); font-size: 16px; line-height: 24px; } .mm-footer__contact-label { display: inline-flex; align-items: center; gap: var(--mm-space-2); flex: none; font-weight: var(--mm-fw-semibold); } .mm-footer__contact-value { font-weight: var(--mm-fw-regular); color: var(--mm-white); opacity: 1; transition: color var(--mm-transition); } a.mm-footer__contact-value:hover, a.mm-footer__contact-value:focus-visible { color: var(--mm-accent); } .mm-footer__contact-address { width: 100%; font-size: 12px; line-height: 16px; text-align: start; } .mm-footer__contact-row svg, .mm-footer__contact-row img { width: 30px; height: 30px; flex: none; } .mm-footer__trust { display: flex; flex-wrap: wrap; gap: var(--mm-space-3); } .mm-footer__trust { gap: 20px; } .mm-footer__trust img { width: 80px; height: 90px; object-fit: contain; background: var(--mm-white); border-radius: var(--mm-radius-md); padding: 10px; } .mm-footer__social { display: flex; gap: 16px; margin-top: var(--mm-space-5); } .mm-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; } .mm-footer__social a:hover { opacity: .8; } .mm-footer__social svg, .mm-footer__social img { width: 24px; height: 24px; } .mm-footer__bottom { padding-block: var(--mm-space-4); border-top: 1px solid var(--mm-border-on-dark); text-align: center; color: var(--mm-text-on-dark-muted); font-size: var(--mm-fs-xs); } @media (max-width: 1200px) { .mm-nav__list > li > a { min-width: 4.25rem; font-size: var(--mm-fs-xs); } } @media (max-width: 1100px) { .mm-header__actions .mm-btn--ghost-light { display: none; } } @media (max-width: 992px) { .mm-burger { display: inline-flex; } .mm-nav { position: absolute; inset-inline: var(--mm-container-pad); top: calc(100% + var(--mm-space-2)); display: none; padding: var(--mm-space-3); background: var(--mm-surface); border-radius: var(--mm-radius-lg); box-shadow: var(--mm-shadow-lg); } .mm-header.is-open .mm-nav { display: block; } .mm-nav__list { flex-direction: column; width: 100%; } .mm-nav__list > li + li { border-top: 1px solid var(--mm-border); margin-inline-start: 0; padding-inline-start: 0; } .mm-nav__list > li + li::before { content: none; } .mm-nav__list > li > a { flex-direction: row; justify-content: flex-start; gap: var(--mm-space-3); width: 100%; padding: var(--mm-space-3); color: var(--mm-text); font-size: var(--mm-fs-base); } .mm-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding-inline-start: var(--mm-space-4); } .mm-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .mm-section { padding-block: var(--mm-space-8); } .mm-header__actions .mm-btn { display: none; } .mm-footer__cols { grid-template-columns: minmax(0, 1fr); gap: var(--mm-space-6); } .mm-footer__bar { justify-content: center; } }