@charset "UTF-8";
:root {
}
.text-align-center {
text-align: center;
}
.text-align-left {
text-align: left;
}
.text-align-right {
text-align: right;
}
.bold-text {
font-weight: bold;
}
.paragraph-no-margins-around > p:first-of-type {
margin-top: 0;
}
.paragraph-no-margins-around > p:last-of-type {
margin-bottom: 0;
}
.no-margins {
margin: 0;
}
.flex-row.vertically-center-items {
align-items: center;
}
.flex-row.vertically-baseline-items {
align-items: baseline;
}
.flex-row.vertically-end-items,
.flex-row.vertically-bottom-items {
align-items: flex-end;
}
.flex-no-resize {
flex-grow: 0;
flex-shrink: 0;
}
.flex-resize {
flex-grow: 1;
flex-shrink: 1;
}
.flex-wrap {
flex-wrap: wrap;
}
.full-size {
width: 100%;
height: 100%;
}
.full-width {
width: 100%;
}
.full-height {
height: 100%;
}
.absolute-container {
position: relative;
}
.position-relative {
position: relative;
}
.position-absolute {
position: absolute;
}
.absolute-overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.absolute-for-transform {
position: absolute;
left: 0;
top: 0;
}
.top-left {
left: 0;
top: 0;
}
.top-right {
right: 0;
top: 0;
}
.bottom-left {
left: 0;
bottom: 0;
}
.bottom-right {
right: 0;
bottom: 0;
}
.transform-y50-percent-overlap {
transform: translateY(-50%);
}
.centered-tip-text {
position: absolute;
left: 50%;
transform: translate(-50%, 2px);
font-size: 10px;
width: 200px;
text-align: center;
}
.overflow-hidden {
overflow: hidden;
}
.flex-row {
display: flex;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-row.justify-center {
justify-content: center;
}
.flex-row.justify-between {
justify-content: space-between;
}
.cursor-pointer {
cursor: pointer;
}
.cursor-grab {
cursor: grab;
}
.display-block {
display: block;
}
.display-inline-block {
display: inline-block;
}
.display-none {
display: none;
}
.image.background-cover {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.image.background-contain {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.image.background-center {
background-position: center center;
background-repeat: no-repeat;
}
.image.background-top-left {
background-position: top left;
background-repeat: no-repeat;
}
.image.background-center-left {
background-position: center left;
background-repeat: no-repeat;
}
.border-box-sizing {
box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
.color-fade {
transition: color 0.3s ease-out;
}
}
.no-pointer-events {
pointer-events: none;
}
.all-pointer-events {
pointer-events: all;
}
.integrated-field {
box-sizing: border-box;
border: none;
display: block;
}
.centered-cell-holder {
display: flex;
justify-content: center;
align-items: center;
}
button.skip-default {
appearance: none;
border: none;
padding: 0;
text-align: inherit;
background: none;
color: inherit;
display: block;
font-size: inherit;
line-height: inherit;
font-family: inherit;
}
.no-opacity {
opacity: 0;
}
.clear-both {
clear: both;
}
.custom-styled-link {
color: inherit;
text-decoration: none;
}
.no-line-height {
line-height: 1;
}
.object-fit-cover {
object-fit: cover;
}
.full-rounded {
border-radius: 9999px;
}
.ratio-1-1 {
aspect-ratio: 1;
}
.ratio-4-3 {
aspect-ratio: 1.33;
}
.ratio-16-9 {
aspect-ratio: 1.78;
}
.dbm-admin {
background-color: #f6f7f9;
}
.dbm-admin-box {
box-sizing: border-box;
border-radius: 15px;
background-color: #FFFFFF;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.dbm-admin-box-padding {
padding: 20px;
}
.dbm-admin-hero {
background: rgb(41,56,97);
background: linear-gradient(117deg, #4b4795 0%, #608be1 100%);
}
.dbm-admin-hero .on-hero-text {
color: #FFFFFF;
}
.dbm-admin-hero-overlap {
position: relative;
top: -40px;
}
.page-title-form-field {
font-weight: 700;
font-size: 24px;
}
.dbm-admin-logo {
height: 24px;
width: auto;
}
.ce-block__content,
.ce-toolbar__content {
max-width: none;
}
.editor-block-box {
border: 1px solid #1A1A1A;
border-radius: 5px;
box-sizing: border-box;
}
.editor-block-box-padding {
padding: 20px;
}
.image.editor-preview {
width: 120px;
height: 120px;
}
.admin-save-all-position,
.dbm-admin .save-all-position {
position: fixed;
bottom: 10px;
right: 10px;
}
.image-library-preview {
width: 120px;
height: 120px;
}
.image-library-margins {
margin-right: 5px;
margin-bottom: 5px;
}
.action-button {
border: 1px solid #ADADAD;
color: #ADADAD;
font-size: 10px;
border-radius: 9999px;
cursor: pointer;
}
.action-button:hover {
background-color: #ADADAD;
color: #FFFFFF;
}
.action-button-padding {
padding: 3px 10px;
}
.language-circle {
width: 28px;
height: 28px;
border-radius: 9999px;
background-color: #ADADAD;
font-size: 10px;
font-weight: bold;
}
.standard-alternating-rows > .standard-row:nth-of-type(2n+1),
.standard-alternating-rows > *:nth-of-type(2n+1) .standard-row {
background-color: var(--alternating-rows-background, #F8F8F8);
}
.standard-row-padding {
padding: var(--standard-row-vertical-padding, 4px) var(--standard-row-horizonal-padding, 10px);
}
.standard-row-padding-horizontal-padding {
padding-left: var(--standard-row-horizonal-padding, 10px);
padding-right: var(--standard-row-horizonal-padding, 10px);
}
.standard-row-padding-vertival-padding {
padding-top: var(--standard-row-vertical-padding, 4px);
padding-bottom: var(--standard-row-vertical-padding, 4px);
}
.hierarchy-indent {
margin-left: var(--hierarchy-indent-margin-left, 40px);
}
.append-drop-position {
height: 12px;
border: 1px dashed rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
.standard-icon {
width: var(--standard-icon-size, 24px);
height: var(--standard-icon-size, 24px);
}
.text-row-icon {
width: var(--standard-icon-size, 24px);
height: var(--standard-icon-size, 24px);
}
.field-icon {
width: var(--field-icon-size, 16px);
height: var(--field-icon-size, 16px);
}
.standard-icon-color {
filter: url("#standard-icon-color");
}
.action-icon-color {
filter: url("#action-icon-color");
}
.text-icon-color {
filter: url("#text-icon-color");
}
.white-icon-color {
filter: url("#white-icon-color");
}
.hover-item:hover .remove-action-icon-color,
.hover-icon.remove-action-icon-color:hover {
filter: url("#remove-action-icon-hover-color");
}
.drag-handle-icon {
width: 8px;
height: 12px;
}
.standard-tag {
border-radius: var(--standard-tag-border-radius, 9999px);
border-style: solid;
border-width: var(--standard-tag-border-width, 1px);
}
.standard-tag,
.complex-standard-tag {
font-size: var(--standard-tag-font-size, 14px);
line-height: 1;
}
.complex-standard-tag.info-tag .standard-tag-part,
.standard-tag.info-tag {
background-color: #f1f4f9;
border-color: #d2dcec;
}
.complex-standard-tag.add-tag .standard-tag-part,
.standard-tag.add-tag {
background-color: #FFFFFF;
border-color: #ADADAD;
border-style: dashed;
}
.standard-tag-part {
border-top-style: solid;
border-top-width: var(--standard-tag-border-width, 1px);
border-bottom-style: solid;
border-bottom-width: var(--standard-tag-border-width, 1px);
}
.standard-tag-part.start {
border-top-left-radius: var(--standard-tag-border-radius, 9999px);
border-bottom-left-radius: var(--standard-tag-border-radius, 9999px);
border-left-style: solid;
border-left-width: var(--standard-tag-border-width, 1px);
}
.standard-tag-part.end {
border-top-right-radius: var(--standard-tag-border-radius, 9999px);
border-bottom-right-radius: var(--standard-tag-border-radius, 9999px);
border-right-style: solid;
border-right-width: var(--standard-tag-border-width, 1px);
}
.standard-tag-padding {
padding: var(--standard-tag-vertical-padding, 5px) var(--standard-tag-horizontal-padding, 12px);
}
.standard-tag-start-padding {
padding-left: var(--standard-tag-horizontal-padding, 12px);
padding-top: var(--standard-tag-vertical-padding, 5px);
padding-bottom: var(--standard-tag-vertical-padding, 5px);
}
.standard-tag-end-padding {
padding-right: var(--standard-tag-horizontal-padding, 12px);
padding-top: var(--standard-tag-vertical-padding, 5px);
padding-bottom: var(--standard-tag-vertical-padding, 5px);
}
.standard-tag-horizontal-padding {
padding-left: var(--standard-tag-horizontal-padding, 12px);
padding-right: var(--standard-tag-horizontal-padding, 12px);
}
.standard-tag-vertical-padding {
padding-top: var(--standard-tag-vertical-padding, 5px);
padding-bottom: var(--standard-tag-vertical-padding, 5px);
}
.standard-tag-part-padding {
padding-left: var(--standard-tag-part-horizontal-padding, 6px);
padding-right: var(--standard-tag-part-horizontal-padding, 6px);
}
.standard-tag-part-padding-left {
padding-left: var(--standard-tag-part-horizontal-padding, 6px);
}
.standard-tag-part-padding-right {
padding-right: var(--standard-tag-part-horizontal-padding, 6px);
}
.standard-tag-part-separator {
width: 1px;
height: 100%;
background-color: rgba(255,255,255,0.6);
}
.standard-tag-icon {
width: 12px;
aspect-ratio: 1;
}
.standard-tag-list {
}
.standard-tag-list-expand {
margin-right: calc(-1 * var(--standard-tag-list-horizontal-margin, 10px));
margin-bottom: calc(-1 * var(--standard-tag-list-vertical-margin, 5px));
overflow: hidden;
}
.standard-tag-list .standard-tag-list-item{
float: left;
margin-right: var(--standard-tag-list-horizontal-margin, 10px);
margin-bottom: var(--standard-tag-list-vertical-margin, 5px);
}
.popover-holder {
border: none;
padding: 0;
margin: 0;
overflow: visible;
background-color: transparent;
color: inherit;
}
.dropdown-menu-min-width {
min-width: 300px;
}
.dropdown-menu-max-height {
max-height: 400px;
overflow: auto;
}
.standard-dropdown {
border: 1px solid #000000;
background-color: #FFFFFF;
box-sizing: border-box;
}
.standard-dropdown-row-padding {
padding: 8px 15px;
}
html, body {
margin: 0;
padding: 0;
}
.centered-site {
margin: auto;
padding: 0 10px;
max-width: 1280px;
}
.content-narrow {
margin: auto;
padding: 0 10px;
max-width: 1280px;
}
.full-width-content {
padding: 0 10px;
}
.min-content-height {
min-height: 100vh;
}
.page-header {
position: fixed;
width: 100%;
z-index: 10;
}
.header-color-background {
position: fixed;
width: 100%;
}
.header-background-height {
height: 120px;
}
.header-logo {
width: 330px;
height: 110px;
}
.header-logo-mobile {
width: 165px;
height: 55px;
}
.header-background {
background-color: #FFFFFF;
}
.header-location {
border: 1px solid #2E3B6D;
border-top: none;
border-radius: 0 0 5px 5px;
font-size: 14px;
padding: 3px 20px;
background-color: #FFFFFF;
color: #2E3B6D;
}
.default-text-formatting {
font-size: 16px;
color: #4e4e4e;
font-optical-sizing: auto;
font-family: "Poppins", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
color: #1A1A1A;
font-family: "rukou", sans-serif;
text-transform: uppercase;
line-height: 1;
}
h1 {
font-size: 20px;
font-family: "rukou", sans-serif;
}
@media (min-width: 600px) {
.default-text-formatting {
font-size: 24px;
}
h1 {
font-size: 64px;
}
}
.admin-font-settings {
font-size: 16px;
line-height: 1;
}
.body-text {
line-height: 1.8;
}
.body-text a:not(.skip-default):not(.custom-styled-link) {
color: #042752;
}
.custom-styled-link {
color: inherit;
text-decoration: none;
}
.section-link-title {
font-weight: bold;
}
.footer-menu-title {
font-weight: bold;
}
.footer-contact-title {
font-weight: bold;
}
.cart-bind-time {
font-size: 12px;
color: #828282;
}
.cart-promotion {
font-size: 12px;
color: #FF0000;
font-weight: bold;
}
.list-promotion {
color: #FF0000;
font-weight: bold;
}
.language-selector-option.selected {
font-weight: bold;
}
.standard-field-label {
font-size: 12px;
font-weight: bold;
}
.field-description {
font-size: 12px;
color: #828282;
}
.location-tag-city {
margin-left: 3px;
font-size: 10px;
color: #828282;
}
.dark-background-text {
color: #FFFFFF;
}
.dark-background-text h1, .dark-background-text h2, .dark-background-text h3, .dark-background-text h4, .dark-background-text h5, .dark-background-text h6 {
color: #FFFFFF;
}
.small-description {
font-size: 12px;
color: #828282;
}
.spacing.pixel {
height: 1px;
}
.spacing.micro {
height: 5px;
}
.spacing.small {
height: 10px;
}
.spacing.medium {
height: 15px;
}
.spacing.standard {
height: 20px;
}
.spacing.double {
height: 40px;
}
.flex-row.micro-item-spacing > .flex-row-item:not(:first-of-type) {
margin-left: 2px;
}
.flex-row.micro-item-spacing > .flex-row-item:not(:last-of-type) {
margin-right: 2px;
}
.flex-row.small-item-spacing > .flex-row-item:not(:first-of-type) {
margin-left: 5px;
}
.flex-row.small-item-spacing > .flex-row-item:not(:last-of-type) {
margin-right: 5px;
}
.flex-row.medium-item-spacing > .flex-row-item:not(:first-of-type) {
margin-left: 7.5px;
}
.flex-row.medium-item-spacing > .flex-row-item:not(:last-of-type) {
margin-right: 7.5px;
}
.flex-row.standard-item-spacing > .flex-row-item:not(:first-of-type) {
margin-left: 10px;
}
.flex-row.standard-item-spacing > .flex-row-item:not(:last-of-type) {
margin-right: 10px;
}
.flex-row.big-item-spacing > .flex-row-item:not(:first-of-type) {
margin-left: 20px;
}
.flex-row.big-item-spacing > .flex-row-item:not(:last-of-type) {
margin-right: 20px;
}
.flex-column.small-item-spacing > .flex-column-item:not(:first-of-type) {
margin-top: 5px;
}
.flex-column.small-item-spacing > .flex-column-item:not(:last-of-type) {
margin-bottom: 5px;
}
.flex-row.menu-item-spacing > .flex-row-item:not(:first-of-type) {
margin-left: 20px;
}
.flex-row.menu-item-spacing > .flex-row-item:not(:last-of-type) {
margin-right: 20px;
}
.flex-row.singles > .flex-row-item {
width: 100%;
}
.flex-row.halfs > .flex-row-item {
width: 50%;
}
.flex-row > .flex-row-item.half {
width: 50%;
}
.flex-row.thirds > .flex-row-item,
.flex-row-item.third {
width: 33.33%;
}
.flex-row.quarters > .flex-row-item {
width: 25%;
}
.flex-row > .flex-row-item.quarter {
width: 25%;
}
.width-10 {
width: 10%;
}
.width-20 {
width: 20%;
}
.width-30 {
width: 30%;
}
.width-40 {
width: 40%;
}
.width-50 {
width: 50%;
}
.width-60 {
width: 60%;
}
.width-70 {
width: 70%;
}
.width-80 {
width: 80%;
}
.width-90 {
width: 90%;
}
.spacer-line {
background-color: #E6E6E6;
height: 1px;
}
.standard-button {
background-color: #009FE3;
border-radius: 20px;
color: #FFFFFF;
box-sizing: border-box;
}
.secondary-button {
background-color: #2E3B6D;
border-radius: 20px;
color: #FFFFFF;
box-sizing: border-box;
}
.read-more-button {
background-color: #2E3B6D;
border-radius: 20px;
color: #FFFFFF;
box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
.standard-button {
}
}
.standard-button:hover {
background-color: #005c84;
}
.standard-button-padding {
padding: 12px 24px;
}
.standard-field {
border-radius: 10px;
border: 1px solid #D9D9D9;
box-sizing: border-box;
}
.standard-field.locked {
background-color: #D9D9D9;
}
.standard-field.valid {
border-color: #9EC277;
}
.standard-field.invalid {
border-color: #FF0000;
background-color: #FF000011;
}
.validation-text.invalid {
color: #FF0000;
}
.required-field-star {
color: #FF8888;
}
.availability-field {
border-radius: 9999px;
border: 1px solid #D9D9D9;
box-sizing: border-box;
}
.standard-field-padding {
padding: 8px;
}
.availability-field-padding {
padding: 23px 16px
}
.ratio-1-1 {
aspect-ratio: 1;
}
.ratio-4-3 {
aspect-ratio: 1.33;
}
.ratio-16-9 {
aspect-ratio: 1.78;
}
.rounded-image {
border-radius: 8px;
}
.standard-box {
border-radius: 8px;
border: 1px solid #D9D9D9;
box-sizing: border-box;
}
.standard-box-padding {
padding: 24px;
}
.review-avatar {
border-radius: 20px;
width: 40px;
height: 40px;
}
.review-text {
color: #1A1A1A;
font-weight: bold;
}
.review-from-name {
color: #757575;
font-size: 16px;
font-weight: bold;
}
.review-from-details {
font-size: 16px;
color: #B3B3B3;
}
.product-price-label {
box-sizing: border-box;
background-color: #65558F;
border-radius: 9999px;
color: #FFFFFF;
font-size: 16px;
}
.product-price-label-padding {
padding: 12px 24px;
}
.product-detail-excerpt {
color: #828282;
}
.product-detail-price {
font-weight: bold;
}
.product-detail-price.promotion {
color: #FF0000;
}
.product-detail-text {
font-size: 20px;
color: #828282;
}
.product-detail-fine-print {
font-size: 16px;
color: #828282;
}
.menu-link {
box-sizing: border-box;
background-color: #65558F;
border-radius: 9999px;
color: #FFFFFF;
font-size: 16px;
}
.menu-link-padding {
padding: 12px 24px;
}
.menu-link-extra-padding {
padding: 12px 42px;
}
.next-button {
box-sizing: border-box;
background-color: #009FE3;
border-radius: 9999px;
color: #FFFFFF;
font-size: 14px;
cursor: pointer;
}
.next-button.inactive-validation {
opacity: 0.5;
}
.next-button.inactive-during-process {
cursor: progress;
}
.next-button.inactive-as-completed {
pointer-events: none;
}
.previous-button {
box-sizing: border-box;
background-color: #D9D9D9;
border-radius: 9999px;
color: #FFFFFF;
font-size: 14px;
cursor: pointer;
}
.step-button-padding {
padding: 25px 45px;
}
.related-product-name {
font-weight: bold;
}
.related-product-description {
color: #828282;
font-size: 20px;
}
.related-product-price {
font-weight: bold;
font-size: 20px;
}
.checkout-form-label {
font-weight: bold;
}
.checkout-form-label-width {
width: 320px;
}
.checkout-form-label-description {
font-weight: 200;
font-size: 16px;
}
.standard-icon {
width: 48px;
height: 48px;
}
.cart-preview-image {
width: 64px;
height: 64px;
background-color: #D9D9D9;
}
.cart-price-column-width {
width: 200px;
}
.cart-remove-column-width {
width: 24px;
}
.shopping-cart-icon-size {
width: 38px;
height: 38px;
}
.shopping-cart-icon-size-mobile {
width: 24px;
height: 24px;
}
.shopping-cart-count-badge {
color: #FFFFFF;
font-size: 9px;
background-color: #009FE3;
border-radius: 9999px;
width: 24px;
height: 24px;
}
.shopping-cart-count-badge.mobile {
width: 19px;
height: 19px;
}
.shopping-cart-count-badge-position {
bottom: 0;
right: 0;
transform: translate(50%, 50%);
}
.dev-availibility-column-width {
width: 180px;
}
.table-column-label {
font-size: 10px;
color: #5c5c5c;
}
.dev-status-color-field .activationNeeded,
.dev-status-color-field .order,
.dev-status-color-field .login,
.dev-status-color-field .mduBasic {
background-color: #88eb86;
}
.dev-status-color-field .underConstruction,
.dev-status-color-field .interest {
background-color: #f6fa1b;
}
.dev-status-color-field .notAvailable {
background-color: #e54c3e;
}
.admin-mdu-price-header-cell-text {
font-size: 10px;
font-weight: bold;
}
.admin-mdu-price-cell-width {
width: 180px;
}
.admin-mdu-product-name-cell-width {
width: 350px;
}
.autocomplete-selection {
z-index: 5;
background-color: #FFFFFF;
border: 1px solid #009FE3;
font-size: 14px;
}
.autocomplete-selection-padding {
padding: 10px;
}
.autocomplete-selection-row {
}
.autocomplete-selection-row-padding {
padding: 4px 10px;
}
.hover-row:hover {
background-color: #99dbf8;
}
.remove-overlay-background-color {
background-color: rgba(255, 0, 0, 0.6);
}
.tag-street-number-field-width {
width: 40px;
}
/*
.action-button {
border-radius: 9999px;
border: 1px solid #AAAAAA;
color: #AAAAAA;
font-size: 14px;
}
.action-button-padding {
padding: 2px 10px;
}
*/
.my-account-details-box {
border: 1px solid #000000;
background-color: #009FE3;
border-radius: 6px;
}
.my-account-details-box-header {
color: #FFFFFF;
}
.my-account-details-box-header-padding {
padding: 10px 20px;
}
.my-account-details-box-contents {
background-color: #FFFFFF;
border-radius: 5px;
}
.my-account-details-box-contents-padding {
padding: 10px 20px;
}
.colored-box-section {
border-radius: 30px;
box-sizing: border-box;
}
.colored-box-section-padding {
padding: 30px;
}
.colored-box-section-padding .centered-site {
padding: 0;
}
.colored-box-section-padding .content-narrow {
padding: 0;
}
.colored-box-section-padding .full-width-content {
padding: 0;
}
.help-section-row {
border: 2px solid #009FE3;
border-radius: 5px;
}
.help-section-row-question {
font-weight: bold;
}
.help-section-row-question-padding {
padding: 10px 20px;
}
.help-section-row-answer-padding {
padding: 10px 20px;
}
.help-section-row-question-icon {
width: 18px;
height: 18px;
}
.base-speed-label {
border: 1px solid #009FE3;
color: #009FE3;
font-size: 12px;
border-radius: 9999px;
font-weight: bold;
box-sizing: border-box;
}
.base-speed-label-padding {
padding: 5px 15px;
}
.option {
cursor: pointer;
}
.option.selected {
background-color: #4e4e4e;
color: #FFFFFF;
}
.option.selected.available {
background-color: #11f386;
color: #4e4e4e;
}
.option.selected.onlyMdu {
background-color: #5eebdb;
color: #4e4e4e;
}
.option.selected.notAvailable {
background-color: #ee7541;
color: #4e4e4e;
}
.image-hero {
background-color: #D9D9D9;
height: 720px;
color: #FFFFFF;
}
.image-hero h1 {
color: #FFFFFF;
}
.image-hero-overlay {
background-color: rgba(0, 0, 0, 0.1);
}
.cookie-bar-position {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: none;
}
.cookie-bar {
border-top: 1px solid #1A1A1A;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background-color: rgba(255, 255, 255, 0.7);
}
.cookie-bar-padding {
padding: 1rem;
}
/* .cookie-bar-title {
} */
/* v2 styles */
@keyframes fn-animate-enter-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fn-animate-enter-fade-up {
from {
opacity: 0;
transform: translateY(1.5rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fn-animate-enter-fade-down {
from {
opacity: 0;
transform: translateY(-1.5rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fn-animate-enter-fade-left {
from {
opacity: 0;
transform: translateX(1.5rem);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fn-animate-enter-fade-right {
from {
opacity: 0;
transform: translateX(-1.5rem);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fn-spinner-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.fn-enter-fade {
animation: fn-animate-enter-fade 0.6s ease-out both;
}
.fn-enter-fade-up {
animation: fn-animate-enter-fade-up 0.6s ease-out both;
}
.fn-enter-fade-down {
animation: fn-animate-enter-fade-down 0.6s ease-out both;
}
.fn-enter-fade-left {
animation: fn-animate-enter-fade-left 0.6s ease-out both;
}
.fn-enter-fade-right {
animation: fn-animate-enter-fade-right 0.6s ease-out both;
}
.fn-spinner-rotate {
animation: fn-spinner-rotate 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.fn-enter-fade,
.fn-enter-fade-up,
.fn-enter-fade-down,
.fn-enter-fade-left,
.fn-enter-fade-right {
animation: none;
opacity: 1;
transform: none;
}
}
/* General colors*/
/* fn-nav-action element focus */
/* fn-nav-action--dark */
/* fn-btn */
/* fn-nav-action--light */
/* fn-nav-action--outline */
/* Shopping cart badge (navbar) */
/* Availability field */
.fn-page-content-start {
padding-top: calc(100px + 4rem) !important;
}
section.fn-section-start,
footer.fn-section-start {
padding-top: 6rem;
}
.fn-background-layer {
background: linear-gradient(145deg, #009fe3 0%, #ffffff 40%, #ffffff 100%);
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100vh;
z-index: 0;
pointer-events: none;
}
.fn-spacer {
box-sizing: border-box;
display: block;
flex-shrink: 0;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
overflow: hidden;
pointer-events: none;
line-height: 0;
font-size: 0;
}
.fn-spacer--1 {
height: 1rem;
}
.fn-spacer--2 {
height: 2rem;
}
.fn-spacer--3 {
height: 3rem;
}
.fn-spacer--4 {
height: 4rem;
}
.fn-spacer--5 {
height: 5rem;
}
.fn-spacer--6 {
height: 6rem;
}
.fn-spacer--7 {
height: 7rem;
}
.fn-spacer--8 {
height: 8rem;
}
.fn-container {
box-sizing: border-box;
width: 100%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.fn-container.width-small {
max-width: 960px;
}
.fn-divider {
width: 100%;
max-width: min(90vw, 1280px);
margin: 0 auto 1.25rem auto;
border: none;
border-top: 2px solid #2248D7;
opacity: 0.5;
height: 0;
}
.fn-text-center {
text-align: center;
}
.fn-text-dark-blue {
color: #2b345e !important;
}
.fn-text-primary-blue {
color: #2e3b6d !important;
}
.fn-text-active-blue {
color: #2248D7 !important;
}
.fn-text-accent-orange {
color: #ff8800 !important;
}
.fn-gradient-text-lr-primary-active {
background: linear-gradient(to right, #2b345e, #2248D7);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.fn-body-text {
font-size: 1.125rem;
line-height: 1.5;
max-width: 48rem;
margin-left: auto;
margin-right: auto;
}
.fn-h1,
.fn-h2,
.fn-h3 {
font-family: "Poppins", sans-serif;
font-weight: 500;
line-height: 1.2;
text-align: center;
color: #2b345e;
margin: 0 0 1.25rem;
padding: 0;
border: none;
background: none;
cursor: default;
}
.fn-h1 {
font-size: 3rem;
text-transform: none;
}
.fn-h2 {
font-size: 2rem;
text-transform: none;
}
.fn-h3 {
font-size: 1.35rem;
font-weight: 400;
text-transform: uppercase;
}
.fn-font-light {
font-weight: 300;
}
.fn-btn {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 1.5rem;
border: none;
border-radius: 9999px;
background-color: #2b345e;
color: #ffffff;
font-size: 1rem;
font-weight: 500;
font-family: "Poppins", sans-serif;
line-height: 1.3;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: 0 3px 6px 1px #8d8d8d;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.fn-btn:hover {
transform: translateY(-1px);
background-color: #2e3b6d;
box-shadow: 0 6px 12px 1px #ff8800;
}
.fn-btn:focus-visible {
outline: 2px solid #2248D7;
outline-offset: 3px;
}
.fn-btn-icon {
color: #ffffff;
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.fn-btn-icon svg,
.fn-btn-icon img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.fn-nav-action {
box-sizing: border-box;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.65rem 1.1rem;
border-radius: 9999px;
font-family: "Poppins", sans-serif;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
border: none;
transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.fn-nav-action:focus-visible {
outline: 2px solid #2248D7;
outline-offset: 2px;
}
.fn-nav-action__icon {
position: relative;
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.fn-nav-action__icon img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Yleinen esityskuva: pyöristys + kevyt varjo */
.fn-img-rounded-shadow {
display: block;
width: 100%;
max-width: 32rem;
height: auto;
border-radius: 1.25rem;
box-shadow: 0 16px 40px rgba(43, 52, 94, 0.1), 0 4px 14px rgba(34, 72, 215, 0.08);
}
.fn-spinner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 1rem auto;
width: 100%;
max-width: 4rem;
height: 100%;
max-height: 4rem;
}
.fn-spinner img {
margin: 0 auto;
width: 100%;
height: 100%;
object-fit: contain;
}
.max-w-48 {
max-width: 48rem;
}
@media only screen and (max-width: 894px) {
.fn-page-content-start {
padding-top: calc(100px + 2rem) !important;
}
}
@media only screen and (max-width: 576px) {
.fn-page-content-start {
padding-top: calc(100px + 1rem) !important;
}
.fn-container {
padding-left: 1rem;
padding-right: 1rem;
}
.fn-h2 {
font-size: 1.75rem;
}
}
@media only screen and (max-width: 379px) {
.fn-h2 {
font-size: 1.5rem;
}
}
/* General colors*/
/* fn-nav-action element focus */
/* fn-nav-action--dark */
/* fn-btn */
/* fn-nav-action--light */
/* fn-nav-action--outline */
/* Shopping cart badge (navbar) */
/* Availability field */
.fn-hero-v2 {
position: relative;
width: 100%;
overflow-x: clip;
box-sizing: border-box;
}
.fn-hero-v2__deco {
position: absolute;
top: min(280px, 35vh);
transform: rotate(14deg) translateY(-50%);
z-index: 0;
pointer-events: none;
line-height: 0;
}
.fn-hero-v2__deco--left {
left: max(-30px, -10vw);
transform: rotate(14deg) translateY(-50%) rotateX(180deg);
}
.fn-hero-v2__deco--right {
right: 0;
}
.fn-hero-v2__deco-img {
display: block;
width: min(27vw, 360px);
height: auto;
object-fit: contain;
}
.fn-hero-v2__deco--left .fn-hero-v2__deco-img {
transform: scaleX(-1);
}
.fn-hero-v2__inner {
position: relative;
z-index: 1;
}
.fn-hero-v2__title {
font-size: 4rem;
text-transform: none;
line-height: 1.3;
margin-bottom: 1.5rem;
}
.fn-hero-v2__title-line {
display: block;
}
.fn-hero-v2__subheading {
font-size: 1.35rem;
font-weight: 600;
margin: 0 0 1.75rem 0;
text-transform: none;
}
.fn-hero-v2__actions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 0.75rem 1rem;
}
.fn-hero-v2__actions .fn-btn {
box-sizing: border-box;
flex: 0 0 auto;
white-space: normal;
overflow-wrap: break-word;
}
.fn-hero-v2__divider {
position: relative;
z-index: 1;
width: 100%;
max-width: min(90vw, 1280px);
margin-left: auto;
margin-right: auto;
border: none;
border-top: 2px solid #2248D7;
opacity: 0.5;
height: 0;
}
.fn-hero-v2__post {
position: relative;
z-index: 1;
}
.fn-hero-v2__post-block--muni {
margin-top: 2.5rem;
}
.fn-hero-v2__post-title {
font-size: 1.35rem;
font-weight: 600;
line-height: 1.35;
margin: 0 0 1.25rem 0;
text-transform: none;
}
.fn-hero-v2__feature-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem 2rem;
align-items: start;
}
.fn-hero-v2__feature-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.fn-hero-v2__feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3.25rem;
height: 3.25rem;
margin-bottom: 0.65rem;
}
.fn-hero-v2__feature-icon img {
display: block;
width: 2.5rem;
height: 2.5rem;
object-fit: contain;
}
.fn-hero-v2__feature-text {
margin: 0;
font-size: 1rem;
line-height: 1.45;
color: #2b345e;
}
.fn-hero-v2__muni-line {
margin: 0 0 1rem 0;
font-size: 1rem;
line-height: 1.5;
color: #2b345e;
}
.fn-hero-v2__muni-sep {
display: inline-block;
margin: 0 1em;
font-size: 1em;
opacity: 0.6;
transform: scale(2);
user-select: none;
}
.fn-hero-v2__muni-name {
white-space: nowrap;
}
.fn-hero-v2__muni-more {
margin: 0;
font-size: 0.9rem;
line-height: 1.4;
font-weight: 500;
}
@media only screen and (max-width: 894px) {
.fn-hero-v2__btn {
width: 100%;
}
.fn-hero-v2__deco {
display: none;
}
.fn-hero-v2__deco-img {
width: min(26vw, 140px);
}
.fn-hero-v2__title {
font-size: 3.5rem;
}
.fn-hero-v2__actions {
flex-direction: column;
align-items: center;
gap: 1.75rem;
}
.fn-hero-v2__actions a.fn-btn,
.fn-hero-v2__actions button.fn-btn {
box-shadow: 0 4px 8px 0px #ff8800;
flex: 1 1 auto;
}
.fn-hero-v2__feature-grid {
grid-template-columns: 1fr;
}
.fn-hero-v2__inner .fn-spacer--5 {
height: 3rem;
}
}
@media only screen and (max-width: 576px) {
.fn-hero-v2__title {
font-size: 2.5rem;
}
}
@media only screen and (max-width: 379px) {
.fn-hero-v2__title {
font-size: 2.03125rem;
}
.fn-hero-v2__actions {
gap: 2rem;
}
.fn-hero-v2__actions .fn-btn {
flex: 1 1 auto;
width: 100%;
min-width: 0;
max-width: none;
font-size: 0.9375rem;
padding: 0.85rem 1rem;
}
}
/* General colors*/
/* fn-nav-action element focus */
/* fn-nav-action--dark */
/* fn-btn */
/* fn-nav-action--light */
/* fn-nav-action--outline */
/* Shopping cart badge (navbar) */
/* Availability field */
.fn-navbar-v2 {
box-sizing: border-box;
width: 100%;
background-color: rgba(43, 60, 94, 0.6);
backdrop-filter: blur(8px);
box-shadow: 0 4px 12px 0px rgba(100, 100, 100, 0.52);
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.fn-navbar-v2__inner {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 5.2fr) minmax(0, 2.8fr);
align-items: center;
gap: 0;
min-height: 4.5rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.fn-navbar-v2__start {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
min-width: 0;
position: relative;
z-index: 2;
}
.fn-navbar-v2__logo-link {
display: inline-block;
line-height: 0;
text-decoration: none;
}
.fn-navbar-v2__logo-link:focus-visible {
outline: 2px solid #2248D7;
outline-offset: 3px;
border-radius: 4px;
}
.fn-navbar-v2__logo {
display: block;
height: 2.5rem;
width: auto;
max-width: 200px;
object-fit: contain;
}
.fn-navbar-v2__center {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 0;
min-width: 0;
}
.fn-navbar-v2__inner .fn-navbar-v2__center .fn-navbar-v2__links-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 1.5rem;
}
.fn-navbar-v2__mega-trigger {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 0.35rem;
padding: 0.5rem 0.25rem;
margin: 0;
font-family: "Poppins", sans-serif;
font-size: 1rem;
font-weight: 500;
color: #f5f5f5;
background: none;
border: none;
cursor: pointer;
transition: color 0.2s ease;
text-decoration: none;
}
.fn-nav-current-mark {
text-decoration: underline !important;
text-underline-offset: 0.25rem;
}
.fn-navbar-v2__mega-trigger:hover {
color: #2b345e;
}
.fn-navbar-v2__mega-trigger:focus-visible {
outline: 2px solid #2b345e;
outline-offset: 3px;
border-radius: 4px;
}
.fn-navbar-v2__mega-chevron {
display: inline-flex;
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
.fn-navbar-v2__mega-chevron svg {
display: block;
width: 100%;
height: 100%;
}
.fn-navbar-v2__nav-mega {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
}
.fn-navbar-v2__nav-mega-panel--dropdown {
position: absolute;
left: 0;
top: 100%;
z-index: 1100;
padding-top: 0.35rem;
width: max-content;
min-width: 100%;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.fn-navbar-v2__nav-mega:not(.fn-navbar-v2__nav-mega--mobile-panel):hover .fn-navbar-v2__nav-mega-panel--dropdown,
.fn-navbar-v2__nav-mega:not(.fn-navbar-v2__nav-mega--mobile-panel):focus-within .fn-navbar-v2__nav-mega-panel--dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.fn-navbar-v2__nav-mega-links {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 11.5rem;
padding: 0.5rem 0.65rem;
background-color: #ffffff;
border-radius: 0.5rem;
box-shadow: 0 8px 24px rgba(43, 52, 94, 0.15);
border: 1px solid rgba(43, 52, 94, 0.1);
}
.fn-navbar-v2__nav-mega-link {
display: block;
padding: 0.4rem 0.5rem;
border-radius: 0.35rem;
font-family: "Poppins", sans-serif;
font-size: 0.875rem;
font-weight: 500;
color: #2b345e;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.fn-navbar-v2__nav-mega-link:hover {
background-color: #f5f5f5;
}
.fn-navbar-v2__nav-mega-divider {
display: block;
height: 1px;
margin: 0.5rem 0.35rem;
background-color: rgba(43, 52, 94, 0.12);
}
.fn-navbar-v2__nav-mega--mobile-panel {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
width: fit-content;
max-width: 100%;
}
.fn-navbar-v2__nav-mega--mobile-panel .fn-navbar-v2__nav-mega-panel--dropdown {
position: absolute;
left: 0;
right: auto;
top: 100%;
padding-top: 0.35rem;
box-sizing: border-box;
width: max-content;
min-width: 100%;
max-width: min(20rem, 100vw - 3rem);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.fn-navbar-v2__nav-mega--mobile-panel.fn-navbar-v2__nav-mega--mobile-open .fn-navbar-v2__nav-mega-panel--dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.fn-navbar-v2__nav-mega--mobile-panel .fn-navbar-v2__mega-chevron {
transition: transform 0.2s ease;
}
.fn-navbar-v2__nav-mega--mobile-panel.fn-navbar-v2__nav-mega--mobile-open .fn-navbar-v2__mega-chevron {
transform: rotate(180deg);
}
.fn-navbar-v2__nav-mega--mobile-panel .fn-navbar-v2__nav-mega-link {
font-size: 1rem;
}
.fn-navbar-v2__actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
min-width: 0;
gap: 0.65rem;
position: relative;
z-index: 2;
}
.fn-nav-action--dark {
background-color: #2b345e;
color: #ffffff;
box-shadow: 0 2px 6px rgba(43, 52, 94, 0.2);
}
.fn-nav-action--dark:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(43, 52, 94, 0.28);
background-color: #2e3b6d;
}
.fn-nav-action--light {
background-color: #f5f5f5;
color: #2b345e;
border: 1px solid rgba(43, 52, 94, 0.35);
box-shadow: 0 1px 3px rgba(43, 52, 94, 0.06);
}
.fn-nav-action--light.fn-navbar-v2__lang-trigger--mobile-panel {
background-color: transparent;
}
.fn-nav-action--light:hover {
transform: translateY(-1px);
border-color: #f5f5f5;
background-color: #f5f5f5;
box-shadow: 0 3px 10px rgba(43, 52, 94, 0.1);
}
.fn-nav-action--light:hover.fn-navbar-v2__lang-trigger--mobile-panel {
border-color: rgba(43, 52, 94, 0.45);
}
.fn-nav-action--outline {
background-color: transparent;
color: #ffffff;
border: 1px solid #ffffff;
box-shadow: none;
}
.fn-nav-action--outline .fn-nav-action__icon img {
filter: brightness(0) invert(1);
}
.fn-nav-action--outline:hover {
transform: translateY(-1px);
background-color: #2b345e;
border-color: #2b345e;
color: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.fn-nav-action--outline:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
.fn-nav-action--outline.fn-borderless {
border: transparent !important;
}
.fn-navbar-v2__cart-icon-wrap {
position: relative;
}
.fn-navbar-v2__cart-badge {
position: absolute;
top: -0.35rem;
right: -0.75rem;
min-width: 1.1rem;
height: 1.1rem;
padding: 0 0.2rem;
border-radius: 9999px;
background-color: #2248D7;
color: #ffffff;
font-size: 0.75rem;
font-weight: 400;
line-height: 1.1rem;
text-align: center;
box-sizing: border-box;
}
.fn-navbar-v2__lang-code {
text-transform: uppercase;
letter-spacing: 0.02em;
}
.fn-navbar-v2__lang-trigger-label {
font: inherit;
white-space: nowrap;
letter-spacing: 0.02em;
}
.fn-navbar-v2__lang-dropdown {
position: relative;
display: inline-flex;
}
.fn-navbar-v2__lang-panel--dropdown {
position: absolute;
right: 0;
top: 100%;
z-index: 1100;
padding-top: 0.35rem;
width: max-content;
min-width: 100%;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.fn-navbar-v2__lang-dropdown:not(.fn-navbar-v2__lang-dropdown--mobile-panel):hover .fn-navbar-v2__lang-panel--dropdown,
.fn-navbar-v2__lang-dropdown:not(.fn-navbar-v2__lang-dropdown--mobile-panel):focus-within .fn-navbar-v2__lang-panel--dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.fn-navbar-v2__lang-options {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 11.5rem;
padding: 0.5rem 0.65rem;
background-color: #ffffff;
border-radius: 0.5rem;
box-shadow: 0 8px 24px rgba(43, 52, 94, 0.15);
border: 1px solid rgba(43, 52, 94, 0.1);
}
.fn-navbar-v2__lang-options .language-selector-option {
display: block;
}
.fn-navbar-v2__lang-options .language-selector-option a {
display: block;
padding: 0.4rem 0.5rem;
border-radius: 0.35rem;
font-family: "Poppins", sans-serif;
font-size: 0.875rem;
font-weight: 500;
color: #2b345e;
text-decoration: none;
}
.fn-navbar-v2__lang-options .language-selector-option a:hover {
background-color: #f5f5f5;
}
.fn-navbar-v2__lang-options .language-selector-option.selected a {
color: #2248D7;
font-weight: 600;
}
.fn-navbar-v2__mobile-menu-trigger {
display: none;
}
.fn-navbar-v2--mobile-open {
z-index: 1001;
}
.fn-navbar-v2__mobile-panel {
position: fixed;
inset: 0;
z-index: 1000;
box-sizing: border-box;
background-color: #ffffff;
background: linear-gradient(300deg, #009fe3 0%, #ffffff 45%, #ffffff 100%);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
animation: fn-navbar-v2-mobile-panel-fade 0.25s ease forwards;
}
@keyframes fn-navbar-v2-mobile-panel-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fn-navbar-v2__mobile-panel-inner {
box-sizing: border-box;
min-height: 100vh;
padding-top: 6rem;
padding-bottom: 2rem;
}
.fn-navbar-v2__mobile-panel-logo-row {
display: flex;
justify-content: flex-start;
align-items: center;
}
.fn-navbar-v2__mobile-panel-nav {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
margin: 0.5rem 0 1.5rem 0;
min-width: 0;
}
.fn-navbar-v2__mega-trigger--mobile-panel {
color: #2b345e;
padding-left: 0;
padding-right: 0;
font-size: 1.0625rem;
}
.fn-navbar-v2__mega-trigger--mobile-panel:hover {
color: #2248D7;
}
.fn-navbar-v2__mega-trigger--mobile-panel:focus-visible {
outline-color: #2248D7;
}
.fn-navbar-v2__mobile-panel-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
margin-top: 1.75rem;
}
.fn-navbar-v2__nav-action--mobile-panel.fn-nav-action--outline {
background-color: transparent;
color: #2b345e;
border-color: rgba(43, 52, 94, 0.35);
box-shadow: none;
}
.fn-navbar-v2__nav-action--mobile-panel.fn-nav-action--outline:hover {
background-color: #f5f5f5;
border-color: rgba(43, 52, 94, 0.45);
color: #2b345e;
box-shadow: none;
}
.fn-navbar-v2__nav-action--mobile-panel.fn-nav-action--outline .fn-nav-action__icon img {
filter: brightness(0) saturate(100%);
}
.fn-navbar-v2__mobile-panel-actions .fn-navbar-v2__nav-action--mobile-panel {
font-size: 1rem;
}
.fn-navbar-v2__lang-dropdown--mobile-panel {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
width: fit-content;
max-width: 100%;
}
.fn-navbar-v2__lang-dropdown--mobile-panel .fn-navbar-v2__lang-panel--dropdown {
position: absolute;
left: 0;
right: auto;
top: 100%;
padding-top: 0.35rem;
box-sizing: border-box;
width: max-content;
min-width: 100%;
max-width: min(20rem, 100vw - 3rem);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.fn-navbar-v2__lang-dropdown--mobile-panel.fn-navbar-v2__lang-dropdown--mobile-open .fn-navbar-v2__lang-panel--dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.fn-navbar-v2__lang-trigger--mobile-panel {
border-color: rgba(43, 52, 94, 0.2);
font-size: 1rem;
}
.fn-navbar-v2__lang-trigger-label--mobile-long {
text-transform: none;
letter-spacing: 0.02em;
}
.fn-navbar-v2__lang-dropdown--mobile-panel .fn-navbar-v2__lang-options .language-selector-option a {
font-size: 1rem;
}
@media only screen and (max-width: 1080px) {
div.fn-navbar-v2__actions > a:nth-child(2) {
font-size: 0;
gap: 0;
}
}
@media only screen and (max-width: 894px) {
div.fn-navbar-v2__start > a > img {
height: 2.25rem;
}
.fn-navbar-v2__links-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 1rem;
}
.fn-navbar-v2__mobile-menu-trigger {
display: flex;
}
div.fn-navbar-v2__actions .fn-nav-action__icon {
width: 1.7rem;
height: 1.7rem;
}
div.fn-navbar-v2__inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
div.fn-navbar-v2__nav-mega--mobile-panel.fn-navbar-v2__nav-mega--mobile-open div.fn-navbar-v2__nav-mega-links {
gap: 0.75rem;
padding: 0.75rem 1rem;
}
}
@media only screen and (max-width: 576px) {
div.fn-navbar-v2__start > a > img {
height: 2rem;
}
div.fn-navbar-v2__actions .fn-nav-action__icon {
width: 1.5rem;
height: 1.5rem;
}
.fn-navbar-v2__mega-trigger--mobile-panel {
font-size: 1rem;
}
.fn-navbar-v2__lang-trigger--mobile-panel {
font-size: 0.9375rem;
}
.fn-navbar-v2__lang-dropdown--mobile-panel .fn-navbar-v2__lang-options .language-selector-option a {
font-size: 0.9375rem;
}
.fn-navbar-v2__nav-mega--mobile-panel .fn-navbar-v2__nav-mega-link {
font-size: 0.9375rem;
}
.fn-navbar-v2__mobile-panel-actions .fn-navbar-v2__nav-action--mobile-panel {
font-size: 0.9375rem;
}
}
/* General colors*/
/* fn-nav-action element focus */
/* fn-nav-action--dark */
/* fn-btn */
/* fn-nav-action--light */
/* fn-nav-action--outline */
/* Shopping cart badge (navbar) */
/* Availability field */
.fn-contact-us {
box-sizing: border-box;
width: 100%;
padding: 3rem 0 4rem;
background-color: #ffffff;
}
.fn-contact-us__inner {
position: relative;
min-width: 0;
}
.fn-contact-us__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 3rem;
align-items: center;
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0 auto;
}
.fn-contact-us__col {
min-width: 0;
}
.fn-contact-us__title {
text-align: left;
margin: 0 0 1rem 0;
}
.fn-contact-us__title-line--accent {
display: block;
color: #2248D7;
font-size: inherit;
}
.fn-contact-us__title-line--dark {
display: block;
color: #2b345e;
font-size: inherit;
margin-top: 0.15rem;
}
.fn-contact-us__intro {
margin: 0 0 1.75rem 0;
max-width: 32rem;
font-family: "Poppins", sans-serif;
font-size: 1rem;
line-height: 1.55;
color: rgba(43, 52, 94, 0.72);
text-align: left;
}
.fn-contact-us__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.fn-contact-us__card {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
margin: 0;
min-width: 0;
padding: 1rem 1.15rem;
border: 1px solid #009fe3;
border-radius: 0.75rem;
background-color: #ffffff;
box-sizing: border-box;
}
.fn-contact-us__card-icon {
flex-shrink: 0;
width: 3rem;
height: 3rem;
border-radius: 0.5rem;
background-color: #2248D7;
display: flex;
align-items: center;
justify-content: center;
}
.fn-contact-us__card-icon img {
display: block;
width: 1.5rem;
height: 1.5rem;
object-fit: contain;
filter: brightness(0) invert(1);
}
.fn-contact-us__card-body {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
text-align: left;
}
.fn-contact-us__card-meta {
margin: 0;
font-family: "Poppins", sans-serif;
font-size: 0.875rem;
line-height: 1.45;
color: rgba(43, 52, 94, 0.8);
}
.fn-contact-us__card-primary {
margin: 0;
font-family: "Poppins", sans-serif;
font-size: 1.0625rem;
line-height: 1.35;
font-weight: 600;
}
.fn-contact-us__card-link {
color: #2b345e;
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.2s ease;
overflow-wrap: break-word;
}
.fn-contact-us__card-link:hover {
color: #2248D7;
}
.fn-contact-us__card-link:focus-visible {
outline: 2px solid #2248D7;
outline-offset: 3px;
border-radius: 2px;
}
.fn-contact-us__col--media {
justify-self: stretch;
max-width: 32rem;
}
.fn-contact-us__col--media .fn-img-rounded-shadow {
width: 100%;
}
@media only screen and (max-width: 894px) {
.fn-contact-us__grid {
max-width: 32rem;
grid-template-columns: 1fr;
gap: 2.5rem;
}
.fn-contact-us__col--media {
order: -1;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
width: 100%;
}
}
@media only screen and (max-width: 576px) {
.fn-contact-us__card {
padding: 0.85rem 0.75rem;
gap: 0.75rem;
}
}
/* General colors*/
/* fn-nav-action element focus */
/* fn-nav-action--dark */
/* fn-btn */
/* fn-nav-action--light */
/* fn-nav-action--outline */
/* Shopping cart badge (navbar) */
/* Availability field */
.fn-footer-v2 {
box-sizing: border-box;
width: 100%;
background: transparent;
}
.fn-footer-v2__inner {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-bottom: 2.5rem;
}
.fn-footer-v2__copy {
margin: 0 0 1rem 0;
font-family: "Poppins", sans-serif;
font-size: 0.875rem;
line-height: 1.5;
color: rgba(43, 52, 94, 0.75);
}
.fn-footer-v2__legal {
margin: 0;
font-family: "Poppins", sans-serif;
font-size: 0.875rem;
line-height: 1.5;
}
.fn-footer-v2__link {
color: #2248D7;
text-decoration: underline;
text-underline-offset: 2px;
}
.fn-footer-v2__link:hover {
color: #2b345e;
}
.fn-footer-v2__link:focus-visible {
outline: 2px solid #2248D7;
outline-offset: 3px;
border-radius: 2px;
}
/* General colors*/
/* fn-nav-action element focus */
/* fn-nav-action--dark */
/* fn-btn */
/* fn-nav-action--light */
/* fn-nav-action--outline */
/* Shopping cart badge (navbar) */
/* Availability field */
.fn-availability-field {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 48rem;
border: 1px solid #2248D7;
background-color: #ffffff;
box-shadow: 0 3px 10px 1px #009fe3;
border-radius: 9999px;
padding: 1rem 1.5rem;
margin: 0 auto;
font-family: "Poppins", sans-serif;
font-size: 1.125rem;
line-height: 1.5;
font-weight: 500;
color: #1d1d1d;
}
.fn-availability-field:focus, .fn-availability-field:focus-visible {
outline: 1px solid #2e3b6d;
border: 1px solid #2e3b6d;
}
.fn-availability-field-description {
font-size: 0.9375rem;
line-height: 1.5;
font-weight: 400;
color: #707070;
margin: 0.75rem 0 0 0;
padding: 0 0 0 1.5rem;
text-align: left;
}
.fn-autocomplete-selection {
z-index: 5;
background-color: #FFFFFF;
border: 2px solid #2e3b6d;
box-shadow: 0 3px 10px 1px #009fe3;
font-size: 1.0625rem;
border-radius: 1rem;
margin-top: 0.75rem;
overflow: hidden;
}
.fn-autocomplete-selection-row {
color: #1d1d1d;
font-size: 1.0625rem;
font-family: "Poppins", sans-serif;
font-weight: 400;
line-height: 1.3;
padding: 0.75rem 1.5rem;
background-color: white;
transition: background-color 0.2s ease-in-out;
cursor: pointer;
}
.fn-autocomplete-selection-row:hover {
background-color: #cfe9ff;
}
.fn-availability-field--readonly {
gap: 0.5rem;
padding: 0.5rem 0.5rem 0.5rem 1.25rem;
align-items: center;
cursor: default;
}
.fn-availability-field--readonly:focus,
.fn-availability-field--readonly:focus-visible {
outline: none;
border: 1px solid #2248D7;
}
.fn-availability-field__readonly-text {
flex: 1 1 auto;
min-width: 0;
text-align: left;
color: #555555;
}
.fn-availability-field--readonly .fn-availability-field__edit-btn {
padding: 0.65rem 1rem;
font-size: 0.9375rem;
line-height: 1.2;
white-space: nowrap;
flex-shrink: 0;
margin: 0;
box-shadow: 0 2px 4px 0px #bbbbbb;
}
.fn-availability-field--readonly .fn-availability-field__edit-btn:hover, .fn-availability-field--readonly .fn-availability-field__edit-btn:focus, .fn-availability-field--readonly .fn-availability-field__edit-btn:focus-visible {
box-shadow: 0 3px 6px 1px #8d8d8d;
}
.fn-availability-modes__submit-btn {
box-sizing: border-box;
white-space: normal;
overflow-wrap: break-word;
flex: 0 0 auto;
}
.fn-availability-modes {
box-sizing: border-box;
width: 100%;
max-width: 48rem;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.fn-availability-modes__field-block {
box-sizing: border-box;
width: 100%;
max-width: 48rem;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.fn-availability-modes__field-label {
font-family: "Poppins", sans-serif;
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
margin: 0 0 0.5rem 0;
padding: 0 0 0 0.5rem;
}
.fn-availability-modes__street-input {
text-align: left;
margin: 0;
}
/* Peruskenttäpilli + oikea chevron (select ei tue ::after luotettavasti) */
select.fn-availability-field--select {
box-sizing: border-box;
position: relative;
display: block;
width: 100%;
max-width: 48rem;
min-height: 3.5rem;
margin: 0 auto;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
color-scheme: light;
border: 1px solid #2248D7;
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232b345e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1.4rem center;
background-size: 1.15rem 1.15rem;
box-shadow: 0 3px 10px 1px #009fe3;
border-radius: 9999px;
padding: 1rem 2.5rem 1rem 1.5rem;
font-family: "Poppins", sans-serif;
font-size: 1.125rem;
line-height: 1.5;
font-weight: 500;
color: #1d1d1d;
text-align: left;
}
select.fn-availability-field--select:focus, select.fn-availability-field--select:focus-visible {
outline: 1px solid #2e3b6d;
border: 1px solid #2e3b6d;
}
select.fn-availability-field--select option {
font-family: "Poppins", sans-serif;
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.3;
color: #1d1d1d;
background-color: #ffffff;
padding: 0.75rem 1.5rem;
cursor: pointer;
}
select.fn-availability-field--select option:hover, select.fn-availability-field--select option:focus {
background-color: #cfe9ff;
}
select.fn-availability-field--select option:checked {
background-color: #cfe9ff;
font-weight: 500;
}
.fn-availability-modes__submit {
display: flex;
justify-content: center;
width: 100%;
}
@media only screen and (max-width: 894px) {
.fn-availability-field--readonly .fn-availability-field__edit-btn {
position: relative;
padding: 0.65rem 0.75rem;
}
.fn-availability-field--readonly .fn-availability-field__edit-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
}
@media only screen and (max-width: 576px) {
div.fn-availability-field__readonly-text,
input.fn-availability-field,
select.fn-availability-field--select,
div.fn-autocomplete-selection-row {
font-size: 1rem;
}
select.fn-availability-field--select option {
font-size: 1rem;
}
}
/* General colors*/
/* fn-nav-action element focus */
/* fn-nav-action--dark */
/* fn-btn */
/* fn-nav-action--light */
/* fn-nav-action--outline */
/* Shopping cart badge (navbar) */
/* Availability field */
.fn-how-it-works {
box-sizing: border-box;
width: 100%;
padding: 0 0 2rem;
}
.fn-how-it-works__title {
margin-bottom: 3.5rem;
}
.fn-how-it-works__steps {
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
z-index: 0;
}
.fn-how-it-works__steps::before {
content: "";
position: absolute;
z-index: 0;
top: calc(3rem / 2);
left: 12.5%;
width: 75%;
height: 2px;
background-color: rgba(34, 72, 215, 0.35);
pointer-events: none;
}
.fn-how-it-works__step {
box-sizing: border-box;
position: relative;
z-index: 1;
flex: 1 1 0;
min-width: 0;
margin: 0;
padding: 0;
}
.fn-how-it-works__step-inner {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
width: 100%;
}
.fn-how-it-works__bubble {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
border: 2px solid #009fe3;
background-color: #ffffff;
color: #2b345e;
font-family: "Poppins", sans-serif;
font-size: 1.125rem;
font-weight: 600;
line-height: 1;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.fn-how-it-works__label {
box-sizing: border-box;
width: 100%;
max-width: 14rem;
margin: 0;
text-align: center;
text-transform: none;
font-size: 1.1rem;
font-weight: 500;
line-height: 1.35;
hyphens: auto;
overflow-wrap: anywhere;
}
@media only screen and (max-width: 894px) {
.fn-how-it-works__steps {
flex-direction: column;
align-items: stretch;
gap: 2rem;
width: fit-content;
margin: 0 auto;
}
.fn-how-it-works__steps::before {
top: calc(3rem / 2);
bottom: calc(3rem / 2);
left: calc(3rem / 2);
width: 2px;
height: auto;
right: auto;
}
.fn-how-it-works__step-inner {
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
gap: 1.25rem;
}
.fn-how-it-works__label {
max-width: none;
flex: 1 1 auto;
min-width: 0;
padding-top: 0.25rem;
text-align: left;
margin: auto 0;
}
}
/* General colors*/
/* fn-nav-action element focus */
/* fn-nav-action--dark */
/* fn-btn */
/* fn-nav-action--light */
/* fn-nav-action--outline */
/* Shopping cart badge (navbar) */
/* Availability field */
.fn-result-notice {
box-sizing: border-box;
width: 100%;
max-width: 48rem;
margin-left: auto;
margin-right: auto;
padding: 1.25rem 1.25rem 1.35rem;
border-radius: 1rem;
font-family: "Poppins", sans-serif;
box-shadow: 0 6px 18px rgba(43, 52, 94, 0.08);
}
.fn-result-notice--positive {
background-color: #a1f6a1;
color: #1b5e20;
}
.fn-result-notice--negative {
background-color: #fadbd8;
color: #943126;
}
.fn-result-notice__inner {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1rem;
width: 100%;
min-width: 0;
}
.fn-result-notice__glyph {
display: block;
flex-shrink: 0;
width: 3rem;
height: 3rem;
object-fit: contain;
}
.fn-result-notice__body {
box-sizing: border-box;
flex: 1 1 auto;
min-width: 0;
}
.fn-result-notice__title {
margin: 0 0 0.5rem 0;
padding: 0;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.35;
text-align: left;
color: inherit;
text-transform: none;
}
.fn-result-notice__desc {
margin: 0 0 1rem 0;
padding: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
text-align: left;
color: inherit;
opacity: 0.95;
}
ul.fn-result-notice__bullets {
padding-inline-start: 1.5rem;
list-style-type: disc;
font-size: 1rem;
}
.fn-result-notice__actions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
.fn-result-notice__btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0.65rem 1.25rem;
border: none;
border-radius: 9999px;
background-color: white;
color: #2248D7;
font-family: "Poppins", sans-serif;
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 12px rgba(77, 81, 97, 0.3);
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.fn-result-notice__btn:hover {
background-color: #f5f5f5;
box-shadow: 0 6px 16px rgba(77, 81, 97, 0.2);
transform: translateY(-1px);
}
.fn-result-notice__btn:focus-visible {
outline: 2px solid #2248D7;
outline-offset: 2px;
}
a.fn-result-notice__btn {
cursor: pointer;
}
.fn-result-notice--negative .fn-result-notice__btn {
color: #2248D7;
}
@media only screen and (max-width: 576px) {
.fn-result-notice {
padding: 1rem 1rem 1.15rem;
}
.fn-result-notice__glyph {
width: 2.5rem;
height: 2.5rem;
}
.fn-result-notice__title {
font-size: 1.0625rem;
}
}
/* General colors*/
/* fn-nav-action element focus */
/* fn-nav-action--dark */
/* fn-btn */
/* fn-nav-action--light */
/* fn-nav-action--outline */
/* Shopping cart badge (navbar) */
/* Availability field */
.fn-step-manager {
box-sizing: border-box;
width: 100%;
padding: 0 0 2rem;
font-family: "Poppins", sans-serif;
}
.fn-step-manager__inner {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
}
.fn-step-manager__head {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
width: 100%;
}
.fn-step-manager__step-meta {
margin: 0;
padding: 0;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.2;
color: #2b345e;
opacity: 0.75;
}
.fn-step-manager__title-row {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
width: 100%;
}
.fn-step-manager__bubble {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background-color: #2b345e;
color: #ffffff;
font-family: "Poppins", sans-serif;
font-size: 1rem;
font-weight: 600;
line-height: 1;
}
.fn-step-manager__title {
margin: 0;
padding: 0;
color: #2b345e;
text-transform: none;
text-align: left;
}
.fn-step-manager__desc {
margin: 0;
padding: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.55;
color: #2b345e;
opacity: 0.9;
}
.fn-step-manager__content {
margin-top: 2.5rem;
margin-bottom: 2rem;
box-sizing: border-box;
width: 100%;
}
.fn-step-manager__nav {
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
width: 100%;
}
.fn-step-manager__nav--end {
justify-content: flex-end;
}
.fn-step-manager__btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0.75rem 1.75rem;
border: none;
border-radius: 9999px;
font-family: "Poppins", sans-serif;
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.fn-step-manager__btn:focus-visible {
outline: 2px solid #2248D7;
outline-offset: 2px;
}
.fn-step-manager__btn--prev {
background-color: transparent;
color: #2b345e;
border: 1px solid rgba(43, 52, 94, 0.35);
box-shadow: none;
}
.fn-step-manager__btn--prev:hover {
background-color: #f5f5f5;
box-shadow: 0 3px 10px rgba(43, 52, 94, 0.1);
transform: translateY(-1px);
}
.fn-step-manager__btn--next {
background-color: #2b345e;
color: #ffffff;
box-shadow: 0 4px 12px rgba(43, 52, 94, 0.25);
}
.fn-step-manager__btn--next:hover {
background-color: #2e3b6d;
box-shadow: 0 6px 16px rgba(43, 52, 94, 0.32);
transform: translateY(-1px);
}
@media only screen and (max-width: 576px) {
.fn-step-manager__title-row {
gap: 0.75rem;
}
.fn-step-manager__bubble {
width: 2rem;
height: 2rem;
font-size: 0.9375rem;
}
.fn-step-manager__desc {
font-size: 0.9375rem;
}
.fn-step-manager__btn {
padding: 0.65rem 1.35rem;
font-size: 0.9375rem;
}
}
/* General colors*/
/* fn-nav-action element focus */
/* fn-nav-action--dark */
/* fn-btn */
/* fn-nav-action--light */
/* fn-nav-action--outline */
/* Shopping cart badge (navbar) */
/* Availability field */
.fn-fiber-packages {
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
font-family: "Poppins", sans-serif;
}
.fn-fiber-packages__card {
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
margin: 0;
padding: 2rem 1.5rem 1.75rem;
border-radius: 0.75rem;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.fn-fiber-packages__card--default {
background-color: #ffffff;
border: 1px solid #2e3b6d;
box-shadow: 0 6px 16px rgba(43, 52, 94, 0.14);
color: #2b345e;
}
.fn-fiber-packages__card--popular {
background: linear-gradient(to bottom, #2e3b6d 0%, #2248D7 100%);
border: 1px solid transparent;
box-shadow: 0 6px 16px rgba(43, 52, 94, 0.25);
color: #ffffff;
}
.fn-fiber-packages__badge {
position: absolute;
top: -0.85rem;
left: 50%;
transform: translateX(-50%);
padding: 0.45rem 1.25rem;
border-radius: 9999px;
color: #111111;
font-family: "Poppins", sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(43, 52, 94, 0.2);
background: linear-gradient(to bottom, #ffd900 0%, #ff8800 85%);
}
.fn-fiber-packages__card-inner {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
width: 100%;
text-align: center;
}
.fn-fiber-packages__speed {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
font-size: 2rem;
font-weight: 500;
line-height: 1.1;
color: inherit;
text-transform: none;
text-align: center;
}
.fn-fiber-packages__price {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
font-size: 1.25rem;
font-weight: 400;
line-height: 1.2;
color: inherit;
text-align: center;
}
.fn-fiber-packages__card--default .fn-fiber-packages__price-amount {
color: #2248D7;
font-weight: 700;
}
.fn-fiber-packages__card--popular .fn-fiber-packages__price-amount {
color: #ffffff;
font-weight: 700;
}
.fn-fiber-packages__price-period {
font-weight: 400;
opacity: 0.9;
}
.fn-fiber-packages__vat {
margin: 0 0 0.5rem 0;
padding: 0;
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.3;
color: inherit;
opacity: 0.75;
text-align: center;
}
.fn-fiber-packages__benefits {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 0.875rem;
width: 100%;
margin: 0.25rem 0 1.25rem 0;
padding: 0;
list-style: none;
}
.fn-fiber-packages__benefit {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 0.65rem;
margin: 0;
padding: 0;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
color: inherit;
text-align: left;
}
.fn-fiber-packages__check {
display: inline-block;
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-top: 0rem;
background-color: #9ec277;
mask-image: url("data:image/svg+xml;utf8,");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
.fn-fiber-packages__benefit-text {
flex: 1 1 auto;
min-width: 0;
}
.fn-fiber-packages__btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
margin: auto 0 0 0;
padding: 0.85rem 1.5rem;
border: 1px solid transparent;
border-radius: 9999px;
font-family: "Poppins", sans-serif;
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.fn-fiber-packages__btn:focus-visible {
outline: 2px solid #2248D7;
outline-offset: 2px;
}
.fn-fiber-packages__card--default .fn-fiber-packages__btn {
background-color: #f5f5f5;
color: #2248D7;
border-color: rgba(34, 72, 215, 0.2);
}
.fn-fiber-packages__card--default .fn-fiber-packages__btn:hover {
background-color: #ffffff;
border-color: rgba(34, 72, 215, 0.4);
box-shadow: 0 4px 12px rgba(43, 52, 94, 0.12);
transform: translateY(-1px);
}
.fn-fiber-packages__card--popular .fn-fiber-packages__btn {
background-color: #ffffff;
color: #2248D7;
border-color: transparent;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.fn-fiber-packages__card--popular .fn-fiber-packages__btn:hover {
background-color: #f5f5f5;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
transform: translateY(-1px);
}
@media only screen and (max-width: 576px) {
.fn-fiber-packages {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.fn-fiber-packages__card {
padding: 1.75rem 1.25rem 1.5rem;
}
.fn-fiber-packages__card--popular {
padding-top: 2.25rem;
}
.fn-fiber-packages__speed {
font-size: 1.75rem;
}
.fn-fiber-packages__price {
font-size: 1.125rem;
}
}
/* General colors*/
/* fn-nav-action element focus */
/* fn-nav-action--dark */
/* fn-btn */
/* fn-nav-action--light */
/* fn-nav-action--outline */
/* Shopping cart badge (navbar) */
/* Availability field */
.fn-extra-products {
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
font-family: "Poppins", sans-serif;
}
.fn-extra-products.three-columns {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fn-extra-products__card {
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
margin: 0;
padding: 0 0 1.75rem 0;
border-radius: 0.75rem;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.fn-extra-products__card--default {
background-color: #ffffff;
border: 1px solid #2e3b6d;
box-shadow: 0 6px 16px rgba(43, 52, 94, 0.14);
color: #2b345e;
}
.fn-extra-products__card--popular {
background-color: #ffffff;
border: 1px solid #2e3b6d;
box-shadow: 0 6px 16px rgba(43, 52, 94, 0.14);
color: #2b345e;
}
.fn-extra-products__card--none {
background-color: #ffffff;
border: 1px solid #2e3b6d;
box-shadow: 0 6px 16px rgba(43, 52, 94, 0.14);
color: #2b345e;
padding-top: 1.75rem;
}
.fn-extra-products__card--none .fn-extra-products__card-inner {
justify-content: flex-end;
align-items: center;
text-align: center;
height: 100%;
}
.fn-extra-products__card--none .fn-extra-products__card-inner p.fn-extra-products__description {
margin-bottom: auto;
}
.fn-extra-products.three-columns .fn-extra-products__card--none .fn-extra-products__card-inner p.fn-extra-products__description {
margin-bottom: 3.5rem;
}
.fn-extra-products__badge {
position: absolute;
top: -0.85rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
padding: 0.45rem 1.25rem;
border-radius: 9999px;
color: #111111;
font-family: "Poppins", sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(43, 52, 94, 0.2);
background: linear-gradient(to bottom, #ffd900 0%, #ff8800 85%);
}
.fn-extra-products__image {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 16/10;
background-color: transparent;
border-bottom: 1px solid rgba(34, 72, 215, 0.2);
overflow: hidden;
}
.fn-extra-products__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
}
.fn-extra-products__image--none {
aspect-ratio: auto;
align-items: flex-end;
height: stretch;
border-bottom: none;
}
.fn-extra-products__image--none img {
object-fit: contain;
width: 8.5rem;
height: 8.5rem;
border-radius: 0;
}
.fn-extra-products__card-none-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.fn-extra-products__card-none-wrapper div.fn-extra-products__card-inner .fn-extra-products__btn {
margin: 0;
}
.fn-extra-products__card-inner {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
width: 100%;
padding: 1.5rem 1.5rem 0 1.5rem;
text-align: left;
flex: 1 1 auto;
}
.fn-extra-products__title {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
color: inherit;
text-transform: none;
}
.fn-extra-products__description {
margin: 0;
padding: 0;
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.45;
color: inherit;
opacity: 0.85;
}
.fn-extra-products__price {
margin: 0.25rem 0 0 0;
padding: 0;
font-family: "Poppins", sans-serif;
font-size: 1.125rem;
font-weight: 400;
line-height: 1.2;
color: inherit;
}
.fn-extra-products__price-amount {
color: #2248D7;
font-weight: 700;
}
.fn-extra-products__price-period {
font-weight: 400;
opacity: 0.9;
}
.fn-extra-products__vat {
margin: 0 0 0.5rem 0;
padding: 0;
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.3;
color: inherit;
opacity: 0.75;
}
.fn-extra-products__more {
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin: 0.25rem 0 0.25rem 0;
padding: 0.25rem 0;
background: transparent;
border: none;
color: #2248D7;
font-family: "Poppins", sans-serif;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.3;
cursor: pointer;
text-decoration: none;
}
.fn-extra-products__more:hover .fn-extra-products__more-label {
text-decoration: underline;
}
.fn-extra-products__more:focus-visible {
outline: 2px solid #2248D7;
outline-offset: 2px;
}
.fn-extra-products__chevron {
display: inline-block;
flex-shrink: 0;
width: 1rem;
height: 1rem;
background-color: currentColor;
mask-image: url("data:image/svg+xml;utf8,");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
transition: transform 0.2s ease;
}
.fn-extra-products__more--open .fn-extra-products__chevron {
transform: rotate(180deg);
}
.fn-extra-products__benefits {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
margin: 0.25rem 0 0.5rem 0;
padding: 0;
list-style: none;
}
.fn-extra-products__benefit {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 0.65rem;
margin: 0;
padding: 0;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
color: inherit;
text-align: left;
}
.fn-extra-products__check {
display: inline-block;
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
background-color: #9ec277;
mask-image: url("data:image/svg+xml;utf8,");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
.fn-extra-products__benefit-text {
flex: 1 1 auto;
min-width: 0;
}
.fn-extra-products__btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
margin: auto 0 0 0;
padding: 0.85rem 1.5rem;
border: 1px solid transparent;
border-radius: 9999px;
background-color: #f5f5f5;
color: #2248D7;
border-color: rgba(34, 72, 215, 0.2);
font-family: "Poppins", sans-serif;
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.fn-extra-products__btn:hover {
background-color: #ffffff;
border-color: rgba(34, 72, 215, 0.4);
box-shadow: 0 4px 12px rgba(43, 52, 94, 0.12);
transform: translateY(-1px);
}
.fn-extra-products__btn:focus-visible {
outline: 2px solid #2248D7;
outline-offset: 2px;
}
@media only screen and (max-width: 894px) {
.fn-extra-products.three-columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fn-extra-products.three-columns .fn-extra-products__card--none .fn-extra-products__card-inner p.fn-extra-products__description {
margin-bottom: 1.5rem;
}
}
@media only screen and (max-width: 576px) {
.fn-extra-products,
.fn-extra-products.three-columns {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.fn-extra-products.three-columns .fn-extra-products__card--none .fn-extra-products__card-inner p.fn-extra-products__description {
margin-bottom: 1.25rem;
}
.fn-extra-products__card {
padding-bottom: 1.5rem;
}
.fn-extra-products__card--none {
padding: 1.5rem 1.25rem;
}
.fn-extra-products__card-inner {
padding: 1.25rem 1.25rem 0 1.25rem;
}
.fn-extra-products__title {
font-size: 1.0625rem;
}
}
/* General colors*/
/* fn-nav-action element focus */
/* fn-nav-action--dark */
/* fn-btn */
/* fn-nav-action--light */
/* fn-nav-action--outline */
/* Shopping cart badge (navbar) */
/* Availability field */
.fn-selected-address {
box-sizing: border-box;
width: fit-content;
max-width: 100%;
margin: 0 auto 3.25rem auto;
padding: 1rem 1.25rem;
border-radius: 0.75rem;
background-color: #ffffff;
border: 1px solid rgba(43, 52, 94, 0.18);
box-shadow: 0 4px 12px rgba(43, 52, 94, 0.1);
font-family: "Poppins", sans-serif;
color: #2b345e;
}
.fn-selected-address__row {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75rem;
width: 100%;
min-width: 0;
}
.fn-selected-address__icon-wrap {
box-sizing: border-box;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
background-color: #009fe3;
}
.fn-selected-address__icon {
display: block;
width: 1.25rem;
height: 1.25rem;
object-fit: contain;
}
.fn-selected-address__text {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
min-width: 0;
flex: 1;
}
.fn-selected-address__title {
margin: 0;
padding: 0;
font-size: 0.9375rem;
font-family: "Poppins", sans-serif;
font-weight: 500;
line-height: 1.1;
color: #2b345e;
opacity: 0.8;
text-transform: none;
}
.fn-selected-address__line {
margin: 0;
padding: 0;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.45;
color: #2b345e;
word-break: break-word;
}
.fn-selected-address__line--loading {
font-weight: 400;
opacity: 0.75;
}
@media only screen and (max-width: 576px) {
.fn-selected-address {
padding: 0.85rem 1rem;
}
.fn-selected-address__row {
gap: 0.75rem;
}
.fn-selected-address__icon-wrap {
width: 2.25rem;
height: 2.25rem;
}
.fn-selected-address__line {
font-size: 0.875rem;
}
}
/* General colors*/
/* fn-nav-action element focus */
/* fn-nav-action--dark */
/* fn-btn */
/* fn-nav-action--light */
/* fn-nav-action--outline */
/* Shopping cart badge (navbar) */
/* Availability field */
.fn-order-summary {
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 1.75rem 2rem 1.75rem 2rem;
border-radius: 0.75rem;
background-color: #ffffff;
border: 1px solid #2e3b6d;
box-shadow: 0 6px 16px rgba(43, 52, 94, 0.12);
font-family: "Poppins", sans-serif;
color: #2b345e;
}
.fn-order-summary__title {
margin: 0 0 1.25rem 0;
padding: 0;
font-size: 1.5rem;
font-family: "Poppins", sans-serif;
font-weight: 500;
line-height: 1.3;
color: #2b345e;
text-align: left;
text-transform: none;
}
.fn-order-summary__list {
margin: 0 0 1rem 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.fn-order-summary__row {
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
width: 100%;
min-width: 0;
}
.fn-order-summary__row-main {
min-width: 0;
flex: 1;
}
.fn-order-summary__name {
margin: 0 0 0.25rem 0;
padding: 0;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.35;
color: #2b345e;
}
.fn-order-summary__desc {
margin: 0;
padding: 0;
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.4;
color: #2b345e;
opacity: 0.7;
}
.fn-order-summary__price {
margin: 0;
padding: 0;
flex-shrink: 0;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.35;
color: #2b345e;
text-align: right;
white-space: nowrap;
}
.fn-order-summary__split {
margin: 0;
border: 0;
height: 1px;
background-color: rgba(43, 52, 94, 0.12);
}
.fn-order-summary__total-row {
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
width: 100%;
margin-top: 1rem;
}
.fn-order-summary__total-label {
margin: 0;
padding: 0.35rem 0 0 0;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.3;
color: #2b345e;
}
.fn-order-summary__total-amount {
margin: 0;
padding: 0;
text-align: right;
}
.fn-order-summary__total-line {
margin: 0;
padding: 0;
line-height: 1.2;
text-align: right;
}
.fn-order-summary__total-value {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
color: #2248D7;
}
.fn-order-summary__total-period {
font-size: 1.25rem;
font-weight: 500;
line-height: 1.2;
color: #2248D7;
opacity: 0.9;
}
.fn-order-summary__vat {
display: block;
margin: 0.4rem 0 0 0;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.3;
color: #2b345e;
opacity: 0.8;
text-align: right;
}
.fn-order-summary__consent {
box-sizing: border-box;
margin-top: 1.5rem;
padding: 1rem 1rem;
border: 1px solid rgba(43, 52, 94, 0.18);
border-radius: 0.5rem;
background-color: #f5f5f5;
}
.fn-order-summary__consent-label {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 0.75rem;
margin: 0;
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.45;
color: #2b345e;
cursor: pointer;
}
.fn-order-summary__checkbox {
flex-shrink: 0;
width: 1.1rem;
height: 1.1rem;
margin: 0.2rem 0 0 0;
cursor: pointer;
accent-color: #2e3b6d;
}
.fn-order-summary__consent-block {
margin: 0 0 0.85rem 0;
}
.fn-order-summary__consent-block:last-child {
margin-bottom: 0;
}
.fn-order-summary__consent-block .fn-order-summary__consent-label {
margin: 0;
}
.fn-order-summary__inline-link {
color: #2e3b6d;
text-decoration: underline;
font-weight: 500;
}
.fn-order-summary__inline-link:hover,
.fn-order-summary__inline-link:focus {
color: #009fe3;
}
.fn-order-summary__consent-block .fn-order-summary__inline-link {
text-decoration: underline;
}
.fn-order-summary__cta {
box-sizing: border-box;
display: flex;
width: 100%;
margin: 1.5rem 0 0 0;
padding: 0.85rem 1.25rem;
align-items: center;
justify-content: center;
border: none;
border-radius: 9999px;
background-color: #2b345e;
color: #ffffff;
font-family: "Poppins", sans-serif;
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
cursor: pointer;
text-align: center;
box-shadow: 0 4px 12px rgba(43, 52, 94, 0.25);
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.fn-order-summary__cta:hover:not(:disabled) {
background-color: #2e3b6d;
box-shadow: 0 6px 16px rgba(43, 52, 94, 0.32);
transform: translateY(-1px);
}
.fn-order-summary__cta:disabled {
cursor: not-allowed;
opacity: 0.5;
box-shadow: none;
transform: none;
}
.fn-order-summary__cta:focus-visible {
outline: 2px solid #2248D7;
outline-offset: 2px;
}
@media only screen and (max-width: 576px) {
.fn-order-summary {
padding: 1.25rem 1.1rem 1.5rem 1.1rem;
}
.fn-order-summary__title {
font-size: 1.25rem;
margin-bottom: 1.5rem;
}
.fn-order-summary__list {
gap: 1.5rem;
}
.fn-order-summary__row {
flex-wrap: wrap;
gap: 0.0625rem;
}
.fn-order-summary__price {
width: 100%;
text-align: left;
margin-top: 0.25rem;
color: #2248D7;
}
.fn-order-summary__total-value {
font-size: 1.25rem;
}
}