@font-face { font-family: Sailec; font-weight: normal; src: url('/fonts/5472499/22771bcc-8fbd-411f-b730-9a43197afb95.woff2') format('woff2'); font-display: swap; } @font-face { font-family: Sailec; font-weight: 500; src: url('/fonts/5472507/a1b501c6-02c3-4270-abed-64bb4b8ce257.woff2') format('woff2'); font-display: swap; } @font-face { font-display: block; font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local('Material Icons'), local('MaterialIcons-Regular'), url(/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2) format('woff2'); } :root { --border-radius: 4px; --border-radius-lg: 8px; --background: #fff; --disabled: rgba(63, 60, 83, 0.16); --gradient-fade: linear-gradient(180deg, rgba(63, 60, 83, 0) 0%, rgba(63, 60, 83, 0.7) 100%); --gradient-light: linear-gradient(to right, #ffebef 0%, #edebff 100%); --gradient-medium: linear-gradient(121.95deg, #f59dba 0%, #a89df5 99.49%); --gradient-product-promo: linear-gradient(152.95deg, #d3ccff 19.87%, #ffb8cf 80.24%); --on-dark-default: rgba(246, 245, 255, 0.7); --on-dark-hover: rgba(246, 245, 255, 1); --on-dark-pressed: rgba(246, 245, 255, 1); --primary: #494080; --primary-button-hover: #6e5ed6; --primary-dark: #3f3c53; --primary-default: rgba(246, 245, 255, 1); --primary-hover: #edebff; --primary-light: #edebff; --primary-link: #6457bd; --primary-link-hover: #3f3c53; --primary-link-pressed: #3f3c53; --primary-neutral: #9290a3; --primary-pressed: rgb(228, 224, 255); --secondary: #f05675; --secondary-hover: #e04d69; --secondary-pressed: #d0445d; --status-action: var(--primary-link); --status-error: #eb5e5e; --status-success: #5fb85f; --nav-height-m: 84px; --nav-height-s: 56px; --nav-height-xs: 56px; --page-max-width: 1032px; --on-dark-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1); --shadow-default: 0px 2px 24px rgba(62, 59, 82, 0.16); --shadow-hover: 0px 2px 8px rgba(62, 59, 82, 0.2); --font-family: Sailec, 'Helvetica', 'Arial', sans-serif; --font-heavier-weight: 500; --font-lighter-weight: normal; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { max-width: 100vw; } body { background: var(--background); font-size: 16px; -webkit-font-smoothing: antialiased; line-height: 1.5; -webkit-text-size-adjust: 100%; } body.fixed { position: fixed; overflow: hidden; width: 100%; } body, h1, h2, h3, h4, h5, h6, p, p a, ol, ul { font-family: var(--font-family); font-weight: var(--font-lighter-weight); margin: 0; padding: 0; } input, select, textarea, button { font-family: inherit; } h1, h2, h3, h4, h5, h6, button, a { font-family: var(--font-family); font-weight: var(--font-heavier-weight); } h1, h2, h3, h4, h5, h6 { letter-spacing: -0.2px; line-height: 1.25; } a { color: inherit; cursor: pointer; text-decoration: none; } a:hover { color: var(--primary-link-hover); } p a { color: var(--primary-link); font-weight: var(--font-heavier-weight); text-decoration: none; } a:focus:not(a:focus-visible) { outline: none; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { body { -webkit-font-smoothing: subpixel-antialiased; } } .NavBar { background: var(--primary-light); padding: 1rem 0; } .NavBarInner { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .NavBarLink { color: var(--primary-dark); text-decoration: none; padding: 0.5rem 1rem; border-radius: 4px; transition: background-color 0.2s; } .NavBarLink:hover { background-color: var(--primary-neutral); } .NavBarLink--active { background-color: var(--primary-dark); color: white; }