/* input(1209,28): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':' input(27485,1): run-time error CSS1019: Unexpected token, found '}' */ /* Auto-generated bundled CSS — do not edit directly. */ /* Source: global.css — built by bundle-css.sh */ /* link-button-styles */ /* --- Inlined from: ../vendors/ui-kit/button-link/button-link.css --- */ /*Buttons and links*/ .btn_base, .link_base { font-family: var(--font-family-1); font-style: normal; font-weight: var(--weight-bolder); line-height: normal; display: flex; align-items: center; justify-content: center; text-decoration: none; flex-wrap: nowrap; white-space: nowrap; } .btn_medium { min-height: 3rem; font-size: var(--text-base); } .btn_large { min-height: 3.7rem; font-size: var(--text-base); padding: var(--p-2) 2rem; } .link_medium { font-size: var(--text-sm); padding: 0rem var(--p-2); min-height: 2rem; text-decoration: underline; } .link_large { min-height: 3rem; font-size: var(--text-base); padding: var(--p-2) 2rem; } @media (max-width: 768px) { .btn_medium, .btn_large { min-height: 3rem; } .link_medium, .link_large { font-size: var(--text-sm); min-height: 2rem; } } .btn_primary { border: 0.12rem solid var(--swiper-main-banner-button-border-color); color: var(--swiper-main-banner-button-color); background-color: var(--swiper-main-banner-button-background-color); border-radius: var(--swiper-main-banner-button-border-radius); } .btn_primary:hover, .btn_primary:focus { color: var(--swiper-main-banner-button-color-hover); background-color: var(--swiper-main-banner-button-background-color-hover); border-color: var(--swiper-main-banner-button-background-color-hover); transition: all 0.5s; } .btn_primary:disabled { background: var(--brand-light); color: var(--brand-white); border: var(--border-xs) var(--brand-light); pointer-events: none; } .btn_secondary_lead { color: var(--gray-light-1); background-color: var(--swiper-main-banner-button-secondary-background-color); border: 0.12rem solid var(--swiper-main-banner-button-secondary-border-color); border-radius: var(--swiper-main-banner-button-secondary-border-radius) } .btn_secondary_lead:hover { color: var(--brand-white); background-color: var(--swiper-main-banner-button-secondary-background-color-hover); } .btn_secondary_lead:disabled { background: var(--gray-dark-7); color: var(--gray-dark-7); border: var(--border-xs) var(--brand-light-2); pointer-events: none; } .btn_secondary_normal { color: var(--gray-dark-10); background-color: var(--brand-white); border: 0.125rem solid var(--gray-dark-10); } .btn_secondary_normal:hover { color: var(--gray-dark-10); background-color: var(--gray-dark-8); border: 0.125rem solid var(--gray-dark-10); } .btn_secondary_normal:disabled { background: transparent; color: var(--gray-dark-7); border: var(--border-xs) var(--gray-dark-7); pointer-events: none; } .link_button_primary { color: var(--brand); background-color: transparent; border: none; } .link_button_primary:hover { color: var(--brand); background-color: var(--gray-dark-8); border: none; } .link_button_secondary { color: var(--brand); background-color: transparent; border: none; } .link_button_secondary:hover { color: var(--gray-dark-10); background-color: var(--gray-dark-8); border: none; } /*Buttons modifiers*/ .w_full { width: 100%; } .mb_1\.25 { margin-bottom: 1.25rem; } @media (max-width: 768px) { .mb_1\.25 { margin-bottom: 0rem; } } .mr_0\.5 { margin-right: 0.5rem; } .ml_0\.5 { margin-left: 0.5rem; } .padding_0rem { padding: unset; } .justify_unset { justify-content: unset; } .rotate_180 { transform: rotate(180deg); } .p_0\.5 { padding: .5rem 0 .5rem 0; } /* icons buttons sizes*/ .btn_base svg, .link_base svg, .link_base img { height: 1.25rem; width: 1.25rem; } /* --- Inlined from: ./[blocklist]_components/swiperMainBanner/swiperMainBanner.css --- */ /* --- Inlined from: ../../[branding]_components/swiperMainBanner.css --- */ /* Desktop */ :root { /* 1. Background Image */ /* 2. Title */ --swiper-main-banner-title-font-family: var(--font-family-1); --swiper-main-banner-title-font-size: var(--text-6xl); --swiper-main-banner-title-font-style: 'normal'; --swiper-main-banner-title-font-weight: var(--weight-bolder); --swiper-main-banner-title-color: var(--brand-white); --swiper-main-banner-line-height: 3.5rem; --swiper-main-banner-text-transform: uppercase; /* 3. Line */ --swiper-main-banner-color: var(--brand-white); --swiper-main-banner-border-width: 1px; --swiper-main-banner-border-style: solid; --swiper-main-banner-border-image: linear-gradient(to right, white, rgba(137, 137, 137, 0.05)) 1; --swiper-main-banner-opacity: 1; --swiper-main-banner-width: 80%; /* 4. Description */ --swiper-main-banner-description-font-family: var(--font-family-4); --swiper-main-banner-description-font-size: var(--text-md); --swiper-main-banner-description-font-style: 'normal'; --swiper-main-banner-description-font-weight: var(--weight-normal); --swiper-main-banner-description-color: var(--brand-white); /* 5. Price Label */ /* 6. Price Value */ /* 7. CTA Buttons */ /* primary button */ --swiper-main-banner-button-font-family: var(--font-family-1); --swiper-main-banner-button-font-size: var(--text-md); --swiper-main-banner-button-font-style: 'normal'; --swiper-main-banner-button-font-weight: var(--weight-semilight); --swiper-main-banner-button-color: var(--brand-white); --swiper-main-banner-button-color-hover: var(--brand-white); --swiper-main-banner-button-background-color: var(--brand); --swiper-main-banner-button-background-color-hover: #888888; --swiper-main-banner-button-border-color: var(--brand); --swiper-main-banner-button-border-radius: 8px; /* secondary button */ --swiper-main-banner-button-secondary-font-family: var(--font-family-1); --swiper-main-banner-button-secondary-font-size: var(--text-md); --swiper-main-banner-button-secondary-font-style: 'normal'; --swiper-main-banner-button-secondary-font-weight: var(--weight-semilight); --swiper-main-banner-button-secondary-color: var(--brand-black); --swiper-main-banner-button-secondary-color-hover: var(--brand-black); --swiper-main-banner-button-secondary-background-color: transparent; --swiper-main-banner-button-secondary-background-color-hover: transparent; --swiper-main-banner-button-secondary-border-color: var(--brand-white); --swiper-main-banner-button-secondary-border-radius: 8px; /* 8. Pagination */ --swiper-main-banner-pagination-color: var(--brand-white); --swiper-main-banner-pagination-trail-color: var(--gray-dark-7); --swiper-main-banner-pagination-play-pause-button-color: var(--brand-white); --swiper-main-banner-pagination-active-background-color: transparent; --swiper-main-banner-pagination-inactive-background-color: #FFFFFF66; } /* Tablet */ @media (max-width: 1400px) { :root { --swiper-main-banner-title-font-size: 2.5rem !important; } } /* Mobile Devices */ @media (max-width: 768px) { :root { /* 8. Pagination */ --swiper-main-banner-pagination-color: var(--brand-black); --swiper-main-banner-pagination-trail-color: var(--gray-dark-7); --swiper-main-banner-pagination-play-pause-button-color: var(--brand-black); --swiper-main-banner-pagination-active-background-color: transparent; --swiper-main-banner-pagination-inactive-background-color: transparent; } } #swipper-wrap { height: auto; } /* ─── Base Styles ──────────────────────────────────────────────────────────── */ .boxHome .banner-title { font-family: var(--swiper-main-banner-title-font-family); font-size: var(--swiper-main-banner-title-font-size); font-style: var(--swiper-main-banner-title-font-style); font-weight: var(--swiper-main-banner-title-font-weight); color: var(--swiper-main-banner-title-color); line-height: var(--swiper-main-banner-line-height); width: 100%; } .linea { position: relative; border-width: var(--swiper-main-banner-border-width); border-style: var(--swiper-main-banner-border-style); border-image: var(--swiper-main-banner-border-image); opacity: var(--swiper-main-banner-opacity); width: var(--swiper-main-banner-width); } .boxHome .paragraph { font-family: var(--swiper-main-banner-description-font-family); font-size: var(--swiper-main-banner-description-font-size); font-style: var(--swiper-main-banner-description-font-style); font-weight: var(--swiper-main-banner-description-font-weight); color: var(--brand-white); line-height: normal; min-height: 3rem; max-height: 2.9rem; margin-bottom: 1rem; text-align: left; letter-spacing: 0.02222rem; } .boxHome > h2, .boxHome > p { font-size: var(--text-base); text-transform: uppercase; text-align: left; } /* ─── Hero Banner ──────────────────────────────────────────────────────────── */ .swiper-hero-banner #swipper-ppal { position: relative; overflow-x: hidden; width: 100%; } .hero-banner__content { background: linear-gradient(to right, black, rgba(255, 255, 255, 0) 70.71%), var(--bg-slide); width: 100%; height: auto; background-repeat: no-repeat; background-size: cover; background-position: center right; background-attachment: fixed; aspect-ratio: 13/5; } .hero-banner__content > img { width: 100%; height: 100%; object-fit: cover; } /* ─── Box Home ─────────────────────────────────────────────────────────────── */ .swiper-hero-banner svg { position: absolute; top: 0rem; width: 1.7rem; height: 1.7rem; } /* ─── Pagination ───────────────────────────────────────────────────────────── */ .swiper-hero-banner .swiper-pagination-bullet { width: 1rem; height: 1rem; border: 1.5px solid var(--gray-light-5); position: relative; opacity: 1; background-color: var( --swiper-main-banner-pagination-inactive-background-color ); } .swiper-hero-banner .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var( --swiper-main-banner-pagination-active-background-color ) !important; border: transparent !important; width: 1.5rem; height: 1.5rem; top: 0.23rem; } /* ─── Buttons ──────────────────────────────────────────────────────────────── */ .buttonsBanner { width: 100%; text-align: center; } .buttonsBanner > a { text-decoration: none; display: contents; } .buttonsBanner > a > p { font-family: var(--font-family-1); font-size: var(--text-md); font-style: normal; text-decoration: none; font-weight: var(--weight-bold); line-height: 1.33333rem; width: 100%; } .link-wrapper { border: 1px solid var(--gray-dark-1); padding: 0.7rem 0; margin-top: 2.5rem; } .black-button { color: var(--gray-light-1); background-color: var(--brand); margin: 0 0 1rem 0; border: 0.12rem solid var(--brand); font-family: var(--font-family-1); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-bold); } .black-button:hover { color: var(--gray-light-1); background-color: var(--brand-dark); border-color: var(--brand-dark); transition: all 0.5s; } .black-button:active { color: var(--brand-white); background-color: var(--gray-dark-11); border: none; } .white-button { color: var(--gray-light-1); background-color: transparent; margin: 0 0 0.1rem 0; border: 0.12rem solid var(--brand-white); font-family: var(--font-family-1); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-bolder); line-height: normal; } .white-button:hover { color: var(--brand-white); background-color: var(--gray-light-1-20); } /* ─── Legal Bases ──────────────────────────────────────────────────────────── */ .legalBases > a { text-decoration: none; } .legalBases > a:hover { text-decoration: underline; text-decoration-color: var(--gray-light-1); } .legalBases > a > p { font-family: var(--font-family-1); color: var(--gray-light-1); font-size: 12px; font-weight: var(--weight-normal); line-height: 1rem; letter-spacing: 0em; text-align: left; margin-top: 1.5rem; } /* ─── Pagination Timer ─────────────────────────────────────────────────────── */ .swiper-pagination-hero-banner.timer-banner { position: relative; width: 100%; padding-left: 3rem; z-index: 1; top: calc(94.1% - 2.5vh) !important; } .swiper-pagination-clickable .swiper-pagination-bullet .pause svg, .swiper-pagination-clickable .swiper-pagination-bullet .play svg { width: 1rem; height: 1rem; margin-left: 0.35rem; top: 0.35rem; } /* ─── Responsive: max-width 1920px ────────────────────────────────────────── */ @media (max-width: 1920px) { .swiper-hero-banner .swiper-pagination-bullet { width: 20px; height: 20px; background-color: transparent; } .swiper-hero-banner .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 1.7rem; height: 1.7rem; top: 0.2rem; } } /* ─── Responsive: max-width 1700px ────────────────────────────────────────── */ @media (max-width: 1700px) { .swiper-hero-banner .swiper-pagination-bullet { width: 17px; height: 17px; background-color: none; top: 0.2rem; } .swiper-hero-banner .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 1.7rem; height: 1.7rem; top: 0.36rem; } .swiper-pagination-clickable .swiper-pagination-bullet .pause svg, .swiper-pagination-clickable .swiper-pagination-bullet .play svg { width: 1rem; height: 1rem; margin-left: 0.33rem; top: 0.3rem; } } /* ─── Responsive: max-width 1400px ────────────────────────────────────────── */ @media (max-width: 1400px) { .swiper-hero-banner .swiper-pagination-bullet { width: 17px; height: 17px; border: 1.5px solid var(--gray-dark-7); background-color: none; top: -1.8rem; } .swiper-hero-banner .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 1.7rem; height: 1.7rem; top: -1.7rem; } } /* ─── Responsive: max-width 1366px ────────────────────────────────────────── */ @media (max-width: 1366px) { .swiper-hero-banner .swiper-pagination-bullet { width: 15px; height: 15px; border: 1.5px solid var(--gray-dark-7); background-color: none; top: 0rem; } .swiper-hero-banner .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 1.7rem; height: 1.7rem; top: -0.5rem; } .swiper-pagination-hero-banner.timer-banner { padding-left: 0rem; } .swiper-pagination-hero-banner { position: relative; display: flex; justify-content: center; margin-left: 0; margin-top: 2rem; } .legalBases > a > p { font-size: var(--text-sm); margin-top: 0.5rem; } .link-wrapper { padding: var(--p-2) 0; margin-top: 1rem; } } /* ─── Responsive: min-width 1367px ────────────────────────────────────────── */ @media (min-width: 1367px) { .swiper-pagination-hero-banner.timer-banner { position: absolute; } } /* ─── Responsive: min-width 1366px ────────────────────────────────────────── */ @media (min-width: 1366px) { .boxHome { position: absolute; color: var(--brand-white); height: auto; text-align: left; top: 50%; left: 3rem; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: center; width: 43.938rem; } .banner_home_width { height: 60px !important; width: 405px !important; } } /* ─── Responsive: min-width 768px and max-width 1366px ────────────────────── */ @media (min-width: 768px) and (max-width: 1366px) { .boxHome { position: absolute; color: var(--brand-white); height: auto; top: 50%; text-align: left; transform: translateY(-50%); left: 3rem; display: flex; flex-direction: column; justify-content: center; width: 27.6rem; } } /* ─── Responsive: min-width 768px and max-width 1428px ────────────────────── */ @media (min-width: 768px) and (max-width: 1428px) { .buttonsBanner > a { display: block; width: 252px; } } /* ─── Responsive: max-width 1080px ────────────────────────────────────────── */ @media (max-width: 1080px) { .swiper-hero-banner .swiper-pagination-bullet { width: 15px; height: 15px; border: 1.5px solid var(--gray-dark-7); background-color: none; } } /* ─── Responsive: max-width 1069px ────────────────────────────────────────── */ @media (max-width: 1069px) { .swiperHome .swiper-hero-banner #swipper-ppal .swiper-backface-hidden .swiper-slide { min-height: 378px; background: var(--gray-dark-10); } .hero-banner__content { aspect-ratio: 13/6; } .boxHome .banner-title { font-size: var(--text-5xl); font-style: normal; font-weight: var(--weight-bolder); line-height: 2.5rem; width: 100%; max-width: max-content; margin: 0; } .boxHome .paragraph { font-size: 1.1rem; font-style: normal; font-weight: var(--weight-bold); min-height: 3rem; max-height: 2.9rem; margin-bottom: 1rem; text-align: left; padding-right: 2rem; } } /* ─── Responsive: max-width 900px ─────────────────────────────────────────── */ @media (max-width: 900px) { .boxHome .banner-title { font-size: 32px; line-height: 32px; } .boxHome .paragraph { font-size: 18px; font-weight: var(--weight-normal); } /* 8. Pagination */ .swiper-hero-banner .swiper-pagination-bullet { width: 1rem; height: 1rem; border: 1.5px solid #E1E1E1; position: relative; opacity: 1; } .swiper-hero-banner .swiper-pagination-bullet.swiper-pagination-bullet { background-color: var(--swiper-main-banner-pagination-inactive-background-color); } .swiper-hero-banner .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--swiper-main-banner-pagination-active-background-color) !important; } /* SWIPER BANNER */ .swiper-hero-banner #swipper-ppal { position: relative; overflow-x: hidden; } .boxHome { width: 100%; } .hero-banner__content { height: 460px; } } /* ─── Responsive: max-width 767px ─────────────────────────────────────────── */ @media (max-width: 767px) { .hero-banner__content { height: auto !important; background: linear-gradient(to top, black, rgba(0, 0, 0, 0.22) 20%), var(--bg-slide-mobile, var(--bg-slide)); width: 100%; background-repeat: no-repeat; background-size: cover; background-position: top right; min-height: 0rem; background-color: var(--gray-dark); } .boxHome { position: relative; width: 100%; height: auto; left: 0; background: var(--brand-black); padding: 0 1.5rem 0.5rem; min-height: 16rem; display: flex; flex-direction: column; justify-content: flex-end; } .boxHome > h2, .boxHome > p { padding: var(--p-0); margin-bottom: 0; font-size: var(--text-base); text-transform: uppercase; text-align: left; min-height: 3rem; } @media (max-width:768px) { .boxHome>h2, .boxHome>p { padding: var(--p-0); margin-bottom: 0; font-size: var(--text-base); text-transform: uppercase; text-align: left; min-height: 3rem; /* max-height: 2.9rem; */ } } /**BUTTONS*/ .buttonsBanner>a>p { font-family: var(--font-family-1); font-size: var(--text-md); font-style: normal; text-decoration: none; font-weight: var(--weight-bold); line-height: 1.33333rem; width: 100%; } @media (max-width:768px) { .buttonsBanner { display: flex; /* padding: 10px 20px; */ flex-direction: row-reverse; } } @media (max-width:768px) { .buttonsBanner>a { flex: 0 0 auto; width: 50%; } } @media (min-width:769px) and (max-width:1428px) { .buttonsBanner>a { display: block; width: 365px; } } /*Contenedor botones*/ .link-wrapper { border: 1px solid var(--gray-dark-1); padding: .7rem 0; margin-top: 2.5rem; /* width: 75%; */ } @media (max-width:1280px) { .link-wrapper { padding: var(--p-2) 0; margin-top: 1rem; } } @media (max-width:768px) { .link-wrapper { margin: 0; /* width: 100%; */ text-align: center; } } /*Buttons Funcionality Black And white*/ .buttonsBanner { /*width: 25%; First Version*/ width: 100%; /* padding-top: var(--p-4); */ text-align: center; } .buttonsBanner>a { text-decoration: none; display: contents; } @media (max-width:768px) { .buttonsBanner { width: 100%; display: flex; flex-direction: initial; } } @media (max-width:780px) { .buttonsBanner { justify-content: center; flex-direction: row-reverse; gap: 10px; } } @media (max-width:768px) { .buttonsBanner>a { flex: 1 1 auto; } } @media (min-width:768px) and (max-width:1428px) { .buttonsBanner>a { width: 252px; } } .link-wrapper { /* border: 1px solid var(--gray-dark-1); padding: var(--p-4) 0; margin-top: var(--text-5xl); width: 25rem; */ } @media (max-width:1280px) { .link-wrapper { /* padding: var(--p-2) 0; margin-top: var(--text-xl); */ } } @media (max-width:768px) { .link-wrapper { /* margin: var(--text-xl) 0 0.15rem 0; */ } } .black-button { color: var(--gray-light-1); background-color: var(--brand); margin: 0 0 1rem 0; border: 0.12rem solid var(--brand); font-family: var(--font-family-1); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-bold); /* text-transform: uppercase; */ } .black-button:hover { color: var(--gray-light-1); background-color: var(--brand-dark); border-color: var(--brand-dark); transition: all 0.5s; } .black-button:active { color: var(--brand-white); background-color: var(--gray-dark-11); border: none; } @media (max-width:900px) { .boxHome .banner-title { font-size: 24px; line-height: 32px; } .boxHome .paragraph { font-size: 18px; font-weight: var(--weight-normal); } .boxHome { width: 253px; } .hero-banner__content { height: 460px; } } @media (max-width:768px) { .white-button, .black-button { padding: 0.8rem 2rem; margin: 0; } .black-button { display: flex; justify-content: center; align-items: center; } .boxHome { width: 100%; } } .white-button { color: var(--gray-light-1); background-color: transparent; margin: 0 0 .1rem 0; border: 0.12rem solid var(--brand-white); font-family: var(--font-family-1); font-size: var(--text-base); font-style: normal; } .boxHome .banner-title { font-size: var(--text-5xl); line-height: 2rem; font-weight: var(--weight-bolder); background: linear-gradient(to top, black 32%, rgba(0, 0, 0, 0) 58%); min-height: auto; padding-left: 0rem; max-width: 100vw; } .boxHome .paragraph { font-size: 1rem; font-weight: var(--weight-normal); min-height: 100%; max-height: 100%; line-height: 1.375rem; margin-left: 0rem; } .linea { width: 100%; border-radius: 10px; background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%); position: relative; margin: 0.5rem 0rem; } .buttonsBanner { display: flex; flex-direction: row-reverse; justify-content: center; width: 100%; } .buttonsBanner > a { flex: 1 1 auto; } .link-wrapper { margin: 0; text-align: center; } .white-button, .black-button { padding: 0.8rem 2rem; margin: 0; } .black-button { display: flex; justify-content: center; align-items: center; } .swiper-hero-banner .swiper-pagination-bullet { border: 1.5px solid var(--gray-dark-7); } .swiper-hero-banner .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 1.7rem; height: 1.7rem; top: 0rem; } .swiper-content-pagination .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal.timer-banner { left: 0rem; position: relative; bottom: 0.3rem; padding-top: 2rem; margin: 0; width: 100%; } } /* ─── Responsive: max-width 695px ─────────────────────────────────────────── */ @media (max-width: 695px) { .swiper-pagination-clickable .swiper-pagination-bullet .pause svg { width: 1rem; height: 1rem; top: 0.32rem; left: -0.03rem; } .swiper-pagination-clickable .swiper-pagination-bullet .play svg { width: 1rem; height: 1rem; top: 0.32rem; left: 0.08rem; } } /* ─── Responsive: max-width 580px ─────────────────────────────────────────── */ @media (max-width: 580px) { .swiper-hero-banner > svg { position: absolute; left: 83%; top: 38%; } } /* ─── Responsive: max-width 504px ─────────────────────────────────────────── */ @media (max-width: 504px) { .swiper-hero-banner > svg { position: absolute; left: 80%; top: 36%; } } /* ─── Responsive: max-width 320px ─────────────────────────────────────────── */ @media (max-width: 320px) { .boxHome { min-height: 17.5rem; } .boxHome .paragraph { min-height: 4.3rem; max-height: 4.5rem; font-size: 0.777rem; line-height: 1.22222rem; margin-left: 0rem; padding-right: 0rem; } .swiper-hero-banner .swiper-pagination-bullet { width: 12px; height: 12px; margin-left: 0; margin-top: 2.5rem; background-color: none; } } /* --- Inlined from: ./[blocklist]_components/carouselCard/carouselCard.css --- */ /* --- Inlined from: ../../[branding]_components/cardCarousel.css --- */ :root { /* 1. Section / Container */ --carousel-padding: 60px; --track-max-width: 1536px; --track-padding: 90px; /* CAROUSEL - SECTION LABEL */ --carousel-section-label-font-family: var(--font-family-1); --carousel-section-label-font-weight: var(--weight-semilight); --carousel-section-label-font-size: var(--text-lg); --carousel-section-label-color: var(--gray-dark-1); --carousel-section-label-letter-spacing: 0.2rem; --carousel-section-label-margin-bottom: 1rem; /* 2. Card (Blog/Testimonial) */ --carousel-bg: #fff; --carousel-card-width: 356px; --carousel-card-shadow: 0 4px 12px #00000040; /* 3. Card Image */ --card-image-height: 240px; /* 4. Card Title */ --card-content-title-font-family: var(--font-family-2); --card-content-title-font-size: var(--text-lg); --card-content-title-font-weight: var(--weight-normal); --card-content-title-color: var(--brand-black); /* 5. Card Text */ --card-paragraph-font-size: var(--text-md); --card-paragraph-line-height: 1.5; --card-paragraph-margin: 8px 0 14px; --card-paragraph-color: #373637; --card-paragraph-font-family: var(--font-family-4); /* 6. Card CTA */ --link-color: var(--brand-black); --carousel-card-link-font-family: var(--font-family-2); --carousel-card-link-color: var(--link-color); /* 7. Navigation Arrows */ --nav-width: 40px; --nav-height: 80px; --nav-font-size: 34px; --nav-offset-desktop: 0; --nav-offset-mobile: left: clamp(-40px, -4vw, -10px); --button-disabled-color: #999; --carousel-card-navigation-font-weight: var(--weight-bolder); --carousel-nav-color: var(--link-color); /* 8. Pagination (Blog/Testimonial) */ --carousel-pagination-active-color: #00233a; --carousel-pagination-border-color: var(--gray-dark-4); /* Dealer Card */ --dealer-card-bg: var(--brand-white); --dealer-card-radius: 15px; --dealer-card-max-width: 374px; --dealer-card-padding-y: 1.25rem; --dealer-card-padding-x: 0.9375rem; --dealer-card-shadow: 4px 5px 5px rgba(0, 0, 0, 0.25); /* Dealer Text */ --dealer-title-color: var(--brand-black); --dealer-text-color: var(--gray-dark-1); /* Dealer Dividers */ --dealer-divider-color: #00000033; --dealer-contact-divider-color: #e1e2e1; /* Dealer Services Chips */ --dealer-chip-bg: #16bae70d; --dealer-chip-text-color: var(--brand-black); --dealer-chip-radius: 6px; --dealer-chip-padding-y: 6px; --dealer-chip-padding-x: 10px; /* Dealer Links */ --dealer-link-color: #373637; --dealer-link-active-color: var(--brand-black); /* Dealer Pagination */ --dealer-pagination-bullet-size: 18px; --dealer-pagination-bullet-border: #838383; --dealer-pagination-active-bg: var(--brand-black); --dealer-pagination-active-border: var(--brand-black); --dealer-pagination-margin-top: 58px; /* Dealer Spacing */ --dealer-news-swiper-padding-bottom: 24px; } /* Blog Layout */ .carousel-card-section { padding: var(--carousel-padding); width: 100%; max-width: 1920px; margin: 0 auto; } .carousel-header { text-align: center; max-width: 1250px; margin: auto; padding-bottom: 50px; } .carousel-header .carousel-section-label { font-family: var(--carousel-section-label-font-family); font-weight: var(--carousel-section-label-font-weight); font-size: var(--carousel-section-label-font-size); color: var(--carousel-section-label-color); letter-spacing: var(--carousel-section-label-letter-spacing); margin-bottom: var(--carousel-section-label-margin-bottom); } .carousel-inner { padding-top: 50px; overflow: visible !important; } .carousel-track { max-width: var(--track-max-width); margin: 0 auto; position: relative; padding: 0 var(--track-padding); box-sizing: border-box; } .news-swiper .swiper-wrapper { padding: 0 !important; margin: 0 !important; overflow: visible !important; } .news-swiper .swiper-slide { display: flex; justify-content: center; flex-shrink: 0 !important; overflow: visible !important; padding-bottom: 20px; } .carousel-card { width: var(--carousel-card-width); background: var(--carousel-bg); overflow: hidden; box-shadow: var(--carousel-card-shadow); display: flex; flex-direction: column; } .card-image img { width: 100%; height: var(--card-image-height); object-fit: cover; } .card-content { padding: 32px 20px; flex: 1 0 auto; display: flex; flex-direction: column; } .card-content .card-title { font-family: var(--card-content-title-font-family); font-size: var(--card-content-title-font-size); font-weight: var(--card-content-title-font-weight); color: var(--card-content-title-color); } .card-content p { font-size: var(--card-paragraph-font-size); line-height: var(--card-paragraph-line-height); margin: var(--card-paragraph-margin); color: var(--card-paragraph-color); font-family: var(--card-paragraph-font-family); } .carousel-card-section a { font-family: var(--carousel-card-link-font-family); font-weight: 400; color: var(--carousel-card-link-color, var(--link-color)); margin-top: auto; display: inline-flex; align-items: center; } /* Navigation */ .carousel-inner .swiper-button-prev, .carousel-inner .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: var(--nav-width); height: var(--nav-height); color: var(--carousel-nav-color, var(--link-color)); display: flex; justify-content: center; align-items: center; cursor: pointer; } .carousel-inner .swiper-button-prev { left: var(--nav-offset-desktop); } .carousel-inner .swiper-button-next { right: var(--nav-offset-desktop); } .carousel-inner .swiper-button-prev::after, .carousel-inner .swiper-button-next::after { font-size: var(--nav-font-size); font-weight: var(--carousel-card-navigation-font-weight); } .swiper-button-disabled { opacity: 0.4; pointer-events: none; } .carousel-inner .swiper-button-prev.swiper-button-disabled, .carousel-inner .swiper-button-next.swiper-button-disabled { color: #373637 !important; opacity: 1 !important; } .carousel-footer-link { display: flex; justify-content: center; margin-top: 30px; } /* TESTIMONIAL LAYOUT */ .layout-testimonial .carousel-inner { padding-top: 0; } .layout-testimonial .card-content { padding: 60px 24px; display: flex; flex-direction: column; height: 100%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .layout-testimonial .testimonial-card { background-color: var(--brand-white); width: 356px; } .layout-testimonial .testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; } .layout-testimonial .author-info { font-family: var(--font-family-4); color: var(--brand-black); font-size: var(--text-md); } .layout-testimonial .user-avatar-icon { width: 30px; height: 30px; flex-shrink: 0; } .layout-testimonial .author-avatar-img { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; object-fit: cover; } .layout-testimonial .carousel-track { max-width: 1636px; padding: 0 !important; } .layout-testimonial .swiper-slide { padding: 12px 16px; } .layout-testimonial .carousel-inner .swiper-button-prev { left: clamp(-70px, -4vw, -10px); } .layout-testimonial .carousel-inner .swiper-button-next { right: clamp(-70px, -4vw, -10px); } /* Testimonial card responsive sizes */ @media (max-width: 1439px) { .layout-testimonial .testimonial-card { width: 350px; } } @media (max-width: 1023px) { .layout-testimonial .testimonial-card { width: 278px; } } @media (max-width: 767px) { .layout-testimonial .testimonial-card { width: 235px; } } /* DEALER LAYOUT */ .carousel-card-section.layout-dealer .branch-serivces-offered div { background-color: var(--dealer-chip-bg); color: var(--brand-black); padding: var(--dealer-chip-padding-y) var(--dealer-chip-padding-x) !important; border-radius: var(--dealer-chip-radius) !important; font-size: var(--text-base); line-height: 1 !important; font-weight: var(--weight-normal); font-family: var(--font-family-2); } .carousel-card-section.layout-dealer .branch-links { margin-top: auto !important; padding: 10px; } .carousel-card-section.layout-dealer .branch-links a { display: inline-flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; font-size: var(--text-base); text-decoration: underline; font-weight: var(--weight-normal); color: var(--dealer-link-color); font-family: var(--font-family-4); } .carousel-card-section.layout-dealer .branch-links svg { flex: 0 0 auto !important; width: 20px; height: 20px; } .carousel-card-section.layout-dealer .branch-links a:last-child { color: var(--dealer-link-active-color); font-family: var(--font-family-2); font-size: var(--text-base); font-weight: var(--weight-normal); } .carousel-card-section.layout-dealer .branch-card { max-width: var(--dealer-card-max-width) !important; background-color: var(--dealer-card-bg); border-radius: var(--dealer-card-radius); padding: var(--dealer-card-padding-y) var(--dealer-card-padding-x); box-shadow: var(--dealer-card-shadow); text-align: center; font-family: var(--font-family-1); display: flex; flex-direction: column; } .carousel-card-section.layout-dealer .news-swiper { padding-bottom: var(--dealer-news-swiper-padding-bottom); } .carousel-card-section.layout-dealer .carousel-track { max-width: 1617px; width: 100%; padding: 0 50px; } .carousel-card-section.layout-dealer .branch-card-inner { display: flex; flex-direction: column; height: 100%; width: 100%; } .carousel-card-section.layout-dealer .dealers-slider { background-color: var(--gray-dark-9); } .carousel-card-section.layout-dealer .dealers-slider h3 { font-family: var(--font-family-1); font-size: var(--text-4xl); font-weight: var(--weight-bolder); text-align: center; padding: 3rem 0rem; color: #000; } .carousel-card-section.layout-dealer .dealers-slider-div { padding: 2rem 5.5rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between; max-width: 100% !important; } .carousel-card-section.layout-dealer .dealers-slider-swiper_container { overflow: hidden; width: 100%; padding-right: 0.5rem; } .carousel-card-section.layout-dealer .dealers-slider-swiper .swiper-wrapper { margin-bottom: 0.5rem; margin-right: 0.5rem; } .carousel-card-section.layout-dealer .dealers-slider-swiper .swiper-wrapper .branch-card { background-color: var(--dealer-card-bg); border-radius: var(--dealer-card-radius); padding: 2rem 1rem; box-shadow: var(--dealer-card-shadow); text-align: center; font-family: var(--font-family-1); height: auto; display: flex; flex-direction: column; } /* Dealer Card Content */ .carousel-card-section.layout-dealer .branch-card .branch-name { font-size: var(--text-lg); padding: 10px; color: var(--brand-black); font-weight: var(--weight-normal); font-family: var(--font-family-2); } .carousel-card-section.layout-dealer .branch-card .branch-address { font-size: var(--text-base); border-bottom: 1px solid var(--dealer-divider-color); padding: 10px; font-weight: var(--weight-normal); color: #373637; font-family: var(--font-family-4); } .carousel-card-section.layout-dealer .branch-card .branch-hours { display: flex; flex-direction: row; justify-content: space-around; padding-top: 1.5rem; text-align: start; } .carousel-card-section.layout-dealer .branch-card .branch-hours .branch-days { font-weight: var(--weight-bold); color: var(--brand-black); font-size: var(--text-base); font-family: var(--font-family-5); } .carousel-card-section.layout-dealer .branch-card .branch-hours .branch-time { font-weight: var(--weight-normal); color: #373637; font-size: var(--text-base); font-family: var(--font-family-4); } .carousel-card-section.layout-dealer .branch-card .branch-contact { border-bottom: 1px solid var(--dealer-contact-divider-color); font-size: var(--text-base); padding: 1.5rem 0rem; font-family: var(--font-family-4); font-weight: var(--weight-normal); color: var(--brand-black); } .carousel-card-section.layout-dealer .branch-card .branch-serivces { flex-grow: 1; display: flex; flex-direction: column; } .carousel-card-section.layout-dealer .branch-card .branch-serivces .branch-serivces-title { font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--brand-black); padding: 0.5rem 0rem 1rem; font-family: var(--font-family-5); } .carousel-card-section.layout-dealer .branch-card .branch-serivces .branch-serivces-offered { font-size: var(--text-base); color: var(--gray-dark-3); color: #000; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: 0.5rem 0rem; margin: auto; } .carousel-card-section.layout-dealer .branch-card .branch-links { display: flex; justify-content: space-around; padding-top: 1rem; font-weight: var(--weight-bolder); font-size: var(--text-base); margin-top: auto; } /* Dealer arrows */ .carousel-card-section.layout-dealer .dealers-slider-div .swiper-button-next:after, .carousel-card-section.layout-dealer .dealers-slider-div .swiper-button-prev:after { font-size: 70px; font-weight: var(--weight-bolder); } /* Dealer pagination */ .carousel-card-section.layout-dealer .dealers-slider .dealers-slider-pagination { visibility: visible !important; padding-bottom: 1.5rem; display: flex; justify-content: center; align-items: center; } .carousel-card-section.layout-dealer .dealers-slider-pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active { background: var(--brand) !important; border-color: var(--brand) !important; } .carousel-card-section.layout-dealer .swiper-pagination { visibility: visible; position: relative !important; margin-top: var(--dealer-pagination-margin-top) !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 10px !important; } .carousel-card-section.layout-dealer .swiper-pagination-bullet { width: var(--dealer-pagination-bullet-size); height: var(--dealer-pagination-bullet-size); background: transparent !important; border: 1px solid var(--dealer-pagination-bullet-border); opacity: 1 !important; margin: 0 !important; transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .carousel-card-section.layout-dealer .swiper-pagination-bullet-active { background: var(--dealer-pagination-active-bg) !important; border-color: var(--dealer-pagination-active-border) !important; transform: scale(1.15); } .carousel-card-section.layout-dealer .news-prev { left: clamp(-60px, -4vw, -10px); } .carousel-card-section.layout-dealer .news-next { right: clamp(-60px, -4vw, -10px); } /* Responsive */ @media (max-width: 360px) { .carousel-card-section.layout-dealer { padding-left: 13px !important; padding-right: 13px !important; } .carousel-card-section.layout-dealer .branch-card { width: calc(100vw - 32px) !important; max-width: calc(100vw - 32px) !important; } .carousel-card-section.layout-dealer .branch-card .branch-name { font-size: 1rem; padding: 0; } .carousel-card-section.layout-dealer .branch-card .branch-address { font-size: 0.875rem; } .carousel-card-section.layout-dealer .branch-card .branch-hours .branch-time { font-size: 14px !important; } .carousel-card-section.layout-dealer .branch-card .branch-contact { font-size: 14px !important; } .carousel-card-section.layout-dealer .branch-card .branch-hours .branch-days { font-size: 0.875rem; } .carousel-card-section.layout-dealer .branch-card { width: 330px !important; max-width: 330px !important; } .carousel-card-section.layout-dealer .branch-card { width: 100% !important; max-width: 100% !important; } } @media (max-width: 768px) { .carousel-inner { padding: 0; } .carousel-header .carousel-section-label { font-size: 1.25rem; } .card-content p { font-size: 1rem; } .carousel-header { padding: 30px 16px; } .carousel-card-section { padding: 30px 16px; } .carousel-inner .swiper-button-prev, .carousel-inner .swiper-button-next { display: none; } .carousel-track { padding: 0; } .carousel-card-section a { font-size: var(--text-base); } .card-content svg, .carousel-footer-link svg { width: 15px; } .carousel-footer-link a { font-size: 1rem; } .swiper-pagination.news-pagination { top: 0 !important; margin: 30px 0 0 0; position: relative; } .swiper-pagination.news-pagination .swiper-pagination-bullet-active { background-color: var(--carousel-pagination-active-color, #00233a) !important; border: 1px solid var(--carousel-pagination-active-color, #00233a) !important; width: 18px !important; height: 18px !important; } .carousel-card-section.layout-dealer .swiper-pagination.news-pagination .swiper-pagination-bullet-active { background-color: var(--dealer-pagination-active-bg) !important; border: 1px solid var(--dealer-pagination-active-border) !important; width: 18px !important; height: 18px !important; } .swiper-pagination.news-pagination .swiper-pagination-bullet { width: 12px; height: 12px; border: 1px solid var(--carousel-pagination-border-color, var(--gray-dark-4)); background: #FFFFFF66; } .layout-testimonial .carousel-track { max-width: 1536px; } .layout-testimonial .swiper-slide { padding: 0 2px; width: auto !important; } .carousel-card-section.layout-dealer .dealers-slider-div { padding: 2rem 0rem; } .carousel-card-section.layout-dealer .dealers-slider-div .swiper-button-next:after, .carousel-card-section.layout-dealer .dealers-slider-div .swiper-button-prev:after { display: none; } .carousel-card-section.layout-dealer .branch-card .branch-links a { font-size: 14px; } .carousel-card-section.layout-dealer .branch-card .branch-address { font-size: 1rem; } .carousel-card-section.layout-dealer .branch-card .branch-hours .branch-days { font-size: 1rem; } .carousel-card-section.layout-dealer .branch-card .branch-hours .branch-time { font-size: 1rem; } .carousel-card-section.layout-dealer .branch-card .branch-contact { font-size: 1rem; } .carousel-card-section.layout-dealer .branch-card .branch-serivces .branch-serivces-title { font-size: 0.875rem; } .carousel-card-section.layout-dealer .branch-serivces-offered div { font-size: 1rem; } .carousel-card-section.layout-dealer .news-swiper { padding: 12px; } .carousel-card-section.layout-dealer .swiper-pagination.news-pagination .swiper-pagination-bullet { width: 12px; height: 12px; border: 1px solid #838383; } .news-swiper .swiper-slide { height: auto !important; align-items: stretch; } .news-swiper .swiper-wrapper { align-items: stretch; } .card-content .card-title { font-size: 1rem; } } @media (max-width: 1024px) { .carousel-track { padding: 0 !important; } } @media (max-width: 1366px) { .layout-testimonial .author-info { font-size: 1rem; } .carousel-card-section.layout-dealer .dealers-slider-div { padding: 2rem 2.5rem; } } @media (min-width: 769px) { /* Blog layout - remove track padding and position arrows like testimonial */ .layout-blog .carousel-track { padding: 0 !important; } .layout-blog .carousel-inner .swiper-button-prev { left: clamp(-70px, -4vw, -10px); } .layout-blog .carousel-inner .swiper-button-next { right: clamp(-70px, -4vw, -10px); } /* Testimonial layout arrows */ .layout-testimonial .carousel-inner .swiper-button-prev { left: clamp(-70px, -4vw, -10px); } .layout-testimonial .carousel-inner .swiper-button-next { right: clamp(-70px, -4vw, -10px); } } @media (max-width: 576px) { .carousel-card-section.layout-dealer .dealers-slider-div { margin-left: 10px; } .carousel-card-section.layout-dealer .dealers-slider-swiper_container { max-width: 100%; } .carousel-header .carousel-section-label { font-size: 0.75rem; } .carousel-card-section.layout-dealer .branch-card .branch-address { font-size: 14px; } .carousel-card-section.layout-dealer .branch-card .branch-hours .branch-days { font-size: 14px; } .carousel-card-section.layout-dealer .branch-serivces-offered div { font-size: 14px !important; } } @media (min-width: 500px) and (max-width: 576px) { .carousel-card-section.layout-dealer .carousel-track { padding: 0 60px; } } @media (min-width: 430px) and (max-width: 490px) { .carousel-card-section.layout-dealer .carousel-track { padding: 0 30px; } } @media (min-width: 490px) and (max-width: 499px) { .carousel-card-section.layout-dealer .carousel-track { padding: 0 40px; } } /* --- Inlined from: ./[blocklist]_components/generalParagraph/generalParagraph.css --- */ /* --- Inlined from: ../../[branding]_components/generalParagraph.css --- */ :root { /* GENERAL PARAGRAPH SECTION */ --general-paragraph-section-padding-y: 2.5rem; --general-paragraph-section-padding-x: 1rem; --general-paragraph-container-padding-y: 3.125rem; --general-paragraph-container-padding-x: 5rem; --general-paragraph-cta-gap: 1rem; --general-paragraph-cta-margin-top: 1.5rem; --general-paragraph-gray-bg: var(--gray-dark-9); --general-paragraph-blue-bg: #373637; /* GENERAL PARAGRAPH - TYPOGRAPHY */ --general-paragraph-title-font-size: 2rem; --general-paragraph-title-font-family: var(--font-family-1); --general-paragraph-title-color: var(--brand-black); --general-paragraph-title-font-weight: var(--weight-bolder); --general-paragraph-text-font-size: var(--text-lg); --general-paragraph-text-font-family: var(--font-family-4); --general-paragraph-text-color: #373637; --general-paragraph-text-font-weight: var(--weight-normal); --general-paragraph-paragraph-font-size: var(--text-md); /* GENERAL PARAGRAPH - CTA WRAPPER */ --general-paragraph-cta-display: flex; --general-paragraph-cta-justify: center; --general-paragraph-cta-flex-wrap: wrap; --general-paragraph-cta-gap: 1rem; --general-paragraph-cta-margin-top: 1.5rem; /* GENERAL PARAGRAPH - BUTTON BASE */ --general-paragraph-btn-display: inline-flex; --general-paragraph-btn-align: center; --general-paragraph-btn-justify: center; --general-paragraph-btn-min-width: 180px; --general-paragraph-btn-height: 44px; --general-paragraph-btn-padding-x: 1.5rem; --general-paragraph-btn-radius: 8px; --general-paragraph-btn-text-decoration: none; --general-paragraph-btn-font-family: var(--font-family-1); --general-paragraph-btn-font-size: var(--text-md); --general-paragraph-btn-transition: 0.2s ease-in-out; /* GENERAL PARAGRAPH - PRIMARY BUTTON */ --general-paragraph-primary-btn-bg: var(--brand); --general-paragraph-primary-btn-color: var(--brand-white); --general-paragraph-primary-btn-width: 405px; --general-paragraph-primary-btn-height: 60px; --general-paragraph-primary-btn-font-family: var(--font-family-1); --general-paragraph-primary-btn-font-weight: 500; /* Hover */ --general-paragraph-primary-btn-hover-bg: #888888; --general-paragraph-primary-btn-hover-color: var(--brand-white); /* GENERAL PARAGRAPH - SECONDARY BUTTON */ --general-paragraph-secondary-btn-bg: var(--brand-white); --general-paragraph-secondary-btn-color: var(--brand-black); --general-paragraph-secondary-btn-border-width: 2px; --general-paragraph-secondary-btn-border-style: solid; --general-paragraph-secondary-btn-border-color: var(--brand-black); --general-paragraph-secondary-btn-width: 405px; --general-paragraph-secondary-btn-height: 60px; --general-paragraph-secondary-btn-font-family: var(--font-family-1); --general-paragraph-secondary-btn-font-weight: 500; /* Hover */ --general-paragraph-secondary-btn-hover-bg: var(--gray-light-2); --general-paragraph-secondary-btn-hover-color: var(--hover-dark); } @media (max-width: 1400px) { :root { --general-paragraph-title-font-size: 1.75rem !important; } } @media (max-width: 1024px) { :root { --general-paragraph-container-padding-y: 50px; --general-paragraph-container-padding-x: 40px; --general-paragraph-title-font-size: var(--text-2xl) !important; --general-paragraph-paragraph-font-size: var(--text-md); --general-paragraph-btn-width: 405px; --general-paragraph-btn-height: 60px; } } @media (max-width: 768px) { :root { --general-paragraph-container-padding-y: 30px; --general-paragraph-container-padding-x: 20px; --general-paragraph-title-font-size: var(--text-4xl) !important; --general-paragraph-paragraph-font-size: 1rem; --general-paragraph-btn-width: 405px; --general-paragraph-btn-height: 60px; } } @media (max-width: 468px) { :root { --general-paragraph-container-padding-y: 30px; --general-paragraph-container-padding-x: 16px; --general-paragraph-title-font-size: var(--text-lg) !important; --general-paragraph-paragraph-font-size: 0.875rem; --general-paragraph-text-font-size: 0.75rem; } } /* GENERAL PARAGRAPH - SECTION WRAPPER */ .general-paragraph-section { width: 100%; padding: var(--general-paragraph-section-padding-y) var(--general-paragraph-section-padding-x); max-width: 1920px; margin: 0 auto; } /* GENERAL PARAGRAPH - CONTAINER / CARD AREA */ .general-paragraph-container { padding: var(--general-paragraph-container-padding-y) var(--general-paragraph-container-padding-x); } /* GENERAL PARAGRAPH - CTA WRAPPER */ .general-paragraph-cta-wrapper { display: var(--general-paragraph-cta-display); justify-content: var(--general-paragraph-cta-justify); gap: var(--general-paragraph-cta-gap); margin-top: var(--general-paragraph-cta-margin-top); flex-wrap: var(--general-paragraph-cta-flex-wrap); } /* GENERAL PARAGRAPH - BUTTONS (BASE) */ .general-paragraph-btn { display: var(--general-paragraph-btn-display); align-items: var(--general-paragraph-btn-align); justify-content: var(--general-paragraph-btn-justify); min-width: var(--general-paragraph-btn-min-width); height: var(--general-paragraph-btn-height); padding: 0 var(--general-paragraph-btn-padding-x); border-radius: var(--general-paragraph-btn-radius); text-decoration: var(--general-paragraph-btn-text-decoration); font-family: var(--general-paragraph-btn-font-family); font-size: var(--general-paragraph-btn-font-size); transition: var(--general-paragraph-btn-transition); } /* GENERAL PARAGRAPH - BUTTONS (PRIMARY) */ .general-paragraph-btn--primary { background: var(--general-paragraph-primary-btn-bg); color: var(--general-paragraph-primary-btn-color); border: 2px solid var(--general-paragraph-primary-btn-border); width: var(--general-paragraph-primary-btn-width); height: var(--general-paragraph-primary-btn-height); font-family: var(--general-paragraph-primary-btn-font-family); font-weight: var(--general-paragraph-primary-btn-font-weight); } .general-paragraph-btn--primary:hover { background-color: var(--general-paragraph-primary-btn-hover-bg); color: var(--general-paragraph-primary-btn-hover-color); border: 2px solid var(--general-paragraph-primary-btn-hover-border); } /* GENERAL PARAGRAPH - BUTTONS (SECONDARY) */ .general-paragraph-btn--secondary { background: var(--general-paragraph-secondary-btn-bg); color: var(--general-paragraph-secondary-btn-color); border: var(--general-paragraph-secondary-btn-border-width) var(--general-paragraph-secondary-btn-border-style) var(--general-paragraph-secondary-btn-border-color); width: var(--general-paragraph-secondary-btn-width); height: var(--general-paragraph-secondary-btn-height); font-family: var(--general-paragraph-secondary-btn-font-family); font-weight: var(--general-paragraph-secondary-btn-font-weight); } .general-paragraph-btn--secondary:hover { background: var(--general-paragraph-secondary-btn-hover-bg); color: var(--general-paragraph-secondary-btn-hover-color); } /* GENERAL PARAGRAPH - BLUE THEME */ .general-paragraph-section--blue { background-color: var(--general-paragraph-blue-bg); } .general-paragraph-section--blue .general-paragraph-content { color: var(--brand-white); } .general-paragraph-section--blue .paragraph, .general-paragraph-section--blue .title { color: var(--brand-white); } /* GENERAL PARAGRAPH - GRAY THEME */ .general-paragraph-section--gray { background-color: var(--general-paragraph-gray-bg); } @media (max-width: 1024px) { .general-paragraph-container { padding: var(--general-paragraph-container-padding-y) var(--general-paragraph-container-padding-x); } .title { font-size: var(--general-paragraph-title-font-size) !important; } .paragraph { font-size: var(--general-paragraph-paragraph-font-size); } .general-paragraph-btn--primary, .general-paragraph-btn--secondary { width: var(--general-paragraph-btn-width); height: var(--general-paragraph-btn-height); } } @media (max-width: 768px) { .general-paragraph-container { padding: var(--general-paragraph-container-padding-y) var(--general-paragraph-container-padding-x); } .title { font-size: var(--general-paragraph-title-font-size) !important; } .paragraph { font-size: var(--general-paragraph-paragraph-font-size); } .general-paragraph-btn--primary, .general-paragraph-btn--secondary { width: var(--general-paragraph-btn-width); height: var(--general-paragraph-btn-height); } } @media (max-width: 480px) { .general-paragraph-container { padding: var(--general-paragraph-container-padding-y) var(--general-paragraph-container-padding-x); } .title { font-size: var(--general-paragraph-title-font-size) !important; } .paragraph { font-size: var(--general-paragraph-paragraph-font-size); } } /**umb_name:Title*/ .title { font-size: var(--general-paragraph-title-font-size) !important; font-family: var(--general-paragraph-title-font-family) !important; color: var(--general-paragraph-title-color); font-weight: var(--general-paragraph-title-font-weight) !important; } /**umb_name:Paragraph*/ .paragraph { font-size: var(--general-paragraph-paragraph-font-size); font-family: var(--general-paragraph-text-font-family); color: var(--general-paragraph-text-color); font-weight: var(--general-paragraph-text-font-weight); } /**umb_name:Section Label*/ .section-label { font-size: var(--general-paragraph-text-font-size); font-family: var(--general-paragraph-text-font-family); color: var(--general-paragraph-text-color); font-weight: var(--general-paragraph-text-font-weight); letter-spacing: 5px; } /* --- Inlined from: ./[blocklist]_components/infomediaCentered/infomediaCentered.css --- */ /* --- Inlined from: ../../[branding]_components/infomediaCentered.css --- */ :root { /* Section Title */ --infomedia-section-name-font-family: var(--font-family-2); --infomedia-section-name-color: #373637; --infomedia-section-name-font-size: var(--text-lg); --infomedia-section-name-font-weight: var(--weight-normal); --infomedia-section-name-text-transform: none; /* Main Title */ --infomedia-main-title-font-family: var(--font-family-1); --infomedia-main-title-color: var(--brand-black); --infomedia-main-title-font-size: 2rem; --infomedia-main-title-font-weight: var(--weight-bolder); --infomedia-main-title-line-height: 30px; /* Description Text */ --infomedia-text-description-font-family: var(--font-family-4); --infomedia-text-description-color: #373637; --infomedia-description-font-size: 1.125rem; --infomedia-description-font-weight: var(--infomedia-description-font-weight); /* Layout */ --infomedia-content-background-color: var(--gray-dark-9); --infomedia-section-padding-y: 2rem; --infomedia-section-margin-bottom: 2rem; /* Media (image/video container) */ --infomedia-media-object-fit: contain; --infomedia-media-width: 950px; --infomedia-media-height: 540px; --infomedia-media-max-width: none; } /* ≥ 993px — Desktop overrides */ @media (min-width: 1400px) { :root { --infomedia-section-padding-y: 3.125rem; --infomedia-section-margin-bottom: 3.125rem; } } /* TABLET */ @media (max-width: 992px) { :root { --infomedia-section-margin-bottom: 2.5rem; --infomedia-section-padding-y: 2.5rem; --infomedia-main-title-font-size: 1.375rem; --infomedia-main-title-line-height: 1.25; --infomedia-description-font-size: 1rem; --infomedia-media-max-width: 95%; --infomedia-media-height: 440px; } } /* MOBILE */ @media (max-width: 576px) { :root { --infomedia-section-margin-bottom: 2rem; --infomedia-section-padding-y: 2rem; --infomedia-section-name-font-size: 0.75rem; --infomedia-main-title-font-size: 1.25rem; --infomedia-description-font-size: 0.875rem; --infomedia-media-height: 300px; --infomedia-media-max-width: 100%; } @media (max-width: 360px) { :root { --infomedia-media-width: 95%; --infomedia-media-height: 228px; } } @media (max-width: 320px) { :root { --infomedia-media-width: 85%; --infomedia-media-height: 205px; } } } .infomedia-centered { max-width: 1920px; margin: 0 auto; } .section-name { text-align: center; font-family: var(--infomedia-section-name-font-family); font-size: var(--infomedia-section-name-font-size); font-weight: var(--infomedia-section-name-font-weight); letter-spacing: 0.2rem; color: var(--infomedia-section-name-color); text-transform: var(--infomedia-section-name-text-transform); } .main-title { margin: 1.25rem auto; font-family: var(--infomedia-main-title-font-family); font-size: var(--infomedia-main-title-font-size); font-weight: var(--infomedia-main-title-font-weight); line-height: var(--infomedia-main-title-line-height); color: var(--infomedia-main-title-color); max-width: 950px; } .text-description p { padding: 0 var(--p-4); font-family: var(--infomedia-text-description-font-family); color: var(--infomedia-text-description-color); font-size: var(--infomedia-description-font-size); font-weight: var(--weight-normal); } .infomedia-content { display: flex; justify-content: center; text-align: center; background: var(--infomedia-content-background-color); padding-top: var(--infomedia-section-padding-y); padding-bottom: var(--infomedia-section-padding-y); } .infomedia-content__video { margin: 0 auto; text-align: center; } .infomedia-content__video img, .infomedia-content__video iframe, .infomedia-content__video video { display: block; width: var(--infomedia-media-width); height: var(--infomedia-media-height); margin: 0 auto; object-fit: var(--infomedia-media-object-fit); max-width: var(--infomedia-media-max-width); } @media (max-width: 1400px) { .main-title { font-size: 28px !important; } } @media (max-width: 576px) { .infomedia-content { padding-left: 1rem; padding-right: 1rem; } } /* --- Inlined from: ./[blocklist]_components/feedbackSection/feedbackSection.css --- */ /* --- Inlined from: ../../[branding]_components/feedbackSection.css --- */ :root { --feedback-button-radius: 8px; --feedback-button-font-family: var(--font-family-1); --feedback-button-font-size: 18px; --feedback-button-font-weight: var(--weight-bolder); --feedback-button-color: var(--brand-black); --feedback-sectionTitle-font-family: var(--font-family-4); --feedback-sectionTitle-font-size: 18px; --feedback-sectionTitle-font-weight: var(--weight-normal); --feedback-sectionTitle-color: var(--brand-black); --feedback-question-font-family: var(--font-family-5); --feedback-question-font-size: 18px; --feedback-question-font-weight: var(--weight-bold); --feedback-question-color: var(--brand-black); --feedback-thankyou-font-family: var(--font-family-1); --feedback-thankyou-font-size: 20px; --feedback-thankyou-font-weight: var(--weight-semibold); --feedback-thankyou-color: var(--brand-black); } .section-feedback { height: 412px; position: relative; overflow: hidden; } .box-buttons { margin-top: 4rem; } .feedback-form { max-width: 1920px; margin: auto; } .feedback_svg { position: absolute; right: 12rem; top: 3rem; z-index: -1; } .feedback-form { margin: 0 !important; } .sectionTitle { display: flex; justify-content: center; font-family: var(--feedback-sectionTitle-font-family); font-weight: var(--feedback-sectionTitle-font-weight); font-size: var(--feedback-sectionTitle-font-size); letter-spacing: 0.2em; color: var(--feedback-sectionTitle-color); } .logo_feedback_final img { width: 112px; height: 112px; max-width: 112px; max-height: 112px; object-fit: contain; display: block; margin: 0 auto; } .questionFeedback { color: var(--feedback-question-color); font-family: var(--feedback-question-font-family); font-size: var(--feedback-question-font-size); font-weight: var(--feedback-question-font-weight); text-align: center; } button.btn_base.btn_medium.btn_secondary_normal.feed-button { min-height: 60px !important; } .feed-button { margin: 0.375rem 0.9rem 0.375rem 0; border: 2px solid var(--brand-black); border-radius: var(--feedback-button-radius); background: transparent; padding: 17px 0; width: 312px; max-height: 56px !important; color: var(--feedback-button-color); font-family: var(--feedback-button-font-family); font-size: var(--feedback-button-font-size); font-weight: var(--feedback-button-font-weight); user-select: none; } .send_feedback { box-shadow: none; background-color: #ffffff; padding: 8px 25px; max-width: 200px; width: 100%; margin-top: 30px; max-height: 45px; border: 2px solid var(--brand-black); border-radius: var(--feedback-button-radius); color: var(--feedback-button-color); font-size: var(--feedback-button-font-size); font-family: var(--feedback-button-font-family); text-transform: none; } .send_feedback:hover{ background: var(--gray-dark-8); } form#feedback { text-align: -webkit-center; } .arrow-Image-Feedback { position: absolute; width: 100%; } .textArea_feedback { height: 35px; padding: 5px; background: none; border-bottom: 0.0625rem solid var(--brand-black)!important; border-radius: 0; border-left: 0 solid #dadce0 !important; border-top: 0 solid #dadce0 !important; border-right: 0 solid #dadce0 !important; margin-bottom: 15px; float: none; width: 650px; line-height: 1.5; } .thankyou_message { text-align: center; margin: 0 auto; display: table; padding: 30px 0 30px; color: var(--feedback-thankyou-color); font-weight: var(--feedback-thankyou-font-weight); font-family: var(--feedback-thankyou-font-family); font-size: var(--feedback-thankyou-font-size); text-transform: none; } div#feedback { text-align: center; } .feedback_return { box-shadow: none; background-color: #ffffff; border: 1px solid #4d4d4d; border-radius: var(--feedback-button-radius); color: #4d4d4d; padding: 18px 25px; font-size: 15px; font-family: "avenirnextltpro-bold", sans-serif; max-width: 312px; width: 100%; margin-top: 30px; } @media (max-width: 1040px) { svg.feedback_svg { width: 22.58944rem; right: 1%; top: 18%; height: 15.42638rem; } .feed-button { font-size: 16px; width: 193px; padding: 0; } .send_feedback { font-size: 16px; width: 193px; padding: 0; } button.btn_base.btn_medium.btn_secondary_normal.feed-button { min-height: 48px !important; } } @media (max-width: 400px) { svg.feedback_svg { width: 10.21606rem; height: 9.86088rem; left: 54%; top: 14%; } .feed-button { width: 152px; } .send_feedback { width: 152px; } } /* --- Inlined from: ./[blocklist]_components/servicesCard/servicesCard.css --- */ /* --- Inlined from: ../../[branding]_components/servicesCard.css --- */ :root { /* 1. Section Title */ --services-card-section-title-font-family: var(--font-family-2); --services-card-section-title-font-size: var(--text-lg); --services-card-section-title-font-weight: var(--weight-normal); --services-card-section-title-text-transform: uppercase; --services-card-section-title-text-color: #373637; /* Services Card Container */ --services-card-container-background-color: var(--gray-light-4); /* 2. Card Image */ /* Card Image Box Wrapper*/ --services-card-box-wrapper-background-linear-gradient: linear-gradient( to top, rgba(0, 0, 0, 0.95) 13.33%, rgba(0, 0, 0, 0) 45% ); /* 3. Card Title */ --services-card-title-card-font-family: var(--font-family-1); --services-card-title-card-font-size: var(--text-xl); --services-card-title-card-font-weight: var(--weight-bolder); --services-card-title-card-text-color: var(--brand-white); --services-card-title-card-text-transform: uppercase; /* 4. Button */ --services-card-button-font-family: var(--font-family-1); --services-card-button-font-size: var(--text-base); --services-card-button-font-size-mobile: 1rem; --services-card-button-font-weight: var(--weight-bolder); --services-card-button-background-color: var(--brand); --services-card-button-text-color: var(--brand-white); --services-card-button-border-radius: 8px; --services-card-button-border-color: var(--brand); --services-card-button-text-transform: none; /* SVG */ --services-card-button-svg-fill-color: var(--brand-white); /* SVG Hover*/ --services-card-button-svg-fill-color-hover: var(--brand-white); /* Button Hover*/ --services-card-button-hover-background-color: #888888; --services-card-button-hover-text-color: var(--brand-white); --services-card-button-hover-border-color: #888888; } .services-card { padding: 0 20px 50px; background: var(--services-card-container-background-color); max-width: 1920px; margin: 0 auto; } .services-card-title { text-align: center; font-family: var(--services-card-section-title-font-family); font-size: var(--services-card-section-title-font-size); font-weight: var(--services-card-section-title-font-weight); letter-spacing: 0.2rem; text-transform: var(--services-card-section-title-text-transform); color: var(--services-card-section-title-text-color); padding: 50px 0; margin-bottom: 0; } .services-card-content { max-width: 1920px; width: 100%; padding: 0rem 2.8%; gap: 10px; } .services-card-content-box { display: flex; justify-content: center; max-height: 34rem; } .services-card-content-box-wrapper { overflow: hidden; position: relative; width: 100%; } .services-card-content-box-wrapper-image { width: 100%; aspect-ratio: 1.05; transition: all 200ms; } .services-card-content-box-wrapper-image img { width: 100%; height: 100%; object-fit: cover; } .services-card-content-box-wrapper-boxes { position: absolute; bottom: 0; padding-bottom: 1.5rem; width: 100%; display: flex; justify-content: center; align-items: flex-end; background: var(--services-card-box-wrapper-background-linear-gradient); height: 100%; text-align: center; } .services-card-title-text { position: absolute; bottom: 3.5rem; padding-bottom: 1.5rem; width: 100%; display: flex; justify-content: center; align-items: flex-end; height: 100%; } .services-card-title-text p { font-family: var(--services-card-title-card-font-family); font-size: var(--services-card-title-card-font-size); font-weight: var(--services-card-title-card-font-weight); color: var(--services-card-title-card-text-color); text-transform: var(--services-card-title-card-text-transform); transition: all 200ms; } .services-card-content-box-wrapper-boxes-btn { font-family: var(--services-card-button-font-family); height: 48px; font-size: var(--services-card-button-font-size); font-weight: var(--services-card-button-font-weight); padding: 0.5rem 2rem; color: var(--services-card-button-text-color); background-color: var(--services-card-button-background-color); border: var(--services-card-button-border-color); border-radius: var(--services-card-button-border-radius); transition: all 200ms; text-transform: var(--services-card-button-text-transform); } .services-card-content-box-wrapper-boxes.no-button .services-card-title-text { bottom: 0; padding-bottom: 1.5rem; } .services-card-content-box-wrapper-boxes-btn:hover { background-color: var(--services-card-button-hover-background-color); color: var(--services-card-button-hover-text-color); border: var(--services-card-button-hover-border-color); } .services-card-content-box-wrapper-boxes-btn svg path { fill: var(--services-card-button-svg-fill-color); } /* ======================================== RESPONSIVE - SMALL LAPTOP (991px) ======================================== */ @media (max-width: 991px) { .services-card-content { padding: 0; gap: 20px; } } @media (max-width: 575px) { .services-card-content-box-wrapper-boxes-btn { font-size: var(--services-card-button-font-size-mobile); } } /* --- Inlined from: ./[blocklist]_components/informationBanner/informationBanner.css --- */ /* --- Inlined from: ../../[branding]_components/informationBanner.css --- */ :root { /* Info Banner Icon */ --infoBanner-icon-size: 2rem; --infoBanner-icon-color: var(--gray-dark-1); /* Info Banner Text */ --infoBanner-text-color: #373637; --infoBanner-font-family: var(--font-family-3); --infoBanner-font-weight: var(--weight-bolder); --infoBanner-bold-gap: 0.12em; /* Info Banner Link */ --infoBanner-link-weight: var(--weight-semibold); --infoBanner-link-font-size: var(--text-sm); /* Layout */ --infoBanner-padding-y: 0.5rem; --infoBanner-padding-x: 0.5rem; --infoBanner-max-width: 100%; /* Alignment defaults */ --infoBanner-font-size: var(--text-base); --infoBanner-gap: 0.5rem; --infoBanner-line-height: 1.2; --infoBanner-optical-nudge: 0px; /* Row behavior */ --infoBanner-content-justify: center; /* Center group behavior*/ --infoBanner-textlink-direction: row; --infoBanner-textlink-align: center; --infoBanner-textlink-justify: center; --infoBanner-textlink-wrap: nowrap; --infoBanner-textlink-width: 100%; --infoBanner-textlink-max-width: 100%; --infoBanner-textlink-text-align: center; /* CTA behavior */ --infoBanner-link-display: inline-flex; --infoBanner-link-width: auto; --infoBanner-link-max-width: none; --infoBanner-link-padding: 0; --infoBanner-link-text-align: left; --infoBanner-link-min-height: 0; /* Close button sizing */ --infoBanner-close-size: 24px; --infoBanner-close-touch-min: 44px; --infoBanner-close-extra-gap: 8px; --infoBanner-close-reserve: calc( max(var(--infoBanner-close-size), var(--infoBanner-close-touch-min)) + var(--infoBanner-padding-x) + var(--infoBanner-close-extra-gap) ); } /* >= 1200px - Desktop */ @media (min-width: 1200px) { :root { --infoBanner-font-size: var(--text-base); --infoBanner-font-weight: var(--weight-semilight); --infoBanner-link-font-size: var(--text-sm); --infoBanner-link-weight: var(--weight-semibold); --infoBanner-gap: 0.5rem; --infoBanner-textlink-direction: row; --infoBanner-textlink-wrap: nowrap; --infoBanner-link-display: inline-flex; --infoBanner-close-size: var(--text-base); } } /* 992px - 1199px - Laptop */ @media (min-width: 992px) and (max-width: 1199px) { :root { --infoBanner-font-size: var(--text-base); --infoBanner-font-weight: var(--weight-semilight); --infoBanner-link-font-size: var(--text-sm); --infoBanner-link-weight: var(--weight-semibold); --infoBanner-gap: 0.6rem; --infoBanner-textlink-direction: row; --infoBanner-textlink-wrap: nowrap; --infoBanner-link-display: inline-flex; } } /* 768px - 991px - Tablet */ @media (min-width: 768px) and (max-width: 991px) { :root { --infoBanner-font-size: var(--text-sm); --infoBanner-font-weight: var(--weight-semilight); --infoBanner-link-font-size: var(--text-sm); --infoBanner-link-weight: var(--weight-semibold); --infoBanner-gap: 0.5rem; --infoBanner-textlink-direction: row; --infoBanner-textlink-wrap: wrap; --infoBanner-link-display: inline-flex; --infoBanner-link-padding: 0.25rem 0; --infoBanner-close-size: var(--text-sm); } } /* <= 767px - Mobile */ @media (max-width: 767px) { :root { --infoBanner-font-size: var(--text-sm); --infoBanner-font-weight: var(--weight-semilight); --infoBanner-link-font-size: var(--text-sm); --infoBanner-link-weight: var(--weight-semibold); --infoBanner-gap: 0.4rem; --infoBanner-content-justify: flex-start; --infoBanner-textlink-direction: row; --infoBanner-textlink-align: flex-start; --infoBanner-textlink-justify: flex-start; --infoBanner-textlink-wrap: wrap; --infoBanner-textlink-text-align: left; --infoBanner-link-display: inline-flex; --infoBanner-link-width: auto; --infoBanner-link-max-width: none; --infoBanner-link-padding: 0.5rem 0; --infoBanner-link-text-align: left; --infoBanner-link-min-height: 44px; --infoBanner-close-extra-gap: 16px; --infoBanner-close-size: var(--text-xs); } } /* <= 360px - Small phone */ @media (max-width: 360px) { :root { --infoBanner-font-size: var(--text-sm); --infoBanner-font-weight: var(--weight-semilight); --infoBanner-link-font-size: var(--text-sm); --infoBanner-link-weight: var(--weight-semibold); } } /* Wrapper */ .informationBanner { width: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--infoBanner-bg); margin: 0; } /* Row */ .informationBanner__content { position: relative; display: flex; align-items: center; justify-content: var(--infoBanner-content-justify); gap: var(--infoBanner-gap); padding: var(--infoBanner-padding-y) var(--infoBanner-padding-x); width: 100%; max-width: var(--infoBanner-max-width); height: 50px; font-family: var(--infoBanner-font-family); font-size: var(--infoBanner-font-size) !important; font-weight: var(--infoBanner-font-weight); color: var(--infoBanner-text-color); } .informationBanner__text-link { display: flex; flex: 1 1 auto; width: 100%; max-width: var(--infoBanner-textlink-max-width); box-sizing: border-box; padding-right: var(--infoBanner-close-reserve); align-items: var(--infoBanner-textlink-align); justify-content: var(--infoBanner-textlink-justify); gap: var(--infoBanner-gap); flex-direction: var(--infoBanner-textlink-direction); flex-wrap: var(--infoBanner-textlink-wrap); line-height: var(--infoBanner-line-height); text-align: var(--infoBanner-textlink-text-align); } .informationBanner__text, .informationBanner__text p { display: inline-flex; align-items: center; margin: 0 !important; padding: 0; line-height: var(--infoBanner-line-height); transform: translateY(var(--infoBanner-optical-nudge)); white-space: normal; font-weight: var(--weight-bolder); font-size: var(--text-sm); } .informationBanner__text b, .informationBanner__text strong { margin-inline: var(--infoBanner-bold-gap); font-weight: var(--weight-bolder); font-size: var(--text-base); font-family: var(--font-family-3); } /* Icon */ .informationBanner__text-link svg, .informationBanner__text-link img { display: block; width: var(--infoBanner-icon-size); height: var(--infoBanner-icon-size); flex-shrink: 0; transform: translateY(var(--infoBanner-optical-nudge)); } .informationBanner__icon-svg { display: block; width: var(--infoBanner-icon-size); height: var(--infoBanner-icon-size); } .informationBanner__icon { display: inline-flex; align-items: center; } /* Link */ .informationBanner__link { display: var(--infoBanner-link-display); width: var(--infoBanner-link-width); max-width: var(--infoBanner-link-max-width); padding: var(--infoBanner-link-padding); text-align: var(--infoBanner-link-text-align); align-items: center; line-height: var(--infoBanner-line-height); color: var(--infoBanner-text-color); font-weight: var(--infoBanner-link-weight); font-family: var(--font-family-2); font-size: var(--infoBanner-link-font-size, var(--infoBanner-font-size)); text-decoration: underline; transform: translateY(var(--infoBanner-optical-nudge)); margin-left: 0.5ch; min-height: var(--infoBanner-link-min-height); } .informationBanner__link:hover { text-decoration: underline; } .informationBanner__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; text-decoration-thickness: 2px; } /* Close button */ .informationBanner__close { position: absolute; right: var(--infoBanner-padding-x); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; background: none; border: none; cursor: pointer; min-width: 44px; min-height: 44px; } .informationBanner__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; } @media (max-width: 767px) { .informationBanner__content { justify-content: center; height: 48px; } .informationBanner__text-link { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--infoBanner-gap); text-align: center; padding-right: 0; margin: 0 auto; max-width: calc(100% - var(--infoBanner-close-reserve)); } .informationBanner__icon { display: inline-flex; align-items: center; flex: 0 0 auto; order: 0; line-height: 1; } .informationBanner__text { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; order: 1; } .informationBanner__text p, .informationBanner__text strong, .informationBanner__text b, .informationBanner__text span { display: inline; font-family: var(--font-family-4); font-weight: var(--weight-normal); } .informationBanner__text > *, .informationBanner__icon > * { display: inline-block; vertical-align: middle; } .informationBanner__icon p, .informationBanner__icon div, .informationBanner__icon span { display: inline; margin: 0; } .informationBanner__link { display: inline-flex; align-items: center; flex: 0 0 auto; order: 2; white-space: nowrap; padding: 0; min-height: 0; font-size: var(--text-base); } .informationBanner__icon svg, .informationBanner__icon img, .informationBanner__icon-svg { display: inline-block; vertical-align: middle; width: var(--infoBanner-icon-size); height: var(--infoBanner-icon-size); transform: translateY(0); } /* Hide icon/SVG on mobile */ .informationBanner__icon, .informationBanner__text-link svg, .informationBanner__text-link img, .informationBanner__icon-svg { display: none !important; } } @media (max-width: 768px) { .informationBanner__content { height: 48px; } .informationBanner__link { font-size: 0.875rem; } } /* --- Inlined from: ./[blocklist]_components/tabGallery/tabGallery.css --- */ /* --- Inlined from: ../../[branding]_components/tabGallery.css --- */ :root { /* Section / Container */ --carousel-section-bg: var(--brand-white); --carousel-section-padding-x: 1.5rem; --carousel-section-padding-y: 0rem; --carousel-section-max-width: 120rem; /* Section Title / Name */ --carousel-title-font-family: var(--font-family-1); --carousel-title-font-size: var(--text-lg); --carousel-title-font-weight: var(--weight-bolder); --carousel-title-color: var(--brand-black); --carousel-title-text-align: center; --carousel-title-letter-spacing: 0.2rem; /* Carousel / Image Area */ --carousel-image-aspect-ratio: 7 / 3; --carousel-image-max-height: 40rem; /* 640px */ --carousel-image-min-height-mobile: 16.25rem; /* 260px */ --carousel-image-object-fit: cover; --carousel-image-margin-bottom: 1.5rem; /* Navigation Arrows */ --carousel-arrow-width: 3rem; /* 48px */ --carousel-arrow-height: 5.75rem; /* 92px */ --carousel-arrow-bg: rgba(0, 0, 0, 0.4); --carousel-arrow-bg-disabled: rgba(65, 65, 65, 65, 0.2); --carousel-arrow-opacity-disabled: 0.5; /* Pagination / Tabs */ --carousel-pagination-height: 43px; /* 67.49px */ --carousel-pagination-bg: var(--gray-dark-8); --carousel-pagination-border-active: 0.375rem; /* 6px */ --carousel-pagination-font-family: var(--font-family-5); --carousel-pagination-font-size: var(--text-md); --carousel-pagination-font-weight: var(--weight-bold); --carousel-pagination-text-color: #373637; --carousel-pagination-active-color: #00233a; /* Description Text */ --carousel-description-font-family: var(--font-family-4); --carousel-description-font-size: 1rem; --carousel-description-font-weight: var(--weight-normal); --carousel-description-color: #373637; --carousel-description-text-align: start; --carousel-description-margin-top: 32px; } @media (max-width: 1366px) { :root { /* Description Text */ --carousel-description-text-align: center; } } @media (max-width: 768px) { :root { /* Pagination / Tabs */ --carousel-pagination-height: 38px; --carousel-pagination-font-weight: var(--weight-bolder); } } @media (max-width: 576px) { :root { --carousel-pagination-font-size: 0.875rem; --carousel-pagination-height: 38px; } } article.section.carouselImg-model { padding: 0 1.5rem 3rem 1.5rem; background: var(--carousel-section-bg); } .carouselImg-model { max-width: 1920px; margin: 0 auto; } #vehicleTechnology::-webkit-scrollbar, #vehicleTechnology::-webkit-scrollbar-thumb, #vehicleTechnology::-webkit-scrollbar-track { display: none !important; } .swiperTechnology-pagination::-webkit-scrollbar, .swiperTechnology-pagination::-webkit-scrollbar-thumb, .swiperTechnology-pagination::-webkit-scrollbar-track { display: none !important; } .swiperTechnology-pagination { scrollbar-width: none; -ms-overflow-style: none; } .carouselImg-model .SectionModelName { font-family: var(--carousel-title-font-family) !important; font-size: var(--carousel-title-font-size); font-weight: var(--carousel-title-font-weight); color: var(--carousel-title-color); line-height: normal; text-align: var(--carousel-title-text-align); font-style: normal; letter-spacing: var(--carousel-title-letter-spacing); } .swiper_carousel_model { width: 100%; overflow: visible; } .carouselImg-model .swiperG-pagination, .carouselImg-model .swiperExt-pagination, .carouselImg-model .swiperInt-pagination { position: relative; text-align: center; transition: 0.3s opacity; transform: translate3d(0, 0, 0); z-index: 18; padding: 24px; } .swiperTechnology-pagination { display: flex; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .swiperTechnology-pagination .swiper-pagination-bullet { flex: 0 0 auto; margin: 0 8px; } .swiperG-pagination .swiper-pagination-bullet-active, .swiperExt-pagination .swiper-pagination-bullet-active, .swiperInt-pagination .swiper-pagination-bullet-active { --swiper-theme-color: var(--gray-dark-5); } .carouselImg-model .slider-image_container { max-height: 640px; } .carouselImg-model .swiper-wrapper { max-height: 51.5rem; } .carouselImg-model .swiper-slide > p { padding: 0 var(--p-2); color: var(--carousel-description-color); text-align: var(--carousel-description-text-align); font-family: var(--carousel-description-font-family); font-size: var(--carousel-description-font-size); font-style: normal; font-weight: var(--carousel-description-font-weight); line-height: normal; } .text-disclaimer-tecno { margin-top: var(--carousel-description-margin-top); } .Image-slider { width: 100%; aspect-ratio: var(--carousel-image-aspect-ratio); max-height: var(--carousel-image-max-height); object-fit: var(--carousel-image-object-fit); margin-bottom: var(--carousel-image-margin-bottom); } @media (max-width: 600px) { .Image-slider { min-height: 260px; } } .swiper1 { position: relative; overflow: hidden; } .carouselImg-model .arrow-button_wrapper { position: absolute; top: 33%; display: flex; justify-content: space-between; width: 100%; } .carouselImg-model .swiperTechnology-button-prev, .swiperTechnology-button-next { z-index: 10; } .carouselImg-model .arrowTechnology { display: grid; place-items: center; width: var(--carousel-arrow-width); height: var(--carousel-arrow-height); background-color: var(--carousel-arrow-bg); transition: filter 0.3s ease; cursor: pointer; } /* Disabled */ .carouselImg-model .arrowTechnology.swiper-button-disabled { cursor: not-allowed; filter: brightness(1); opacity: var(--carousel-arrow-opacity-disabled); pointer-events: none; } .carouselImg-model .arrowTechnology.swiper-button-disabled path { fill: var(--gray-dark-7); } .carouselImg-model .swiperTechnology-pagination { background-color: var(--carousel-pagination-bg); border-bottom: 3px solid #373637 !important; z-index: 10; display: flex; position: absolute; bottom: calc(100% - 40.1rem) !important; justify-content: space-between; width: auto; height: var(--carousel-pagination-height); overflow: overlay; z-index: 2; text-align: center; } .swiperTechnology-pagination.swiper-pagination-bullets.swiper-pagination-horizontal { position: absolute !important; margin: 0; top: auto; justify-content: start; } .carouselImg-model .swiperTechnology-pagination .swiperTechnology-pagination > span { display: flex; align-items: center; justify-content: center; } .carouselImg-model .swiperTechnology-pagination .swiper-pagination-bullet { font-family: var(--font-family-1); font-size: var(--carousel-pagination-font-size); font-style: normal; font-weight: var(--carousel-pagination-font-weight); line-height: 1.5rem; } .carouselImg-model .swiperTechnology-pagination .swiper-pagination-bullet-active { height: 100% !important; border-radius: 0 !important; margin: 0 !important; border-bottom: 3px solid var(--gray-dark) !important; } #technology { background: var(--gray-dark-9); padding: 2rem 0rem; } .carouselImg-model .swiperTechnology-pagination > span { display: flex; align-items: center; justify-content: center; font-family: var(--font-family-1); font-size: var(--text-sl); font-style: normal; font-weight: var(--weight-normal); line-height: 24px; min-width: 80px; } .carouselImg-model .swiperTechnology-pagination .swiper-pagination-bullet { flex: 1 1 auto; color: var(--carousel-pagination-text-color); margin: 0 !important; width: 0 !important; height: 100% !important; border: 0 !important; opacity: 1 !important; background: none !important; min-width: 16rem; font-family: var(--carousel-pagination-font-family); padding: 0 var(--p-4) !important; } .carouselImg-model .swiperTechnology-pagination .swiper-pagination-bullet-active { height: 100% !important; border-radius: 0 !important; margin: 0 !important; border-bottom: var(--carousel-pagination-border-active) solid var(--carousel-pagination-active-color) !important; font-weight: var(--carousel-pagination-font-weight) !important; color: var(--carousel-pagination-active-color); } @media (max-width: 1735px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 40rem) !important; } } @media (max-width: 1520px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 39.5rem) !important; } } @media (max-width: 1500px) { .carouselImg-model .arrow-button_wrapper { top: 30%; } .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 39rem) !important; } } @media (max-width: 1480px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 38.3rem) !important; } } @media (max-width: 1460px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 37.3rem) !important; } } @media (max-width: 1435px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 37.1rem) !important; } } @media (max-width: 1412px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 36.6rem) !important; } } @media (max-width: 1382px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 36rem) !important; } } @media (max-width: 1366px) { .carouselImg-model .carouselImg-model.swiper-wrapper { max-height: 580px; } /* .carouselImg-model .arrow-button_wrapper { top: 22%; } */ .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 35.3rem) !important; } .carouselImg-model .arrowTechnology { display: grid; place-items: center; width: 48px; height: 92px; background-color: rgba(65, 65, 65, 0.4); transition: filter 0.3s ease; cursor: pointer; } /* Disabled */ .carouselImg-model .arrowTechnology.disabled { background-color: rgba(65, 65, 65, 0.2); cursor: not-allowed; filter: brightness(1); opacity: 0.5; pointer-events: none; } } @media (max-width: 1351px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 34.8rem) !important; } } @media (max-width: 1330px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 34.3rem) !important; } } @media (max-width: 1305px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 33.6rem) !important; } } @media (max-width: 1280px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 33rem) !important; } } @media (max-width: 1262px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 32.4rem) !important; } } @media (max-width: 1235px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 32rem) !important; } } @media (max-width: 1215px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 31.4rem) !important; } } @media (max-width: 1192px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 30.5rem) !important; } } @media (max-width: 1170px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 30.4rem) !important; } } @media (max-width: 1162px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 30rem) !important; } } @media (max-width: 1134px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 29.3rem) !important; } } @media (max-width: 1115px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 28.9rem) !important; } } @media (max-width: 1099px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 28.1rem) !important; } } @media (max-width: 1080px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 27.6rem) !important; } } @media (max-width: 1059px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 27rem) !important; } } @media (max-width: 1042px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 26.55rem) !important; } } @media (max-width: 1027px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 26.2rem) !important; } } @media (max-width: 1000px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 25.5rem) !important; } } @media (max-width: 980px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 24.9rem) !important; } } @media (max-width: 960px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 24.4rem) !important; } } @media (max-width: 940px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 24rem) !important; } } @media (max-width: 920px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 23.4rem) !important; } } @media (max-width: 900px) { .carouselImg-model .arrow-button_wrapper { top: 18%; } .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 22.8rem) !important; } } @media (max-width: 880px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 22.3rem) !important; } } @media (max-width: 860px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 21.8rem) !important; } } @media (max-width: 840px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 21.2rem) !important; } } @media (max-width: 820px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 20.7rem) !important; } } @media (max-width: 800px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 20.1rem) !important; } } @media (max-width: 780px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 19.7rem) !important; } } @media (max-width: 768px) { .carouselImg-model .swiperTechnology-pagination .swiper-pagination-bullet { font-size: var(--carousel-pagination-font-size); line-height: 13px; letter-spacing: 0em; text-align: center; scroll-behavior: smooth; white-space: nowrap; } .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 20.6rem) !important; } .carouselImg-model .arrow-button_wrapper svg { width: 0.625rem; height: 1rem; } .carouselImg-model .arrowTechnology { width: 1.5rem; height: 3rem; padding: 0.875rem var(--p-1\.5); justify-content: center; align-items: center; gap: 0.5rem; } .carouselImg-model .arrow-button_wrapper { top: 28%; } .carouselImg-model .swiperTechnology-pagination { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .carouselImg-model .swiperTechnology-pagination .swiper-pagination-bullet { flex: 0 0 33.333%; min-width: 33.333%; scroll-snap-align: start; padding: 0 var(--p-2); } .text-disclaimer-tecno { margin-top: 20px; } article.section.carouselImg-model { padding: 0 0 3rem 0; } .carouselImg-model .arrow-button_wrapper { display: none; } } @media (max-width: 700px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 19rem) !important; } } @media (max-width: 620px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 18rem) !important; } } @media (max-width: 600px) { .carouselImg-model .Image-slider { min-height: 260px; } .carouselImg-model .arrow-button_wrapper { top: 20%; } .carouselImg-model { padding: 0; } .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 16.7rem) !important; } article.section.carouselImg-model { padding: 3rem 0; } } @media (max-width: 580px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 16.3rem) !important; } .carouselImg-model .arrow-button_wrapper { top: 17%; display: none; } } @media (max-width: 350px) { .carouselImg-model { margin-top: 0rem; } .carouselImg-model .arrow-button_wrapper { top: 13%; display: none; } } @media (max-width: 320px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 16.8rem) !important; } } @media (max-width: 281px) { .carouselImg-model .swiperTechnology-pagination { bottom: calc(100% - 16.8rem) !important; } .carouselImg-model .arrow-button_wrapper { top: 10%; display: none; } } /* --- Inlined from: ./[blocklist]_components/tripleTabsGallery/tripleTabsGallery.css --- */ /* --- Inlined from: ../../[branding]_components/tripleTabsGallery.css --- */ /* Desktop */ :root { /* 1. Gallery Container */ /* 2. Title */ --gallery-section-title-font-family: var(--font-family-1); --gallery-section-title-font-weight: var(--weight-bolder); --gallery-section-title-font-size: var(--text-2xl); --gallery-section-title-color: #373637; --gallery-section-title-text-transform: uppercase; /* 3. Subtitle */ --gallery-section-subtitle-font-family: var(--font-family-1); --gallery-section-subtitle-font-weight: var(--weight-semilight); --gallery-section-subtitle-font-size: var(--text-md); --gallery-section-subtitle-color: var(--gray-dark-1); /* 4. Tabs */ --gallery-tab-border-bottom: #373637; --gallery-tab-button-font-family: var(--font-family-5); --gallery-tab-button-font-weight: var(--weight-bold); --gallery-tab-button-font-size: var(--text-md); --gallery-tab-button-color: #373637; --gallery-tab-button-text-transform: none; --gallery-tab-button-active-and-hover-font-family: var(--font-family-5); --gallery-tab-button-active-and-hover-font-weight: var(--weight-bold); --gallery-tab-button-active-and-hover-font-size: var(--text-md); --gallery-tab-button-active-and-hover-color: #00233a; --gallery-tab-button-active-and-hover-border-bottom: 6px solid #00233a; --gallery-tab-button-active-and-hover-text-transform: none; --gallery-tab-button-focus-outline: 3px solid transparent; --gallery-tab-button-focus-outline-offset: 2px; /* 5. Gallery Image */ /* 6. Arrow Buttons */ --gallery-arrow-background-color: rgba(0, 0, 0, 0.4); --gallery-arrow-svg-color: var(--brand-white); --gallery-arrow-focus-outline: 3px solid transparent; --gallery-arrow-focus-outline-offset: 2px; /* 6. Pagination */ --gallery-pagination-bullet-background-color: #ffffff66; --gallery-pagination-bullet-border: 1px solid #e1e1e1; --gallery-pagination-bullet-width-and-height: 0.75rem; --gallery-pagination-bullet-background-color-active: #00233a; --gallery-pagination-bullet-border-active: 1px solid #00233a; --gallery-pagination-bullet-width-and-height-active: 1.125rem; } /* Tablet */ @media (max-width: 768px) { /* Title */ :root { --gallery-section-title-font-size: 1.25rem; } } /* 1. Gallery Container */ .gallery-container { position: relative; overflow: hidden; height: auto; margin: 0 auto; padding: 3.125rem 0; max-width: 1920px; margin: 0 auto; } /* 2. Title */ .gallery-section-title { font-family: var(--gallery-section-title-font-family); font-weight: var(--gallery-section-title-font-weight); font-size: var(--gallery-section-title-font-size); color: var(--gallery-section-title-color); text-align: center; text-transform: var(--gallery-section-title-text-transform); padding-bottom: 32px; } /* 3. Subtitle */ .gallery-section-subtitle { padding-bottom: 2rem; } .gallery-section-subtitle p { font-family: var(--gallery-section-subtitle-font-family); font-weight: var(--gallery-section-subtitle-font-weight); font-size: var(--text-md); color: var(--gallery-section-subtitle-color); } /* 4. Tabs */ .gallery-tabs { display: flex; justify-content: center; padding-bottom: 2rem; } .gallery-tab { border-bottom: 2px solid var(--gallery-tab-border-bottom); width: 25%; } /* Button reset for tab buttons */ .btn-gallery { font-family: var(--gallery-tab-button-font-family); font-weight: var(--gallery-tab-button-font-weight); font-size: var(--gallery-tab-button-font-size); color: var(--gallery-tab-button-color); text-align: center; text-transform: var(--gallery-tab-button-text-transform); margin-bottom: 0; cursor: pointer; background: none; border: none; padding: 0.5rem 1rem; width: 100%; line-height: inherit; } .btn-gallery.active, .btn-gallery:hover { font-family: var(--gallery-tab-button-active-and-hover-font-family); font-weight: var(--gallery-tab-button-active-and-hover-font-weight); font-size: var(--gallery-tab-button-active-and-hover-font-size); color: var(--gallery-tab-button-active-and-hover-color); border-bottom: var(--gallery-tab-button-active-and-hover-border-bottom); margin-bottom: -2px; text-align: center; text-transform: var(--gallery-tab-button-active-and-hover-text-transform); } .btn-gallery:focus { outline: var(--gallery-tab-button-focus-outline); outline-offset: var(--gallery-tab-button-focus-outline-offset); } /* 5. Gallery Image */ .gallery-image { width: 100%; max-height: 100%; height: 100%; object-fit: cover; cursor: pointer; } /* 6. Arrow Buttons */ .swiper-gallery-all, .swiper-gallery-first-category, .swiper-gallery-second-category { position: relative; } .swiper-gallery-arrows { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: space-between; align-items: center; width: 95%; z-index: 10; } .swiper-gallery-all-arrow { display: grid; place-items: center; width: 3rem; height: 5.75rem; background-color: var(--gallery-arrow-background-color); } .swiper-gallery-all-arrow svg path { fill: var(--gallery-arrow-svg-color); } .swiper-gallery-all-arrow:focus { outline: var(--gallery-arrow-focus-outline); outline-offset: var(--gallery-arrow-focus-outline-offset); } /* Hide arrows only if single-slide */ .is-hidden { display: none !important; } /* 7. Pagination */ .swiper-gallery-pagination { display: flex; justify-content: center; align-items: center; padding-top: 1.875rem; } .swiper-gallery-pagination .swiper-pagination-bullet { width: var(--gallery-pagination-bullet-width-and-height); height: var(--gallery-pagination-bullet-width-and-height); background: var(--gallery-pagination-bullet-background-color); border: var(--gallery-pagination-bullet-border); opacity: 1; } .swiper-gallery-pagination .swiper-pagination-bullet-active { width: var(--gallery-pagination-bullet-width-and-height-active); height: var(--gallery-pagination-bullet-width-and-height-active); background: var(--gallery-pagination-bullet-background-color-active); border: var(--gallery-pagination-bullet-border-active); } /* ---------------- Skeleton ---------------- */ .swiper-image { position: relative; width: 100%; overflow: hidden; background: #f0f0f0; } /* Skeleton layer */ .image-skeleton { position: absolute; inset: 0; background: linear-gradient(90deg, #eeeeee 25%, #dddddd 37%, #eeeeee 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; z-index: 1; } /* When image is loaded */ .swiper-image.loaded img { opacity: 1; } .swiper-image.loaded .image-skeleton { opacity: 0; pointer-events: none; } /* Animation */ @keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ---------------- Lightbox ---------------- */ .gallery-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; } .gallery-lightbox[hidden] { display: none; } .gallery-lightbox__backdrop { position: absolute; inset: 0; background: var(--gallery-lightbox-backdrop-bg, rgba(0, 0, 0, 0.92)); } .gallery-lightbox__close { position: absolute; top: 1rem; right: 1rem; z-index: 10; width: 3rem; height: 3rem; border-radius: 50%; border: none; background: var(--gallery-lightbox-close-bg, rgba(255, 255, 255, 0.15)); color: var(--gallery-lightbox-close-color, #ffffff); font-size: 2rem; cursor: pointer; display: grid; line-height: normal; } .gallery-lightbox__close:hover { background: var(--gallery-lightbox-close-hover-bg, rgba(255, 255, 255, 0.3)); } .gallery-lightbox__close:focus { outline: var(--gallery-lightbox-focus-outline, 3px solid #ffffff); outline-offset: 2px; } .gallery-lightbox__counter { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 10; color: var(--gallery-lightbox-counter-color, #ffffff); font-family: var(--gallery-lightbox-counter-font, inherit); font-size: 0.875rem; } .gallery-lightbox__swiper { position: relative; width: 90%; max-width: 1400px; height: 85vh; z-index: 5; } .gallery-lightbox__swiper .swiper-slide { display: flex; align-items: center; justify-content: center; } .gallery-lightbox__image { max-width: 100%; max-height: 85vh; object-fit: contain; } .swiper-zoom-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .gallery-lightbox__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 3rem; height: 3rem; border-radius: 50%; border: none; background: var(--gallery-lightbox-arrow-bg, rgba(255, 255, 255, 0.15)); color: var(--gallery-lightbox-arrow-color, #ffffff); cursor: pointer; display: grid; place-items: center; } .gallery-lightbox__arrow svg path { fill: var(--gallery-lightbox-arrow-color, #ffffff); } .gallery-lightbox__arrow:hover { background: var(--gallery-lightbox-arrow-hover-bg, rgba(255, 255, 255, 0.3)); } .gallery-lightbox__arrow:focus { outline: var(--gallery-lightbox-focus-outline, 3px solid #ffffff); outline-offset: 2px; } .gallery-lightbox__arrow--prev { left: 1rem; } .gallery-lightbox__arrow--next { right: 1rem; } /* ---------------- Screen Reader Only ---------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------------- Media Queries ---------------- */ @media (max-width: 1024px) { /* Arrow Buttons */ .swiper-gallery-arrows { width: 97%; } } @media (max-width: 768px) { /* Title */ .gallery-section-title { font-size: var(--gallery-section-title-font-size); } /* Arrow Buttons */ .swiper-gallery-all-arrow svg { width: 0.625rem; height: 1rem; } .swiper-gallery-arrows { width: 95%; } .swiper-gallery-all-arrow { width: 1.5rem; height: 3rem; } /* Lightbox responsive */ .gallery-lightbox__swiper { width: 95%; } .gallery-lightbox__arrow { width: 2.5rem; height: 2.5rem; } } @media (max-width: 575px) { /* Gallery Container */ .gallery-container { padding: 2.5rem 0; } /* Title */ .gallery-section-title { padding-bottom: 1.25rem; } /* Hide carousel arrows on mobile */ /* .swiper-gallery-arrows { display: none; } */ /* Hide lightbox arrows on mobile */ .gallery-lightbox__arrow { display: none; } } /* --- Inlined from: ./[blocklist]_components/singleFeature/singleFeature.css --- */ /* --- Inlined from: ../../[branding]_components/singleFeature.css --- */ :root { /* SECTION / WRAPPER */ --headline-features-section-max-width: 1920px; --headline-features-section-padding-y: 2rem; --headline-features-section-padding-x: 4.6%; --headline-features-section-margin-y: 0; /* LAYOUT / GRID */ --headline-features-layout-display: flex; --headline-features-layout-wrap: nowrap; --headline-features-layout-overflow: hidden; --headline-features-content-width: 44%; --headline-features-image-width: 100%; /* TEXT CONTENT */ --headline-features-text-display: flex; --headline-features-text-direction: column; --headline-features-text-gap: 1.5rem; --headline-features-text-margin-block: 2.5%; --headline-features-text-padding-side: 10.5%; --headline-features-text-scrollbar-display: none; /* SECTION LABEL */ --headline-features-label-font-family: var(--font-family-2); --headline-features-label-font-size: var(--text-lg); --headline-features-label-letter-spacing: 4px; --headline-features-label-color: #373637; --headline-features-label-transform: uppercase; --headline-features-label-text-align: initial; --headline-features-label-font-weight: var(--weight-normal); /* MAIN TITLE */ --headline-features-title-font-family: var(--font-family-1); --headline-features-title-font-size: 2rem; --headline-features-title-font-weight: var(--weight-bolder); --headline-features-title-color: var(--gray-dark); --headline-features-title-transform: uppercase; --headline-features-title-text-align: initial; /* BODY TEXT */ --headline-features-body-font-family: var(--font-family-4); --headline-features-body-font-size: var(--text-md); --headline-features-body-font-weight: var(--weight-normal); --headline-features-body-line-height: 150%; --headline-features-body-text-align: justify; --headline-features-body-color: #373637; /* MEDIA */ --headline-features-media-aspect-ratio: 980 / 514; --headline-features-media-object-fit: cover; /* CTA BUTTONS (Primary + Secondary) */ --headline-features-cta-width: 292px; --headline-features-cta-height: 60px; --headline-features-cta-padding-y: var(--p-4); --headline-features-cta-font-family: var(--font-family-1); --headline-features-cta-font-size: var(--text-md); --headline-features-cta-font-weight: var(--weight-semibold); --headline-features-cta-transition: all 200ms; --headline-features-cta-btn-border-radius: 8px; --headline-features-cta-btn-border-width: 2px; --headline-features-cta-btn-border-style: solid; /* CTA - Primary */ --headline-features-cta-primary-bg: var(--brand); --headline-features-cta-primary-color: var(--brand-white); --headline-features-cta-primary-bg-hover: #888888; --headline-features-cta-primary-color-hover: var(--brand-white); /* CTA - Secondary */ --headline-features-cta-secondary-bg: var(--brand-white); --headline-features-cta-secondary-color: var(--brand-black); --headline-features-cta-secondary-border-width: 3px; --headline-features-cta-secondary-border-color: var(--brand-black); --headline-features-cta-secondary-border-color-hover: var(--brand-black); --headline-features-cta-secondary-bg-hover: var(--gray-dark-8); --headline-features-cta-secondary-color-hover: var(--brand-black); } @media (max-width: 1700px) { :root { /* SECTION / WRAPPER */ --headline-features-section-padding-y: 2.5rem; --headline-features-section-padding-x: 3.5%; /* TEXT CONTENT */ --headline-features-text-padding-side: 7%; /* MEDIA */ --headline-features-media-aspect-ratio: 688 / 513; } } @media (max-width: 800px) { :root { /* SECTION / WRAPPER */ --headline-features-section-padding-x: 3.125%; /* TEXT CONTENT */ --headline-features-text-gap: 0.75rem; --headline-features-text-padding-side: 0%; /* SECTION LABEL */ --headline-features-label-font-size: 0.75rem; /* MAIN TITLE */ --headline-features-title-font-size: 1.75rem; /* CTA BUTTONS (Primary + Secondary) */ --headline-features-cta-font-size: 1rem; --headline-features-cta-width: 348px; --headline-features-cta-height: 48px; /* MEDIA */ --headline-features-media-aspect-ratio: 348 / 493; } } @media (max-width: 600px) { :root { /* SECTION / WRAPPER */ --headline-features-section-padding-y: 2rem; --headline-features-section-padding-x: 0; /* MAIN TITLE */ --headline-features-title-font-size: 28px; --headline-features-title-text-align: center; /* MEDIA */ --headline-features-media-aspect-ratio: 360 / 170; } } @media (max-width: 768px) { :root { /* SECTION LABEL */ --headline-features-label-font-size: 12px; /* BODY TEXT */ --headline-features-body-font-size: 1rem; } } @media (max-width: 576px) { :root { --headline-features-cta-width: 328px; --headline-features-cta-height: 48px; } } .alternate-post { padding: var(--headline-features-section-padding-y) var(--headline-features-section-padding-x); max-width: var(--headline-features-section-max-width); margin: var(--headline-features-section-margin-y) auto; display: var(--headline-features-layout-display); flex-wrap: var(--headline-features-layout-wrap) !important; overflow: var(--headline-features-layout-overflow); } .alternate-post > div { display: flex; flex: initial; flex-grow: 1; } .alternate-post__content { width: var(--headline-features-content-width); } .alternate-post__image { width: var(--headline-features-image-width); } /* image */ .alternate-post__image img { width: 100%; aspect-ratio: var(--headline-features-media-aspect-ratio); object-fit: var(--headline-features-media-object-fit); height: 100%; } /* iframe video support */ .alternate-post iframe { width: 100%; aspect-ratio: var(--headline-features-media-aspect-ratio) !important; height: -webkit-fill-available; } /* text content wrapper */ .alternate-post__text_content { display: var(--headline-features-text-display); flex-direction: var(--headline-features-text-direction); gap: var(--headline-features-text-gap); margin-block: var(--headline-features-text-margin-block); width: 100%; padding-top: 1rem; padding-bottom: 1rem; } .post-text-right { padding-left: var(--headline-features-text-padding-side); } .post-text-left { padding-right: var(--headline-features-text-padding-side); } .alternate-post__text_content > div { margin-top: 0.75rem; } .alternate-post__text_content.post-text-right, .alternate-post__text_content.post-text-left { margin: 0rem; } .alternate-post__text_content::-webkit-scrollbar { display: var(--headline-features-text-scrollbar-display); } .alternate-post__text_content p, .alternate-post__text_content h2 { margin: 0.1rem; } .alternate-post__text_content ul li { margin-bottom: 1rem; } /* section title */ .alternate-post__text_content > p:first-child { font-size: var(--headline-features-label-font-size); letter-spacing: var(--headline-features-label-letter-spacing); font-family: var(--headline-features-label-font-family); color: var(--headline-features-label-color); text-transform: var(--headline-features-label-transform); text-align: var(--headline-features-label-text-align); font-weight: var(--headline-features-label-font-weight); } /* main title */ .post-text-left > h2, .post-text-right > h2 { text-align: var(--headline-features-title-text-align); font-family: var(--headline-features-title-font-family); font-size: var(--headline-features-title-font-size); font-weight: var(--headline-features-title-font-weight); text-transform: var(--headline-features-title-transform); color: var(--headline-features-title-color); } /* description */ .post-text-left > div > *, .post-text-right > div > * { text-align: var(--headline-features-body-text-align); font-family: var(--headline-features-body-font-family); font-size: var(--headline-features-body-font-size); font-weight: var(--headline-features-body-font-weight); line-height: var(--headline-features-body-line-height); color: var(--headline-features-body-color); margin: 0 0 1rem; } /* cta button */ .alternate-post-cta__button-cta { margin: 0; display: flex; align-items: center; justify-content: center; align-self: flex-start; text-decoration: none; padding: 0; transition: var(--headline-features-cta-transition); background-color: var(--headline-features-cta-primary-bg); color: var(--headline-features-cta-primary-color); font-family: var(--headline-features-cta-font-family); font-size: var(--headline-features-cta-font-size); font-weight: var(--headline-features-cta-font-weight); min-width: var(--headline-features-cta-width); text-align: center; min-height: var(--headline-features-cta-height); border-radius: var(--headline-features-cta-btn-border-radius); } .alternate-post-cta__button-cta:hover { color: var(--headline-features-cta-primary-color-hover); background-color: var(--headline-features-cta-primary-bg-hover); } .alternate-post-cta__button-cta2 { margin: 0; display: flex; align-items: center; justify-content: center; align-self: flex-start; text-decoration: none; padding: 0; transition: var(--headline-features-cta-transition); background-color: var(--headline-features-cta-secondary-bg); color: var(--headline-features-cta-secondary-color); font-family: var(--headline-features-cta-font-family); font-size: var(--headline-features-cta-font-size); font-weight: var(--headline-features-cta-font-weight); min-width: var(--headline-features-cta-width); text-align: center; min-height: var(--headline-features-cta-height); border: var(--headline-features-cta-secondary-border-width) solid var(--headline-features-cta-secondary-border-color); border-radius: var(--headline-features-cta-btn-border-radius); } .alternate-post-cta__button-cta2:hover { color: var(--headline-features-cta-secondary-color-hover); border-color: var(--headline-features-cta-secondary-border-color-hover); background: var(--headline-features-cta-secondary-bg-hover); } @media (max-width: 800px) { .alternate-post { gap: 1.5rem; } .alternate-post > div { flex: 1 1 48%; } .post-text-right, .post-text-left { padding-left: 0; padding-right: 0; } .alternate-post { margin: 0.5rem; } } @media (min-width: 601px) and (max-width: 800px) { .alternate-post-cta__button-cta { margin-bottom: 1rem; } } @media (max-width: 600px) { .alternate-post { gap: 2.5rem; flex-wrap: wrap !important; } .alternate-post .alternate-post__image__wrapper { width: 100%; } .alternate-post__text_content { align-items: center; padding: 0 1rem; gap: 1rem !important; } .alternate-post-cta__button-cta, .alternate-post-cta__button-cta2 { align-self: center; } .first-post { flex-wrap: wrap-reverse !important; } .post-text-left > p, .post-text-left > h2, .post-text-right > p, .post-text-right > h2 { text-align: var(--headline-features-title-text-align); } } /* --- Inlined from: ./[blocklist]_components/dualBanner/dualBanner.css --- */ /* Import Component Variables here */ /* --- Inlined from: ../../[branding]_components/dualBanner.css --- */ /* Desktop */ :root { /* 1. Container */ --dual-banner-background-color: transparent; --dual-banner-gap: 0; /* 2. Item */ --dual-banner-item-min-height: 998px; --dual-banner-item-overlay-color: rgba(0, 0, 0, 0.4); /* 3. Icon */ --dual-banner-icon-size: 100px; --dual-banner-icon-min-height: 163px !important; --dual-banner-icon-height: 100%; --dual-banner-icon-width: 161px !important; /* 4. Title */ --dual-banner-title-font-family: var(--font-family-2); --dual-banner-title-font-size: 40px; --dual-banner-title-font-weight: var(--weight-bold); --dual-banner-title-color: var(--brand-white); --dual-banner-title-text-transform: none; /* 5. Button */ --dual-banner-button-font-family: var(--font-family-1); --dual-banner-button-font-size: 16px !important; --dual-banner-button-font-weight: var(--weight-bolder); --dual-banner-button-color: var(--brand-white) !important; --dual-banner-button-color-hover: var(--brand-white) !important; --dual-banner-button-background-color: var(--brand); --dual-banner-button-background-color-hover: #888888; --dual-banner-button-border-radius: 8px; --dual-banner-button-padding: 14px 32px; --dual-banner-button-padding-x: 12px; } /* Tablet */ :root { --dual-banner-item-min-height-tablet: 487px; --dual-banner-icon-size-tablet: 80px; --dual-banner-icon-min-height-tablet: 130px !important; --dual-banner-title-font-size-tablet: var(--text-6xl); --dual-banner-button-padding-tablet: 10px 24px; --dual-banner-button-padding-x-tablet: 12px; } /* Mobile Devices */ :root { --dual-banner-item-min-height-mobile: 295px; --dual-banner-icon-size-mobile: 60px; --dual-banner-icon-min-height-mobile: 90px !important; --dual-banner-title-font-size-mobile: 26px; } /* 1. Container */ .dual-banner-section { width: 100%; background-color: var(--dual-banner-background-color); } .dual-banner { display: flex; flex-direction: row; gap: var(--dual-banner-gap); max-width: 1920px; margin: 0 auto; } /* 2. Item */ .dual-banner__item { position: relative; flex: 1; min-height: var(--dual-banner-item-min-height); overflow: hidden; display: flex; align-items: center; justify-content: center; } .dual-banner__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .dual-banner__image img { width: 100%; height: 100%; object-fit: cover; } .dual-banner__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--dual-banner-item-overlay-color); z-index: 2; } .dual-banner__content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 60px; } /* 3. Icon */ .dual-banner__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } .dual-banner__icon img { width: var(--dual-banner-icon-width); max-width: 100%; height: var(--dual-banner-icon-height); min-height: var(--dual-banner-icon-min-height); object-fit: contain; } /* 4. Title */ .dual-banner__title { font-family: var(--dual-banner-title-font-family); font-size: var(--text-6xl); font-weight: var(--dual-banner-title-font-weight); color: var(--dual-banner-title-color); text-transform: var(--dual-banner-title-text-transform); margin: 0; line-height: 1.3; } /* 5. Button */ .dual-banner__button { display: flex; align-items: center; justify-content: center; padding: 0 var(--dual-banner-button-padding-x, 32px); background-color: var(--dual-banner-button-background-color); color: var(--dual-banner-button-color); text-decoration: none; font-family: var(--dual-banner-button-font-family); font-size: var(--dual-banner-button-font-size); font-weight: var(--dual-banner-button-font-weight); border-radius: var(--dual-banner-button-border-radius); transition: background-color 0.3s ease, transform 0.2s ease; margin-top: 8px; min-width: 134px; min-height: 48px; } .dual-banner__button:hover { background-color: var(--dual-banner-button-background-color-hover); color: var(--dual-banner-button-color-hover); } .dual-banner__button:active { transform: translateY(0); } @media (max-width: 1440px) { .dual-banner__item { min-height: 646px; } .dual-banner__icon img { width: 130px; min-height: 130px; } } @media (max-width: 768px) { .dual-banner { flex-direction: column; } .dual-banner__item { min-height: var(--dual-banner-item-min-height-tablet); } .dual-banner__icon img { min-height: var(--dual-banner-icon-min-height-tablet); } .dual-banner__title { font-size: var(--dual-banner-title-font-size-tablet); } .dual-banner__button { padding: 0 var(--dual-banner-button-padding-x-tablet, 12px); } } @media (max-width: 480px) { .dual-banner__item { min-height: var(--dual-banner-item-min-height-mobile); } .dual-banner__content { padding: 30px 60px; } .dual-banner__icon img { height: var(--dual-banner-icon-min-height-mobile); min-height: var(--dual-banner-icon-min-height-mobile); width: 90px; } .dual-banner__title { font-size: var(--dual-banner-title-font-size-mobile); } } /* --- Inlined from: ./[blocklist]_components/mediumBanner/mediumBanner.css --- */ /* Import Component Variables here */ /* --- Inlined from: ../../[branding]_components/mediumBanner.css --- */ /* Desktop 1920 */ :root { /* 1. Container */ --medium-banner-background-color: #1a1a1a; /* 2. Banner Height */ --medium-banner-height: 416px; /* 3. Content */ --medium-banner-content-background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.634375) 44.79%, rgba(0, 0, 0, 0.259) 61.46%, rgba(0, 0, 0, 0) 100%); --medium-banner-content-padding: 60px 80px; --medium-banner-content-max-width: 50%; /* 4. Title */ --medium-banner-title-font-family: var(--font-family-2); --medium-banner-title-font-size: 48px; --medium-banner-title-font-weight: 700; --medium-banner-title-color: var(--brand-white); --medium-banner-title-text-transform: uppercase; --medium-banner-title-margin-bottom: 16px; /* 5. Description */ --medium-banner-description-font-family: var(--font-family-1); --medium-banner-description-font-size: 16px; --medium-banner-description-font-weight: 300; --medium-banner-description-color: var(--brand-white); --medium-banner-description-line-height: 1.6; } /* Desktop 1366 */ @media (max-width: 1366px) { :root { --medium-banner-height: 300px; --medium-banner-content-padding: 40px 60px; --medium-banner-title-font-size: 40px; } } /* Tablet 768 */ @media (max-width: 768px) { :root { --medium-banner-height: auto; --medium-banner-content-background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.634375) 44.79%, rgba(0, 0, 0, 0.259) 61.46%, rgba(0, 0, 0, 0) 100%); --medium-banner-content-padding: 32px 24px; --medium-banner-content-max-width: 100%; --medium-banner-title-font-size: 22px; --medium-banner-title-margin-bottom: 12px; --medium-banner-description-font-size: 14px; } } /* Mobile */ @media (max-width: 480px) { :root { --medium-banner-content-background: var(--brand-black); --medium-banner-content-padding: 24px 16px; --medium-banner-title-font-size: 24px; --medium-banner-description-font-size: 16px; } } /* 1. Container */ .medium-banner-section { width: 100%; background-color: var(--medium-banner-background-color); } .medium-banner { position: relative; max-width: 1920px; margin: 0 auto; height: var(--medium-banner-height); overflow: hidden; display: flex; align-items: stretch; } /* 2. Image */ .medium-banner__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .medium-banner__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* 3. Overlay */ .medium-banner__overlay { display: none; } /* 4. Content */ .medium-banner__content { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: var(--medium-banner-content-background); padding: var(--medium-banner-content-padding); max-width: var(--medium-banner-content-max-width); width: 100%; box-sizing: border-box; } /* 5. Title */ .medium-banner__title { font-family: var(--medium-banner-title-font-family); font-size: var(--medium-banner-title-font-size); font-weight: var(--medium-banner-title-font-weight); color: var(--medium-banner-title-color); text-transform: var(--medium-banner-title-text-transform); margin: 0 0 var(--medium-banner-title-margin-bottom) 0; line-height: 1.2; } /* 6. Description */ .medium-banner__description { font-family: var(--medium-banner-description-font-family); font-size: var(--medium-banner-description-font-size); font-weight: var(--medium-banner-description-font-weight); color: var(--medium-banner-description-color); line-height: var(--medium-banner-description-line-height); margin: 0; } .medium-banner__description p { margin: 0; } /* Tablet Layout - Side by Side */ @media (max-width: 768px) { .medium-banner { flex-direction: row; height: auto; min-height: 170px; } .medium-banner__image { position: absolute; width: 100%; height: 100%; min-height: 170px; order: 2; } .medium-banner__image img { height: 100%; min-height: 170px; } .medium-banner__content { width: 50%; max-width: 50%; order: 1; min-height: 170px; } } /* Mobile Layout - Stacked */ @media (max-width: 480px) { .medium-banner { flex-direction: column; } .medium-banner__image { position: relative; width: 100%; height: 200px; min-height: 200px; order: 1; } .medium-banner__image::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(360deg, #000000 -1.77%, rgba(0, 0, 0, 0) 49.62%); pointer-events: none; } .medium-banner__image img { height: 200px; min-height: 200px; } .medium-banner__content { width: 100%; max-width: 100%; order: 2; min-height: auto; } } /* --- Inlined from: ./[blocklist]_components/heroBanner/heroBanner.css --- */ /* --- Inlined from: ../../[branding]_components/heroBanner.css --- */ /* Desktop */ :root { /* 1. Hero Banner Container */ --hero-banner-container-linear-background: linear-gradient( 180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100% ); /* 2. Pre-Title */ --hero-banner-pretitle-font-family: var(--font-family-2); --hero-banner-pretitle-font-weight: var(--weight-semilight); --hero-banner-pretitle-font-size: var(--text-lg); --hero-banner-pretitle-color: var(--brand-white); --hero-banner-pretitle-text-transform: uppercase; --hero-banner-pretitle-letter-spacing: 0.4rem; /* 3. Title */ --hero-banner-title-font-family: var(--font-family-1); --hero-banner-title-font-weight: var(--weight-bolder); --hero-banner-title-font-size: var(--text-6xl); --hero-banner-title-color: var(--brand-white); --hero-banner-title-text-transform: uppercase; /* 4. Description */ --hero-banner-description-font-family: var(--font-family-1); --hero-banner-description-font-weight: var(--weight-semibold); --hero-banner-description-font-size: var(--text-md); --hero-banner-description-color: var(--brand-white); --hero-banner-description-text-transform: none; /* 5. Button */ --hero-banner-button-link-svg-exclamation-fill-color: var(--brand-white); --hero-banner-button-link-svg-arrow-fill-color: var(--brand-white); --hero-banner-button-link-hover-svg-exclamation-fill-color: var(--brand-white); --hero-banner-button-link-hover-svg-arrow-fill-color: var(--brand-white); --hero-banner-button-link-hover-background-color: #888888; --hero-banner-button-link-hover-text-color: var(--brand-white); --hero-banner-button-link-hover-border-color: #888888; --hero-banner-button-link-font-family: var(--font-family-1); --hero-banner-button-link-font-weight: var(--weight-bold); --hero-banner-button-link-font-size: var(--text-base); --hero-banner-button-link-color: var(--brand-white); --hero-banner-button-link-background-color: var(--brand); --hero-banner-button-link-border-radius: 8px; --hero-banner-button-link-text-transform: none; /* 6. Hero Banner Image */ } /* ---------------- Media Queries ---------------- */ @media (max-width: 1366px) { :root { /* Title */ --hero-banner-title-font-size: var(--text-5xl); } } @media (max-width: 768px) { :root { /* Pre-Title */ --hero-banner-pretitle-font-size: var(--text-sm); /* Title */ --hero-banner-title-font-size: 1.625rem; /* Description */ --hero-banner-description-font-size: var(--text-sm); } } @media (max-width: 576px) { :root { /* Title */ --hero-banner-title-font-size: 1.5rem; } } /* 1. Hero Banner Container */ .hero-banner-section { position: relative; max-width: 1920px; margin: 0 auto; } .hero-banner-container { display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; top: 10%; left: 50%; transform: translate(-50%, -10%); text-align: center; z-index: 10; max-width: 800px; } /* 2. Pre-Title */ .hero-banner-pretitle { font-family: var(--hero-banner-pretitle-font-family); font-weight: var(--hero-banner-pretitle-font-weight); font-size: var(--hero-banner-pretitle-font-size); color: var(--hero-banner-pretitle-color); text-transform: var(--hero-banner-pretitle-text-transform); letter-spacing: var(--hero-banner-pretitle-letter-spacing); margin-bottom: 0; } /* 3. Title */ .hero-banner-title { font-family: var(--hero-banner-title-font-family); font-weight: var(--hero-banner-title-font-weight); font-size: var(--hero-banner-title-font-size); color: var(--hero-banner-title-color); text-transform: var(--hero-banner-title-text-transform); padding: 1rem 0; margin-bottom: 0; } /* 4. Description */ .hero-banner-description { font-family: var(--hero-banner-description-font-family); font-weight: var(--hero-banner-description-font-weight); font-size: var(--hero-banner-description-font-size); color: var(--hero-banner-description-color); text-transform: var(--hero-banner-description-text-transform); text-align: center; } .hero-banner-description p { margin-bottom: 0.5rem; color: var(--hero-banner-description-color); } /* 5. Button */ .hero-banner-button-link { font-family: var(--hero-banner-button-link-font-family); font-weight: var(--hero-banner-button-link-font-weight); font-size: var(--hero-banner-button-link-font-size); color: var(--hero-banner-button-link-color); background: var(--hero-banner-button-link-background-color); border-radius: var(--hero-banner-button-link-border-radius); text-transform: var(--hero-banner-button-link-text-transform); display: flex; align-items: center; justify-content: center; height: 3rem; width: 193px; text-decoration: none; cursor: pointer; } .hero-banner-button-link:hover { background: var(--hero-banner-button-link-hover-background-color); color: var(--hero-banner-button-link-hover-text-color); border-color: var(--hero-banner-button-link-hover-border-color); } .hero-banner-button-link-svg-exclamation { fill: var(--hero-banner-button-link-svg-exclamation-fill-color); padding-right: 0.2rem; } .hero-banner-button-link:hover .hero-banner-button-link-svg-exclamation { fill: var(--hero-banner-button-link-hover-svg-exclamation-fill-color); } .hero-banner-button-link-svg-arrow { fill: var(--hero-banner-button-link-svg-arrow-fill-color); padding-left: 0.2rem; } .hero-banner-button-link:hover:hover .hero-banner-button-link-svg-arrow { fill: var(--hero-banner-button-link-hover-svg-arrow-fill-color); } /* 6. Hero Banner Image */ .hero-banner-image-container { position: relative; width: 100%; } /* Gradient stretches over the full image container */ .hero-banner-image-container::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--hero-banner-container-linear-background); pointer-events: none; } .hero-banner-image { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 2; display: block; } /* ---------------- Skeleton ---------------- */ .hero-banner-image-skeleton { width: 100%; height: 100%; background: linear-gradient(90deg, #e6e6e6 25%, #f2f2f2 37%, #e6e6e6 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: 8px; position: absolute; inset: 0; z-index: 1; pointer-events: none; } @keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ---------------- Media Queries ---------------- */ @media (max-width: 768px) { /* Hero Banner Container */ .hero-banner-button-container { margin-top: 1rem; display: flex; justify-content: center; align-items: center; } .hero-banner-button-container { margin-top: auto; width: 100%; } /* Title */ .hero-banner-title { padding: 0.5rem 0; } /* Hero Banner Image */ .hero-banner-image { aspect-ratio: 768 / 300; } } @media (max-width: 576px) { /* Hero Banner Container */ .hero-banner-container { top: 0; left: 0; transform: none; width: 100%; height: 100%; flex-direction: column; justify-content: flex-start; padding: 1rem; } .hero-banner-button-container { margin-top: auto; width: 183px; } .hero-banner-button-link { display: flex; justify-content: center; align-items: center; width: 100%; font-size: var(--hero-banner-button-link-font-size-mobile); } /* Title */ .hero-banner-title { padding: 0.4rem 0; } /* Hero Banner Image */ .hero-banner-image { aspect-ratio: 360 / 400; } } /* --- Inlined from: ./[blocklist]_components/columnFeatures/columnFeatures.css --- */ /* Import Component Variables */ /* --- Inlined from: ../../[branding]_components/columnFeatures.css --- */ /* Desktop 1920px */ :root { /* 1. Section */ --column-features-background-color: var(--brand-white); --column-features-max-width: 1920px; --column-features-padding: 40px 120px 20px 120px; /* 2. Section Name */ --column-features-section-name-font-family: var(--font-family-2); --column-features-section-name-font-size: 20px; --column-features-section-name-font-weight: var(--weight-normal); --column-features-section-name-color: var(--gray-dark); --column-features-section-name-letter-spacing: 0.2em; --column-features-section-name-margin-bottom: 16px; /* 3. Title */ --column-features-title-font-family: var(--font-family-1); --column-features-title-font-size: 32px; --column-features-title-font-weight: var(--weight-bolder); --column-features-title-color: var(--gray-dark); --column-features-title-margin-bottom: 16px; /* 4. Description */ --column-features-description-font-family: var(--font-family-4); --column-features-description-font-size: 18px; --column-features-description-font-weight: var(--weight-normal); --column-features-description-color: var(--gray-dark); --column-features-description-margin-bottom: 32px; --column-features-description-max-width: 100%; /* 5. Features Grid */ --column-features-grid-gap: 32px; --column-features-grid-columns: 2; /* 6. Feature Item Title */ --column-features-item-title-font-family: var(--font-family-1); --column-features-item-title-font-size: 28px; --column-features-item-title-font-weight: var(--weight-bolder); --column-features-item-title-color: var(--gray-dark); --column-features-item-title-margin-bottom: 8px; /* 7. Feature Item Description */ --column-features-item-description-font-family: var(--font-family-4); --column-features-item-description-font-size: 18px; --column-features-item-description-font-weight: var(--weight-normal); --column-features-item-description-color: var(--gray-dark); /* 8. Image */ --column-features-image-width: 50%; } /* Desktop 1366px */ @media (max-width: 1366px) { :root { --column-features-padding: 60px 80px; --column-features-section-name-font-size: 20px; --column-features-title-font-size: 28px; --column-features-description-font-size: 16px; --column-features-grid-gap: 24px; --column-features-item-title-font-size: 28px; --column-features-item-description-font-size: 16px; } } /* Tablet 768px */ @media (max-width: 1024px) { :root { --column-features-padding: 48px 40px; --column-features-image-width: 100%; --column-features-section-name-font-size: 20px; --column-features-title-font-size: 24px; --column-features-description-font-size: 16px; --column-features-description-margin-bottom: 24px; --column-features-item-title-font-size: 24px; --column-features-item-description-font-size: 16px; } } /* Mobile */ @media (max-width: 768px) { :root { --column-features-padding: 50px; --column-features-grid-gap: 24px 16px; } } /* Small Mobile */ @media (max-width: 480px) { :root { --column-features-padding: 32px 16px; --column-features-grid-gap: 20px 12px; --column-features-title-font-size: 20px; --column-features-item-description-font-size: 14px; --column-features-section-name-font-size: 12px; --column-features-description-font-size: 14px; --column-features-item-title-font-size: 20px; } } /* 1. Section */ .column-features-section { width: 100%; background-color: var(--column-features-background-color); } /* 2. Main Container - CSS Grid Layout */ .column-features { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: "header image" "grid image"; max-width: var(--column-features-max-width); margin: 0 auto; background-color: #F1F1F1; } /* Tablet/Mobile - Stacked Layout */ @media (max-width: 1024px) { .column-features { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "header" "image" "grid"; } } /* 3. Header Area */ .column-features__header { grid-area: header; padding: var(--column-features-padding); display: flex; flex-direction: column; } @media (max-width: 1024px) { .column-features__header { text-align: center; align-items: center; padding-bottom: 0; } } /* 4. Section Name */ .column-features__section-name { display: block; font-family: var(--column-features-section-name-font-family); font-size: var(--column-features-section-name-font-size); font-weight: var(--column-features-section-name-font-weight); color: var(--column-features-section-name-color); letter-spacing: var(--column-features-section-name-letter-spacing); text-transform: uppercase; margin-bottom: var(--column-features-section-name-margin-bottom); } /* 5. Title */ .column-features__title { font-family: var(--column-features-title-font-family); font-size: var(--column-features-title-font-size); font-weight: var(--column-features-title-font-weight); color: var(--column-features-title-color); text-transform: uppercase; margin: 0 0 var(--column-features-title-margin-bottom) 0; line-height: 1.2; } /* 6. Description */ .column-features__description { font-family: var(--column-features-description-font-family); font-size: var(--column-features-description-font-size); font-weight: var(--column-features-description-font-weight); color: var(--column-features-description-color); max-width: var(--column-features-description-max-width); line-height: 1.5; } @media (max-width: 1024px) { .column-features__description { margin-bottom: var(--column-features-description-margin-bottom); } } .column-features__description p { margin: 0; } /* 7. Features Grid */ .column-features__grid { grid-area: grid; display: grid; grid-template-columns: repeat(var(--column-features-grid-columns), 1fr); gap: var(--column-features-grid-gap); padding: var(--column-features-padding); padding-top: var(--column-features-description-margin-bottom); align-content: start; } @media (max-width: 1024px) { .column-features__grid { text-align: left; } } /* 8. Feature Item */ .column-features__item { display: flex; flex-direction: column; } .column-features__item-title { font-family: var(--column-features-item-title-font-family); font-size: var(--column-features-item-title-font-size); font-weight: var(--column-features-item-title-font-weight); color: var(--column-features-item-title-color); margin: 0 0 var(--column-features-item-title-margin-bottom) 0; line-height: 1.3; } .column-features__item-description { font-family: var(--column-features-item-description-font-family); font-size: var(--column-features-item-description-font-size); font-weight: var(--column-features-item-description-font-weight); color: var(--column-features-item-description-color); line-height: 1.5; } .column-features__item-description p { margin: 0; } /* 9. Image Wrapper */ .column-features__image-wrapper { grid-area: image; } @media (max-width: 1024px) { .column-features__image-wrapper { padding-left: 50px; padding-right: 50px; } } @media (max-width: 480px) { .column-features__image-wrapper { padding-left: 24px; padding-right: 24px; } } /* 10. Image */ .column-features__image { display: block; width: 100%; height: 100%; } .column-features__image img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 1024px) { .column-features__image { aspect-ratio: 16 / 9; } .column-features__image img { aspect-ratio: 16 / 9; } } /* --- Inlined from: ./[blocklist]_components/featuresCarousel/featuresCarousel.css --- */ /* Import Component Variables here */ /* --- Inlined from: ../../[branding]_components/featuresCarousel.css --- */ /* Desktop (1920px) */ :root { /* 1. Container */ --features-carousel-background-color: #F1F1F1; --features-carousel-section-padding: 50px 40px; --features-carousel-max-width: 1920px; /* 2. Image */ --features-carousel-image-padding-right: 40px; --features-carousel-image-max-height: 760px; /* 2. Content */ --features-carousel-content-padding: 60px 80px; --features-carousel-content-padding-tablet: 30px 24px 40px; --features-carousel-content-padding-mobile: 24px 16px 32px; /* 3. Tag - 20px for desktop */ --features-carousel-tag-font-family: var(--font-family-2); --features-carousel-tag-font-size: 20px; --features-carousel-tag-font-weight: var(--weight-normal); --features-carousel-tag-text-transform: uppercase; --features-carousel-tag-letter-spacing: 2px; --features-carousel-tag-color: var(--brand-black); --features-carousel-tag-margin-bottom: 16px; /* 4. Title - 40px for desktop */ --features-carousel-title-font-family: var(--font-family-1); --features-carousel-title-font-size: 40px; --features-carousel-title-font-weight: var(--weight-bolder); --features-carousel-title-line-height: 1.2; --features-carousel-title-color: var(--brand-black); --features-carousel-title-margin-bottom: 24px; /* 5. Description - 18px for desktop */ --features-carousel-description-font-family: var(--font-family-4); --features-carousel-description-font-size: 18px; --features-carousel-description-line-height: 1.6; --features-carousel-description-color: #373637; --features-carousel-description-margin-bottom: 32px; /* 6. Button - 18px for desktop */ --features-carousel-button-font-family: var(--font-family-1); --features-carousel-button-font-size: 18px; --features-carousel-button-font-weight: var(--weight-bolder); --features-carousel-button-padding: 12px 40px; --features-carousel-button-min-width: 193px; --features-carousel-button-min-height: 60px; --features-carousel-button-background-color: var(--brand, #18BDE6); --features-carousel-button-background-color-hover: #888888; --features-carousel-button-color: var(--brand-white); --features-carousel-button-color-hover: var(--brand-white); --features-carousel-button-border-radius: 8px; --features-carousel-button-max-width-mobile: 280px; /* 7. Navigation */ --features-carousel-nav-gap: 8px; --features-carousel-nav-color: #373637; --features-carousel-nav-next-color: var(--brand-black); --features-carousel-nav-arrow-size: 20px; --features-carousel-nav-hover-opacity: 0.6; --features-carousel-nav-disabled-opacity: 0.3; --features-carousel-nav-margin-bottom: 40px; --features-carousel-nav-margin-bottom-mobile: 20px; /* 8. Counter - 18px for desktop */ --features-carousel-counter-font-family: var(--font-family-4); --features-carousel-counter-font-size: 18px; --features-carousel-counter-font-weight: var(--weight-normal); --features-carousel-counter-color: #E1E1E1; /* 9. Current Slide */ --features-carousel-current-slide-color: var(--brand-black, #000); --features-carousel-current-slide-font-weight: var(--weight-bold, 700); } /* Tablet (1366px) */ @media (max-width: 1600px) { :root { /* Image */ --features-carousel-image-padding-right: 20px; /* Tag - 20px */ --features-carousel-tag-font-size: 20px; /* Title - 32px */ --features-carousel-title-font-size: 32px; /* Description - 18px */ --features-carousel-description-font-size: 18px; /* Button - 18px */ --features-carousel-button-font-size: 18px; /* Counter - 18px */ --features-carousel-counter-font-size: 18px; --features-carousel-content-padding: 40px 60px; } } /* Tablet/Mobile (768px) */ @media (max-width: 770px) { :root { /* Tag - 12px */ --features-carousel-tag-font-size: 12px; /* Title - 18px */ --features-carousel-title-font-size: 18px; /* Description - 16px */ --features-carousel-description-font-size: 16px; /* Button - 16px */ --features-carousel-button-font-size: 16px; /* Counter - 18px */ --features-carousel-counter-font-size: 18px; --features-carousel-tag-margin-bottom: 8px; --features-carousel-title-margin-bottom: 16px; --features-carousel-description-margin-bottom: 24px; /* Button size */ --features-carousel-button-min-height: 48px; } } /* Mobile (480px) */ @media (max-width: 480px) { :root { /* Tag - 12px */ --features-carousel-tag-font-size: 12px; /* Title - 18px */ --features-carousel-title-font-size: 18px; /* Description - 16px */ --features-carousel-description-font-size: 16px; /* Button - 16px */ --features-carousel-button-font-size: 16px; /* Counter - 18px */ --features-carousel-counter-font-size: 18px; --features-carousel-button-padding: 12px 32px; --features-carousel-nav-size: 20px; } } /* 1. Container */ .features-carousel-section { padding: var(--features-carousel-section-padding); width: 100%; background-color: var(--features-carousel-background-color); max-width: 1920px; margin: 0 auto; } .features-carousel-container { max-width: var(--features-carousel-max-width); margin: 0 auto; position: relative; } .features-swiper { width: 100%; overflow: hidden; } /* 2. Slide Layout - Desktop: Content LEFT, Image RIGHT */ .feature-slide { display: flex; flex-direction: row; align-items: stretch; width: 100%; } /* 3. Image Section - On RIGHT for desktop */ .feature-slide__image { flex: 0 0 60%; max-width: 60%; overflow: hidden; order: 2; padding-right: var(--features-carousel-image-padding-right); } .feature-slide__image img { width: 100%; height: 100%; max-height: var(--features-carousel-image-max-height); object-fit: cover; display: block; } /* 4. Content Section - On LEFT for desktop */ .feature-slide__content { flex: 0 0 40%; max-width: 40%; padding: var(--features-carousel-content-padding); display: flex; flex-direction: column; justify-content: center; order: 1; background-color: var(--brand-white); } /* 5. Navigation - Visible on all viewports, inside content */ .feature-slide__navigation { display: flex; align-items: center; justify-content: flex-start; gap: var(--features-carousel-nav-gap); margin-bottom: var(--features-carousel-nav-margin-bottom); } /* 6. Tag/Label */ .feature-slide__tag { display: inline-block; font-family: var(--features-carousel-tag-font-family); font-size: var(--features-carousel-tag-font-size); font-weight: var(--features-carousel-tag-font-weight); text-transform: var(--features-carousel-tag-text-transform); letter-spacing: var(--features-carousel-tag-letter-spacing); color: var(--features-carousel-tag-color); margin-bottom: var(--features-carousel-tag-margin-bottom); } /* 7. Title */ .feature-slide__title { font-family: var(--features-carousel-title-font-family); font-size: var(--features-carousel-title-font-size); font-weight: var(--features-carousel-title-font-weight); line-height: var(--features-carousel-title-line-height); color: var(--features-carousel-title-color); margin: 0 0 var(--features-carousel-title-margin-bottom) 0; } /* 8. Description */ .feature-slide__description { font-family: var(--features-carousel-description-font-family); font-size: var(--features-carousel-description-font-size); line-height: var(--features-carousel-description-line-height); color: var(--features-carousel-description-color); margin-bottom: var(--features-carousel-description-margin-bottom); } .feature-slide__description p { margin: 0 0 16px 0; } .feature-slide__description p:last-child { margin-bottom: 0; } /* 9. CTA Button */ .feature-slide__button { display: inline-flex; align-items: center; justify-content: center; padding: var(--features-carousel-button-padding); min-width: var(--features-carousel-button-min-width); min-height: var(--features-carousel-button-min-height); background-color: var(--features-carousel-button-background-color); color: var(--features-carousel-button-color); font-family: var(--features-carousel-button-font-family); font-size: var(--features-carousel-button-font-size); font-weight: var(--features-carousel-button-font-weight); text-decoration: none; border-radius: var(--features-carousel-button-border-radius); transition: background-color 0.3s ease, color 0.3s ease; align-self: flex-start; border: 2px solid var(--features-carousel-border-color); cursor: pointer; } .feature-slide__button:hover { background-color: var(--features-carousel-button-background-color-hover); color: var(--features-carousel-button-color-hover); border: 2px solid var(--features-carousel-border-color-hover); } /* 10. Navigation Buttons */ .features-nav-prev, .features-nav-next { display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--features-carousel-nav-color); transition: opacity 0.3s ease; padding: 0; } .features-nav-prev:hover, .features-nav-next:hover { opacity: var(--features-carousel-nav-hover-opacity); } .features-nav-prev .nav-arrow, .features-nav-next .nav-arrow { width: 12px; height: var(--features-carousel-nav-arrow-size); } .features-nav-prev .nav-arrow { color: var(--features-carousel-nav-color); } .features-nav-next .nav-arrow { color: var(--features-carousel-nav-next-color); } .features-nav-prev:disabled, .features-nav-next:disabled { opacity: var(--features-carousel-nav-disabled-opacity); cursor: not-allowed; } .features-nav-prev::after, .features-nav-next::after { display: none; } /* 11. Slide Counter */ .features-slide-counter { font-family: var(--features-carousel-counter-font-family); font-size: var(--features-carousel-counter-font-size); font-weight: var(--features-carousel-counter-font-weight); color: var(--features-carousel-counter-color); min-width: 30px; text-align: center; } .features-slide-counter .current-slide { color: var(--features-carousel-current-slide-color); font-weight: var(--features-carousel-current-slide-font-weight); font-family: var(--font-family-5); } /* Responsive - Tablet & Mobile (Stacked Layout) */ @media (max-width: 1024px) { .features-carousel-section { padding: 0; } /* Stacked Layout: Image > Navigation > Content > Button */ .feature-slide { flex-direction: column; height: auto; } .feature-slide__image { flex: none; max-width: 100%; width: 100%; order: 1; padding-right: 0; } .feature-slide__image img { height: auto; aspect-ratio: 16/10; } .feature-slide__content { flex: none; max-width: 100%; width: 100%; padding: var(--features-carousel-content-padding-tablet); order: 2; text-align: center; align-items: center; } /* Center Navigation on Tablet/Mobile */ .feature-slide__navigation { justify-content: center; margin-bottom: var(--features-carousel-nav-margin-bottom-mobile); } .feature-slide__button { align-self: center; } } /* Responsive - Mobile */ @media (max-width: 768px) { .feature-slide__content { padding: var(--features-carousel-content-padding-mobile); } .feature-slide__button { width: auto; max-width: unset; } } /* --- Inlined from: ./[blocklist]_components/recommendedModels/recommendedModel.css --- */ /* --- Inlined from: ../../[branding]_components/recommendedModel.css --- */ /* Desktop */ :root { /* 1. Section / Container */ --rm-section-padding: 60px 0; --rm-section-bg: #fff; --rm-container-max-width: 1536px; --rm-container-padding: 20px; --rm-track-max-width: 1536px; --rm-track-padding: 20px; /* 2. Title */ --rm-title-font-family: var(--font-family-2); --rm-title-font-size: 20px; --rm-title-font-weight: 400; --rm-title-letter-spacing: 0.3em; --rm-title-color: #373637; /* 3. Card */ --rm-card-max-width: 452px; --rm-card-bg: #fff; --rm-card-padding: 20px; --rm-card-border: 1px solid #e5e5e5; --rm-card-border-radius: 0; /* 4. Badge */ --rm-badge-height: 28px; /* 5. Image */ --rm-image-min-height: 180px; --rm-image-max-height: 160px; /* 6. Brand Text */ --rm-brand-font-family: var(--font-family-4); --rm-brand-font-size: 16px; --rm-brand-font-weight: 400; --rm-brand-color: var(--brand-black); /* 7. Model Name */ --rm-name-font-family: var(--font-family-1); --rm-name-font-size: 20px; --rm-name-font-weight: 700; --rm-name-color: #000; /* 8. Pricing */ --rm-divider-color: #e5e5e5; --rm-price-font-family: var(--font-family-2); --rm-price-font-size: 24px; --rm-price-font-weight: var(--weight-normal); --rm-price-color: #373637; --rm-monthly-font-family: var(--font-family-1); --rm-monthly-font-size: 28px; --rm-monthly-font-weight: 700; --rm-monthly-color: #000; /* 9. Buttons */ --rm-button-gap: 12px; --rm-button-padding: 8px 32px; --rm-button-radius: 8px; --rm-button-font-family: var(--font-family-1); --rm-button-font-size: 18px; --rm-button-font-weight: 700; /* 10. Primary Button */ --rm-primary-btn-bg: var(--brand); --rm-primary-btn-color: var(--brand-white); --rm-primary-btn-border: var(--brand); --rm-primary-btn-hover-bg: #888888; --rm-primary-btn-hover-border: #888888; /* 11. Secondary Button */ --rm-secondary-btn-bg: #fff; --rm-secondary-btn-color: #000; --rm-secondary-btn-border: #000; --rm-secondary-btn-hover-bg: #f5f5f5; /* 12. Characteristics */ --rm-chars-font-family: var(--font-family-4); --rm-chars-font-size: 18px; --rm-chars-line-height: 100%; --rm-chars-color: #373637; /* 13. Navigation */ --rm-nav-gap: 30px; --rm-nav-bg: transparent; --rm-nav-color: #000000; --rm-nav-arrow-size: 48px; } /* Tablet */ @media (max-width: 1366px) { :root { --rm-section-padding: 40px 0; --rm-card-max-width: 350px; --rm-price-font-size: 18px; --rm-monthly-font-size: 20px; } } /* Mobile Devices */ @media (max-width: 768px) { :root { --rm-section-padding: 30px 0; --rm-card-padding: 16px; --rm-image-min-height: 150px; --rm-image-max-height: 140px; --rm-title-font-size: 12px; --rm-brand-font-size: 12px; --rm-name-font-size: 16px; --rm-price-font-size: 16px; --rm-monthly-font-size: 18px; --rm-button-padding: 8px 32px; --rm-button-font-size: 16px; --rm-chars-font-size: 16px; --rm-card-max-width: 320px; } } @media (max-width: 768px) { :root { --rm-section-padding: 30px 0; --rm-card-padding: 16px; --rm-image-min-height: 150px; --rm-image-max-height: 140px; --rm-title-font-size: 12px; --rm-brand-font-size: 12px; --rm-name-font-size: 16px; --rm-price-font-size: 16px; --rm-monthly-font-size: 18px; --rm-button-padding: 8px 32px; --rm-button-font-size: 16px; --rm-chars-font-size: 16px; --rm-card-max-width: 320px; } } /* Recommended Models Section */ .recommended-models-section { padding: var(--rm-section-padding, 60px 0); width: 100%; background-color: var(--rm-section-bg, #fff); overflow: hidden; } /* Header */ .recommended-models-header { text-align: center; padding-bottom: 80px; } .recommended-models-header .section-title { font-family: var(--rm-title-font-family, var(--font-family-1)); font-size: var(--rm-title-font-size, 14px); font-weight: var(--rm-title-font-weight, 400); letter-spacing: var(--rm-title-letter-spacing, 0.3em); text-transform: lowercase; color: var(--rm-title-color, #666); margin: 0; } /* Container */ .recommended-models-container { position: relative; max-width: var(--rm-container-max-width, 1536px); margin: 0 auto; padding: 0 var(--rm-container-padding, 20px); overflow: hidden; } .recommended-models-track { position: relative; max-width: var(--rm-track-max-width, 1536px); margin: 0 auto; padding: 0 var(--rm-track-padding, 20px); box-sizing: border-box; } /* Swiper */ .recommended-models-swiper { overflow: visible !important; } .recommended-models-swiper .swiper-wrapper { padding: 0 !important; margin: 0 !important; overflow: visible !important; } .recommended-models-swiper .swiper-slide { display: flex; justify-content: center; flex-shrink: 0 !important; height: auto; overflow: visible !important; } /* Model Card */ .model-card { width: 100%; max-width: var(--rm-card-max-width, 380px); background: var(--rm-card-bg, #fff); display: flex; flex-direction: column; position: relative; padding: var(--rm-card-padding, 20px); border: var(--rm-card-border, 1px solid #e5e5e5); border-radius: var(--rm-card-border-radius, 0); } /* Badges - scoped to model-card */ .model-card .card-badges { display: flex; justify-content: space-between; align-items: flex-start; position: absolute; top: 20px; left: 20px; right: 20px; z-index: 2; } .model-card .card-badges .badge { display: flex; align-items: center; justify-content: center; } .model-card .card-badges .badge img { max-height: var(--rm-badge-height, 28px); width: auto; object-fit: contain; } .model-card .card-badges .badge-left { justify-content: flex-start; } .model-card .card-badges .badge-right { justify-content: flex-end; } /* Card Image - scoped to model-card */ .model-card .card-image { display: flex; justify-content: center; align-items: center; padding: 40px 20px 20px; min-height: var(--rm-image-min-height, 180px); } .model-card .card-image img { max-width: 100%; max-height: var(--rm-image-max-height, 160px); object-fit: contain; width: auto; height: auto; } /* Card Info - scoped to model-card */ .model-card .card-info { text-align: center; padding: 10px 0; } .model-card .model-brand { display: block; font-family: var(--rm-brand-font-family, var(--font-family-1)); font-size: var(--rm-brand-font-size, 12px); font-weight: var(--rm-brand-font-weight, 400); text-transform: uppercase; color: var(--rm-brand-color, #666); letter-spacing: 0.05em; margin-bottom: 4px; } .model-card .model-name { font-family: var(--rm-name-font-family, var(--font-family-1)); font-size: var(--rm-name-font-size, 18px); font-weight: var(--rm-name-font-weight, 700); color: var(--rm-name-color, #000); margin: 0; line-height: 1.3; } /* Card Pricing - scoped to model-card */ .model-card .card-pricing { text-align: center; padding: 15px 0; border-bottom: 1px solid var(--rm-divider-color, #e5e5e5); } .model-card .price-from { display: block; font-family: var(--rm-price-font-family, var(--font-family-1)); font-size: var(--rm-price-font-size, 14px); font-weight: var(--rm-price-font-weight, 500); color: var(--rm-price-color, #565656); margin-bottom: 4px; } .model-card .monthly-fee { display: block; font-family: var(--rm-monthly-font-family, var(--font-family-1)); font-size: var(--rm-monthly-font-size, 18px); font-weight: var(--rm-monthly-font-weight, 700); color: var(--rm-monthly-color, #000); } /* Card Buttons - scoped to model-card */ .model-card .card-buttons { display: flex; flex-direction: column; gap: var(--rm-button-gap, 12px); padding: 20px 0; } .model-card .card-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: var(--rm-button-padding, 14px 24px); border-radius: var(--rm-button-radius, 50px); font-family: var(--rm-button-font-family, var(--font-family-1)); font-size: var(--rm-button-font-size, 14px); font-weight: var(--rm-button-font-weight, 600); text-decoration: none; transition: all 0.3s ease; cursor: pointer; width: 100%; height: 60px; } .model-card .card-btn.btn-primary { background-color: var(--rm-primary-btn-bg, #00b8d4); color: var(--rm-primary-btn-color, #fff); border: 2px solid var(--rm-primary-btn-border, #00b8d4); } .model-card .card-btn.btn-primary:hover { background-color: var(--rm-primary-btn-hover-bg, #00a0b8); border-color: var(--rm-primary-btn-hover-border, #00a0b8); } .model-card .card-btn.btn-secondary { background-color: var(--rm-secondary-btn-bg, #fff); color: var(--rm-secondary-btn-color, #000); border: 2px solid var(--rm-secondary-btn-border, #000); } .model-card .card-btn.btn-secondary:hover { background-color: var(--rm-secondary-btn-hover-bg, #f5f5f5); } /* Card Characteristics - scoped to model-card */ .model-card .card-characteristics { padding: 15px 0 0; font-family: var(--rm-chars-font-family, var(--font-family-1)); font-size: var(--rm-chars-font-size, 13px); line-height: var(--rm-chars-line-height, 1.6); color: var(--rm-chars-color, #666); } .model-card .card-characteristics ul { margin: 0; padding-left: 18px; list-style-type: disc; } .model-card .card-characteristics li { margin-bottom: 6px; } /* Navigation Arrows */ .rm-arrow { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 48px; border: none; cursor: pointer; padding: 0; z-index: 10; transition: opacity 0.3s ease; color: var(--rm-nav-color, #000) !important; } .rm-arrow--left { left: 0; background: transparent; } .rm-arrow--right { right: 0; background: transparent; } .rm-arrow svg { width: 40px; height: 40px; } .rm-arrow svg *, .rm-arrow svg path, .rm-arrow svg polygon, .rm-arrow svg rect, .rm-arrow svg circle, .rm-arrow svg use { fill: none !important; stroke: var(--rm-nav-color, #000) !important; stroke-width: 2 !important; } .rm-arrow.swiper-button-disabled { opacity: 0; pointer-events: none; } .rm-arrow.swiper-button-prev::after, .rm-arrow.swiper-button-next::after { display: none !important; } /* Responsive - Desktop 1366 */ @media (max-width: 1600px) { .model-card .price-from { font-size: 18px; } .model-card .monthly-fee { font-size: 20px; } } /* Tablet and up: arrows at bottom center */ @media (min-width: 768px) { .recommended-models-track { padding-bottom: 64px; } .rm-arrow { top: auto !important; bottom: 0; width: 48px; height: 44px; background: none !important; border: none !important; color: var(--brand-black); } .rm-arrow--left { left: calc(50% - 48px) !important; right: auto !important; transform: none !important; } .rm-arrow--right { left: 50% !important; right: auto !important; transform: none !important; } } /* Responsive - Tablet */ @media (max-width: 1024px) { .recommended-models-section { padding: var(--rm-section-padding-tablet, 40px 0); } .model-card { max-width: var(--rm-card-max-width-tablet, 320px); } } /* Responsive - 768px and below */ @media (max-width: 768px) { .recommended-models-section { padding: var(--rm-section-padding-mobile, 30px 0); } .recommended-models-header { padding-bottom: 30px; } .recommended-models-container { padding: 0 16px; } .recommended-models-header .section-title { font-size: 12px; } .model-card { max-width: 100%; padding: var(--rm-card-padding-mobile, 16px); } .model-card .card-badges { top: 16px; left: 16px; right: 16px; } .model-card .card-image { padding: 30px 10px 15px; min-height: var(--rm-image-min-height-mobile, 150px); } .model-card .card-image img { max-height: var(--rm-image-max-height-mobile, 140px); } .model-card .model-brand { font-size: 12px; } .model-card .model-name { font-size: 16px; } .model-card .price-from { font-size: 16px; } .model-card .monthly-fee { font-size: 18px; } .model-card .card-btn { padding: var(--rm-button-padding-mobile, 12px 20px); font-size: 16px; } .model-card .card-characteristics { font-size: 16px; } } @media (max-width: 768px) { .model-card .card-btn { height: 48px; } } /* --- Inlined from: ./[blocklist]_components/commercialVehicles/commercialVehicles.css --- */ /* Import Branding Variables */ /* --- Inlined from: ../../[branding]_components/commercialVehicles.css --- */ /* Commercial Vehicles - Branding Variables */ /* Desktop (1920px+) */ :root { /* Section */ --cv-section-padding: 60px 0; --cv-section-max-width: 1440px; --cv-section-background: var(--brand-white); /* Title */ --cv-title-font-family: var(--font-family-1); --cv-title-font-size: 40px; --cv-title-font-weight: var(--weight-bolder); --cv-title-color: var(--brand-black); --cv-title-text-transform: uppercase; --cv-title-margin-bottom: 20px; /* Tabs */ --cv-tabs-border-color: var(--gray-light-3); --cv-tab-font-family: var(--font-family-5); --cv-tab-font-size: 18px; --cv-tab-font-weight: var(--weight-bold); --cv-tab-color: #373637; --cv-tab-color-active: #00233a; --cv-tab-padding: 16px 24px; --cv-tab-border-width: 2px; --cv-tab-border-color-active: #00233a; --cv-tabs-gap: 0; /* Content Layout */ --cv-content-gap: 20px; --cv-content-padding: 20px 0; /* Gallery */ --cv-gallery-width: 50%; --cv-image-max-height: 400px; /* Color Selector */ --cv-color-label-font-size: 18px; --cv-color-label-color: #373637; --cv-color-name-font-size: 18px; --cv-color-name-color: var(--brand-black); --cv-color-swatch-size: 32px; --cv-color-swatch-border: 2px solid var(--gray-light-3); --cv-color-swatch-border-active: 2px solid #373637; --cv-color-swatch-gap: 8px; --cv-color-label-font-family: var(--font-family-4); /* Features Accordion */ --cv-features-width: 50%; --cv-accordion-header-bg: var(--brand-white); --cv-accordion-header-bg-expanded: #00233a; --cv-accordion-header-color: var(--brand-black); --cv-accordion-header-color-expanded: var(--brand-white); --cv-accordion-header-font-family: var(--font-family-1); --cv-accordion-header-font-size: 20px; --cv-accordion-header-font-weight: var(--weight-semibold); --cv-accordion-header-padding: 16px 20px; --cv-accordion-border-color: var(--gray-light-3); --cv-accordion-content-padding: 0; /* Feature Table */ --cv-feature-table-row-border: 1px solid #e5e5e5; --cv-feature-name-font-family: var(--font-family-5); --cv-feature-name-font-size: 18px; --cv-feature-name-color: var(--brand-black); --cv-feature-name-weight: var(--weight-bold); --cv-feature-value-font-family: var(--font-family-4); --cv-feature-value-font-size: 18px; --cv-feature-value-color: #373637; --cv-feature-cell-padding: 20px; --cv-feature-name-bg: transparent; /* Characteristics */ --cv-characteristics-gap: 24px; --cv-characteristics-margin: 40px 0; --cv-char-icon-size: 48px; --cv-char-value-font-family: var(--font-family-1); --cv-char-value-font-size: 48px; --cv-char-value-font-weight: var(--weight-bolder); --cv-char-value-color: var(--brand-black); --cv-char-unit-font-size: 20px; --cv-char-unit-color: var(--brand-black); --cv-char-label-font-size: 20px; --cv-char-label-color: var(--brand-black); --cv-char-label-font-family: var(--font-family-2); --cv-char-label-font-weight: var(--weight-normal); /* Footer */ --cv-footer-gap: 24px; --cv-footer-padding: 24px 80px; --cv-footer-border-top: 1px solid #e5e5e5; /* Version Info */ --cv-version-label-font-size: 20px; --cv-version-label-color: var(--brand-black); --cv-version-label-text-transform: uppercase; --cv-version-label-font-family: var(--font-family-2); --cv-version-label-font-weight: var(--weight-normal); --cv-version-name-font-family: var(--font-family-1); --cv-version-name-font-size: 28px; --cv-version-name-font-weight: var(--weight-bolder); --cv-version-name-color: var(--brand-black); /* Pricing */ --cv-price-label-font-family: var(--font-family-4); --cv-price-label-font-weight: var(--weight-normal); --cv-price-label-font-size: 14px; --cv-price-label-color: var(--brand-black); --cv-price-value-font-family: var(--font-family-1); --cv-price-value-font-size: 28px; --cv-price-value-font-weight: var(--weight-bolder); --cv-price-value-color: var(--brand-black); --cv-edit-link-color: var(--gray-dark-1); --cv-edit-link-font-size: var(--text-sm); /* Buttons */ --cv-btn-font-family: var(--font-family-1); --cv-btn-font-size: 18px; --cv-btn-font-weight: var(--weight-bolder); --cv-btn-padding: 8px 32px; --cv-btn-border-radius: 8px; --cv-btn-primary-bg: var(--brand); --cv-btn-primary-color: var(--brand-white); --cv-btn-primary-bg-hover: #888888; --cv-btn-secondary-bg: transparent; --cv-btn-secondary-color: #00233a; --cv-btn-secondary-border: 2px solid var(--brand-black); --cv-btn-secondary-bg-hover: var(--gray-light-4); --cv-btn-secondary-color-hover: var(--brand-black); --cv-buttons-gap: 12px; /* Disclaimer */ --cv-disclaimer-font-family: var(--font-family-4); --cv-disclaimer-font-weight: var(--weight-normal); --cv-disclaimer-font-size: 12px; --cv-disclaimer-color: var(--gray-dark-3); --cv-disclaimer-padding: 12px; --cv-disclaimer-bg: #f5f5f5; --cv-disclaimer-link-color: var(--brand-primary); --cv-disclaimer-margin: 24px 80px 0 80px; /* Section Padding */ --cv-section-padding-x: 40px; } /* Tablet (1366px) */ @media (max-width: 1366px) { :root { --cv-section-padding: 48px 0; --cv-title-font-size: 40px; --cv-title-margin-bottom: 32px; --cv-tab-font-size: 18px; --cv-content-gap: 32px; --cv-image-max-height: 350px; --cv-color-label-font-size: 18px; --cv-color-name-font-size: 18px; --cv-accordion-header-font-size: 20px; --cv-feature-name-font-size: 18px; --cv-feature-value-font-size: 18px; --cv-characteristics-gap: 20px; --cv-char-value-font-size: 48px; --cv-char-unit-font-size: 20px; --cv-char-label-font-size: 20px; --cv-version-label-font-size: 20px; --cv-version-name-font-size: 28px; --cv-price-label-font-size: 14px; --cv-price-value-font-size: 28px; --cv-btn-font-size: 18px; --cv-disclaimer-font-size: 12px; --cv-disclaimer-padding: 0; --cv-footer-padding: 0; --cv-disclaimer-margin: 24px 0 0 0; } } /* Tablet (768px) */ @media (max-width: 768px) { :root { --cv-section-padding: 40px 0; --cv-title-font-size: 24px; --cv-title-margin-bottom: 24px; --cv-tab-font-size: 16px; --cv-tab-padding: 12px 16px; --cv-gallery-width: 100%; --cv-features-width: 100%; --cv-content-gap: 24px; --cv-content-padding: 24px 0; --cv-image-max-height: 300px; --cv-color-label-font-size: 18px; --cv-color-name-font-size: 18px; --cv-color-swatch-size: 28px; --cv-accordion-header-font-size: 16px; --cv-accordion-header-padding: 14px 16px; --cv-feature-name-font-size: 16px; --cv-feature-name-weight: var(--weight-bolder); --cv-feature-value-font-size: 14px; --cv-characteristics-gap: 16px; --cv-char-icon-size: 40px; --cv-char-value-font-size: 20px; --cv-char-unit-font-size: 16px; --cv-char-label-font-size: 16px; --cv-footer-gap: 16px; --cv-version-label-font-size: 16px; --cv-version-name-font-size: 20px; --cv-price-label-font-size: 12px; --cv-price-value-font-size: 20px; --cv-btn-font-size: 18px; --cv-btn-padding: 12px 24px; --cv-disclaimer-font-size: 12px; --cv-disclaimer-padding: 0; --cv-footer-padding: 0; --cv-disclaimer-margin: 24px 0 0 0; --cv-tab-font-weight: var(--weight-bolder); } } /* Mobile (480px) */ @media (max-width: 480px) { :root { --cv-section-padding: 32px 0; --cv-title-font-size: 22px; --cv-title-margin-bottom: 20px; --cv-tab-font-size: 14px; --cv-tab-padding: 10px 12px; --cv-image-max-height: 220px; --cv-color-label-font-size: 16px; --cv-color-name-font-size: 16px; --cv-color-swatch-size: 24px; --cv-accordion-header-font-size: 16px; --cv-feature-name-font-size: 16px; --cv-feature-value-font-size: 14px; --cv-char-icon-size: 40px; --cv-char-label-font-size: 16px; --cv-version-label-font-size: 16px; --cv-version-name-font-size: 20px; --cv-price-label-font-size: 12px; --cv-price-value-font-size: 20px; --cv-btn-font-size: 18px; --cv-btn-padding: 10px 20px; --cv-disclaimer-font-size: 12px; --cv-disclaimer-padding: 0; --cv-footer-padding: 0; --cv-disclaimer-margin: 24px 0 0 0; --cv-section-padding-x: 16px; --cv-section-padding-y: 16px; } } .commercial-vehicles-picture-full img { width: 100%; height: auto; display: block; } /* 1. Section Container */ .commercial-vehicles { width: 100%; max-width: var(--cv-section-max-width); margin: 0 auto; padding: var(--cv-section-padding); background-color: var(--cv-section-background); } .commercial-vehicles__title { font-family: var(--cv-title-font-family); font-size: var(--cv-title-font-size); font-weight: var(--cv-title-font-weight); color: var(--cv-title-color); text-transform: var(--cv-title-text-transform); text-align: center; margin: 0 0 var(--cv-title-margin-bottom) 0; white-space: nowrap; } /* 2. Tabs Navigation */ .commercial-vehicles__tabs-nav { display: flex; align-items: stretch; padding-left: var(--cv-section-padding-x, 40px); padding-right: var(--cv-section-padding-x, 40px); } .commercial-vehicles__tabs-arrow { flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-bottom: 1px solid var(--cv-tabs-border-color); cursor: pointer; padding: 0 4px; color: var(--cv-tab-color); transition: color 0.3s ease, opacity 0.3s ease; } .commercial-vehicles__tabs-arrow .nav-arrow { width: var(--cv-tabs-arrow-size, 20px); height: var(--cv-tabs-arrow-size, 20px); } .commercial-vehicles__tabs-arrow:hover { color: var(--cv-tab-color-active); } .commercial-vehicles__tabs-arrow--hidden { visibility: hidden; opacity: 0; pointer-events: none; } .commercial-vehicles__tabs { flex: 1; min-width: 0; border-bottom: 1px solid var(--cv-tabs-border-color); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .commercial-vehicles__tabs::-webkit-scrollbar { display: none; } .commercial-vehicles__tabs-wrapper { display: flex; gap: var(--cv-tabs-gap); min-width: max-content; justify-content: center; } .commercial-vehicles__tab { font-family: var(--cv-tab-font-family); font-size: var(--cv-tab-font-size); font-weight: var(--cv-tab-font-weight); color: var(--cv-tab-color); padding: var(--cv-tab-padding); background: none; border: none; border-bottom: var(--cv-tab-border-width) solid #373637; cursor: pointer; white-space: nowrap; transition: color 0.3s ease, border-color 0.3s ease; width: 100%; } .commercial-vehicles__tab:hover { color: var(--cv-tab-color-active); } .commercial-vehicles__tab--active { color: var(--cv-tab-color-active); border-bottom: 6px solid var(--cv-tab-border-color-active); } /* 3. Panels */ .commercial-vehicles__panels { position: relative; padding-left: var(--cv-section-padding-x, 40px); padding-right: var(--cv-section-padding-x, 40px); } .commercial-vehicles__panel { display: none; padding: var(--cv-content-padding); } .commercial-vehicles__panel--active { display: flex; flex-direction: column; } @media (max-width: 768px) { .commercial-vehicles__panel--active { display: flex; flex-direction: column; } .commercial-vehicles__panel .commercial-vehicles__content { order: 1; } .commercial-vehicles__panel .commercial-vehicles__characteristics { order: 2; } .commercial-vehicles__panel .commercial-vehicles__footer { order: 3; } .commercial-vehicles__panel .commercial-vehicles__disclaimer { order: 5; } .commercial-vehicles__panel .commercial-vehicles__features { order: 6; margin-top: 24px; } } /* 4. Content Layout (Image + Features) */ .commercial-vehicles__content { display: flex; gap: var(--cv-content-gap); align-items: center; } .commercial-vehicles__content--no-features { justify-content: center; } .commercial-vehicles__content--no-features .commercial-vehicles__features { display: none; } @media (max-width: 768px) { .commercial-vehicles__content { flex-direction: column; } .commercial-vehicles__gallery { order: 1; } .commercial-vehicles__characteristics { order: 2; } .commercial-vehicles__footer { order: 3; } .commercial-vehicles__disclaimer { order: 4; } } /* 5. Gallery (Left Column) */ .commercial-vehicles__gallery { width: var(--cv-gallery-width); flex-shrink: 0; } @media (max-width: 768px) { .commercial-vehicles__gallery { width: 100%; } } .commercial-vehicles__images { position: relative; width: 100%; } .commercial-vehicles__image { display: none; width: 100%; } .commercial-vehicles__image--active { display: block; } .commercial-vehicles__image picture { display: block; width: 100%; } .commercial-vehicles__image img { width: 100%; height: auto; display: block; object-fit: contain; } .commercial-vehicles__iframe { width: 100%; height: 100%; min-height: 400px; border: none; } .commercial-vehicles__image-link { width: 100%; height: auto; display: block; object-fit: contain; } /* 6. Color Selector */ .commercial-vehicles__color-selector { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; } .commercial-vehicles__color-label { font-size: var(--cv-color-label-font-size); color: var(--cv-color-label-color); font-family: var(--cv-color-label-font-family); } .commercial-vehicles__color-name { font-size: var(--cv-color-name-font-size); color: var(--cv-color-name-color); font-weight: var(--weight-bold); font-family: var(--font-family-5); } .commercial-vehicles__colors { display: flex; gap: var(--cv-color-swatch-gap); justify-content: center; flex-wrap: wrap; } .commercial-vehicles__color { width: var(--cv-color-swatch-size); height: var(--cv-color-swatch-size); border-radius: 50%; border: var(--cv-color-swatch-border); cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; padding: 0; } .commercial-vehicles__color:hover { transform: scale(1.1); } .commercial-vehicles__color--active { border: var(--cv-color-swatch-border-active); } /* 7. Features Accordion (Right Column) */ .commercial-vehicles__features { width: var(--cv-features-width); flex-grow: 1; } /* Desktop: Show desktop version, hide mobile version */ .commercial-vehicles__features--desktop { display: block; } .commercial-vehicles__features--mobile { display: none; } @media (max-width: 768px) { /* Mobile: Hide desktop version, show mobile version at bottom */ .commercial-vehicles__features--desktop { display: none; } .commercial-vehicles__features--mobile { display: block; width: 100%; order: 10; margin-top: 24px; } } .commercial-vehicles__accordion { border-bottom: 1px solid var(--cv-accordion-border-color); } .commercial-vehicles__accordion:first-child { border-top: 1px solid var(--cv-accordion-border-color); } .commercial-vehicles__accordion-header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--cv-accordion-header-padding); background-color: var(--cv-accordion-header-bg); color: var(--cv-accordion-header-color); font-family: var(--cv-accordion-header-font-family); font-size: var(--cv-accordion-header-font-size); font-weight: var(--weight-bolder, 700); border: none; cursor: pointer; text-align: left; transition: background-color 0.3s ease, color 0.3s ease; border-top: var(--cv-feature-table-row-border); border-bottom: var(--cv-feature-table-row-border); } .commercial-vehicles__accordion--expanded .commercial-vehicles__accordion-header { background-color: var(--cv-accordion-header-bg-expanded); color: var(--cv-accordion-header-color-expanded); } .commercial-vehicles__accordion-icon { transition: transform 0.3s ease; flex-shrink: 0; } .commercial-vehicles__accordion--expanded .commercial-vehicles__accordion-icon { transform: rotate(180deg); } .commercial-vehicles__accordion-content { display: none; padding: var(--cv-accordion-content-padding); border-top: 1px solid var(--cv-accordion-border-color); } .commercial-vehicles__accordion--expanded .commercial-vehicles__accordion-content { display: block; } /* 8. Feature Table */ .commercial-vehicles__feature-table { width: 100%; border-collapse: collapse; } .commercial-vehicles__feature-table tr { border: var(--cv-feature-table-row-border); } .commercial-vehicles__feature-table tr:last-child { border-bottom: none; } .commercial-vehicles__feature-name, .commercial-vehicles__feature-value { padding: var(--cv-feature-cell-padding); vertical-align: middle; } .commercial-vehicles__feature-name { font-family: var(--cv-feature-name-font-family); font-size: var(--cv-feature-name-font-size); color: var(--cv-feature-name-color); width: 50%; font-weight: var(--cv-feature-name-weight); text-align: center; padding: 12px 16px; background: #f1f1f1; } .commercial-vehicles__feature-value { font-family: var(--cv-feature-value-font-family); font-size: var(--cv-feature-value-font-size); font-weight: var(--weight-normal); color: var(--cv-feature-value-color); text-align: left; padding-left: 24px; } @media (max-width: 768px) { .commercial-vehicles__features--mobile .commercial-vehicles__feature-table tr { display: flex; flex-direction: column; } .commercial-vehicles__features--mobile .commercial-vehicles__feature-name, .commercial-vehicles__features--mobile .commercial-vehicles__feature-value { display: block; width: 100%; text-align: center; } .commercial-vehicles__features--mobile .commercial-vehicles__feature-value { padding-left: 0; padding: var(--cv-feature-cell-padding); } } /* 9. Characteristics Grid */ .commercial-vehicles__characteristics { display: flex; justify-content: space-between; gap: var(--cv-characteristics-gap); margin: var(--cv-characteristics-margin); padding: 0; } @media (max-width: 768px) { .commercial-vehicles__characteristics { flex-wrap: wrap; justify-content: space-around; } } @media (max-width: 480px) { .commercial-vehicles__characteristics { display: grid; grid-template-columns: repeat(2, 1fr); justify-content: initial; } } .commercial-vehicles__characteristic { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; } .commercial-vehicles__characteristic-top { display: flex; align-items: center; justify-content: flex-start; gap: 8px; } .commercial-vehicles__characteristic-icon { width: var(--cv-char-icon-size); height: var(--cv-char-icon-size); object-fit: contain; } .commercial-vehicles__characteristic-value { display: flex; align-items: baseline; gap: 2px; } @media (max-width: 768px) { .commercial-vehicles__characteristic-value { flex-direction: column; align-items: flex-start; gap: 0; } } .commercial-vehicles__characteristic-number { font-family: var(--cv-char-value-font-family); font-size: var(--cv-char-value-font-size); font-weight: var(--cv-char-value-font-weight); color: var(--cv-char-value-color); } .commercial-vehicles__characteristic-unit { font-family: var(--font-family-1); font-size: var(--cv-char-unit-font-size); font-weight: var(--weight-bolder); color: var(--cv-char-unit-color); } .commercial-vehicles__characteristic-label { font-size: var(--cv-char-label-font-size); color: var(--cv-char-label-color); font-weight: var(--cv-char-label-font-weight); font-family: var(--cv-char-label-font-family); } /* 10. Footer Section */ .commercial-vehicles__footer { display: grid; grid-template-columns: 1fr 1fr 0.7fr; gap: var(--cv-footer-gap); align-items: center; padding: var(--cv-footer-padding); } @media (max-width: 768px) { .commercial-vehicles__footer { grid-template-columns: 1fr; text-align: center; } } /* 11. Version Info */ .commercial-vehicles__version-info { display: flex; flex-direction: column; gap: 4px; padding: 2.3rem 0; border-right: 1px solid var(--gray-dark-8); } @media (max-width: 768px) { .commercial-vehicles__version-info { align-items: center; border-right: none; border-bottom: 1px solid var(--gray-dark-8); padding: 0 0 16px 0; } } .commercial-vehicles__version-label { font-family: var(--cv-version-label-font-family); font-weight: var(--cv-version-label-font-weight); font-size: var(--cv-version-label-font-size); color: var(--cv-version-label-color); text-transform: var(--cv-version-label-text-transform); letter-spacing: 0.5px; } .commercial-vehicles__version-name { font-family: var(--cv-version-name-font-family); font-size: var(--cv-version-name-font-size); font-weight: var(--cv-version-name-font-weight); color: var(--cv-version-name-color); margin: 0; text-transform: uppercase; } /* 12. Pricing */ .commercial-vehicles__pricing { display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--gray-dark-8); } @media (max-width: 768px) { .commercial-vehicles__pricing { align-items: center; border-right: none; border-bottom: 1px solid var(--gray-dark-8); padding-bottom: 16px; } } .commercial-vehicles__price-row { display: flex; flex-direction: column; gap: 2px; } .commercial-vehicles__price-label { font-family: var(--cv-price-label-font-family); font-weight: var(--cv-price-label-font-weight); font-size: var(--cv-price-label-font-size); color: var(--cv-price-label-color); } .commercial-vehicles__price-value { font-family: var(--cv-price-value-font-family); font-size: var(--cv-price-value-font-size); font-weight: var(--cv-price-value-font-weight); color: var(--cv-price-value-color); } .commercial-vehicles__price-separator { margin: 0 4px; } .commercial-vehicles__price-value-2 { font-family: var(--font-family-2); font-weight: var(--weight-normal); } .commercial-vehicles__edit-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cv-edit-link-font-size); color: var(--cv-edit-link-color); text-decoration: none; margin-top: 8px; } .commercial-vehicles__edit-link:hover { text-decoration: underline; } /* 13. CTA Buttons */ .commercial-vehicles__buttons { display: flex; flex-direction: column; gap: var(--cv-buttons-gap); } @media (max-width: 768px) { .commercial-vehicles__buttons { width: 100%; max-width: 100%; align-items: center; margin: 0 auto; } } @media (max-width: 480px) { .commercial-vehicles__btn { width: 100%; height: 48px; } } @media (min-width: 481px) and (max-width: 768px) { .commercial-vehicles__btn { min-width: 628px; height: 48px; } } .commercial-vehicles__btn { display: inline-flex; justify-content: center; align-items: center; font-family: var(--cv-btn-font-family); font-size: var(--cv-btn-font-size); font-weight: var(--cv-btn-font-weight); padding: var(--cv-btn-padding); border-radius: var(--cv-btn-border-radius); text-decoration: none; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } .commercial-vehicles__btn--primary { background-color: var(--cv-btn-primary-bg); color: var(--cv-btn-primary-color); border: none; } .commercial-vehicles__btn--primary:hover { background-color: var(--cv-btn-primary-bg-hover); color: var(--brand-white); } .commercial-vehicles__btn--secondary { background-color: var(--cv-btn-secondary-bg); color: var(--cv-btn-secondary-color); border: var(--cv-btn-secondary-border); } .commercial-vehicles__btn--secondary:hover { background-color: var(--cv-btn-secondary-bg-hover); color: var(--cv-btn-secondary-color-hover); } /* 14. Disclaimer */ .commercial-vehicles__disclaimer { display: none; font-family: var(--cv-disclaimer-font-family); font-weight: var(--cv-disclaimer-font-weight); font-size: var(--cv-disclaimer-font-size); color: var(--cv-disclaimer-color); padding: var(--cv-disclaimer-padding); line-height: 1.5; background-color: var(--cv-disclaimer-bg, var(--gray-light-4, #f5f5f5)); margin: var(--cv-disclaimer-margin); } .commercial-vehicles__disclaimer--active { display: block; } .commercial-vehicles__disclaimer a { color: var(--cv-disclaimer-link-color); text-decoration: underline; } .commercial-vehicles__disclaimer a:hover { text-decoration: none; } /* --- Inlined from: ./[blocklist]_components/multipleGallerySwiper/multipleGallerySwiper.css --- */ /* --- Inlined from: ../../[branding]_components/multipleGallerySwiper.css --- */ :root { /* Section */ --tcc-section-padding: 60px 0; --tcc-container-max-width: 1440px; --tcc-container-padding: 0 60px; --tcc-background-color: var(--brand-white); --tcc-background-color-dark: var(--brand-black); /* Header */ --tcc-header-margin-bottom: 32px; --tcc-label-font-family: var(--font-family-2); --tcc-label-font-size: var(--text-lg); --tcc-label-font-weight: var(--weight-normal); --tcc-label-color: #373637; --tcc-label-color-dark: var(--gray-light-4); --tcc-label-letter-spacing: 0.2rem; --tcc-label-text-transform: uppercase; --tcc-label-margin-bottom: 20px; --tcc-title-font-family: var(--font-family-1); --tcc-title-font-size: 2rem; --tcc-title-font-weight: var(--weight-bolder); --tcc-title-line-height: 1.2; --tcc-title-color: var(--brand-black); --tcc-title-color-dark: var(--brand-white); --tcc-title-margin-bottom: 24px; /* Tabs */ --tcc-tabs-margin-bottom: 40px; --tcc-tabs-gap: 8px; --tcc-tabs-border-bottom: 2px solid #373637; --tcc-tabs-border-bottom-dark: 1px solid var(--gray-light-4); --tcc-tab-font-family: var(--font-family-5); --tcc-tab-font-size: 1.125rem; --tcc-tab-font-weight: var(--weight-bold); --tcc-tab-padding: 12px 24px; --tcc-tab-color: #373637; --tcc-tab-color-dark: var(--gray-light-4); --tcc-tab-color-hover: var(--brand-black, #000000); --tcc-tab-color-hover-dark: var(--brand-white, #FFFFFF); --tcc-tab-color-active: var(--brand-black); --tcc-tab-color-active-dark: var(--brand-white); --tcc-tab-border-bottom-active: 3px solid var(--brand, #18BDE6); --tcc-tab-background-hover: rgba(0, 0, 0, 0.03); --tcc-tab-background-hover-dark: rgba(255, 255, 255, 0.05); --tcc-tab-min-width: 120px; --tcc-tab-border: 3px solid var(--brand-black); --tcc-tab-border-dark: 3px solid var(--brand-white); /* Layout */ --tcc-slide-gap: 40px; --tcc-slide-image-width: 55%; --tcc-slide-content-width: 45%; /* Image */ --tcc-image-border-radius: 8px; --tcc-image-aspect-ratio: 4/3; --tcc-image-max-height: 540px; /* Content */ --tcc-content-padding: 40px 60px; --tcc-content-padding-tablet: 32px 24px; --tcc-content-padding-mobile: 24px 16px; /* Nav */ --tcc-nav-gap: 16px; --tcc-nav-margin-bottom: 24px; --tcc-nav-btn-size: 44px; --tcc-nav-btn-color: var(--brand-black, #000000); --tcc-nav-btn-color-dark: var(--brand-white, #FFFFFF); --tcc-nav-btn-color-next: var(--brand, #18BDE6); --tcc-nav-btn-background: transparent; --tcc-nav-btn-background-hover: rgba(0, 0, 0, 0.05); --tcc-nav-btn-background-hover-dark: rgba(255, 255, 255, 0.1); --tcc-nav-btn-border-radius: 50%; --tcc-nav-icon-size: 24px; --tcc-nav-disabled-opacity: 0.3; --tcc-arrow-disabled-color: #373637; --tcc-arrow-disabled-opacity: 1; --tcc-arrow-disabled-cursor: not-allowed; --tcc-arrow-color: var(--brand-black); --tcc-arrow-transition: color 0.2s ease, opacity 0.2s ease; /* Counter */ --tcc-counter-font-family: var(--font-family-4); --tcc-counter-font-size: 18px; --tcc-counter-font-weight: var(--weight-normal); --tcc-counter-color: var(--gray-dark-3); --tcc-counter-color-dark: #E1E1E1; --tcc-counter-current-color: var(--brand-black, #000000); --tcc-counter-current-color-dark: var(--brand-white); --tcc-counter-current-font-weight: var(--weight-bold); --tcc-counter-display: block; /* Slide Title */ --tcc-slide-title-font-family: var(--font-family-1); --tcc-slide-title-font-size: var(--text-2xl); --tcc-slide-title-font-weight: var(--weight-bolder); --tcc-slide-title-line-height: 1.3; --tcc-slide-title-color: var(--brand-black, #000000); --tcc-slide-title-color-dark: var(--brand-white); --tcc-slide-title-margin: 16px 0 26px 0; /* Description */ --tcc-description-font-family: var(--font-family-4); --tcc-description-font-size: 1.125rem; --tcc-description-line-height: 1.6; --tcc-description-color: #373637; --tcc-description-color-dark: var(--gray-light-4); --tcc-description-margin-bottom: 32px; /* Primary Button */ --tcc-btn-primary-font-family: var(--font-family-1); --tcc-btn-primary-font-size: 1.125rem; --tcc-btn-primary-font-weight: var(--weight-bolder); --tcc-btn-primary-padding: 14px 32px; --tcc-btn-primary-background: var(--brand, #18BDE6); --tcc-btn-primary-background-hover: #888888; --tcc-btn-primary-color: var(--brand-white); --tcc-btn-primary-color-hover: var(--brand-white); --tcc-btn-primary-border: none; --tcc-btn-primary-border-radius: 8px; --tcc-btn-primary-min-height: 48px; --tcc-btn-primary-width: 400px; --tcc-btn-primary-height: 60px; /* Secondary Button */ --tcc-btn-secondary-font-family: var(--font-family-1); --tcc-btn-secondary-font-size: 1.125rem; --tcc-btn-secondary-font-weight: var(--weight-bolder); --tcc-btn-secondary-padding: 14px 32px; --tcc-btn-secondary-background: transparent; --tcc-btn-secondary-background-hover: var(--gray-dark-8, #E5E5E5); --tcc-btn-secondary-background-hover-dark: rgba(255, 255, 255, 0.1); --tcc-btn-secondary-color: var(--brand-black); --tcc-btn-secondary-color-dark: var(--brand-white); --tcc-btn-secondary-color-hover: var(--brand-black); --tcc-btn-secondary-border: 2px solid var(--brand-black); --tcc-btn-secondary-border-dark: 2px solid var(--brand-white); --tcc-btn-secondary-border-radius: 8px; --tcc-btn-secondary-min-height: 48px; --tcc-btn-secondary-width: 400px; --tcc-btn-secondary-height: 60px; /* CTA */ --tcc-ctas-gap: 16px; --tcc-ctas-margin-top: auto; } /* Laptop (1366px) */ @media (max-width: 1600px) { :root { /* Section */ --tcc-section-padding: 50px 0; --tcc-container-padding: 0 40px; /* Header */ --tcc-title-font-size: 28px; /* Slide Title */ --tcc-slide-title-font-size: 28px; /* Content */ --tcc-content-padding: 32px 48px; /* Image */ --tcc-image-max-height: 480px; /* Primary Button */ --tcc-btn-primary-width: 100%; /* Secondary Button */ --tcc-btn-secondary-width: 100%; } } /* Tablet (768px) */ @media (max-width: 1024px) { :root { /* Section */ --tcc-section-padding: 40px 0; --tcc-container-padding: 0 24px; /* Header */ --tcc-header-margin-bottom: 24px; --tcc-title-font-size: 1.375rem; --tcc-title-margin-bottom: 16px; /* Tabs */ --tcc-tabs-margin-bottom: 24px; --tcc-tab-font-size: 1rem; --tcc-tab-padding: 10px 16px; --tcc-tab-min-width: 100px; --tcc-tab-font-weight: var(--weight-bolder); /* Layout */ --tcc-slide-gap: 24px; --tcc-slide-image-width: 100%; --tcc-slide-content-width: 100%; /* Slide Title */ --tcc-slide-title-font-size: 1.75rem; /* Description */ --tcc-description-font-size: 1.125rem; --tcc-description-margin-bottom: 24px; /* Nav */ --tcc-nav-margin-bottom: 16px; /* CTA */ --tcc-ctas-gap: 12px; /* Counter */ --tcc-counter-display: none; } } /* Mobile (360px) */ @media (max-width: 480px) { :root { /* Section */ --tcc-section-padding: 32px 0; --tcc-container-padding: 0; /* Header */ --tcc-header-margin-bottom: 20px; --tcc-label-font-size: 12px; --tcc-title-font-size: 28px; --tcc-title-padding: 0 16px; /* Tabs */ --tcc-tabs-margin-bottom: 20px; --tcc-tab-font-size: 0.875rem; --tcc-tab-padding: 8px 14px; --tcc-tab-min-width: auto; --tcc-tab-font-weight: var(--weight-bolder); /* Slide Title */ --tcc-slide-title-font-size: 1.75rem; --tcc-slide-title-margin-bottom: 12px; /* Description */ --tcc-description-font-size: 1.125rem; --tcc-description-margin-bottom: 20px; /* Counter */ --tcc-counter-font-size: 16px; /* Nav */ --tcc-nav-btn-size: 44px; --tcc-nav-icon-size: 20px; /* Primary Button */ --tcc-btn-primary-font-size: 1.125rem; --tcc-btn-primary-padding: 12px 24px; --tcc-btn-primary-min-height: 44px; --tcc-btn-primary-width: 100%; /* Secondary Button */ --tcc-btn-secondary-font-size: 1.125rem; --tcc-btn-secondary-padding: 12px 24px; --tcc-btn-secondary-min-height: 44px; } } .tcc-section { padding: var(--tcc-section-padding); width: 100%; background-color: var(--tcc-background-color); max-width: 1920px; margin: 0 auto; } .tcc-section.tcc-theme--dark { background-color: var(--tcc-background-color-dark); } .tcc-container { padding: var(--tcc-container-padding); } .tcc-header { text-align: center; margin-bottom: var(--tcc-header-margin-bottom); padding: var(--tcc-title-padding); } .tcc-header__label { display: block; font-family: var(--tcc-label-font-family); font-size: var(--tcc-label-font-size); font-weight: var(--tcc-label-font-weight); color: var(--tcc-label-color); letter-spacing: var(--tcc-label-letter-spacing); text-transform: var(--tcc-label-text-transform); margin-bottom: var(--tcc-label-margin-bottom); } .tcc-theme--dark .tcc-header__label { color: var(--tcc-label-color-dark); } .tcc-header__title { font-family: var(--tcc-title-font-family); font-size: var(--tcc-title-font-size); font-weight: var(--tcc-title-font-weight); line-height: var(--tcc-title-line-height); color: var(--tcc-title-color); margin: 0 0 var(--tcc-title-margin-bottom) 0; text-transform: uppercase; } .tcc-theme--dark .tcc-header__title { color: var(--tcc-title-color-dark); } .tcc-tabs-wrapper { margin-bottom: var(--tcc-tabs-margin-bottom); border-bottom: var(--tcc-tabs-border-bottom); position: relative; max-width: 100%; } .tcc-theme--dark .tcc-tabs-wrapper { border-bottom: var(--tcc-tabs-border-bottom-dark); } .tcc-tabs { display: flex; justify-content: space-evenly; gap: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .tcc-tabs::-webkit-scrollbar { display: none; } .tcc-tab { font-family: var(--tcc-tab-font-family); font-size: var(--tcc-tab-font-size); font-weight: var(--tcc-tab-font-weight); color: var(--tcc-tab-color); background: transparent; border: none; padding: var(--tcc-tab-padding); cursor: pointer; position: relative; transition: color 0.2s ease; white-space: nowrap; text-align: center; flex: 0 0 20%; min-width: 120px; max-width: 20%; } .tcc-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; } .tcc-tab--active { color: var(--tcc-tab-color-active); font-weight: var(--tcc-tab-font-weight); } .tcc-tab--active::after { border: var(--tcc-tab-border); } .tcc-theme--dark .tcc-tab { color: var(--tcc-tab-color-dark); } .tcc-tab:hover { color: var(--tcc-tab-color-hover); } .tcc-theme--dark .tcc-tab:hover { color: var(--tcc-tab-color-hover-dark); } .tcc-tab:focus { outline: 2px solid var(--brand, #18bde6); outline-offset: 2px; } .tcc-theme--dark .tcc-tab--active { color: var(--tcc-tab-color-active-dark); } .tcc-theme--dark .tcc-tab--active::after { background: var(--brand-white, #ffffff); border: var(--tcc-tab-border-dark); } .tcc-panels { position: relative; } .tcc-panel { display: none; } .tcc-panel--active { display: block; } .tcc-panel:focus { outline: none; } .tcc-carousel-wrapper { display: flex; align-items: center; gap: 32px; position: relative; } .tcc-carousel { flex: 1; overflow: hidden; min-width: 0; width: 100%; } .tcc-arrow { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; min-width: 48px; background: transparent; border: none; cursor: pointer; color: var(--tcc-arrow-color); transition: var(--tcc-arrow-transition); padding: 0; flex-shrink: 0; } .tcc-arrow:hover:not(:disabled) { opacity: 0.7; } .tcc-arrow:focus { outline: 2px solid var(--brand, #18bde6); outline-offset: 2px; } .tcc-arrow:disabled, .tcc-arrow.tcc-arrow--disabled { color: var(--tcc-arrow-disabled-color); cursor: var(--tcc-arrow-disabled-cursor); opacity: var(--tcc-arrow-disabled-opacity); } .tcc-arrow__icon { width: 20px; height: 34px; } .tcc-slide { display: flex; flex-direction: row; align-items: stretch; gap: 0; width: 100%; min-height: 420px; } .tcc-slide--image-left .tcc-slide__image-wrapper { order: 1; } .tcc-slide--image-left .tcc-slide__content { order: 2; } .tcc-slide--image-right .tcc-slide__image-wrapper { order: 2; } .tcc-slide--image-right .tcc-slide__content { order: 1; } .tcc-slide__image-wrapper { /* flex: 0 0 65%; */ /* max-width: 65%; */ overflow: hidden; background: #fff; /* aspect-ratio: 1104 / 519; */ display: flex; width: 100%; height: auto; } .tcc-slide__image { display: block; width: 100%; height: 100%; } .tcc-slide__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .tcc-slide__content { flex: 0 0 35%; max-width: 35%; padding: 48px 56px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: auto; } .tcc-fraction { font-family: var(--tcc-counter-font-family); font-size: var(--tcc-counter-font-size); font-weight: var(--tcc-counter-font-weight); color: var(--tcc-counter-color); margin-bottom: 16px; } .tcc-fraction { display: var(--tcc-counter-display); } .tcc-theme--dark .tcc-fraction, .tcc-slide--dark .tcc-fraction { color: var(--tcc-counter-current-color); } .tcc-theme--dark .tcc-fraction__divider, .tcc-theme--dark .tcc-fraction__total { color: var(--tcc-counter-color-dark); } .tcc-fraction__current { color: var(--tcc-counter-current-color); font-weight: var(--tcc-counter-current-font-weight); font-family: var(--font-family-5); } .tcc-theme--dark .tcc-fraction__current, .tcc-slide--dark .tcc-fraction__current { color: var(--tcc-counter-current-color-dark); } .tcc-slide__title { font-family: var(--tcc-slide-title-font-family); font-size: var(--tcc-slide-title-font-size); font-weight: var(--tcc-slide-title-font-weight); line-height: var(--tcc-slide-title-line-height); color: var(--tcc-slide-title-color); margin: var(--tcc-slide-title-margin); } .tcc-theme--dark .tcc-slide__title, .tcc-slide--dark .tcc-slide__title { color: var(--tcc-slide-title-color-dark); } .tcc-slide--light .tcc-slide__title { color: var(--tcc-slide-title-color); } .tcc-slide__description { font-family: var(--tcc-description-font-family); font-size: var(--tcc-description-font-size); line-height: var(--tcc-description-line-height); color: var(--tcc-description-color); margin-bottom: var(--tcc-description-margin-bottom); } .tcc-theme--dark .tcc-slide__description, .tcc-slide--dark .tcc-slide__description { color: var(--tcc-description-color-dark); } .tcc-slide--light .tcc-slide__description { color: var(--tcc-description-color); } .tcc-slide__description p { margin: 0 0 12px 0; } .tcc-slide__description p:last-child { margin-bottom: 0; } .tcc-slide__ctas { display: flex; flex-direction: column; gap: var(--tcc-ctas-gap); width: 100%; max-width: 280px; margin-top: auto; } .tcc-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; width: 100%; } .tcc-btn:focus { outline: 2px solid var(--brand, #18bde6); outline-offset: 2px; } .tcc-btn--primary { font-family: var(--tcc-btn-primary-font-family); font-size: var(--tcc-btn-primary-font-size); font-weight: var(--tcc-btn-primary-font-weight); padding: var(--tcc-btn-primary-padding); background-color: var(--tcc-btn-primary-background); color: var(--tcc-btn-primary-color); border: var(--tcc-btn-primary-border); border-radius: var(--tcc-btn-primary-border-radius); min-height: var(--tcc-btn-primary-min-height); width: var(--tcc-btn-primary-width); height: var(--tcc-btn-primary-height); } .tcc-btn--primary:hover { background-color: var(--tcc-btn-primary-background-hover); color: var(--tcc-btn-primary-color-hover); } .tcc-btn--secondary { font-family: var(--tcc-btn-secondary-font-family); font-size: var(--tcc-btn-secondary-font-size); font-weight: var(--tcc-btn-secondary-font-weight); padding: var(--tcc-btn-secondary-padding); background-color: var(--tcc-btn-secondary-background); color: var(--tcc-btn-secondary-color); border: var(--tcc-btn-secondary-border); border-radius: var(--tcc-btn-secondary-border-radius); min-height: var(--tcc-btn-secondary-min-height); width: var(--tcc-btn-secondary-width); height: var(--tcc-btn-secondary-height); } .tcc-btn--secondary:hover { background-color: var(--tcc-btn-secondary-background-hover); color: var(--tcc-btn-secondary-color-hover); } .tcc-theme--dark .tcc-btn--secondary { color: var(--tcc-btn-secondary-color-dark); border: var(--tcc-btn-secondary-border-dark); } .tcc-theme--dark .tcc-btn--secondary:hover { background-color: var(--tcc-btn-secondary-background-hover-dark); } @media (max-width: 1400px) { .tcc-slide__image-wrapper { flex: 0 0 62%; max-width: 62%; min-height: 400px; } .tcc-slide__content { flex: 0 0 38%; max-width: 38%; padding: 40px 44px; } .tcc-arrow { width: 40px; height: 40px; min-width: 40px; } .tcc-arrow__icon { width: 14px; height: 24px; } .tcc-carousel-wrapper { gap: 0; } } @media (max-width: 1024px) { .tcc-arrow { display: none; } .tcc-carousel-wrapper { gap: 0; } .tcc-slide { flex-direction: column; min-height: auto; } .tcc-slide--image-left .tcc-slide__image-wrapper, .tcc-slide--image-right .tcc-slide__image-wrapper { order: 1; } .tcc-slide--image-left .tcc-slide__content, .tcc-slide--image-right .tcc-slide__content { order: 2; } .tcc-slide__image-wrapper { flex: none; max-width: 100%; width: 100%; min-height: auto; } .tcc-slide__image-wrapper { aspect-ratio: 330/254; } .tcc-slide__content { flex: none; max-width: 100%; width: 100%; padding: var(--tcc-content-padding-tablet); text-align: center; align-items: center; } .tcc-slide__ctas { align-items: center; max-width: 300px; } .tcc-tabs { justify-content: space-between; } .tcc-tab { flex: 0 0 33.333%; max-width: 33.333%; min-width: 100px; } } @media (max-width: 768px) { .tcc-slide__content { padding: var(--tcc-content-padding-mobile); } .tcc-slide__ctas { max-width: 280px; } .tcc-tab { flex: 0 0 auto; max-width: none; min-width: 90px; padding: 10px 16px; } } @media (max-width: 480px) { .tcc-slide__ctas { width: 100%; max-width: 100%; padding: 0 16px; } .tcc-btn--primary, .tcc-btn--secondary { width: var(--tcc-btn-primary-width); text-align: center; } .tcc-panels { padding: 0 16px; } } @media (hover: none) and (pointer: coarse) { .tcc-tab:hover { color: var(--tcc-tab-color); } .tcc-tab--active:hover { color: var(--tcc-tab-color-active); } .tcc-arrow:hover { opacity: 1; } .tcc-btn--primary:hover { background-color: var(--tcc-btn-primary-background); } .tcc-btn--secondary:hover { background-color: var(--tcc-btn-secondary-background); } } .tcc-tab:focus-visible { outline: 2px solid var(--brand, #18bde6); outline-offset: 2px; } .tcc-arrow:focus-visible { outline: 2px solid var(--brand, #18bde6); outline-offset: 2px; } .tcc-btn:focus-visible { outline: 2px solid var(--brand, #18bde6); outline-offset: 2px; } .tcc-tab:focus:not(:focus-visible), .tcc-arrow:focus:not(:focus-visible), .tcc-btn:focus:not(:focus-visible) { outline: none; } @media (prefers-reduced-motion: reduce) { .tcc-tab, .tcc-arrow, .tcc-btn, .swiper-wrapper { transition: none; } } @media (prefers-contrast: high) { .tcc-tab::after { height: 4px; } .tcc-btn--primary, .tcc-btn--secondary { border-width: 3px; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Inlined from: ./[blocklist]_components/passengerVehicles/passengerVehicles.css --- */ /* Import Branding Variables */ /* --- Inlined from: ../../[branding]_components/passengerVehicles.css --- */ /* Passenger Vehicles - Branding Variables */ /* Desktop (1920px+) */ :root { /* Section */ --pv-section-padding: 60px 0; --pv-section-max-width: 1440px; --pv-section-background: var(--brand-white); --pv-section-padding-x: 40px; /* Title */ --pv-title-font-family: var(--font-family-1); --pv-title-font-size: 40px; --pv-title-font-weight: var(--weight-bolder); --pv-title-color: var(--brand-black); --pv-title-text-transform: uppercase; --pv-title-margin-bottom: 12px; /* Subtitle */ --pv-subtitle-font-family: var(--font-family-2); --pv-subtitle-font-size: 20px; --pv-subtitle-color: var(--brand-black); --pv-subtitle-margin-bottom: 24px; --pv-subtitle-font-weight: 400; /* Primary Tabs (Version Tabs) */ --pv-tabs-border-color: var(--gray-light-3); --pv-tab-font-family: var(--font-family-5); --pv-tab-font-size: 18px; --pv-tab-font-weight: var(--weight-bold); --pv-tab-color: #373637; --pv-tab-color-active: var(--hover-dark); --pv-tab-padding: 16px 24px; --pv-tab-border-width: 2px; --pv-tab-border-color-active: var(--hover-dark); --pv-tab-progress-color: #00b8d4; --pv-tabs-gap: 0; /* Secondary Tabs (Exterior/Interior Toggle) */ --pv-view-toggle-margin: 24px 0; --pv-view-btn-font-family: var(--font-family-5); --pv-view-btn-font-size: 18px; --pv-view-btn-font-weight: var(--weight-bold); --pv-view-btn-color: #373637; --pv-view-btn-color-active: var(--hover-dark); --pv-view-btn-padding: 12px 32px; --pv-view-btn-border-color: var(--gray-light-3); --pv-view-btn-border-color-active: var(--hover-dark); /* Content Layout */ --pv-content-gap: 20px; --pv-content-padding: 20px 0; /* Gallery */ --pv-gallery-width: 100%; --pv-image-max-height: 400px; /* Color Selector */ --pv-color-label-font-size: 18px; --pv-color-label-color: var(--gray-dark-1); --pv-color-name-font-size: 18px; --pv-color-name-color: var(--brand-black); --pv-color-swatch-size: 32px; --pv-color-swatch-border: 2px solid var(--gray-light-3); --pv-color-swatch-gap: 12px; /* Characteristics */ --pv-characteristics-gap: 24px; --pv-characteristics-margin: 40px 0; --pv-char-icon-size: 32px; --pv-char-value-font-family: var(--font-family-1); --pv-char-value-font-size: 32px; --pv-char-value-font-weight: var(--weight-bolder); --pv-char-value-color: var(--brand-black); --pv-char-unit-font-size: 20px; --pv-char-unit-color: var(--brand-black); --pv-char-label-font-size: 20px; --pv-char-label-color: var(--brand-black); --pv-char-label-font-weight: var(--weight-normal); --pv-char-top-direction: row; --pv-char-top-align: center; --pv-char-top-gap: 8px; --pv-char-top-justify: flex-start; --pv-char-value-direction: row; --pv-char-value-align: baseline; --pv-char-value-gap: 2px; --pv-char-item-align: flex-start; --pv-char-item-text-align: left; --pv-char-number-line-height: 1; --pv-char-unit-line-height: 1; /* Footer */ --pv-footer-gap: 24px; --pv-footer-padding: 24px 0; --pv-footer-border-top: 1px solid var(--gray-light-3); /* Features List */ --pv-feature-name-font-family: var(--font-family-3); --pv-feature-name-font-size: 16px; --pv-feature-name-font-weight: var(--weight-bolder); --pv-feature-name-color: var(--brand-black); --pv-feature-value-font-family: var(--font-family-4); --pv-feature-value-font-size: 16px; --pv-feature-value-font-weight: var(--weight-normal); --pv-feature-value-color: var(--brand-black); --pv-feature-gap: 8px; /* Version Info */ --pv-version-label-font-size: 20px; --pv-version-label-color: var(--brand-black); --pv-version-label-text-transform: uppercase; --pv-version-label-font-weight: var(--weight-normal); --pv-version-name-font-family: var(--font-family-1); --pv-version-name-font-size: 28px; --pv-version-name-font-weight: var(--weight-bolder); --pv-version-name-color: var(--brand-black); /* Pricing */ --pv-price-label-font-size: 14px; --pv-price-label-color: var(--brand-black); --pv-price-label-font-weight: var(--weight-normal); --pv-price-value-font-family: var(--font-family-1); --pv-price-value-font-size: 28px; --pv-price-value-font-weight: var(--weight-bolder); --pv-price-value-color: var(--brand-black); --pv-price-secondary-font-family: var(--font-family-2); --pv-price-secondary-font-size: 28px; --pv-price-secondary-font-weight: var(--weight-normal); --pv-edit-link-color: var(--gray-dark-1); --pv-edit-link-font-size: 14px; /* Buttons */ --pv-btn-font-family: var(--font-family-1); --pv-btn-font-size: 18px; --pv-btn-font-weight: var(--weight-bolder); --pv-btn-padding: 12px 32px; --pv-btn-border-radius: 8px; --pv-btn-primary-bg: var(--brand); --pv-btn-primary-color: var(--brand-white); --pv-btn-primary-bg-hover: #888888; --pv-btn-secondary-bg: transparent; --pv-btn-secondary-color: var(--brand-black); --pv-btn-secondary-border: 2px solid var(--brand-black); --pv-btn-secondary-bg-hover: var(--gray-light-4); --pv-btn-secondary-color-hover: var(--brand-black); --pv-buttons-gap: 12px; /* Disclaimer */ --pv-disclaimer-font-size: 12px; --pv-disclaimer-font-weight: var(--weight-normal); --pv-disclaimer-color: var(--gray-dark-3); --pv-disclaimer-padding: 12px; --pv-disclaimer-bg: var(--gray-light-4, #f5f5f5); --pv-disclaimer-link-color: var(--brand-primary); --pv-disclaimer-margin: 24px 0 0 0; } /* Desktop (1366px) */ @media (max-width: 1366px) { :root { --pv-section-padding: 48px 0; --pv-title-font-size: 36px; --pv-title-margin-bottom: 10px; --pv-subtitle-font-size: 20px; --pv-tab-font-size: 18px; --pv-content-gap: 24px; --pv-view-btn-font-size: 18px; --pv-image-max-height: 350px; --pv-color-label-font-size: 18px; --pv-color-name-font-size: 18px; --pv-characteristics-gap: 20px; --pv-char-value-font-size: 32px; --pv-char-unit-font-size: 20px; --pv-char-label-font-size: 20px; --pv-version-label-font-size: 20px; --pv-version-name-font-size: 28px; --pv-price-label-font-size: 14px; --pv-price-value-font-size: 28px; --pv-price-secondary-font-size: 28px; --pv-btn-font-size: 16px; --pv-disclaimer-padding: 12px; } } /* Tablet (768px) */ @media (max-width: 768px) { :root { --pv-section-padding: 40px 0; --pv-section-padding-x: 20px; --pv-title-font-size: 24px; --pv-title-margin-bottom: 8px; --pv-subtitle-font-size: 16px; --pv-subtitle-margin-bottom: 20px; --pv-tab-font-size: 16px; --pv-tab-font-weight: 700; --pv-tab-padding: 12px 16px; --pv-view-btn-font-size: 16px; --pv-view-btn-font-weight: 700; --pv-view-btn-padding: 10px 24px; --pv-content-gap: 20px; --pv-content-padding: 20px 0; --pv-image-max-height: 280px; --pv-color-label-font-size: 18px; --pv-color-name-font-size: 18px; --pv-color-swatch-size: 28px; --pv-characteristics-gap: 36px; --pv-characteristics-margin: 24px 0; --pv-char-icon-size: calc( var(--pv-char-value-font-size) + var(--pv-char-unit-font-size) ); --pv-char-value-font-size: 20px; --pv-char-unit-font-size: 16px; --pv-char-label-font-size: 16px; --pv-char-top-direction: row; --pv-char-top-align: flex-start; --pv-char-top-gap: 6px; --pv-char-top-justify: center; --pv-char-value-direction: column; --pv-char-value-align: flex-start; --pv-char-value-gap: 0; --pv-char-item-align: center; --pv-char-item-text-align: center; --pv-footer-gap: 20px; --pv-feature-name-font-size: 14px; --pv-feature-value-font-size: 14px; --pv-version-label-font-size: 16px; --pv-version-name-font-size: 20px; --pv-price-label-font-size: 12px; --pv-price-value-font-size: 20px; --pv-price-secondary-font-size: 20px; --pv-btn-font-size: 16px; --pv-btn-padding: 12px 24px; --pv-disclaimer-font-size: 12px; --pv-disclaimer-padding: 12px; } } /* Mobile (480px) */ @media (max-width: 480px) { :root { --pv-section-padding: 32px 0; --pv-section-padding-x: 16px; --pv-title-font-size: 22px; --pv-title-margin-bottom: 6px; --pv-subtitle-font-size: 14px; --pv-subtitle-margin-bottom: 16px; --pv-tab-font-size: 14px; --pv-tab-padding: 10px 12px; --pv-view-btn-font-size: 14px; --pv-view-btn-padding: 8px 20px; --pv-image-max-height: 200px; --pv-color-label-font-size: 18px; --pv-color-name-font-size: 18px; --pv-color-swatch-size: 24px; --pv-color-swatch-gap: 10px; --pv-char-icon-size: calc( var(--pv-char-value-font-size) + var(--pv-char-unit-font-size) ); --pv-char-value-font-size: 20px; --pv-char-unit-font-size: 16px; --pv-char-label-font-size: 16px; --pv-char-top-direction: row; --pv-char-top-align: flex-start; --pv-char-top-gap: 6px; --pv-char-top-justify: center; --pv-char-value-direction: column; --pv-char-value-align: flex-start; --pv-char-value-gap: 0; --pv-char-item-align: center; --pv-char-item-text-align: center; --pv-feature-name-font-size: 14px; --pv-feature-value-font-size: 14px; --pv-version-label-font-size: 16px; --pv-version-name-font-size: 20px; --pv-price-label-font-size: 12px; --pv-price-value-font-size: 20px; --pv-price-secondary-font-size: 20px; --pv-btn-font-size: 14px; --pv-btn-padding: 10px 20px; --pv-disclaimer-font-size: 12px; --pv-disclaimer-padding: 12px; } } /* ============================================ PASSENGER VEHICLES COMPONENT ============================================ */ /* 1. Section Container */ .passenger-vehicles { width: 100%; max-width: var(--pv-section-max-width); margin: 0 auto; padding: var(--pv-section-padding); padding-left: var(--pv-section-padding-x); padding-right: var(--pv-section-padding-x); background-color: var(--pv-section-background); } /* 2. Header (Title & Subtitle) */ .passenger-vehicles__header { text-align: center; margin-bottom: 24px; } .passenger-vehicles__title { font-family: var(--pv-title-font-family); font-size: var(--pv-title-font-size); font-weight: var(--pv-title-font-weight); color: var(--pv-title-color); text-transform: var(--pv-title-text-transform); margin: 0 0 var(--pv-title-margin-bottom) 0; } .passenger-vehicles__subtitle { font-family: var(--pv-subtitle-font-family); font-size: var(--pv-subtitle-font-size); color: var(--pv-subtitle-color); margin: 0 0 var(--pv-subtitle-margin-bottom) 0; font-weight: var(--pv-subtitle-font-weight); } /* 3. Primary Tabs (Version Selection) */ .passenger-vehicles__tabs-container { position: relative; } .passenger-vehicles__tabs-arrow { position: absolute; top: 0; bottom: 1px; display: flex; align-items: center; justify-content: center; width: 48px; border: none; cursor: pointer; padding: 0; z-index: 2; transition: opacity 0.3s ease; color: var(--pv-tab-color); } .passenger-vehicles__tabs-arrow--right { right: 0; background: linear-gradient( to right, transparent, var(--pv-section-background) 60% ); } .passenger-vehicles__tabs-arrow--left { left: 0; background: linear-gradient( to left, transparent, var(--pv-section-background) 60% ); } .passenger-vehicles__tabs-arrow svg { width: 40px; height: 40px; } .passenger-vehicles__tabs-arrow.hidden { opacity: 0; pointer-events: none; } .passenger-vehicles__tabs { border-bottom: 1px solid var(--pv-tabs-border-color); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .passenger-vehicles__tabs::-webkit-scrollbar { display: none; } .passenger-vehicles__tabs-wrapper { display: flex; gap: var(--pv-tabs-gap); } .passenger-vehicles__tab { position: relative; font-family: var(--pv-tab-font-family); font-size: var(--pv-tab-font-size); font-weight: var(--pv-tab-font-weight); color: var(--pv-tab-color); padding: var(--pv-tab-padding); background: none; border: none; border-bottom: var(--pv-tab-border-width) solid #373637; cursor: pointer; white-space: nowrap; transition: color 0.3s ease, border-color 0.3s ease; flex: 0 0 calc(100% / 3); min-width: calc(100% / 3); } .passenger-vehicles__tab:only-child { flex: 1; min-width: 100%; } .passenger-vehicles__tab:first-child:nth-last-child(2), .passenger-vehicles__tab:first-child:nth-last-child(2) ~ .passenger-vehicles__tab { flex: 0 0 50%; min-width: 50%; } .passenger-vehicles__tab:hover { color: var(--pv-tab-color-active); } .passenger-vehicles__tab--active { color: var(--pv-tab-color-active); border-bottom: 6px solid var(--pv-tab-border-color-active); } /* 4. Panels */ .passenger-vehicles__panels { position: relative; } .passenger-vehicles__panel { display: none; padding: var(--pv-content-padding); } .passenger-vehicles__panel--active { display: block; } /* 5. View Toggle (Exterior/Interior) */ .passenger-vehicles__view-toggle { display: flex; justify-content: center; gap: 0; margin: var(--pv-view-toggle-margin); } .passenger-vehicles__view-btn { font-family: var(--pv-view-btn-font-family); font-size: var(--pv-view-btn-font-size); font-weight: var(--pv-view-btn-font-weight); color: var(--pv-view-btn-color); padding: var(--pv-view-btn-padding); background: none; border: none; border-bottom: 2px solid #373637; cursor: pointer; transition: color 0.3s ease, border-color 0.3s ease; } .passenger-vehicles__view-btn:hover { color: var(--pv-view-btn-color-active); } .passenger-vehicles__view-btn--active { color: var(--pv-view-btn-color-active); border-bottom: 6px solid var(--pv-view-btn-border-color-active); } /* 6. View Containers */ .passenger-vehicles__view { display: none; } .passenger-vehicles__view--active { display: block; } /* 7. Gallery */ .passenger-vehicles__gallery { width: var(--pv-gallery-width); margin: 0 auto; max-width: 800px; } .passenger-vehicles__images { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; min-height: 200px; } .passenger-vehicles__image { display: none; width: 100%; max-height: var(--pv-image-max-height); } .passenger-vehicles__image--active { display: block; } .passenger-vehicles__image picture { display: flex; justify-content: center; width: 100%; } .passenger-vehicles__image img { width: auto; max-width: 100%; height: auto; max-height: var(--pv-image-max-height); display: block; object-fit: contain; } .passenger-vehicles__iframe { width: 100%; height: 100%; min-height: 400px; border: none; } .passenger-vehicles__image-link { width: auto; max-width: 100%; height: auto; max-height: var(--pv-image-max-height); display: block; object-fit: contain; } /* 8. Color Selector */ .passenger-vehicles__color-selector { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; } .passenger-vehicles__color-label { font-family: var(--font-family-4); font-size: var(--pv-color-label-font-size); color: #373637; font-weight: var(--weight-normal); } .passenger-vehicles__color-name { font-size: var(--pv-color-name-font-size); color: var(--pv-color-name-color); font-weight: var(--weight-bold); font-family: var(--font-family-5); } .passenger-vehicles__colors { display: flex; gap: var(--pv-color-swatch-gap); justify-content: center; flex-wrap: wrap; } .passenger-vehicles__color { width: var(--pv-color-swatch-size); height: var(--pv-color-swatch-size); border-radius: 50%; border: none; box-shadow: 0 0 0 2px var(--brand-white), 0 0 0 4px var(--gray-dark-8); cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease; padding: 0; } .passenger-vehicles__color:hover { transform: scale(1.1); } .passenger-vehicles__color--active { box-shadow: 0 0 0 2px var(--brand-white), 0 0 0 4px #e60012; } /* 9. Characteristics Grid */ .passenger-vehicles__characteristics { display: flex; justify-content: space-between; gap: var(--pv-characteristics-gap); margin: var(--pv-characteristics-margin); padding: 0; } @media (max-width: 768px) { .passenger-vehicles__characteristics { display: grid; grid-template-columns: repeat(2, auto); justify-items: center; width: fit-content; margin: 30px auto; column-gap: 85px; } } @media (max-width: 576px) { .passenger-vehicles__characteristics { column-gap: 35px; } } .passenger-vehicles__characteristic { display: flex; flex-direction: column; align-items: var(--pv-char-item-align); text-align: var(--pv-char-item-text-align); gap: 4px; } .passenger-vehicles__characteristic-top { display: flex; align-items: var(--pv-char-top-align); justify-content: var(--pv-char-top-justify); flex-direction: var(--pv-char-top-direction); gap: var(--pv-char-top-gap); } .passenger-vehicles__characteristic-icon { width: var(--pv-char-icon-size); height: var(--pv-char-icon-size); object-fit: contain; } .passenger-vehicles__characteristic-value { display: flex; flex-direction: var(--pv-char-value-direction); align-items: var(--pv-char-value-align); gap: var(--pv-char-value-gap); } .passenger-vehicles__characteristic-number { font-family: var(--pv-char-value-font-family); font-size: var(--pv-char-value-font-size); font-weight: var(--pv-char-value-font-weight); color: var(--pv-char-value-color); line-height: var(--pv-char-number-line-height); } .passenger-vehicles__characteristic-unit { font-family: var(--font-family-1); font-size: var(--pv-char-unit-font-size); font-weight: var(--weight-bolder); color: var(--pv-char-unit-color); line-height: var(--pv-char-unit-line-height); } .passenger-vehicles__characteristic-label { font-family: var(--font-family-2); font-size: var(--pv-char-label-font-size); color: var(--pv-char-label-color); font-weight: var(--pv-char-label-font-weight); } /* 10. Footer Section */ .passenger-vehicles__footer { display: grid; grid-template-columns: 1fr 1fr 1.2fr 0.8fr; gap: var(--pv-footer-gap); align-items: center; padding: var(--pv-footer-padding); border-top: var(--pv-footer-border-top); } @media (max-width: 1024px) { .passenger-vehicles__footer { grid-template-columns: 1fr 1fr; row-gap: 24px; } } @media (max-width: 768px) { .passenger-vehicles__footer { grid-template-columns: 1fr; text-align: center; } } /* 11. Features List */ .passenger-vehicles__features { display: flex; flex-direction: column; gap: var(--pv-feature-gap); } @media (max-width: 768px) { .passenger-vehicles__features { align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--gray-light-3); } } .passenger-vehicles__feature { display: flex; gap: 4px; flex-wrap: wrap; } @media (max-width: 768px) { .passenger-vehicles__feature { justify-content: center; } } .passenger-vehicles__feature-name { font-family: var(--pv-feature-name-font-family); font-size: var(--pv-feature-name-font-size); font-weight: var(--pv-feature-name-font-weight); color: var(--pv-feature-name-color); } .passenger-vehicles__feature-value { font-family: var(--pv-feature-value-font-family); font-size: var(--pv-feature-value-font-size); color: var(--pv-feature-value-color); font-weight: var(--pv-feature-value-font-weight); } /* 12. Version Info */ .passenger-vehicles__version-info { display: flex; flex-direction: column; justify-content: center; gap: 4px; } @media (max-width: 768px) { .passenger-vehicles__version-info { align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--gray-light-3); } } .passenger-vehicles__version-label { font-family: var(--font-family-2); font-size: var(--pv-version-label-font-size); color: var(--pv-version-label-color); font-weight: var(--pv-version-label-font-weight); text-transform: var(--pv-version-label-text-transform); letter-spacing: 0.5px; } .passenger-vehicles__version-name { font-family: var(--pv-version-name-font-family); font-size: var(--pv-version-name-font-size); font-weight: var(--pv-version-name-font-weight); color: var(--pv-version-name-color); margin: 0; } /* 13. Pricing */ .passenger-vehicles__pricing { display: flex; flex-direction: column; gap: 8px; } @media (max-width: 768px) { .passenger-vehicles__pricing { align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--gray-light-3); } } .passenger-vehicles__price-row { display: flex; flex-direction: column; gap: 2px; } @media (max-width: 768px) { .passenger-vehicles__price-row { align-items: center; } } .passenger-vehicles__price-label { font-family: var(--font-family-4); font-size: var(--pv-price-label-font-size); color: var(--pv-price-label-color); font-weight: var(--pv-price-label-font-weight); } .passenger-vehicles__price-value { font-family: var(--pv-price-value-font-family); font-size: var(--pv-price-value-font-size); font-weight: var(--pv-price-value-font-weight); color: var(--pv-price-value-color); } .passenger-vehicles__price-separator { margin: 0 4px; } .passenger-vehicles__price-secondary { font-family: var(--pv-price-secondary-font-family); font-size: var(--pv-price-secondary-font-size); font-weight: var(--pv-price-secondary-font-weight); } .passenger-vehicles__info-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; margin-left: 6px; background: none; border: none; color: var(--gray-dark-1); cursor: pointer; vertical-align: middle; transition: color 0.2s ease; } .passenger-vehicles__info-btn:hover { color: var(--brand-dark); } .passenger-vehicles__info-btn svg { width: 16px; height: 16px; } .passenger-vehicles__edit-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-family-1); font-size: var(--pv-edit-link-font-size); color: var(--pv-edit-link-color); text-decoration: none; margin-top: 4px; transition: color 0.2s ease; } .passenger-vehicles__edit-link:hover { color: var(--brand-dark); text-decoration: underline; } /* 14. CTA Buttons */ .passenger-vehicles__buttons { display: flex; flex-direction: column; gap: var(--pv-buttons-gap); } @media (max-width: 768px) { .passenger-vehicles__buttons { width: 100%; max-width: 628px; margin: 0 auto; height: 100%; justify-content: center; align-items: center; } .passenger-vehicles__btn { height: 48px; } } .passenger-vehicles__btn { display: inline-flex; justify-content: center; align-items: center; font-family: var(--pv-btn-font-family); font-size: var(--pv-btn-font-size); font-weight: var(--pv-btn-font-weight); padding: var(--pv-btn-padding); border-radius: var(--pv-btn-border-radius); text-decoration: none; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; width: 190px; height: 48px; } .passenger-vehicles__btn--primary { background-color: var(--pv-btn-primary-bg); color: var(--pv-btn-primary-color); border: 2px solid var(--pv-btn-primary-bg); } .passenger-vehicles__btn--primary:hover, .passenger-vehicles__btn--primary:active { background-color: var(--pv-btn-primary-bg-hover); border-color: var(--pv-btn-primary-bg-hover); color: var(--brand-white); } .passenger-vehicles__btn--secondary { background-color: var(--pv-btn-secondary-bg); color: var(--pv-btn-secondary-color); border: var(--pv-btn-secondary-border); } .passenger-vehicles__btn--secondary:hover { background-color: var(--pv-btn-secondary-bg-hover); color: var(--pv-btn-secondary-color-hover); } /* 15. Disclaimer */ .passenger-vehicles__disclaimer { display: none; font-family: var(--font-family-4); font-size: var(--pv-disclaimer-font-size); font-weight: var(--pv-disclaimer-font-weight) !important; color: var(--pv-disclaimer-color); padding: var(--pv-disclaimer-padding); line-height: 1.5; background-color: var(--pv-disclaimer-bg); margin: var(--pv-disclaimer-margin); } .passenger-vehicles__disclaimer--active { display: block; } .passenger-vehicles__disclaimer p { font-weight: var(--pv-disclaimer-font-weight) !important; } .passenger-vehicles__disclaimer a { color: var(--pv-disclaimer-link-color); text-decoration: underline; } .passenger-vehicles__disclaimer a:hover { text-decoration: none; } @media (max-width: 1366px) { .passenger-vehicles__btn { width: 226px; height: 48px; } } /* 16. Responsive Order Adjustments */ @media (max-width: 768px) { .passenger-vehicles__panel--active { display: flex; flex-direction: column; } .passenger-vehicles__view-toggle { order: 1; } .passenger-vehicles__view--active { order: 2; } .passenger-vehicles__characteristics { order: 3; } .passenger-vehicles__footer { order: 4; } .passenger-vehicles__disclaimer { order: 5; } } /* --- Inlined from: ./[blocklist]_components/cardGrid/cardGrid.css --- */ /* Import Component Variables here */ /* --- Inlined from: ../../[branding]_components/cardGrid.css --- */ /* Desktop 1920 */ :root { /* 1. Section Container */ --card-grid-background-color: var(--brand-white, #ffffff); --card-grid-section-padding: 80px 0; --card-grid-container-padding-x: 120px; /* 2. Header Area */ --card-grid-header-text-align: center; --card-grid-header-text-align-tablet: center; --card-grid-header-text-align-mobile: center; --card-grid-header-margin-bottom: 48px; --card-grid-header-max-width: 800px; /* 3. Section Name (small label above title) */ --card-grid-section-name-font-family: var(--font-family-2); --card-grid-section-name-font-size: 20px; --card-grid-section-name-font-weight: 400; --card-grid-section-name-color: #373637; --card-grid-section-name-text-transform: uppercase; --card-grid-section-name-letter-spacing: 2px; --card-grid-section-name-margin-bottom: 16px; /* 4. Module Header (Title) */ --card-grid-title-font-family: var(--font-family-1); --card-grid-title-font-size: 28px; --card-grid-title-font-weight: 700; --card-grid-title-color: var(--brand-black, #1a1a1a); --card-grid-title-text-transform: uppercase; --card-grid-title-margin-bottom: 16px; /* 5. Description */ --card-grid-description-font-family: var(--font-family-4); --card-grid-description-font-size: 18px; --card-grid-description-font-weight: 400; --card-grid-description-color: #373637; --card-grid-description-line-height: 1.6; /* 6. Cards Container */ --card-grid-gap: 24px; --card-grid-container-max-width: 1044px; /* 7. Card Item */ --card-grid-item-background: transparent; --card-grid-item-max-width: 332px; /* 8. Card Image (332x322) */ --card-grid-image-aspect-ratio: 332 / 322; /* 9. Image Title (centered overlay on image) */ --card-grid-image-title-font-family: var(--font-family-1); --card-grid-image-title-font-size: 24px; --card-grid-image-title-font-weight: 700; --card-grid-image-title-color: var(--brand-white, #ffffff); --card-grid-image-title-text-transform: none; --card-grid-image-title-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 10. Card Content */ --card-grid-content-padding: 24px 0; --card-grid-content-text-align: left; --card-grid-content-text-align-tablet: left; --card-grid-content-text-align-mobile: center; /* 11. Card Title */ --card-grid-card-title-font-family: var(--font-family-1); --card-grid-card-title-font-size: 24px; --card-grid-card-title-font-weight: 700; --card-grid-card-title-color: var(--brand-black, #1a1a1a); --card-grid-card-title-text-transform: none; --card-grid-card-title-margin-bottom: 12px; /* 12. Card Description */ --card-grid-card-description-font-family: var(--font-family-4); --card-grid-card-description-font-size: 18px; --card-grid-card-description-font-weight: 400; --card-grid-card-description-color: #373637; --card-grid-card-description-line-height: 1.6; --card-grid-card-description-margin-bottom: 16px; /* 13. Card Link (Read more) */ --card-grid-link-font-family: var(--font-family-2); --card-grid-link-font-size: 16px; --card-grid-link-font-weight: 400; --card-grid-link-color: var(--brand-black); --card-grid-link-hover-color: var(--brand); --card-grid-link-text-decoration: underline; } /* Desktop 1366 */ @media (max-width: 1366px) { :root { /* Section */ --card-grid-section-padding: 60px 0; --card-grid-container-padding-x: 80px; --card-grid-header-margin-bottom: 40px; /* Section Name: 20px */ --card-grid-section-name-font-size: 20px; /* Module Header: 28px */ --card-grid-title-font-size: 28px; /* Description: 18px */ --card-grid-description-font-size: 18px; /* Card Image: 332x322 */ --card-grid-image-aspect-ratio: 332 / 322; --card-grid-gap: 20px; /* Card Image Title: 28px, weight:600 */ --card-grid-image-title-font-weight: 600; /* Card Description: 18px, weight:300 */ --card-grid-card-description-font-size: 18px; /* Read more Link: 16px, weight:500 */ --card-grid-link-font-size: 16px; } } /* Desktop Small 1100 */ @media (max-width: 1100px) { :root { /* Reduce padding */ --card-grid-container-padding-x: 40px; /* Card Item: smaller to fit 3 columns */ --card-grid-item-max-width: 280px; --card-grid-container-max-width: 900px; /* Card Image: 280x272 (maintain aspect ratio) */ --card-grid-image-aspect-ratio: 280 / 272; --card-grid-gap: 16px; } } /* Tablet 890 */ @media (max-width: 890px) { :root { /* Section */ --card-grid-section-padding: 48px 0; --card-grid-container-padding-x: 24px; --card-grid-header-margin-bottom: 32px; --card-grid-header-max-width: 100%; /* Section Name: 20px */ --card-grid-section-name-font-size: 20px; /* Module Header: 22px */ --card-grid-title-font-size: 22px; --card-grid-title-margin-bottom: 12px; /* Description: 16px */ --card-grid-description-font-size: 16px; /* Card Item: full width on single column */ --card-grid-item-max-width: 100%; /* Card Image: 720x322 */ --card-grid-image-aspect-ratio: 720 / 322; --card-grid-gap: 32px; /* Card Image Title: centered, 20px, weight:500 */ --card-grid-image-title-font-size: 20px; --card-grid-image-title-font-weight: 500; /* Card Content */ --card-grid-content-padding: 20px 0; /* Card Description: 16px, weight:300 */ --card-grid-card-description-font-size: 16px; /* Read more Link: 14px, weight:500 */ --card-grid-link-font-size: 14px; /* Card Title: 20px, weight:400 */ --card-grid-card-title-font-size: 20px; --card-grid-image-title-font-family: var(--font-family-2); } } /* Mobile 480 */ @media (max-width: 480px) { :root { /* Section */ --card-grid-section-padding: 40px 0; --card-grid-container-padding-x: 16px; --card-grid-header-margin-bottom: 24px; /* Section Name: 12px */ --card-grid-section-name-font-size: 12px; --card-grid-section-name-letter-spacing: 1.5px; /* Module Header: 20px */ --card-grid-title-font-size: 20px; /* Description: 14px */ --card-grid-description-font-size: 14px; /* Card Image: 328x322 */ --card-grid-image-aspect-ratio: 328 / 322; --card-grid-gap: 24px; /* Card Image Title: centered, 28px, weight:400 */ --card-grid-image-title-font-size: 28px; --card-grid-image-title-font-weight: 400; /* Card Content */ --card-grid-content-padding: 16px 0; /* Card Title: 20px, weight:400 */ --card-grid-card-title-margin-bottom: 8px; /* Card Description: 16px, weight:300 */ --card-grid-card-description-font-size: 16px; --card-grid-card-description-margin-bottom: 12px; /* Read more Link: 14px, weight:500 */ --card-grid-link-font-size: 14px; } } /* 1. Section Container */ .card-grid-section { width: 100%; background-color: var(--card-grid-background-color); padding: var(--card-grid-section-padding); } .card-grid { max-width: 1920px; margin: 0 auto; padding: 0 var(--card-grid-container-padding-x); } /* 2. Header Area */ .card-grid__header { text-align: var(--card-grid-header-text-align); margin-bottom: var(--card-grid-header-margin-bottom); max-width: var(--card-grid-header-max-width); margin-left: auto; margin-right: auto; } .card-grid__section-name { display: block; font-family: var(--card-grid-section-name-font-family); font-size: var(--card-grid-section-name-font-size); font-weight: var(--card-grid-section-name-font-weight); color: var(--card-grid-section-name-color); text-transform: var(--card-grid-section-name-text-transform); letter-spacing: var(--card-grid-section-name-letter-spacing); margin-bottom: var(--card-grid-section-name-margin-bottom); letter-spacing: 5px; } .card-grid__title { font-family: var(--card-grid-title-font-family); font-size: var(--card-grid-title-font-size); font-weight: var(--card-grid-title-font-weight); color: var(--card-grid-title-color); text-transform: var(--card-grid-title-text-transform); margin: 0 0 var(--card-grid-title-margin-bottom) 0; line-height: 1.2; } .card-grid__description { font-family: var(--card-grid-description-font-family); font-size: var(--card-grid-description-font-size); font-weight: var(--card-grid-description-font-weight); color: var(--card-grid-description-color); line-height: var(--card-grid-description-line-height); } .card-grid__description p { margin: 0; } /* 3. Cards Container */ .card-grid__container { display: grid; grid-template-columns: repeat(3, var(--card-grid-item-max-width)); gap: var(--card-grid-gap); max-width: var(--card-grid-container-max-width); margin: 0 auto; justify-content: center; } /* 4. Card Item */ .card-grid__item { display: flex; flex-direction: column; background-color: var(--card-grid-item-background); max-width: var(--card-grid-item-max-width); } /* 5. Card Image */ .card-grid__image-wrapper { position: relative; width: 100%; aspect-ratio: var(--card-grid-image-aspect-ratio); overflow: hidden; } /* Gradient overlay */ .card-grid__image-wrapper::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: linear-gradient(360deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%); pointer-events: none; z-index: 1; } .card-grid__image { display: block; width: 100%; height: 100%; } .card-grid__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .card-grid__image-title { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; font-family: var(--card-grid-image-title-font-family); font-size: var(--card-grid-image-title-font-size); font-weight: var(--card-grid-image-title-font-weight); color: var(--card-grid-image-title-color); text-transform: var(--card-grid-image-title-text-transform); text-shadow: var(--card-grid-image-title-text-shadow); z-index: 2; padding: 0 16px; box-sizing: border-box; } /* 6. Card Content */ .card-grid__content { padding: var(--card-grid-content-padding); display: flex; flex-direction: column; flex-grow: 1; text-align: var(--card-grid-content-text-align); } .card-grid__card-title { font-family: var(--card-grid-card-title-font-family); font-size: var(--card-grid-card-title-font-size); font-weight: var(--card-grid-card-title-font-weight); color: var(--card-grid-card-title-color); text-transform: var(--card-grid-card-title-text-transform); margin: 0 0 var(--card-grid-card-title-margin-bottom) 0; line-height: 1.3; text-align: center; } .card-grid__card-description { font-family: var(--card-grid-card-description-font-family); font-size: var(--card-grid-card-description-font-size); font-weight: var(--card-grid-card-description-font-weight); color: var(--card-grid-card-description-color); line-height: var(--card-grid-card-description-line-height); margin-bottom: var(--card-grid-card-description-margin-bottom); } .card-grid__card-description p { margin: 0; } /* 7. Card Link */ .card-grid__link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--card-grid-link-font-family); font-size: var(--card-grid-link-font-size); font-weight: var(--card-grid-link-font-weight); color: var(--card-grid-link-color); text-decoration: var(--card-grid-link-text-decoration, underline); margin-top: auto; align-self: flex-start; transition: color 0.3s ease; } .card-grid__link:hover { color: #00233A; background-color: var(--gray-dark-9); } .card-grid__link svg { width: 16px; height: 16px; flex-shrink: 0; } /* Tablet Layout - Single Column */ @media (max-width: 890px) { .card-grid__container { grid-template-columns: 1fr; max-width: 100%; } .card-grid__header { text-align: var(--card-grid-header-text-align-tablet); } .card-grid__content { text-align: var(--card-grid-content-text-align-tablet); } .card-grid__link { display: block; text-align: center; } } /* Mobile Layout */ @media (max-width: 480px) { .card-grid__header { text-align: var(--card-grid-header-text-align-mobile); } .card-grid__content { text-align: var(--card-grid-content-text-align-mobile); } } /* --- Inlined from: ./[blocklist]_components/productMenuPage/productMenuPage.css --- */ /* --- Inlined from: ../../[branding]_components/productMenuPage.css --- */ /* Product Menu Page - Branding Variables */ :root { /* Container */ --product-menu-z-index: 50; --product-menu-bg: #F5F5F5; --product-menu-border-bottom: 1px solid var(--gray-dark-8); --product-menu-container-padding-x: 2rem; --product-menu-container-padding-x-tablet: 1.5rem; --product-menu-container-padding-x-mobile: 0; --product-menu-gap: 1.5rem; --product-menu-gap-mobile: 1rem; /* Model Name */ --product-menu-model-name-bg: #F1F1F1; --product-menu-model-name-font-weight: var(--weight-bolder); --product-menu-model-name-font-size: 20px; --product-menu-model-name-color: var(--brand-black); --product-menu-model-name-border-bottom: 4px solid var(--brand-black); --product-menu-model-name-border-right: 1px solid #E7E7E7; /* Tab List */ --product-menu-list-gap: 0; --product-menu-list-gap-tablet: 0; --product-menu-list-gap-mobile: 0; /* Tab Links */ --product-menu-font-family: var(--font-family-4); --product-menu-font-size: 16px; --product-menu-font-weight: var(--weight-normal); --product-menu-font-weight-active: var(--weight-bolder); --product-menu-text-color: var(--brand-black); --product-menu-text-color-hover: var(--brand-dark); --product-menu-text-color-active: var(--brand-black); --product-menu-link-padding: 1rem 1.5rem; --product-menu-link-padding-tablet: 0.875rem 1.25rem; --product-menu-link-padding-mobile: 0.75rem 1rem; --product-menu-min-height: 3.5rem; --product-menu-min-height-mobile: 3rem; --product-menu-border-width: 4px; --product-menu-border-color-active: #00233A; /* Contact Button */ --product-menu-btn-bg: var(--brand); --product-menu-btn-bg-hover: var(--brand-hover); --product-menu-btn-text-color: var(--brand-dark); --product-menu-btn-font-size: 16px; --product-menu-btn-font-weight: var(--weight-bold); --product-menu-btn-padding: 0.625rem 1.5rem; --product-menu-btn-padding-tablet: 0.5rem 1.25rem; --product-menu-btn-padding-mobile: 0.5rem 1rem; --product-menu-btn-border-radius: 2rem; } /* Product Menu Page - Base Styles */ .product-menu-page { position: sticky; top: 5.6rem; /* Below header (desktop header height) */ z-index: var(--product-menu-z-index); background-color: var(--product-menu-bg); width: 100%; } .product-menu-page__container { display: flex; align-items: center; justify-content: space-between; max-width: 1920px; margin: 0 auto; padding: 0 var(--product-menu-container-padding-x); } .product-menu-page__nav { flex: 1; display: flex; align-items: center; min-width: 0; } .product-menu-page__arrow { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; cursor: pointer; color: var(--product-menu-text-color); padding: 0; transition: opacity 0.2s ease, color 0.2s ease; } .product-menu-page__arrow:hover { color: var(--product-menu-text-color-hover); } .product-menu-page__arrow--hidden { opacity: 0; pointer-events: none; } .product-menu-page__scroll-wrapper { flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; min-width: 0; } .product-menu-page__scroll-wrapper::-webkit-scrollbar { display: none; } .product-menu-page__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: var(--product-menu-list-gap); white-space: nowrap; } .product-menu-page__item { position: relative; flex-shrink: 0; } .product-menu-page__link { display: flex; align-items: center; justify-content: center; padding: var(--product-menu-link-padding); font-family: var(--product-menu-font-family); font-size: var(--product-menu-font-size); font-weight: var(--product-menu-font-weight); color: var(--product-menu-text-color); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, font-weight 0.2s ease; cursor: pointer; min-height: var(--product-menu-min-height); } .product-menu-page__link:hover { color: var(--product-menu-text-color-hover); } /* Model Name Wrapper (fixed position, tabs scroll behind) */ .product-menu-page__model-name-wrapper { position: relative; z-index: 2; flex-shrink: 0; background-color: var(--product-menu-bg); border-right: var(--product-menu-model-name-border-right); padding: 0 20px; } /* Model Name Label (clickable, scrolls to top) */ .product-menu-page__model_name { display: flex; align-items: center; justify-content: center; padding: 0; font-family: var(--product-menu-font-family); font-size: var(--product-menu-model-name-font-size); font-weight: var(--product-menu-model-name-font-weight); color: var(--product-menu-model-name-color); border-bottom: var(--product-menu-model-name-border-bottom); min-height: var(--product-menu-min-height); background-color: var(--product-menu-model-name-bg); text-decoration: none; cursor: pointer; } .product-menu-page__model_name:hover { color: var(--product-menu-text-color-hover); } .product-menu-page__label { display: flex; align-items: center; justify-content: center; padding: var(--product-menu-link-padding); font-family: var(--product-menu-font-family); font-size: var(--product-menu-font-size); font-weight: var(--product-menu-font-weight); color: var(--product-menu-text-color-active); border-bottom: var(--product-menu-border-width) solid var(--product-menu-border-color-active); min-height: var(--product-menu-min-height); } /* Active state for clickable tabs */ .product-menu-page__item--active .product-menu-page__link { font-weight: var(--product-menu-font-weight-active); color: var(--product-menu-text-color-active); border-bottom-color: var(--product-menu-border-color-active); } /* Contact Button (fixed position, tabs scroll behind) */ .product-menu-page__contact-btn { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: var(--product-menu-btn-padding); font-family: var(--product-menu-font-family); font-size: var(--product-menu-btn-font-size); font-weight: var(--product-menu-btn-font-weight); color: var(--product-menu-btn-text-color); background-color: var(--product-menu-btn-bg); border-radius: var(--product-menu-btn-border-radius); text-decoration: none; text-transform: uppercase; transition: background-color 0.2s ease, transform 0.2s ease; white-space: nowrap; margin: 0 20px; } .product-menu-page__contact-btn:hover { background-color: var(--product-menu-btn-bg-hover); } /* Responsive - Tablet and below (header height is 50px) */ @media (max-width: 1155px) { .product-menu-page { top: 50px; /* Below header (mobile/tablet header height) */ } } @media (max-width: 992px) { .product-menu-page__container { padding: 0 var(--product-menu-container-padding-x-tablet); } .product-menu-page__list { gap: var(--product-menu-list-gap-tablet); } .product-menu-page__link, .product-menu-page__label { padding: var(--product-menu-link-padding-tablet); } .product-menu-page__contact-btn { padding: var(--product-menu-btn-padding-tablet); } } /* Responsive - Mobile */ @media (max-width: 576px) { .product-menu-page__container { padding: 0 var(--product-menu-container-padding-x-mobile); } .product-menu-page__list { gap: var(--product-menu-list-gap-mobile); } .product-menu-page__link, .product-menu-page__label { padding: var(--product-menu-link-padding-mobile); min-height: var(--product-menu-min-height-mobile); } .product-menu-page__contact-btn { padding: var(--product-menu-btn-padding-mobile); margin: 0 10px; } .product-menu-page__model-name-wrapper { padding: 0 10px; } } /* --- Inlined from: ./[blocklist]_components/offerBanner/offerBanner.css --- */ /* Import Component Variables */ /* --- Inlined from: ../../[branding]_components/offerBanner.css --- */ /* ======================================== OFFER BANNER - BRAND VARIABLES ======================================== Override these variables in brand-specific themes ======================================== */ :root { /* ======================================== GENERAL ======================================== */ --offer-banner-text-color: var(--brand-white); --offer-banner-overlay-gradient: linear-gradient( to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 70% ); --offer-banner-mobile-content-bg: var(--brand-black); /* ======================================== TITLE ======================================== */ --offer-banner-title-font-family: var(--font-family-2); --offer-banner-title-font-size: var(--text-6xl); --offer-banner-title-font-size-mobile: 2rem; --offer-banner-title-font-size-small: var(--text-5xl); --offer-banner-title-font-size-large: var(--text-5xl); --offer-banner-title-font-weight: var(--weight-bolder); --offer-banner-title-line-height: 56px; --offer-banner-title-line-height-mobile: 2.3rem; --offer-banner-title-color: var(--brand-white); --offer-banner-title-text-transform: none; /* Title Separator */ --offer-banner-title-separator-border: none; --offer-banner-title-separator-height: 1px; --offer-banner-title-separator-width: 80%; --offer-banner-title-separator-background: linear-gradient( to right, var(--brand-white), rgba(137, 137, 137, 0.05) ); --offer-banner-title-separator-opacity: 1; /* ======================================== SUBTITLE ======================================== */ --offer-banner-subtitle-font-family: var(--font-family-1); --offer-banner-subtitle-font-size: var(--text-md); --offer-banner-subtitle-font-size-mobile: var(--text-base); --offer-banner-subtitle-font-weight: var(--weight-semilight); --offer-banner-subtitle-line-height: 1.5; --offer-banner-subtitle-color: var(--brand-white); /* ======================================== PRICE LABEL ======================================== */ --offer-banner-price-label-font-family: var(--font-family-2); --offer-banner-price-label-font-size: var(--text-sm); --offer-banner-price-label-font-weight: var(--weight-bolder); --offer-banner-price-label-color: var(--brand-white); /* ======================================== PRICE VALUE ======================================== */ --offer-banner-price-value-font-family: var(--font-family-2); --offer-banner-price-value-font-size: 2rem; --offer-banner-price-value-font-size-mobile: 1.375rem; --offer-banner-price-value-font-size-small: 1.375rem; --offer-banner-price-value-font-size-large: 2rem; --offer-banner-price-value-font-weight: var(--weight-bolder); --offer-banner-price-value-color: var(--brand-white); /* ======================================== PRICE DETAILS ======================================== */ --offer-banner-price-detail-font-family: var(--font-family-2); --offer-banner-price-detail-font-size: var(--text-xs); --offer-banner-price-detail-font-weight: var(--weight-semilight); --offer-banner-price-detail-value-font-weight: var(--weight-bolder); --offer-banner-price-detail-label-color: var(--brand-white); --offer-banner-price-detail-value-color: var(--brand-white); --offer-banner-price-highlight-color: var(--brand-white); /* ======================================== BUTTONS ======================================== */ --offer-banner-btn-font-family: var(--font-family-1); --offer-banner-btn-font-size: var(--text-base); --offer-banner-btn-font-weight: var(--weight-semibold); --offer-banner-btn-border-radius: 30px; /* Primary Button (Outlined) */ --offer-banner-btn-primary-bg: var(--brand); --offer-banner-btn-primary-color: var(--brand-dark); --offer-banner-btn-primary-border-color: var(--brand); --offer-banner-btn-primary-hover-bg: #888888; --offer-banner-btn-primary-hover-color: var(--brand-white); --offer-banner-btn-primary-hover-border-color: #888888; /* Secondary Button (Filled) */ --offer-banner-btn-secondary-bg: transparent; --offer-banner-btn-secondary-color: var(--brand-white); --offer-banner-btn-secondary-border-color: var(--gray-dark-7); --offer-banner-btn-secondary-hover-bg: var(--gray-dark-7); --offer-banner-btn-secondary-hover-color: var(--brand-black); /* ======================================== PAGINATION (CAROUSEL) ======================================== */ --offer-banner-pagination-inactive-bg: var(--gray-dark-7); --offer-banner-pagination-inactive-bg-mobile: transparent; --offer-banner-pagination-active-bg: transparent; --offer-banner-pagination-active-bg-mobile: transparent; --offer-banner-pagination-border-color: var(--gray-dark-7); --offer-banner-pagination-border-color-mobile: var(--brand-black); --offer-banner-pagination-icon-color: var(--brand-white); --offer-banner-pagination-icon-color-mobile: var(--brand); /* Breakpoint logic is handled in offerBanner.js */ --offer-banner-pagination-trail-color: #838383; --offer-banner-pagination-trail-color-mobile: var(--brand-white); --offer-banner-pagination-color: var(--brand-white); --offer-banner-pagination-color-mobile: var(--brand); --offer-banner-pagination-active-width: 32px; --offer-banner-pagination-active-height: 32px; --offer-banner-pagination-active-play-and-pause-icon-width: 15px; --offer-banner-pagination-active-play-and-pause-icon-height: 15px; } /* ======================================== OFFER BANNER COMPONENT ======================================== */ .offer-banner-section { position: relative; width: 100%; overflow: hidden; } .offer-banner-container { position: relative; width: 100%; } .offer-banner-slide { position: relative; width: 100%; min-height: 500px; background: linear-gradient( to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 70% ); } /* ======================================== BACKGROUND MEDIA ======================================== */ .offer-banner-media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .offer-banner-image-container, .offer-banner-video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .offer-banner-image-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var( --offer-banner-overlay-gradient, linear-gradient( to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 70% ) ); z-index: 2; } .offer-banner-image { width: 100%; height: 100%; object-fit: cover; object-position: center right; } .offer-banner-video { width: 100%; height: 100%; object-fit: cover; } /* ======================================== TEXT CONTENT ======================================== */ .offer-banner-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 3rem; height: 100%; min-height: 500px; max-width: 600px; color: var(--offer-banner-text-color, #ffffff); } /* Title */ .offer-banner-title { font-family: var(--offer-banner-title-font-family, var(--font-family-2)); font-size: var(--offer-banner-title-font-size, var(--text-6xl)); font-weight: var(--offer-banner-title-font-weight, var(--weight-bolder)); line-height: var(--offer-banner-title-line-height, 56px); color: var(--offer-banner-title-color, var(--brand-white)); text-transform: var(--offer-banner-title-text-transform, none); margin: 0 0 0.5rem 0; } .offer-banner-title-separator { border: var(--offer-banner-title-separator-border, none); height: var(--offer-banner-title-separator-height, 1px); width: var(--offer-banner-title-separator-width, 80%); margin: 12px 0; background: var( --offer-banner-title-separator-background, linear-gradient(to right, var(--brand-white), rgba(137, 137, 137, 0.05)) ); opacity: var(--offer-banner-title-separator-opacity, 1); } /* Subtitle */ .offer-banner-subtitle { font-family: var(--offer-banner-subtitle-font-family, var(--font-family-1)); font-size: var(--offer-banner-subtitle-font-size, var(--text-md)); font-weight: var( --offer-banner-subtitle-font-weight, var(--weight-semilight) ); line-height: var(--offer-banner-subtitle-line-height, 1.5); color: var(--offer-banner-subtitle-color, var(--brand-white)); margin: 0 0 1.5rem 0; } /* ======================================== PRICE SECTION ======================================== */ .offer-banner-price-section { margin-bottom: 1.5rem; } .offer-banner-price-main { display: flex; flex-direction: column; margin-bottom: 0.75rem; } .offer-banner-price-label { font-family: var( --offer-banner-price-label-font-family, var(--font-family-2) ); font-size: var(--offer-banner-price-label-font-size, var(--text-sm)); font-weight: var( --offer-banner-price-label-font-weight, var(--weight-bolder) ); color: var(--offer-banner-price-label-color, var(--brand-white)); text-transform: none; margin-bottom: 0.25rem; } .offer-banner-price-value { font-family: var( --offer-banner-price-value-font-family, var(--font-family-2) ); font-size: var(--offer-banner-price-value-font-size, 2rem); font-weight: var( --offer-banner-price-value-font-weight, var(--weight-bolder) ); color: var(--offer-banner-price-value-color, var(--brand-white)); line-height: 1.2; } .offer-banner-price-separator { margin: 0 0.25rem; } /* Price Details */ .offer-banner-price-details { display: flex; flex-direction: column; gap: 0.25rem; } .offer-banner-price-detail-item { display: flex; align-items: center; gap: 0.5rem; } .offer-banner-price-detail-label { font-family: var( --offer-banner-price-detail-font-family, var(--font-family-1) ) !important; font-size: var(--offer-banner-price-detail-font-size, var(--text-xs)); font-weight: var( --offer-banner-price-detail-font-weight, var(--weight-semilight) ); color: var(--offer-banner-price-detail-label-color, var(--brand-white)); } .offer-banner-price-detail-value { font-family: var( --offer-banner-price-detail-font-family, var(--font-family-2) ); font-size: var(--offer-banner-price-detail-font-size, var(--text-xs)); font-weight: var( --offer-banner-price-detail-value-font-weight, var(--weight-bolder) ); color: var(--offer-banner-price-detail-value-color, var(--brand-white)); } .offer-banner-price-highlight { color: var(--offer-banner-price-highlight-color, var(--brand-white)); } /* ======================================== BUTTONS ======================================== */ .offer-banner-buttons { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; width: 72%; } .offer-banner-btn { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; font-family: var(--offer-banner-btn-font-family, var(--font-family-1)); font-size: var(--offer-banner-btn-font-size, var(--text-base)); font-weight: var(--offer-banner-btn-font-weight, var(--weight-semibold)); text-decoration: none; border-radius: var(--offer-banner-btn-border-radius, 30px); transition: all 0.3s ease; cursor: pointer; min-width: 150px; text-align: center; } .offer-banner-btn-primary { background-color: var(--offer-banner-btn-primary-bg, var(--brand)); color: var(--offer-banner-btn-primary-color, var(--brand-dark)); border: 2px solid var(--offer-banner-btn-primary-border-color, var(--brand)); } .offer-banner-btn-primary:hover { background-color: var(--offer-banner-btn-primary-hover-bg, var(--brand-dark)); color: var(--offer-banner-btn-primary-hover-color, var(--brand-white)); border: 2px solid var(--offer-banner-btn-primary-hover-border-color, var(--brand-dark)); } .offer-banner-btn-secondary { background-color: var(--offer-banner-btn-secondary-bg, transparent); color: var(--offer-banner-btn-secondary-color, var(--brand-dark)); border: 2px solid var(--offer-banner-btn-secondary-border-color, var(--gray-dark-7)); } .offer-banner-btn-secondary:hover { background-color: var( --offer-banner-btn-secondary-hover-bg, var(--gray-dark-7) ); color: var(--offer-banner-btn-secondary-hover-color, var(--brand-dark)); } /* ======================================== PAGINATION (CAROUSEL MODE) ======================================== */ .offer-banner-pagination-wrapper { position: absolute; bottom: 2rem; left: 5rem; z-index: 10; display: flex; align-items: center; } .offer-banner-pagination { display: flex; align-items: center; gap: 0.5rem; } .offer-banner-pagination .swiper-pagination-bullet { width: 16px; height: 16px; background-color: var( --offer-banner-pagination-inactive-bg, var(--gray-dark-7) ); border-color: var(--offer-banner-pagination-border-color, var(--gray-dark-7)); border-radius: 50%; opacity: 1; cursor: pointer; transition: all 0.3s ease; position: relative; } .offer-banner-pagination .swiper-pagination-bullet-active { width: var(--offer-banner-pagination-active-width, 32px); height: var(--offer-banner-pagination-active-height, 32px); background-color: var(--offer-banner-pagination-active-bg, transparent); border-color: var(--offer-banner-pagination-border-color, transparent); } .offer-banner-pagination .swiper-pagination-bullet .icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; } .offer-banner-pagination .swiper-pagination-bullet .icon svg { width: var(--offer-banner-pagination-active-play-and-pause-icon-width, 15px); height: var( --offer-banner-pagination-active-play-and-pause-icon-height, 15px ); fill: var(--offer-banner-pagination-icon-color, var(--brand-white)); margin-left: 0 !important; } /* ======================================== RESPONSIVE - TABLET (768px) ======================================== */ @media (max-width: 1365px) { .offer-banner-slide { min-height: 720px; } .offer-banner-content { padding: 4rem; max-width: 700px; min-height: 720px; } } @media (max-width: 768px) { .offer-banner-slide { min-height: auto; display: flex; flex-direction: column; } .offer-banner-media { position: relative; height: 300px; } .offer-banner-image-container::before { background: linear-gradient(to top, #000, rgba(0, 0, 0, 0.22) 20%); } .offer-banner-content { position: relative; min-height: auto; padding: 1.5rem; max-width: 100%; background-color: var(--offer-banner-mobile-content-bg, var(--brand-black)); } .offer-banner-title { font-size: var(--offer-banner-title-font-size-mobile, 2rem); line-height: var(--offer-banner-title-line-height-mobile, 2.3rem); } .offer-banner-subtitle { font-size: var(--offer-banner-subtitle-font-size-mobile, var(--text-base)); margin: 0; } .offer-banner-price-value { font-size: var(--offer-banner-price-value-font-size-mobile, 1.375rem); } .offer-banner-price-section { margin-bottom: 0; } .offer-banner-buttons { flex-direction: row; gap: 0.75rem; width: 100%; margin-top: 0.5rem; } .offer-banner-btn { flex: 1; padding: 0.875rem 1rem; font-size: 0.875rem; min-width: auto; } .offer-banner-pagination-wrapper { position: relative; bottom: auto; left: auto; justify-content: center; padding: 1rem; } .offer-banner-pagination .swiper-pagination-bullet { background: var(--offer-banner-pagination-inactive-bg-mobile, transparent); border-color: var( --offer-banner-pagination-border-color-mobile, var(--brand-black) ); } .offer-banner-pagination .swiper-pagination-bullet-active { background-color: var( --offer-banner-pagination-active-bg-mobile, transparent ); border-color: var( --offer-banner-pagination-active-border-color-mobile, #e5e5e5 ); } .offer-banner-pagination .swiper-pagination-bullet .icon svg { fill: var(--offer-banner-pagination-icon-color-mobile, #e5e5e5); } } /* ======================================== RESPONSIVE - MOBILE (360px) ======================================== */ @media (max-width: 360px) { .offer-banner-media { height: 250px; } .offer-banner-content { padding: 1rem; } .offer-banner-title { font-size: var(--offer-banner-title-font-size-small, 1.5rem); } .offer-banner-price-value { font-size: var(--offer-banner-price-value-font-size-small, 1.375rem); } .offer-banner-price-detail-item { flex-direction: column; align-items: flex-start; gap: 0; } .offer-banner-btn { padding: 0.75rem 0.5rem; font-size: 0.8125rem; } } /* ======================================== RESPONSIVE - LARGE DESKTOP (1366px+) ======================================== */ @media (min-width: 1366px) { .offer-banner-slide { min-height: 785px; } .offer-banner-content { padding: 4rem; max-width: 700px; min-height: 785px; } .offer-banner-title { font-size: var(--offer-banner-title-font-size-large, 2.5rem); } .offer-banner-price-value { font-size: var(--offer-banner-price-value-font-size-large, 2rem); } } /* ======================================== RESPONSIVE - EXTRA LARGE (1920px+) ======================================== */ @media (min-width: 1920px) { .offer-banner-slide { min-height: 785px; } .offer-banner-content { padding: 5rem; max-width: 703px; min-height: 785px; } } /* ======================================== VIDEO ONLY MODE (No text content) ======================================== */ .offer-banner-slide:has(.offer-banner-video-container):not( :has(.offer-banner-content) ) .offer-banner-media { position: relative; height: auto; aspect-ratio: 16/9; } .offer-banner-slide:has(.offer-banner-video-container):not( :has(.offer-banner-content) ) { min-height: auto; } .offer-banner-youtube-container { position: absolute; inset: 0; } .offer-banner-youtube-container iframe { width: 100%; height: 100%; border: 0; } /* ======================================== SINGLE BANNER MODE (No carousel) ======================================== */ .offer-banner-single .offer-banner-wrapper { display: block; } .offer-banner-single .offer-banner-slide { display: block; } /* ======================================== SWIPER OVERRIDES ======================================== */ .offer-banner-swiper { overflow: hidden; } .offer-banner-swiper .swiper-wrapper { display: flex; } .offer-banner-swiper .swiper-slide { flex-shrink: 0; width: 100%; } /* --- Inlined from: ./[blocklist]_components/downloadButton/downloadButton.css --- */ /* --- Inlined from: ../../[branding]_components/downloadButton.css --- */ /* Download Button - Branding Variables */ :root { /* Container */ --download-button-bg: var(--brand); --download-button-padding: 3rem 1.5rem; --download-button-padding-tablet: 2.5rem 1.25rem; --download-button-padding-mobile: 2rem 1rem; --download-button-max-width: 1920px; --download-button-text-align: center; /* Subtitle */ --download-button-subtitle-font-family: var(--font-family-2); --download-button-subtitle-font-size: 18px; --download-button-subtitle-font-weight: var(--weight-semilight); --download-button-subtitle-color: #F7F7F7; --download-button-subtitle-letter-spacing: 38%; --download-button-subtitle-margin-bottom: 24px; /* Header */ --download-button-header-font-family: var(--font-family-1); --download-button-header-font-size: 32px; --download-button-header-font-weight: var(--weight-bolder); --download-button-header-color: var(--brand-white); --download-button-header-margin-bottom: 24px; /* Description */ --download-button-description-font-family: var(--font-family-4); --download-button-description-font-size: 18px; --download-button-description-font-weight: var(--weight-semilight); --download-button-description-color: #F7F7F7; --download-button-description-margin-bottom: 24px; /* Actions Container */ --download-button-actions-gap: 20px; /* Button Base */ --download-button-btn-font-family: var(--font-family-1); --download-button-btn-font-size: 18px; --download-button-btn-font-weight: var(--weight-bolder); --download-button-btn-padding: 19px 32px; --download-button-btn-border-radius: 8px; --download-button-btn-min-width: 400px; --download-button-btn-min-width-mobile: 100%; --download-button-btn-transition: all 0.2s ease; /* Button Icon */ --download-button-icon-size: 20px; --download-button-btn-icon-gap: 10px; /* Primary Button */ --download-button-btn-primary-bg: var(--brand-white); --download-button-btn-primary-color: var(--brand-black); --download-button-btn-primary-border: 2px solid var(--brand-white); --download-button-btn-primary-icon-color: #00233a; --download-button-btn-primary-bg-hover: var(--gray-light-4); --download-button-btn-primary-color-hover: var(--brand-black); --download-button-btn-primary-icon-color-hover: var(--brand-black); --download-button-btn-primary-border-hover: 2px solid var(--gray-light-4); /* Secondary Button */ --download-button-btn-secondary-bg: transparent; --download-button-btn-secondary-color: var(--brand-white); --download-button-btn-secondary-border: 2px solid var(--brand-white); --download-button-btn-secondary-icon-color: var(--brand-white); --download-button-btn-secondary-bg-hover: #888888; --download-button-btn-secondary-color-hover: var(--brand-white); --download-button-btn-secondary-icon-color-hover: var(--brand-white); } /* Download Button - Base Styles */ .download-button { background-color: var(--download-button-bg); padding: var(--download-button-padding); width: 100%; } .download-button__container { max-width: var(--download-button-max-width); margin: 0 auto; text-align: var(--download-button-text-align); display: flex; flex-direction: column; align-items: center; } /* Subtitle */ .download-button__subtitle { font-family: var(--download-button-subtitle-font-family); font-size: var(--download-button-subtitle-font-size); font-weight: var(--download-button-subtitle-font-weight); color: var(--download-button-subtitle-color); letter-spacing: var(--download-button-subtitle-letter-spacing); text-transform: uppercase; margin-bottom: var(--download-button-subtitle-margin-bottom); } /* Header */ .download-button__header { font-family: var(--download-button-header-font-family); font-size: var(--download-button-header-font-size); font-weight: var(--download-button-header-font-weight); color: var(--download-button-header-color); margin: 0 0 var(--download-button-header-margin-bottom) 0; text-transform: uppercase; } /* Description */ .download-button__description { font-family: var(--download-button-description-font-family); font-size: var(--download-button-description-font-size); font-weight: var(--download-button-description-font-weight); color: var(--download-button-description-color); margin: 0 0 var(--download-button-description-margin-bottom) 0; max-width: 600px; } /* Actions Container */ .download-button__actions { display: flex; flex-direction: row; gap: var(--download-button-actions-gap); justify-content: center; align-items: center; flex-wrap: wrap; } /* Button Base */ .download-button__btn { font-family: var(--download-button-btn-font-family); font-size: var(--download-button-btn-font-size); font-weight: var(--download-button-btn-font-weight); padding: var(--download-button-btn-padding); border-radius: var(--download-button-btn-border-radius); min-width: var(--download-button-btn-min-width); text-decoration: none; text-align: center; cursor: pointer; transition: var(--download-button-btn-transition); display: inline-flex; justify-content: center; align-items: center; gap: var(--download-button-btn-icon-gap); } /* Download Icon */ .download-button__icon { width: var(--download-button-icon-size); height: var(--download-button-icon-size); flex-shrink: 0; transition: var(--download-button-btn-transition); } /* Primary Button */ .download-button__btn--primary { background-color: var(--download-button-btn-primary-bg); color: var(--download-button-btn-primary-color); border: var(--download-button-btn-primary-border); } .download-button__btn--primary .download-button__icon { fill: var(--download-button-btn-primary-icon-color); } .download-button__btn--primary:hover { color: var(--download-button-btn-primary-color-hover); background: var(--download-button-btn-primary-bg-hover); border: var(--download-button-btn-primary-border-hover); } .download-button__btn--primary:hover .download-button__icon { fill: var(--download-button-btn-primary-icon-color-hover); } /* Secondary Button */ .download-button__btn--secondary { background-color: var(--download-button-btn-secondary-bg); color: var(--download-button-btn-secondary-color); border: var(--download-button-btn-secondary-border); } .download-button__btn--secondary .download-button__icon { fill: var(--download-button-btn-secondary-icon-color); } .download-button__btn--secondary:hover { color: var(--download-button-btn-secondary-color-hover); background-color: var(--download-button-btn-secondary-bg-hover); } .download-button__btn--secondary:hover .download-button__icon { fill: var(--download-button-btn-secondary-icon-color-hover); } /* Responsive - Mobile */ @media (max-width: 576px) { .download-button__actions { flex-direction: column; width: 100%; } .download-button__btn { min-width: var(--download-button-btn-min-width-mobile); width: 100%; } } /* --- Inlined from: ./[blocklist]_components/accordion/accordion.css --- */ /* --- Inlined from: ../../[branding]_components/accordion.css --- */ :root { /* Surfaces */ --accordion-bg: var(--gray-dark-9); --accordion-content-bg: var(--brand-white); /* Layout (Container) */ --accordion-container-gap: var(--p-4); --accordion-container-padding-y: 1rem; --accordion-container-padding-x: var(--p-4); --accordion-container-max-width: 1200px; --accordion-margin: 6rem; /* Header Group */ --accordion-header-group-max-width: 1202px; --accordion-section-heading-margin-bottom: 1.5rem; /* Section Heading */ --accordion-section-heading-font-size: 20px; --accordion-section-heading-font-weight: var(--weight-normal); --accordion-section-heading-color: #373637; /* Accordion Title */ --accordion-title-font-family: var(--font-family-1); --accordion-title-font-size: 32px; --accordion-title-font-weight: var(--weight-bolder); --accordion-title-line-height: 1.2; --accordion-title-color: var(--brand-black); /* Description */ --accordion-description-font-family: var(--font-family-4); --accordion-description-font-size: 18px; --accordion-description-line-height: 1.5; --accordion-description-color: #373637; /* Items */ --accordion-item-border-color: var(--gray-dark-8); --accordion-item-border-width: 1px; --accordion-item-padding-y: var(--p-3); --accordion-text-padding: 1rem; --accordion-content-padding: 2.5rem; /* Header Button (Item title row) */ --accordion-header-font-family: var(--font-family-1); --accordion-header-font-size: 20px; --accordion-header-font-weight: var(--weight-bold); --accordion-header-text-color: var(--brand-black); --accordion-header-padding-y: var(--p-3); --accordion-header-open-bg: #00233A; --accordion-header-open-text-color: var(--brand-white); /* States */ --accordion-hover-bg: rgba(0, 120, 212, 0.15); --accordion-focus-color: var(--primary-color); /* Content */ --accordion-content-font-family: var(--font-family-4); --accordion-content-font-size: var(--text-md); --accordion-content-line-height: 1.5; --accordion-content-margin-top: var(--p-3); --accordion-content-text-color: #373637; /* Chevron */ --accordion-chevron-transition: 0.3s ease; } /* ≥ 1200px — Desktop */ @media (min-width: 1200px) { :root { --accordion-margin: 6rem; --accordion-container-padding-x: var(--p-4); --accordion-header-group-max-width: 1202px; } } @media (min-width: 1199px) and (max-width: 1366px) { :root { --accordion-title-font-size: 28px; } } /* 992px – 1199px — Laptop */ @media (min-width: 992px) and (max-width: 1199px) { :root { --accordion-title-font-size: var(--text-2xl); --accordion-margin: 4rem; --accordion-container-padding-x: var(--p-4); --accordion-header-group-max-width: 760px; } } /* 768px – 991px — Tablet */ @media (min-width: 768px) and (max-width: 991px) { :root { --accordion-title-font-size: 22px; --accordion-margin: 3rem; --accordion-container-padding-x: var(--p-3); --accordion-header-group-max-width: 680px; --accordion-description-font-size: 16px; } } /* ≤ 767px — Mobile */ @media (max-width: 767px) { :root { --accordion-title-font-size: 20px; --accordion-section-heading-font-size: 12px; --accordion-description-font-size: 14px; --accordion-header-font-size: 16px; --accordion-content-font-size: 16px; --accordion-margin: 1.25rem; --accordion-container-padding-x: 0.5rem; --accordion-container-padding-y: 0.75rem; --accordion-header-group-max-width: 100%; --accordion-container-gap: var(--p-3); --accordion-content-margin-top: var(--p-3); --accordion-header-padding-y: var(--p-4); --accordion-item-padding-y: var(--p-4); --accordion-content-padding: 2rem; } } /* ≤ 360px — Small phones */ @media (max-width: 360px) { :root { --accordion-title-font-size: var(--text-base); --accordion-margin: 1rem; --accordion-container-padding-x: 0.25rem; --accordion-container-padding-y: 0.5rem; } } /* Wrapper */ .accordion { width: 100%; display: flex; justify-content: center; background-color: var(--accordion-bg); } /* Container */ .accordion__container { display: flex; flex-direction: column; gap: var(--accordion-container-gap); width: 100%; max-width: var(--accordion-container-max-width); font-family: var(--accordion-header-font-family); color: var(--accordion-header-text-color); margin: var(--accordion-margin); background-color: #f1f1f1; } /* Header group */ .accordion__header-group { text-align: center; margin: 0 auto var(--p-4); max-width: var(--accordion-header-group-max-width); padding: var(--accordion-container-padding-y) var(--accordion-container-padding-x); background-color: var(--accordion-header-group-bg, #f1f1f1); } /* Section heading */ .accordion__section-heading { font-family: var(--accordion-section-heading-font-family, var(--font-family-2)); font-size: var(--accordion-section-heading-font-size); font-weight: var(--accordion-section-heading-font-weight); color: var(--accordion-section-heading-color); margin: var(--accordion-section-heading-margin-bottom); background: transparent; text-align: inherit; letter-spacing: 5px; } /* Main title */ .accordion__title { font-family: var(--accordion-title-font-family); font-size: var(--accordion-title-font-size); font-weight: var(--accordion-title-font-weight); margin: var(--accordion-section-heading-margin-bottom); line-height: var(--accordion-title-line-height); color: var(--accordion-title-color); background: transparent; text-align: inherit; } /* Description text */ .accordion__description { font-family: var(--accordion-description-font-family, var(--font-family-1)); font-size: var(--accordion-description-font-size); line-height: var(--accordion-description-line-height); color: var(--accordion-description-color); margin: 0; background: transparent; text-align: inherit; } .accordion__cta { display: inline-flex; margin-top: var(--p-3); font-family: var(--accordion-header-font-family); font-size: var(--accordion-description-font-size); color: var(--brand, var(--primary-color)); text-decoration: underline; } /* Items list */ .accordion__items { display: flex; flex-direction: column; background: transparent; } /* Individual item */ .accordion__item { border: 0; border-bottom: var(--accordion-item-border-width) solid var(--accordion-item-border-color); background-color: var(--accordion-content-bg); } .accordion__item:first-child { border-top: var(--accordion-item-border-width) solid var(--accordion-item-border-color); } .accordion__item:last-child { border-bottom: none; } /* Header button */ .accordion__header { background-color: var(--accordion-content-bg); border: none; width: 100%; padding: var(--accordion-header-padding-y) var(--accordion-text-padding); display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: var(--accordion-header-font-size); font-weight: var(--accordion-header-font-weight); font-family: var(--accordion-header-font-family); color: var(--accordion-header-text-color); appearance: none; -webkit-appearance: none; } /* Hover state */ .accordion__header:hover { background-color: var(--accordion-header-open-bg); color: var(--accordion-header-open-text-color); } /* Focus and active (not expanded) */ .accordion__header:focus:not([aria-expanded="true"]), .accordion__header:active:not([aria-expanded="true"]) { background-color: var(--accordion-content-bg); color: var(--accordion-header-text-color); outline: none; } /* Focus ring */ .accordion__header:focus-visible { outline: 2px solid var(--accordion-focus-color); outline-offset: 2px; } /* Chevron rotation */ .accordion__header svg { transition: transform var(--accordion-chevron-transition); fill: currentColor; } .accordion__header[aria-expanded="true"] svg { transform: rotate(180deg); } /* Expanded content */ .accordion__content { font-family: var(--accordion-content-font-family); font-size: var(--accordion-content-font-size); line-height: var(--accordion-content-line-height); color: var(--accordion-content-text-color); background-color: var(--accordion-content-bg); padding: var(--accordion-content-padding); } /* Open state */ .accordion__item.is-open .accordion__header { background-color: var(--accordion-header-open-bg); color: var(--accordion-header-open-text-color); } .accordion__item.is-open .accordion__content { background-color: var(--accordion-content-bg); } .accordion__content[hidden] { max-height: 0; opacity: 0; overflow: hidden; } .accordion__content:not([hidden]) { max-height: none; opacity: 1; } .accordion__header[aria-expanded="true"] { background-color: var(--accordion-header-open-bg); color: var(--accordion-header-open-text-color); } .accordion__header-text { font-weight: var(--weight-bolder, 700); padding-left: var(--accordion-text-padding); padding-right: var(--accordion-text-padding); } /* --- Inlined from: ./[blocklist]_components/quickActionMenu/quickActionMenu.css --- */ /* --- Inlined from: ../../[branding]_components/quickActionMenu.css --- */ :root { /* Layout */ --quick-action-menu-z-index: 1000; --quick-action-menu-position: fixed; --quick-action-menu-top: 35%; --quick-action-menu-right: 0; --quick-action-menu-bottom: auto; --quick-action-menu-left: auto; --quick-action-menu-transform: translateY(-50%); --quick-action-menu-width: auto; --quick-action-menu-display: flex; --quick-action-menu-align-items: stretch; --quick-action-menu-gap: 0.5rem; --quick-action-menu-pointer-events: auto; /* Typography and Icons */ --quick-action-menu-font-family: var(--font-family-4); --quick-action-menu-icon-size: 24px; --quick-action-menu-item-icon-size: 20px; --quick-action-menu-transition: 0.4s ease; --quick-action-menu-focus-color: var(--hover-dark); /* Toggle */ --quick-action-menu-toggle-min-height: auto; --quick-action-menu-toggle-display: flex; --quick-action-menu-toggle-bg: var(--brand-black); --quick-action-menu-toggle-text-color: var(--brand-white); --quick-action-menu-toggle-radius: 4px 0 0 4px; --quick-action-menu-toggle-gap: 0.4rem; --quick-action-menu-toggle-font-size: 0.875rem; --quick-action-menu-toggle-letter-spacing: 0.06em; --quick-action-menu-toggle-text-transform: uppercase; --quick-action-menu-toggle-shadow: 0 8px 16px rgba(0, 0, 0, 0.18); --quick-action-menu-toggle-open-opacity: 1; --quick-action-menu-toggle-open-pointer-events: auto; --quick-action-menu-toggle-open-transform: translateX(0); /* Panel */ --quick-action-menu-panel-bg: var(--gray-dark-9); --quick-action-menu-panel-min-height: auto; --quick-action-menu-panel-height: auto; --quick-action-menu-panel-shadow: 0 10px 18px rgba(0, 0, 0, 0.2); --quick-action-menu-panel-opacity: 1; --quick-action-menu-panel-list-style: none; --quick-action-menu-panel-margin: 0; --quick-action-menu-panel-display: flex; --quick-action-menu-panel-flex-direction: column; --quick-action-menu-panel-open-max-width: 130px; --quick-action-menu-panel-open-opacity: 1; /* Items */ --quick-action-menu-item-gap: 0; --quick-action-menu-item-padding: 0.5rem 0.5rem; --quick-action-menu-item-radius: 0; --quick-action-menu-item-bg: var(--gray-dark-9); --quick-action-menu-item-bg-hover: var(--brand-black); --quick-action-menu-item-text-color: var(--gray-dark-2); --quick-action-menu-item-text-color-hover: var(--brand-white); --quick-action-menu-item-font-size: 12px; --quick-action-menu-item-min-height: 56px; } @media (max-width: 575.98px) { :root { --quick-action-menu-position: fixed; --quick-action-menu-top: auto; --quick-action-menu-right: 0; --quick-action-menu-bottom: 0; --quick-action-menu-left: 0; --quick-action-menu-transform: none; --quick-action-menu-width: 100%; --quick-action-menu-align-items: stretch; --quick-action-menu-toggle-display: none; --quick-action-menu-panel-min-height: 0; --quick-action-menu-panel-height: 56px; --quick-action-menu-panel-opacity: 1; --quick-action-menu-panel-shadow: none; --quick-action-menu-panel-flex-direction: row; --quick-action-menu-panel-open-opacity: 1; --quick-action-menu-item-min-height: 44px; } } /* <= 768px - Tablet */ @media (max-width: 768px) { :root { --quick-action-menu-icon-size: 20px; --quick-action-menu-item-icon-size: 18px; --quick-action-menu-panel-min-width: 140px; --quick-action-menu-item-font-size: 0.75rem; } } /* <= 420px - Small phones */ @media (max-width: 420px) { :root { --quick-action-menu-icon-size: 18px; --quick-action-menu-item-icon-size: 16px; --quick-action-menu-panel-min-width: 90px; --quick-action-menu-panel-width: 90px; --quick-action-menu-panel-height: auto; --quick-action-menu-item-min-height: 64px; --quick-action-menu-item-font-size: 0.7rem; } } @media (max-width: 575.98px) { .quick-action-menu { position: fixed !important; top: auto !important; bottom: var(--quick-action-menu-bottom) !important; left: 0 !important; right: 0 !important; transform: none !important; width: 100% !important; z-index: var(--quick-action-menu-z-index) !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; height: 56px !important; } .quick-action-menu__nav { display: flex !important; align-items: stretch !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; } .quick-action-menu__toggle { display: none !important; } .quick-action-menu__panel { position: static !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 56px !important; right: auto !important; top: auto !important; transform: none !important; opacity: 1 !important; clip-path: none !important; border-radius: 0 !important; box-shadow: none !important; flex-direction: row !important; justify-content: space-around !important; align-items: stretch !important; padding: 0 0.5rem !important; margin: 0 !important; } .quick-action-menu__item { flex: 1 1 0 !important; } .quick-action-menu__link { min-height: 44px !important; padding: 0.5rem 0.25rem !important; height: 56px !important; } } /* Layout */ .quick-action-menu { position: var(--quick-action-menu-position); top: var(--quick-action-menu-top); right: var(--quick-action-menu-right); bottom: var(--quick-action-menu-bottom); left: var(--quick-action-menu-left); transform: var(--quick-action-menu-transform); z-index: var(--quick-action-menu-z-index); display: var(--quick-action-menu-display); align-items: var(--quick-action-menu-align-items); gap: var(--quick-action-menu-gap); pointer-events: var(--quick-action-menu-pointer-events); width: var(--quick-action-menu-width); } /* Nav */ .quick-action-menu__nav { display: var(--quick-action-menu-display); align-items: var(--quick-action-menu-align-items); gap: 0; position: relative; flex-direction: row; } /* Toggle */ .quick-action-menu__toggle { pointer-events: auto; display: var(--quick-action-menu-toggle-display); flex-direction: column; align-items: center; gap: var(--quick-action-menu-toggle-gap); min-height: var(--quick-action-menu-toggle-min-height); border: none; border-radius: var(--quick-action-menu-toggle-radius); background-color: var(--quick-action-menu-toggle-bg); color: var(--quick-action-menu-toggle-text-color); font-family: var(--quick-action-menu-font-family); font-size: var(--quick-action-menu-toggle-font-size); box-shadow: var(--quick-action-menu-toggle-shadow); cursor: pointer; border-right: 0; justify-content: center; transform: translateX(0); transition: transform var(--quick-action-menu-transition), opacity var(--quick-action-menu-transition); } /* Toggle focus */ .quick-action-menu__toggle:focus-visible { outline: 2px solid var(--quick-action-menu-focus-color); outline-offset: 2px; } /* Toggle icon */ .quick-action-menu__toggle-icon svg { width: var(--quick-action-menu-icon-size); height: var(--quick-action-menu-icon-size); fill: currentColor; } .quick-action-menu__toggle-icon svg { width: 14px; height: 14px; } /* Toggle text */ .quick-action-menu__toggle-text { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: var(--quick-action-menu-toggle-letter-spacing); text-align: center; } /* Toggle open state */ .quick-action-menu--open .quick-action-menu__toggle { opacity: var(--quick-action-menu-toggle-open-opacity); pointer-events: var(--quick-action-menu-toggle-open-pointer-events); transform: var(--quick-action-menu-toggle-open-transform); } /* Toggle chevron */ .quick-action-menu__toggle-chevron { display: inline-flex; transition: transform var(--quick-action-menu-transition); } .quick-action-menu__toggle-chevron svg { width: 14px; height: 14px; } /* Toggle chevron open state */ .quick-action-menu--open .quick-action-menu__toggle-chevron { transform: rotate(180deg); } /* Panel */ .quick-action-menu__panel { pointer-events: auto; flex-shrink: 0; min-width: 0; min-height: var(--quick-action-menu-panel-min-height); height: var(--quick-action-menu-panel-height); padding: var(--quick-action-menu-panel-padding); background-color: var(--quick-action-menu-panel-bg); box-shadow: var(--quick-action-menu-panel-shadow); opacity: var(--quick-action-menu-panel-opacity); max-width: 0; overflow: hidden; transition: max-width var(--quick-action-menu-transition); list-style: var(--quick-action-menu-panel-list-style); margin: var(--quick-action-menu-panel-margin); display: var(--quick-action-menu-panel-display); flex-direction: var(--quick-action-menu-panel-flex-direction); justify-content: var(--quick-action-menu-panel-justify); align-items: var(--quick-action-menu-panel-align); gap: var(--quick-action-menu-item-gap); } /* Panel hidden state */ .quick-action-menu__panel[hidden] { display: none; } /* Panel open state */ .quick-action-menu--open .quick-action-menu__panel { max-width: var(--quick-action-menu-panel-open-max-width); overflow: visible; opacity: var(--quick-action-menu-panel-open-opacity); } /* Items */ .quick-action-menu__item { display: block; width: 100%; } /* Links */ .quick-action-menu__link { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; gap: var(--p-2); padding: var(--quick-action-menu-item-padding); text-decoration: none; border: none; appearance: none; color: var(--quick-action-menu-item-text-color); background-color: var(--quick-action-menu-item-bg); font-family: var(--quick-action-menu-font-family); font-size: var(--quick-action-menu-item-font-size); text-transform: uppercase; font-weight: var(--weight-semibold); transition: background-color var(--quick-action-menu-transition), color var(--quick-action-menu-transition); text-align: center; min-height: var(--quick-action-menu-item-min-height); min-width: 44px; justify-content: center; cursor: pointer; } /* Link focus */ .quick-action-menu__link:focus-visible { outline: 2px solid var(--quick-action-menu-focus-color); outline-offset: 2px; } /* Link hover */ .quick-action-menu__link:hover { background-color: var(--quick-action-menu-item-bg-hover); color: var(--quick-action-menu-item-text-color-hover); } /* Link disabled */ .quick-action-menu__link--disabled { cursor: default; opacity: 0.6; } /* Icons */ .quick-action-menu__icon { display: inline-flex; align-items: center; justify-content: center; } .quick-action-menu__icon svg { width: var(--quick-action-menu-item-icon-size); height: var(--quick-action-menu-item-icon-size); stroke: currentColor; fill: none; } @media (hover: hover) and (min-width: 992px) { .quick-action-menu__panel[hidden] { display: flex !important; } .quick-action-menu__panel { pointer-events: none; } .quick-action-menu:hover .quick-action-menu__panel, .quick-action-menu:focus-within .quick-action-menu__panel { max-width: var(--quick-action-menu-panel-open-max-width); overflow: visible; opacity: var(--quick-action-menu-panel-open-opacity); pointer-events: auto; } .quick-action-menu:hover .quick-action-menu__toggle, .quick-action-menu:focus-within .quick-action-menu__toggle { opacity: var(--quick-action-menu-toggle-open-opacity); pointer-events: var(--quick-action-menu-toggle-open-pointer-events); transform: var(--quick-action-menu-toggle-open-transform); } } /* --- Inlined from: ./[blocklist]_components/iframe/iframe.css --- */ /* --- Inlined from: ../../[branding]_components/iframe.css --- */ /* Desktop 1920 */ :root { /* SECTION / WRAPPER */ --iframe-section-padding: 5rem; --iframe-section-max-width: 1920px; --iframe-section-margin: 0 auto; /* IFRAME CONTAINER */ --iframe-container-width: 100%; --iframe-container-max-width: 100%; /* IFRAME */ --iframe-aspect-ratio: 16 / 9; --iframe-width: 100%; --iframe-height: auto; --iframe-min-height: 400px; /* BORDER */ --iframe-border-width: 2px; --iframe-border-style: solid; --iframe-border-color: var(--gray-dark-7); --iframe-border-radius: 0; } /* Large Desktop 1700px */ @media (max-width: 1700px) { :root { --iframe-section-padding: 4rem; } } /* Desktop 1366px */ @media (max-width: 1366px) { :root { --iframe-section-padding: 3rem; --iframe-min-height: 350px; } } /* Tablet 768px */ @media (max-width: 768px) { :root { --iframe-section-padding: 2rem; --iframe-min-height: 280px; } } /* Mobile 576px */ @media (max-width: 576px) { :root { --iframe-section-padding: 1rem; --iframe-min-height: 200px; } } /* IFRAME Section */ .iframe-content { padding: var(--iframe-section-padding); max-width: var(--iframe-section-max-width); margin: var(--iframe-section-margin); width: var(--iframe-container-width); box-sizing: border-box; overflow: hidden; } /* IFRAME Element - Base Styles */ .iframe-content > iframe { display: block; border: none; max-width: 100%; } /* Responsive Mode - Uses aspect ratio */ .iframe-content--responsive > iframe { width: var(--iframe-width); max-width: var(--iframe-container-max-width); aspect-ratio: var(--iframe-aspect-ratio); min-height: var(--iframe-min-height); height: var(--iframe-height); } /* Fixed Mode - Uses inline width/height from CMS */ .iframe-content--fixed > iframe { max-width: 100%; } /* Border Modifier */ .iframe-content--with-border > iframe { border: var(--iframe-border-width) var(--iframe-border-style) var(--iframe-border-color); border-radius: var(--iframe-border-radius); } /* Tablet adjustments */ @media (max-width: 768px) { .iframe-content { overflow-x: hidden; } .iframe-content > iframe { width: 100%; max-width: 100%; } /* Fixed mode: scale down on tablet */ .iframe-content--fixed > iframe { width: 100% !important; height: auto !important; aspect-ratio: var(--iframe-aspect-ratio); min-height: var(--iframe-min-height); } } /* Mobile adjustments */ @media (max-width: 576px) { .iframe-content > iframe { width: 100%; aspect-ratio: var(--iframe-aspect-ratio); } /* Fixed mode: full width on mobile */ .iframe-content--fixed > iframe { width: 100% !important; height: auto !important; min-height: var(--iframe-min-height); } } /* --- Inlined from: ./[blocklist]_components/largeMainBanner/largeMainBanner.css --- */ /* Import Component Variables */ /* --- Inlined from: ../../[branding]_components/largeMainBanner.css --- */ /* ======================================== OFFER BANNER - BRAND VARIABLES ======================================== Override these variables in brand-specific themes ======================================== */ :root { /* ======================================== GENERAL ======================================== */ --large-main-banner-text-color: var(--brand-white); --large-main-banner-overlay-gradient: none; --large-main-banner-mobile-content-bg: var(--brand-black); /* ======================================== TITLE ======================================== */ --large-main-banner-title-font-family: var(--font-family-2); --large-main-banner-title-font-size: 3.125rem; --large-main-banner-title-font-size-mobile: 2rem; --large-main-banner-title-font-size-small: 2.125rem; --large-main-banner-title-font-size-large: var(--text-5xl); --large-main-banner-title-font-weight: var(--weight-bolder); --large-main-banner-title-line-height: 56px; --large-main-banner-title-line-height-mobile: 2.3rem; --large-main-banner-title-color: var(--brand-white); --large-main-banner-title-text-transform: none; /* ======================================== SUBTITLE ======================================== */ --large-main-banner-subtitle-font-family: var(--font-family-2); --large-main-banner-subtitle-font-size: var(--text-xl); /* --large-main-banner-subtitle-font-size-mobile: var(--text-base); */ --large-main-banner-subtitle-font-size-small: var(--text-base); --large-main-banner-subtitle-font-weight: var(--weight-semilight); --large-main-banner-subtitle-line-height: 1.5; --large-main-banner-subtitle-color: var(--brand-white); /* ======================================== PRICE LABEL ======================================== */ --large-main-banner-price-label-font-family: var(--font-family-2); --large-main-banner-price-label-font-size: var(--text-sm); --large-main-banner-price-label-font-weight: var(--weight-bolder); --large-main-banner-price-label-color: var(--brand-white); /* ======================================== PRICE VALUE ======================================== */ --large-main-banner-price-value-font-family: var(--font-family-2); --large-main-banner-price-value-font-size: 2rem; --large-main-banner-price-value-font-size-mobile: 1.375rem; --large-main-banner-price-value-font-size-small: 1.375rem; --large-main-banner-price-value-font-size-large: 2rem; --large-main-banner-price-value-font-weight: var(--weight-bolder); --large-main-banner-price-value-color: var(--brand-white); /* ======================================== PRICE DETAILS ======================================== */ --large-main-banner-price-detail-font-family: var(--font-family-2); --large-main-banner-price-detail-font-size: var(--text-xs); --large-main-banner-price-detail-font-weight: var(--weight-semilight); --large-main-banner-price-detail-value-font-weight: var(--weight-bolder); --large-main-banner-price-detail-label-color: var(--brand-white); --large-main-banner-price-detail-value-color: var(--brand-white); --large-main-banner-price-highlight-color: var(--brand-white); /* ======================================== BUTTONS ======================================== */ --large-main-banner-btn-font-family: var(--font-family-1); --large-main-banner-btn-font-size: var(--text-md); --large-main-banner-btn-font-weight: var(--weight-bolder); --large-main-banner-btn-border-radius: 8px; /* Primary Button (Outlined) */ --large-main-banner-btn-primary-bg: var(--brand); --large-main-banner-btn-primary-color: var(--brand-white); --large-main-banner-btn-primary-border-color: var(--brand); --large-main-banner-btn-primary-hover-bg: #888888; --large-main-banner-btn-primary-hover-color: var(--brand-white); --large-main-banner-btn-primary-hover-border-color: #888888; /* Secondary Button (Filled) */ --large-main-banner-btn-secondary-bg: var(--brand-white); --large-main-banner-btn-secondary-color: var(--brand-black); --large-main-banner-btn-secondary-border-color: var(--brand-white); --large-main-banner-btn-secondary-hover-bg: var(--gray-dark-7); --large-main-banner-btn-secondary-hover-color: var(--brand-black); --large-main-banner-btn-secondary-hover-border-color: var(--gray-dark-7); /* ======================================== BADGES ======================================== */ --large-main-banner-badge-width: 100px; /* ======================================== PAGINATION (CAROUSEL) ======================================== */ --large-main-banner-pagination-inactive-bg: var(--gray-dark-7); --large-main-banner-pagination-inactive-bg-mobile: transparent; --large-main-banner-pagination-active-bg: transparent; --large-main-banner-pagination-active-bg-mobile: transparent; --large-main-banner-pagination-border-color: var(--gray-dark-7); --large-main-banner-pagination-border-color-mobile: var(--brand-black); --large-main-banner-pagination-icon-color: var(--brand-white); --large-main-banner-pagination-icon-color-mobile: var(--brand); /* Breakpoint logic is handled in offerBanner.js */ --large-main-banner-pagination-trail-color: #838383; --large-main-banner-pagination-trail-color-mobile: var(--brand-white); --large-main-banner-pagination-color: var(--brand-white); --large-main-banner-pagination-color-mobile: var(--brand); --large-main-banner-pagination-active-width: 32px; --large-main-banner-pagination-active-height: 32px; --large-main-banner-pagination-active-play-and-pause-icon-width: 15px; --large-main-banner-pagination-active-play-and-pause-icon-height: 15px; } /* ======================================== LARGE MAIN BANNER COMPONENT ======================================== */ .large-main-banner-section { position: relative; width: 100%; overflow: hidden; } .large-main-banner-container { position: relative; width: 100%; display: flex; flex-direction: column; gap: 0; max-width: 1920px; margin: 0 auto; } .large-main-banner-slide { position: relative; width: 100%; min-height: 640px; background: linear-gradient( to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 70% ); } /* ======================================== BACKGROUND MEDIA ======================================== */ .large-main-banner-media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .large-main-banner-image-container, .large-main-banner-video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .large-main-banner-image-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--large-main-banner-overlay-gradient); z-index: 2; } .large-main-banner-image { width: 100%; height: 100%; object-fit: cover; } .large-main-banner-video { width: 100%; height: 100%; object-fit: cover; } /* ======================================== TEXT CONTENT ======================================== */ .large-main-banner-content { position: absolute; z-index: 2; display: flex; flex-direction: column; padding: 3rem 5rem; color: var(--large-main-banner-text-color); } /* ======================================== POSITIONING VARIANTS ======================================== */ /* Center-Bottom Position */ .large-main-banner-content--center-bottom { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; text-align: center; width: 100%; } /* Center-Bottom with pagination (carousel mode) */ .large-main-banner-carousel .large-main-banner-content--center-bottom { bottom: 3rem; } .large-main-banner-content--center-bottom .large-main-banner-price-details { align-items: center; } .large-main-banner-content--center-bottom .large-main-banner-buttons { justify-content: center; } .large-main-banner-content--center-bottom .large-main-banner-subtitle { margin: 0; } .large-main-banner-content--center-bottom .large-main-banner-content { padding: 3rem 5.5rem; } /* Center-Center Position */ .large-main-banner-content--center-center { top: 50%; left: 50%; transform: translate(-50%, -50%); align-items: center; text-align: center; width: 100%; padding: 3rem 5rem; } .large-main-banner-content--center-center .large-main-banner-buttons, .large-main-banner-content--center-center .large-main-banner-price-detail-item { justify-content: center; } /* Center-Left Position */ .large-main-banner-content--center-left { top: 50%; transform: translateY(-50%); align-items: flex-start; text-align: left; } /* Bottom-Left Position */ .large-main-banner-carousel .large-main-banner-content--bottom-left { bottom: 3rem; } .large-main-banner-content--bottom-left { bottom: 2.5rem; align-items: flex-start; text-align: left; } /* Title */ .large-main-banner-title { font-family: var(--large-main-banner-title-font-family); font-size: var(--large-main-banner-title-font-size); font-weight: var(--large-main-banner-title-font-weight); line-height: var(--large-main-banner-title-line-height); color: var(--large-main-banner-title-color); text-transform: var(--large-main-banner-title-text-transform); margin: 0; } /* Subtitle */ .large-main-banner-subtitle { font-family: var(--large-main-banner-subtitle-font-family); font-size: var(--large-main-banner-subtitle-font-size); font-weight: var(--large-main-banner-subtitle-font-weight); line-height: var(--large-main-banner-subtitle-line-height); color: var(--large-main-banner-subtitle-color); margin: 0 0 1.5rem 0; } /* ======================================== PRICE SECTION ======================================== */ .large-main-banner-price-main { display: flex; flex-direction: column; margin-bottom: 0.75rem; } .large-main-banner-price-label { font-family: var(--large-main-banner-price-label-font-family); font-size: var(--large-main-banner-price-label-font-size); font-weight: var(--large-main-banner-price-label-font-weight); color: var(--large-main-banner-price-label-color); text-transform: none; margin-bottom: 0.25rem; } .large-main-banner-price-value { font-family: var(--large-main-banner-price-value-font-family); font-size: var(--large-main-banner-price-value-font-size); font-weight: var(--large-main-banner-price-value-font-weight); color: var(--large-main-banner-price-value-color); line-height: 1.2; } .large-main-banner-price-separator { font-family: var(--large-main-banner-price-value-font-family); font-size: var(--large-main-banner-price-value-font-size); font-weight: var(--large-main-banner-price-value-font-weight); color: var(--large-main-banner-price-value-color); } /* Price Details */ .large-main-banner-price-details { display: flex; flex-direction: column; gap: 0.25rem; } .large-main-banner-price-detail-item { display: flex; align-items: center; gap: 0.5rem; } .large-main-banner-price-detail-label { font-family: var(--large-main-banner-price-detail-font-family); font-size: var(--large-main-banner-price-detail-font-size); font-weight: var(--large-main-banner-price-detail-font-weight); color: var(--large-main-banner-price-detail-label-color); } .large-main-banner-price-detail-value { font-family: var(--large-main-banner-price-detail-font-family); font-size: var(--large-main-banner-price-detail-font-size); font-weight: var(--large-main-banner-price-detail-value-font-weight); color: var(--large-main-banner-price-detail-value-color); } .large-main-banner-price-highlight { color: var(--large-main-banner-price-highlight-color); } /* ======================================== BUTTONS ======================================== */ .large-main-banner-buttons { display: flex; gap: 3rem; width: 72%; } .large-main-banner-btn { display: inline-flex; align-items: center; justify-content: center; /* padding: 1rem 2rem; */ font-family: var(--large-main-banner-btn-font-family); font-size: var(--large-main-banner-btn-font-size); font-weight: var(--large-main-banner-btn-font-weight); text-decoration: none; border-radius: var(--large-main-banner-btn-border-radius); transition: all 0.3s ease; cursor: pointer; max-width: 100%; width: 193px; max-height: 100%; height: 60px; text-align: center; } .large-main-banner-btn-primary { background-color: var(--large-main-banner-btn-primary-bg); color: var(--large-main-banner-btn-primary-color); border: 2px solid var(--large-main-banner-btn-primary-border-color); } .large-main-banner-btn-primary:hover { background-color: var(--large-main-banner-btn-primary-hover-bg); color: var(--large-main-banner-btn-primary-hover-color); border: 2px solid var(--large-main-banner-btn-primary-hover-border-color); } .large-main-banner-btn-secondary { background-color: var(--large-main-banner-btn-secondary-bg); color: var(--large-main-banner-btn-secondary-color); border: 2px solid var(--large-main-banner-btn-secondary-border-color); } .large-main-banner-btn-secondary:hover { background-color: var(--large-main-banner-btn-secondary-hover-bg); color: var(--large-main-banner-btn-secondary-hover-color); border: 2px solid var(--large-main-banner-btn-secondary-hover-border-color); } /* ======================================== PAGINATION (CAROUSEL MODE) ======================================== */ .large-main-banner-pagination-wrapper { position: absolute; bottom: 2rem; left: 5rem; z-index: 10; display: flex; align-items: center; } .large-main-banner-pagination { display: flex; align-items: center; gap: 0.5rem; } .large-main-banner-pagination .swiper-pagination-bullet { width: 16px; height: 16px; background-color: var(--large-main-banner-pagination-inactive-bg); border-color: var(--large-main-banner-pagination-border-color); border-radius: 50%; opacity: 1; cursor: pointer; transition: all 0.3s ease; position: relative; } .large-main-banner-pagination .swiper-pagination-bullet-active { width: var(--large-main-banner-pagination-active-width); height: var(--large-main-banner-pagination-active-height); background-color: var(--large-main-banner-pagination-active-bg); border-color: var(--large-main-banner-pagination-border-color); } .large-main-banner-pagination .swiper-pagination-bullet .icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; } .large-main-banner-pagination .swiper-pagination-bullet .icon svg { width: var(--large-main-banner-pagination-active-play-and-pause-icon-width); height: var(--large-main-banner-pagination-active-play-and-pause-icon-height); fill: var(--large-main-banner-pagination-icon-color); margin-left: 0 !important; } /* ======================================== RESPONSIVE - DESKTOP (1366px - 1919px) ======================================== */ @media (max-width: 1919px) and (min-width: 769px) { .large-main-banner-slide { min-height: 1118px; } .large-main-banner-content--center-bottom, .large-main-banner-content--bottom-left { bottom: 1rem; } .large-main-banner-content--center-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .large-main-banner-content--center-left { top: 50%; transform: translateY(-50%); } } /* ======================================== RESPONSIVE - TABLET (768px) ======================================== */ @media (max-width: 768px) { .large-main-banner-slide { display: flex; flex-direction: column; } .large-main-banner-media { position: relative; height: 1118px; } .large-main-banner-image-container::before { background: none; } .large-main-banner-content { padding: 1.5rem; max-width: 100%; } /* Center-left position */ .large-main-banner-content--center-left .large-main-banner-content { padding: 1.5rem 2rem; } .large-main-banner-subtitle { margin: 0 0 1rem 0; font-size: 1.5rem; } .large-main-banner-price-value, .large-main-banner-price-separator { font-size: var(--large-main-banner-price-value-font-size-mobile, 1.375rem); } /* Stacked buttons on mobile */ .large-main-banner-buttons { gap: 0.75rem; margin-top: 0.5rem; } /* .large-main-banner-btn { padding: 0.875rem 1rem; min-width: auto; } */ .large-main-banner-pagination-wrapper { position: relative; bottom: auto; left: auto; justify-content: center; padding: 1rem; } .large-main-banner-pagination .swiper-pagination-bullet { background: var(--large-main-banner-pagination-inactive-bg-mobile); border-color: var(--large-main-banner-pagination-border-color-mobile); } .large-main-banner-pagination .swiper-pagination-bullet-active { background-color: var(--large-main-banner-pagination-active-bg-mobile); border-color: var( --large-main-banner-pagination-active-border-color-mobile ); } .large-main-banner-pagination .swiper-pagination-bullet .icon svg { fill: var(--large-main-banner-pagination-icon-color-mobile); } .large-main-banner-pagination { justify-content: center; } } /* ======================================== RESPONSIVE - MOBILE (576px) ======================================== */ @media (max-width: 576px) { .large-main-banner-media { height: 640px; } .large-main-banner-content, .large-main-banner-content--center-bottom, .large-main-banner-content--center-center, .large-main-banner-content--center-left, .large-main-banner-content--bottom-left { padding: 1.2rem; } .large-main-banner-title { font-size: var(--large-main-banner-title-font-size-small); line-height: 2.5rem; } .large-main-banner-subtitle { font-size: 1rem; } .large-main-banner-subtitle p { margin: 0; } .large-main-banner-price-value, .large-main-banner-price-separator { font-size: var(--large-main-banner-price-value-font-size-small); } .large-main-banner-price-detail-item { align-items: center; gap: 0; } .large-main-banner-buttons { flex-direction: column; align-items: center; width: 100%; } .large-main-banner-btn { /* padding: 0.75rem 0.5rem; */ font-size: 1rem; font-weight: var(--weight-bold); min-width: 312px; height: 48px; } /* Center-bottom position */ .large-main-banner-content--center-bottom .large-main-banner-buttons { flex-direction: column; } } /* ======================================== RESPONSIVE - LARGE DESKTOP (1920px+) ======================================== */ @media (min-width: 1920px) { .large-main-banner-slide { min-height: 1118px; } } /* ================= VIDEO ONLY MODE ================ */ .large-main-banner-slide:has(.large-main-banner-video-container):not( :has(.large-main-banner-content) ) .large-main-banner-media { position: relative; height: auto; aspect-ratio: 16/9; } .large-main-banner-slide:has(.large-main-banner-video-container):not( :has(.large-main-banner-content) ) { min-height: auto; } .large-main-banner-youtube-container { position: absolute; inset: 0; } .large-main-banner-youtube-container iframe { width: 100%; height: 100%; border: 0; } /* ======================================== BADGES ======================================== */ .large-main-banner-badges { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 0.5rem; } /* Single badge: centered horizontally, top or bottom from position */ .large-main-banner-badges--single.large-main-banner-badges--top { top: 2rem; left: 50%; transform: translateX(-50%); align-items: center; } .large-main-banner-badges--single.large-main-banner-badges--bottom { bottom: 2rem; left: 50%; transform: translateX(-50%); align-items: center; } /* Double badges: stacked at the chosen corner */ .large-main-banner-badges--double.large-main-banner-badges--top-left { top: 2rem; left: 2rem; align-items: flex-start; } .large-main-banner-badges--double.large-main-banner-badges--top-right { top: 2rem; right: 2rem; align-items: flex-end; } .large-main-banner-badges--double.large-main-banner-badges--bottom-left { bottom: 2rem; left: 2rem; align-items: flex-start; } .large-main-banner-badges--double.large-main-banner-badges--bottom-right { bottom: 2rem; right: 2rem; align-items: flex-end; } .large-main-banner-badge { display: block; width: var(--large-main-banner-badge-width, 100px); height: auto; object-fit: contain; } @media (max-width: 576px) { .large-main-banner-badges--single.large-main-banner-badges--top, .large-main-banner-badges--double.large-main-banner-badges--top-left, .large-main-banner-badges--double.large-main-banner-badges--top-right { top: 1rem; } .large-main-banner-badges--single.large-main-banner-badges--bottom, .large-main-banner-badges--double.large-main-banner-badges--bottom-left, .large-main-banner-badges--double.large-main-banner-badges--bottom-right { bottom: 1rem; } .large-main-banner-badges--double.large-main-banner-badges--top-left, .large-main-banner-badges--double.large-main-banner-badges--bottom-left { left: 1rem; } .large-main-banner-badges--double.large-main-banner-badges--top-right, .large-main-banner-badges--double.large-main-banner-badges--bottom-right { right: 1rem; } } /* ======================================== SINGLE BANNER MODE (No carousel) ======================================== */ .large-main-banner-single .large-main-banner-wrapper { display: block; } .large-main-banner-single .large-main-banner-slide { display: block; } /* ======================================== SWIPER OVERRIDES ======================================== */ .large-main-banner-swiper { overflow: hidden; } .large-main-banner-swiper .swiper-wrapper { display: flex; } .large-main-banner-swiper .swiper-slide { flex-shrink: 0; width: 100%; } /* --- Inlined from: ./[blocklist]_components/showcaseGridPassenger/showcaseGridPassenger.css --- */ /* ============================================ Showcase Grid Passenger Component ============================================ */ /* --- Inlined from: ../../[branding]_components/showcaseGridPassenger.css --- */ /* Showcase Grid Passenger - Branding Variables */ /* Desktop (1920px+) */ :root { /* Section */ --sgp-section-padding: 40px 0; --sgp-section-background: #fff; /* Header */ --sgp-header-margin-bottom: 24px; --sgp-header-padding: 0 16px; /* Title */ --sgp-title-font-family: var(--font-family-1); --sgp-title-font-size: 32px; --sgp-title-font-weight: 700; --sgp-title-color: #000000; --sgp-title-text-transform: uppercase; --sgp-title-letter-spacing: 1px; /* Category Tabs */ --sgp-categories-max-width: 85%; --sgp-categories-margin-bottom: 24px; --sgp-categories-border-color: #373637; --sgp-category-font-family: var(--font-family-5); --sgp-category-font-size: 18px; --sgp-category-font-weight: 600; --sgp-category-font-weight-active: 600; --sgp-category-color: #373637; --sgp-category-color-active: #00233A; --sgp-category-padding: 12px 24px; --sgp-category-border-width: 6px; --sgp-category-border-color-active: #00233A; --sgp-category-min-width: 150px; /* Thumbnails */ --sgp-thumbnails-max-width: 85%; --sgp-thumbnails-padding: 0 50px; --sgp-thumbnail-padding: 16px; --sgp-thumbnail-img-width: 140px; --sgp-thumbnail-label-font-family: var(--font-family-4); --sgp-thumbnail-label-font-size: 18px; --sgp-thumbnail-label-font-weight: 400; --sgp-thumbnail-label-font-weight-active: 600; --sgp-thumbnail-label-color: #373637; --sgp-thumbnail-label-color-active: #00233A; --sgp-thumbnail-active-scale: 1.5; /* Thumbnails Nav */ --sgp-thumbnails-nav-arrow-size: 50px; --sgp-thumbnails-nav-color: var(--brand-black, #000); --sgp-thumbnails-nav-next-color: var(--brand, #18bde6); --sgp-thumbnails-nav-hover-opacity: 0.6; --sgp-thumbnails-nav-disabled-opacity: 0.3; /* Content Grid */ --sgp-content-columns: 1fr 1.2fr; --sgp-content-gap: 40px; /* Info Section */ --sgp-info-padding: 0 3.5rem; /* Brand Name */ --sgp-brand-font-family: var(--font-family-2); --sgp-brand-font-size: 32px; --sgp-brand-font-weight: 400; --sgp-brand-color: var(--brand-black, #000); --sgp-brand-text-transform: uppercase; --sgp-brand-letter-spacing: 1px; /* Model Name */ --sgp-model-name-font-family: var(--font-family-1); --sgp-model-name-font-size: 48px; --sgp-model-name-font-weight: 700; --sgp-model-name-color: var(--brand-black, #000); /* Divider */ --sgp-divider-color: #373637; --sgp-divider-max-width: 565px; --sgp-divider-margin: 16px 0; /* Description */ --sgp-description-font-family: var(--font-family-4); --sgp-description-font-size: 18px; --sgp-description-font-weight: 400; --sgp-description-color: #373637; --sgp-description-margin-bottom: 24px; /* Pricing */ --sgp-pricing-margin-bottom: 24px; --sgp-price-label-font-family: var(--font-family-5); --sgp-price-label-font-size: 18px; --sgp-price-label-font-weight: 600; --sgp-price-label-color: var(--brand-black, #000); --sgp-price-primary-font-family: var(--font-family-1); --sgp-price-primary-font-size: 32px; --sgp-price-primary-font-weight: 700; --sgp-price-primary-color: var(--brand-black, #000); --sgp-price-secondary-font-family: var(--font-family-2); --sgp-price-secondary-font-size: 20px; --sgp-price-secondary-font-weight: 400; --sgp-price-secondary-color: var(--brand-black); --sgp-price-monthly-color: #373637; --sgp-price-values-gap: 12px; --sgp-price-monthly-secondary-color: #373637; /* Breakdown */ --sgp-breakdown-font-family: var(--font-family-4); --sgp-breakdown-font-size: 14px; --sgp-breakdown-label-color: var(--gray-dark-3, #888); --sgp-breakdown-value-color: var(--gray-dark-3, #888); /* Buttons */ --sgp-buttons-gap: 16px; --sgp-buttons-margin-bottom: 24px; --sgp-btn-font-family: var(--font-family-1); --sgp-btn-font-size: 18px; --sgp-btn-font-weight: 600; --sgp-btn-padding: 14px 32px; --sgp-btn-border-radius: 8px; --sgp-btn-width: 272px; --sgp-btn-primary-bg: var(--brand, #18bde6); --sgp-btn-primary-color: var(--brand-white); --sgp-btn-primary-border-color: var(--brand, #18bde6); --sgp-btn-primary-bg-hover: #888888; --sgp-btn-primary-color-hover: var(--brand-white); --sgp-btn-secondary-bg: var(--brand-white, #fff); --sgp-btn-secondary-color: var(--brand-black); --sgp-btn-secondary-border-color: var(--brand-black); --sgp-btn-secondary-bg-hover: var(--gray-dark-8); --sgp-btn-secondary-color-hover: var(--brand-black); --sgp-btn-secondary-border-color-hover: var(--brand-black); /* Color Selector */ --sgp-colors-margin-bottom: 24px; --sgp-color-label-font-family: var(--font-family-5); --sgp-color-label-font-size: 18px; --sgp-color-label-color: #373637; --sgp-color-name-color: var(--brand-black); --sgp-color-name-font-weight: 600; --sgp-color-swatch-size: 36px; --sgp-color-swatch-gap: 12px; --sgp-color-swatch-border-color: #e0e0e0; --sgp-color-swatch-border-color-active: var(--brand-black); /* Disclaimer */ --sgp-disclaimer-font-family: var(--font-family-4); --sgp-disclaimer-font-size: 12px; --sgp-disclaimer-color: #373637; /* Image Container */ --sgp-image-min-height: 400px; --sgp-image-border-radius: 8px; /* ── Cards View ── */ /* Cards Carousel */ --sgp-cards-carousel-max-width: 1400px; --sgp-cards-carousel-padding: 0 30px; /* Cards Nav */ --sgp-cards-nav-size: 48px; --sgp-cards-nav-color: var(--gray-dark-1, #666); --sgp-cards-nav-color-hover: var(--brand, #18bde6); /* Card */ --sgp-card-background: #ffffff; --sgp-card-border-radius: 0; --sgp-card-padding: 24px 16px; --sgp-card-box-shadow: none; --sgp-card-border: none; /* Card Image */ --sgp-card-image-height: 180px; --sgp-card-image-margin-bottom: 16px; /* Card Info */ --sgp-card-info-margin-bottom: 12px; --sgp-card-name-font-family: var(--font-family-1); --sgp-card-name-font-size: 20px; --sgp-card-name-font-weight: 700; --sgp-card-name-color: var(--brand-black, #000000); --sgp-card-name-margin-bottom: 4px; --sgp-card-brand-font-family: var(--font-family-4); --sgp-card-brand-font-size: 16px; --sgp-card-brand-font-weight: 400; --sgp-card-brand-color: var(--brand-black); /* Card Price */ --sgp-card-price-margin-bottom: 20px; --sgp-card-price-label-font-family: var(--font-family-1); --sgp-card-price-label-font-size: 20px; --sgp-card-price-label-font-weight: 400; --sgp-card-price-label-color: var(--brand-black, #000); --sgp-card-price-value-font-family: var(--font-family-1); --sgp-card-price-value-font-size: 20px; --sgp-card-price-value-font-weight: 700; --sgp-card-price-value-color: var(--brand-black, #000000); /* Card Features */ --sgp-card-features-gap: 8px; --sgp-card-features-margin-bottom: 24px; --sgp-card-feature-name-font-family: var(--font-family-4); --sgp-card-feature-name-font-size: 14px; --sgp-card-feature-name-font-size-sm: 12px; --sgp-card-feature-name-font-weight: 400; --sgp-card-feature-name-color: var(--brand-black); --sgp-card-feature-name-text-transform: uppercase; --sgp-card-feature-description-font-family: var(--font-family-3); --sgp-card-feature-description-font-size: 14px; --sgp-card-feature-description-font-size-sm: 11px; --sgp-card-feature-description-font-weight: 700; --sgp-card-feature-description-color: var(--brand-black, #000000); /* Card Buttons */ --sgp-card-buttons-gap: 12px; --sgp-card-btn-font-family: var(--font-family-1); --sgp-card-btn-font-size: 18px; --sgp-card-btn-font-weight: 700; --sgp-card-btn-padding: 14px 24px; --sgp-card-btn-border-radius: 8px; --sgp-card-btn-primary-bg: var(--brand, #18bde6); --sgp-card-btn-primary-color: var(--brand-white); --sgp-card-btn-primary-border-color: var(--brand, #18bde6); --sgp-card-btn-primary-bg-hover: #888888; --sgp-card-btn-primary-color-hover: var(--brand-white, #fff); --sgp-card-btn-secondary-bg: transparent; --sgp-card-btn-secondary-color: var(--brand-black); --sgp-card-btn-secondary-border-color: var(--brand-black); --sgp-card-btn-secondary-bg-hover: var(--gray-light-2); --sgp-card-btn-secondary-color-hover: var(--brand-black); --sgp-card-btn-secondary-border-color-hover: var(--brand-black); } /* Desktop (1400px / 1366px) */ @media (max-width: 1400px) { :root { --sgp-thumbnail-img-width: 120px; --sgp-divider-max-width: 407px; --sgp-btn-width: 193px; --sgp-cards-carousel-max-width: 1200px; --sgp-card-image-height: 160px; } } /* Tablet (992px) */ @media (max-width: 992px) { :root { --sgp-content-columns: 1fr 1.2fr; --sgp-content-gap: 24px; --sgp-info-padding: 0 1rem; --sgp-thumbnail-img-width: 100px; --sgp-image-min-height: 480px; --sgp-btn-width: 100%; --sgp-cards-carousel-padding: 0 50px; --sgp-card-padding: 20px 12px; } } /* Tablet (768px) */ @media (max-width: 768px) { :root { --sgp-title-font-size: 22px; } } @media (max-width: 767px) { :root { --sgp-section-padding: 32px 0; --sgp-categories-max-width: 100%; --sgp-category-padding: 10px 16px; --sgp-category-font-size: 18px; --sgp-thumbnails-padding: 0 40px; --sgp-thumbnail-padding: 12px 8px; --sgp-thumbnail-img-width: 80px; --sgp-thumbnail-label-font-size: 18px; --sgp-content-columns: 1fr; --sgp-content-gap: 0; --sgp-info-padding: 24px 12px; --sgp-brand-font-size: 22px; --sgp-model-name-font-size: 24px; --sgp-divider-max-width: 407px; --sgp-description-font-size: 16px; --sgp-price-label-font-size: 16px; --sgp-price-primary-font-size: 22px; --sgp-price-secondary-font-size: 22px; --sgp-breakdown-font-size: 12px; --sgp-color-label-font-size: 16px; --sgp-image-min-height: 250px; --sgp-image-border-radius: 0; --sgp-btn-width: 100%; --sgp-buttons-padding: 0 12px; --sgp-disclaimer-padding: 12px; } } /* Mobile (480px) */ @media (max-width: 480px) { :root { --sgp-section-padding: 32px 16px; --sgp-info-padding: 24px 16px; --sgp-category-font-size: 14px; --sgp-thumbnails-padding: 0; --sgp-thumbnail-img-width: 70px; --sgp-thumbnail-label-font-size: 16px; --sgp-brand-font-size: 22px; --sgp-model-name-font-size: 24px; --sgp-description-font-size: 16px; --sgp-price-label-font-size: 16px; --sgp-price-primary-font-size: 22px; --sgp-price-secondary-font-size: 22px; --sgp-breakdown-font-size: 12px; --sgp-color-label-font-size: 16px; --sgp-btn-padding: 12px 24px; --sgp-btn-font-size: 13px; --sgp-color-swatch-size: 32px; --sgp-image-min-height: 200px; --sgp-thumbnails-max-width: 100%; --sgp-cards-carousel-padding: 0 15px; --sgp-cards-nav-size: 32px; --sgp-card-padding: 16px 12px; --sgp-card-image-height: 140px; --sgp-card-name-font-size: 16px; --sgp-card-price-value-font-size: 16px; --sgp-card-price-label-font-size: 16px; --sgp-card-btn-padding: 10px 16px; } } .showcase-grid-passenger { width: 100%; padding: var(--sgp-section-padding); background-color: var(--sgp-section-background); } /* Header / Title */ .showcase-grid-passenger__header { text-align: center; margin-bottom: var(--sgp-header-margin-bottom); padding: var(--sgp-header-padding); } .showcase-grid-passenger__title { font-family: var(--sgp-title-font-family); font-size: var(--sgp-title-font-size); font-weight: var(--sgp-title-font-weight); color: var(--sgp-title-color); margin: 0; text-transform: var(--sgp-title-text-transform); letter-spacing: var(--sgp-title-letter-spacing); } /* ============================================ Category Tabs ============================================ */ .showcase-grid-passenger__categories-nav { display: flex; align-items: stretch; max-width: var(--sgp-categories-max-width); margin: 0 auto var(--sgp-categories-margin-bottom); } .showcase-grid-passenger__categories-arrow { flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-bottom: 2px solid var(--sgp-categories-border-color); cursor: pointer; padding: 0 4px; color: var(--sgp-category-color); transition: color 0.3s ease, opacity 0.3s ease; } .showcase-grid-passenger__categories-arrow .nav-arrow { width: var(--sgp-categories-arrow-size, 20px); height: var(--sgp-categories-arrow-size, 20px); } .showcase-grid-passenger__categories-arrow:hover { color: var(--sgp-category-color-active); } .showcase-grid-passenger__categories-arrow--hidden { visibility: hidden; opacity: 0; pointer-events: none; } .showcase-grid-passenger__categories { flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; border-bottom: 2px solid var(--sgp-categories-border-color); } .showcase-grid-passenger__categories::-webkit-scrollbar { display: none; } .showcase-grid-passenger__categories-wrapper { display: flex; } .showcase-grid-passenger__category { font-family: var(--sgp-category-font-family); padding: var(--sgp-category-padding); font-size: var(--sgp-category-font-size); font-weight: var(--sgp-category-font-weight); color: var(--sgp-category-color); background: transparent; border: none; border-bottom: var(--sgp-category-border-width) solid transparent; margin-bottom: -2px; cursor: pointer; white-space: nowrap; flex: 1; min-width: var(--sgp-category-min-width); text-align: center; transition: all 0.3s ease; } @media (max-width: 767px) { .showcase-grid-passenger__categories-nav { margin: 0 0 var(--sgp-categories-margin-bottom); } .showcase-grid-passenger__category { flex: 0 0 auto; } } .showcase-grid-passenger__category:hover { color: var(--sgp-category-color-active); } .showcase-grid-passenger__category--active { color: var(--sgp-category-color-active); font-weight: var(--sgp-category-font-weight-active); border-bottom: var(--sgp-category-border-width) solid var(--sgp-category-border-color-active); } /* ============================================ Thumbnails Carousel ============================================ */ .showcase-grid-passenger__thumbnails { position: relative; display: flex; align-items: center; justify-content: center; max-width: var(--sgp-thumbnails-max-width); margin: 0 auto; padding: var(--sgp-thumbnails-padding); } .showcase-grid-passenger__thumbnails-nav { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; z-index: 10; transition: opacity 0.3s ease; padding: 0; } .showcase-grid-passenger__thumbnails-nav--prev { left: 0; color: var(--sgp-thumbnails-nav-color); } .showcase-grid-passenger__thumbnails-nav--next { right: 0; color: var(--sgp-thumbnails-nav-next-color); } .showcase-grid-passenger__thumbnails-nav .nav-arrow { width: var(--sgp-thumbnails-nav-arrow-size); height: var(--sgp-thumbnails-nav-arrow-size); } .showcase-grid-passenger__thumbnails-nav:hover { opacity: var(--sgp-thumbnails-nav-hover-opacity); } .showcase-grid-passenger__thumbnails-nav.swiper-button-disabled { color: var(--sgp-thumbnails-nav-disabled-color); cursor: not-allowed; } /* Disabled state for arrows at start/end position */ .showcase-grid-passenger__thumbnails-nav--prev.showcase-grid-passenger__thumbnails-nav--disabled, .showcase-grid-passenger__thumbnails-nav--next.showcase-grid-passenger__thumbnails-nav--disabled { opacity: var(--sgp-thumbnails-nav-disabled-opacity); color: var(--sgp-thumbnails-nav-disabled-color); cursor: default; pointer-events: none; } /* Tablet/iPad: hide arrows when disabled */ @media (min-width: 768px) and (max-width: 1024px) { .showcase-grid-passenger__thumbnails-nav--prev.showcase-grid-passenger__thumbnails-nav--disabled, .showcase-grid-passenger__thumbnails-nav--next.showcase-grid-passenger__thumbnails-nav--disabled { visibility: hidden; } } .showcase-grid-passenger__swiper { width: 100%; overflow: hidden; } /* .swiper.showcase-grid-passenger__swiper .swiper-wrapper { align-items: center !important; justify-content: center !important; } */ .showcase-grid-passenger__slide { width: auto; cursor: pointer; display: flex; justify-content: center; } .showcase-grid-passenger__thumbnail { display: flex; flex-direction: column; align-items: center; padding: var(--sgp-thumbnail-padding); transition: all 0.3s ease; gap: 0.5rem; } .showcase-grid-passenger__thumbnail-img { max-width: 100%; width: var(--sgp-thumbnail-img-width); height: 100%; object-fit: contain; margin-bottom: 8px; transition: transform 0.5s ease; } .showcase-grid-passenger__thumbnail:hover .showcase-grid-passenger__thumbnail-img { transform: scale(var(--sgp-thumbnail-active-scale)); } .showcase-grid-passenger__thumbnail-label { font-family: var(--sgp-thumbnail-label-font-family); font-size: var(--sgp-thumbnail-label-font-size); font-weight: var(--sgp-thumbnail-label-font-weight); color: var(--sgp-thumbnail-label-color); text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; } .showcase-grid-passenger__thumbnail--active .showcase-grid-passenger__thumbnail-img { transform: scale(var(--sgp-thumbnail-active-scale)); } .showcase-grid-passenger__thumbnail--active .showcase-grid-passenger__thumbnail-label { color: var(--sgp-thumbnail-label-color-active); font-weight: var(--sgp-thumbnail-label-font-weight-active); font-family: var(--font-family-5); } .showcase-grid-passenger__slide--hidden { display: none !important; } /* ============================================ Detail Panels ============================================ */ .showcase-grid-passenger__panels { max-width: 1920px; margin: 0 auto; padding: 0; } .showcase-grid-passenger__panel { display: none; } .showcase-grid-passenger__panel--active { display: block; } .showcase-grid-passenger__content { display: grid; grid-template-columns: var(--sgp-content-columns); gap: var(--sgp-content-gap); align-items: start; margin-top: 1.5rem; } /* ============================================ Info Section (Left) ============================================ */ .showcase-grid-passenger__info { padding: var(--sgp-info-padding); } .showcase-grid-passenger__model-header { margin-bottom: 16px; } .showcase-grid-passenger__brand { font-family: var(--sgp-brand-font-family); display: block; font-size: var(--sgp-brand-font-size); font-weight: var(--sgp-brand-font-weight); color: var(--sgp-brand-color); text-transform: var(--sgp-brand-text-transform); letter-spacing: var(--sgp-brand-letter-spacing); margin-bottom: 4px; } .showcase-grid-passenger__model-name { font-family: var(--sgp-model-name-font-family); font-size: var(--sgp-model-name-font-size); font-weight: var(--sgp-model-name-font-weight); color: var(--sgp-model-name-color); margin: 0; line-height: 1.2; } .showcase-grid-passenger__divider { width: 100%; max-width: var(--sgp-divider-max-width); height: 1px; background-color: var(--sgp-divider-color); margin: var(--sgp-divider-margin); } .showcase-grid-passenger__description { font-family: var(--sgp-description-font-family); font-size: var(--sgp-description-font-size); font-weight: var(--sgp-description-font-weight); color: var(--sgp-description-color); margin: 0 0 var(--sgp-description-margin-bottom); line-height: 1.5; } /* ============================================ Pricing Section ============================================ */ .showcase-grid-passenger__pricing { margin-bottom: var(--sgp-pricing-margin-bottom); } .showcase-grid-passenger__price-label { font-family: var(--sgp-price-label-font-family); display: block; font-size: var(--sgp-price-label-font-size); font-weight: var(--sgp-price-label-font-weight); color: var(--sgp-price-label-color); margin-bottom: 0; } .showcase-grid-passenger__price-monthly .showcase-grid-passenger__price-label { font-family: var(--font-family-3); font-weight: var(--weight-bolder); color: #373637; font-size: 14px; } .showcase-grid-passenger__price-values { display: flex; align-items: baseline; gap: var(--sgp-price-values-gap); flex-wrap: wrap; } .showcase-grid-passenger__price-primary { font-family: var(--sgp-price-primary-font-family); font-size: var(--sgp-price-primary-font-size); font-weight: var(--sgp-price-primary-font-weight); color: var(--sgp-price-primary-color); } .showcase-grid-passenger__price-secondary { font-family: var(--sgp-price-secondary-font-family); font-size: var(--sgp-price-secondary-font-size); font-weight: var(--sgp-price-secondary-font-weight); color: var(--sgp-price-secondary-color); } .showcase-grid-passenger__price-monthly .showcase-grid-passenger__price-primary { color: var(--sgp-price-monthly-color); } .showcase-grid-passenger__price-monthly .showcase-grid-passenger__price-secondary { color: var(--sgp-price-monthly-secondary-color); } .showcase-grid-passenger__breakdown-row { font-family: var(--sgp-breakdown-font-family); display: flex; gap: 8px; font-size: var(--sgp-breakdown-font-size); color: #6c6c6c; margin-bottom: 4px; } .showcase-grid-passenger__breakdown-label { color: var(--sgp-breakdown-label-color); } .showcase-grid-passenger__breakdown-value { color: var(--sgp-breakdown-value-color); } /* ============================================ CTA Buttons ============================================ */ .showcase-grid-passenger__buttons { display: flex; gap: var(--sgp-buttons-gap); margin-bottom: var(--sgp-buttons-margin-bottom); } .showcase-grid-passenger__btn { font-family: var(--sgp-btn-font-family); padding: var(--sgp-btn-padding); font-size: var(--sgp-btn-font-size); font-weight: var(--sgp-btn-font-weight); text-decoration: none; border-radius: var(--sgp-btn-border-radius); transition: all 0.3s ease; text-align: center; width: var(--sgp-btn-width); } .showcase-grid-passenger__btn--primary { background-color: var(--sgp-btn-primary-bg); color: var(--sgp-btn-primary-color); border: 2px solid var(--sgp-btn-primary-border-color); } .showcase-grid-passenger__btn--primary:hover { background-color: var(--sgp-btn-primary-bg-hover); color: var(--sgp-btn-primary-color-hover); border-color: var(--sgp-btn-primary-bg-hover); } .showcase-grid-passenger__btn--secondary { background-color: var(--sgp-btn-secondary-bg); color: var(--sgp-btn-secondary-color); border: 3px solid var(--sgp-btn-secondary-border-color); } .showcase-grid-passenger__btn--secondary:hover { background-color: var(--sgp-btn-secondary-bg-hover); color: var(--sgp-btn-secondary-color-hover); border-color: var(--sgp-btn-secondary-border-color-hover); } /* ============================================ Color Selector ============================================ */ .showcase-grid-passenger__colors { margin-bottom: var(--sgp-colors-margin-bottom); } .showcase-grid-passenger__color-label { font-family: var(--sgp-color-label-font-family); display: flex; align-items: center; gap: 8px; font-size: var(--sgp-color-label-font-size); color: var(--sgp-color-label-color); margin-bottom: 12px; } .showcase-grid-passenger__color-label span { font-family: var(--font-family-4); } .showcase-grid-passenger__color-name { color: var(--sgp-color-name-color); font-weight: var(--sgp-color-name-font-weight); } .showcase-grid-passenger__color-swatches { display: flex; gap: var(--sgp-color-swatch-gap); flex-wrap: wrap; } .showcase-grid-passenger__color-swatch { width: var(--sgp-color-swatch-size); height: var(--sgp-color-swatch-size); border-radius: 50%; border: 2px solid var(--sgp-color-swatch-border-color); cursor: pointer; transition: all 0.3s ease; padding: 0; } .showcase-grid-passenger__color-swatch:hover { transform: scale(1.1); } .showcase-grid-passenger__color-swatch--active { border-color: var(--sgp-color-swatch-border-color-active); } /* ============================================ Disclaimer ============================================ */ .showcase-grid-passenger__disclaimer { font-family: var(--sgp-disclaimer-font-family); font-size: var(--sgp-disclaimer-font-size); color: var(--sgp-disclaimer-color); line-height: 1.5; } /* ============================================ Image Container (Right) ============================================ */ .showcase-grid-passenger__image-container { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: var(--sgp-image-min-height); overflow: hidden; border-radius: var(--sgp-image-border-radius); align-self: start; } .showcase-grid-passenger__background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-size: cover; background-position: center; } .showcase-grid-passenger__vehicle-images { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; justify-content: center; } .showcase-grid-passenger__vehicle-image { display: none; width: 100%; text-align: center; } .showcase-grid-passenger__vehicle-image--active { display: block; animation: fadeIn 0.4s ease; } .showcase-grid-passenger__vehicle-image img { max-width: 100%; width: 100%; height: auto; object-fit: contain; } @keyframes fadeIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* ============================================ Responsive - Desktop 1366px ============================================ */ @media (max-width: 1400px) { .showcase-grid-passenger__price-values { flex-direction: column; align-items: flex-start; gap: 4px; } .showcase-grid-passenger__price-from .showcase-grid-passenger__price-values { display: flex; flex-direction: row; } } /* ============================================ Responsive - Tablet 992px ============================================ */ @media (max-width: 992px) { .showcase-grid-passenger__buttons { flex-direction: column; align-items: stretch; } } /* ============================================ Responsive - Tablet 768px ============================================ */ @media (max-width: 767px) { .showcase-grid-passenger__categories-wrapper { justify-content: flex-start; } .showcase-grid-passenger__thumbnails { margin-bottom: 24px; } .showcase-grid-passenger__info { order: 2; display: flex; flex-direction: column; } .showcase-grid-passenger__model-header { order: 1; text-align: center; } .showcase-grid-passenger__divider { order: 2; margin: 16px auto; } .showcase-grid-passenger__description { order: 3; text-align: center; } .showcase-grid-passenger__pricing { order: 4; text-align: center; display: flex; flex-direction: column; align-items: center; } .showcase-grid-passenger__price-secondary { font-weight: var(--sgp-price-secondary-font-weight-sm); } .showcase-grid-passenger__color-name { font-weight: var(--sgp-color-name-font-weight-sm); } .showcase-grid-passenger__colors { order: 5; text-align: center; } .showcase-grid-passenger__buttons { order: 6; flex-direction: column; align-items: center; padding: var(--sgp-buttons-padding, 0 12px); } .showcase-grid-passenger__disclaimer { order: 7; text-align: justify; padding: var(--sgp-disclaimer-padding, 12px); } .showcase-grid-passenger__image-container { order: 1; } .showcase-grid-passenger__price-from, .showcase-grid-passenger__price-monthly { display: flex; flex-direction: column; align-items: center; } .showcase-grid-passenger__price-values { justify-content: center; } .showcase-grid-passenger__price-breakdown { text-align: center; } .showcase-grid-passenger__breakdown-row { justify-content: center; } .showcase-grid-passenger__color-label { justify-content: center; } .showcase-grid-passenger__color-swatches { justify-content: center; } } /* ============================================ Responsive - Mobile 480px ============================================ */ @media (max-width: 767px) { .showcase-grid-passenger__thumbnails-nav { display: none; } } /* ============================================ Cards View — Carousel ============================================ */ .showcase-grid-passenger__cards-carousel { position: relative; display: flex; align-items: center; justify-content: center; max-width: var(--sgp-cards-carousel-max-width); margin: 0 auto; padding: var(--sgp-cards-carousel-padding); } .showcase-grid-passenger__cards-nav { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; z-index: 10; transition: all 0.3s ease; padding: 0; color: var(--sgp-cards-nav-color); } .showcase-grid-passenger__cards-nav--prev { left: 0; } .showcase-grid-passenger__cards-nav--next { right: 0; } .showcase-grid-passenger__cards-nav .nav-arrow { width: var(--sgp-cards-nav-size); height: var(--sgp-cards-nav-size); } .showcase-grid-passenger__cards-nav:hover { color: var(--sgp-cards-nav-color-hover); } .showcase-grid-passenger__cards-nav--hidden { visibility: hidden; opacity: 0; pointer-events: none; } .showcase-grid-passenger__cards-swiper { width: 100%; overflow: hidden; } .showcase-grid-passenger__cards-swiper .swiper-wrapper { align-items: stretch; } .showcase-grid-passenger__cards-slide { height: auto; display: flex; justify-content: center; } .showcase-grid-passenger__cards-slide--hidden { display: none !important; } /* ============================================ Cards View — Card ============================================ */ .showcase-grid-passenger__card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--sgp-card-background); border-radius: var(--sgp-card-border-radius); padding: var(--sgp-card-padding); box-shadow: var(--sgp-card-box-shadow); border: var(--sgp-card-border); height: 100%; } .showcase-grid-passenger__card-image { width: 100%; height: var(--sgp-card-image-height); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sgp-card-image-margin-bottom); } .showcase-grid-passenger__card-image img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s ease; } .showcase-grid-passenger__card:hover .showcase-grid-passenger__card-image img { transform: scale(1.05); } .showcase-grid-passenger__card-info { margin-bottom: var(--sgp-card-info-margin-bottom); } .showcase-grid-passenger__card-name { font-family: var(--sgp-card-name-font-family); font-size: var(--sgp-card-name-font-size); font-weight: var(--sgp-card-name-font-weight); color: var(--sgp-card-name-color); margin: 0 0 var(--sgp-card-name-margin-bottom); line-height: 1.2; } .showcase-grid-passenger__card-brand { font-family: var(--sgp-card-brand-font-family); font-size: var(--sgp-card-brand-font-size); font-weight: var(--sgp-card-brand-font-weight); color: var(--sgp-card-brand-color); } .showcase-grid-passenger__card-price { margin-bottom: var(--sgp-card-price-margin-bottom); display: flex; gap: 10px; } .showcase-grid-passenger__card-price-label { font-family: var(--sgp-card-price-label-font-family); display: block; font-size: var(--sgp-card-price-label-font-size); font-weight: var(--sgp-card-price-label-font-weight); color: var(--sgp-card-price-label-color); } .showcase-grid-passenger__card-price-value { font-family: var(--sgp-card-price-value-font-family); font-size: var(--sgp-card-price-value-font-size); font-weight: var(--sgp-card-price-value-font-weight); color: var(--sgp-card-price-value-color); } /* ============================================ Cards View — Features ============================================ */ .showcase-grid-passenger__card-features { display: flex; justify-content: center; gap: var(--sgp-card-features-gap); margin-bottom: var(--sgp-card-features-margin-bottom); width: 100%; } .showcase-grid-passenger__card-feature { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; } .showcase-grid-passenger__card-feature-name { font-family: var(--sgp-card-feature-name-font-family); font-size: var(--sgp-card-feature-name-font-size); font-weight: var(--sgp-card-feature-name-font-weight); color: var(--sgp-card-feature-name-color); text-transform: var(--sgp-card-feature-name-text-transform); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .showcase-grid-passenger__card-feature-description { font-family: var(--sgp-card-feature-description-font-family); font-size: var(--sgp-card-feature-description-font-size); font-weight: var(--sgp-card-feature-description-font-weight); color: var(--sgp-card-feature-description-color); border-bottom: 1px solid var(--brand-black); padding-bottom: 2px; width: 90%; } /* ============================================ Cards View — Buttons ============================================ */ .showcase-grid-passenger__card-buttons { display: flex; flex-direction: column; gap: var(--sgp-card-buttons-gap); width: 100%; margin-top: auto; } .showcase-grid-passenger__card-btn { font-family: var(--sgp-card-btn-font-family); padding: var(--sgp-card-btn-padding); font-size: var(--sgp-card-btn-font-size); font-weight: var(--sgp-card-btn-font-weight); text-decoration: none; border-radius: var(--sgp-card-btn-border-radius); transition: all 0.3s ease; text-align: center; width: 400px; height: 60px; cursor: pointer; display: flex; justify-content: center; align-items: center; } .showcase-grid-passenger__card-btn--primary { background-color: var(--sgp-card-btn-primary-bg); color: var(--sgp-card-btn-primary-color); border: 2px solid var(--sgp-card-btn-primary-border-color); } .showcase-grid-passenger__card-btn--primary:hover { background-color: var(--sgp-card-btn-primary-bg-hover); color: var(--sgp-card-btn-primary-color-hover); border-color: var(--sgp-card-btn-primary-bg-hover); } .showcase-grid-passenger__card-btn--secondary { background-color: var(--sgp-card-btn-secondary-bg); color: var(--sgp-card-btn-secondary-color); border: 2px solid var(--sgp-card-btn-secondary-border-color); } .showcase-grid-passenger__card-btn--secondary:hover { background-color: var(--sgp-card-btn-secondary-bg-hover); color: var(--sgp-card-btn-secondary-color-hover); border-color: var(--sgp-card-btn-secondary-border-color-hover); } /* ============================================ Cards View — Responsive ============================================ */ @media (max-width: 1366px) { .showcase-grid-passenger__card-btn { width: 300px; height: 48px; } } @media (max-width: 768px) { .showcase-grid-passenger__card-features { gap: 4px; } .showcase-grid-passenger__card-feature-name { font-size: var(--sgp-card-feature-name-font-size-sm); } .showcase-grid-passenger__card-feature-description { font-size: var(--sgp-card-feature-description-font-size-sm); } .showcase-grid-passenger__card-btn { width: 300px; height: 48px; } } @media (max-width: 767px) { .showcase-grid-passenger__card-buttons { align-items: center; justify-content: center; } } @media (max-width: 480px) { .showcase-grid-passenger__card-buttons { gap: 8px; } .showcase-grid-passenger__card-btn { width: 292px; height: 48px; } } /* --- Inlined from: ./[blocklist]_components/showcaseGridCommercial/showcaseGridCommercial.css --- */ /* ============================================ Showcase Grid Commercial Component ============================================ */ /* --- Inlined from: ../../[branding]_components/showcaseGridCommercial.css --- */ /* Showcase Grid Commercial - Branding Variables */ /* Desktop (1920px+) */ :root { /* Section */ --sgc-section-padding: 60px 0; --sgc-section-background: #fff; /* Header */ --sgc-header-margin-bottom: 20px; --sgc-header-padding: 0 16px; /* Title */ --sgc-title-font-family: var(--font-family-2); --sgc-title-font-size: 32px; --sgc-title-font-weight: 700; --sgc-title-color: #000000; --sgc-title-text-transform: uppercase; --sgc-title-letter-spacing: 1px; /* Category Tabs (matching commercial-vehicles style) */ --sgc-tabs-max-width: 1400px; --sgc-tabs-border-color: var(--gray-light-3, #e5e5e5); --sgc-tabs-gap: 0; --sgc-tabs-margin-bottom: 40px; --sgc-tab-font-family: var(--font-family-1); --sgc-tab-font-size: 18px; --sgc-tab-font-weight: var(--weight-semibold, 500); --sgc-tab-color: var(--gray-dark-1, #414141); --sgc-tab-color-active: var(--brand-dark, #001a41); --sgc-tab-padding: 16px 24px; --sgc-tab-max-width: 200px; --sgc-tab-border-width: 2px; --sgc-tab-border-color-active: var(--brand-dark, #001a41); /* Carousel */ --sgc-carousel-max-width: 1400px; --sgc-carousel-padding: 0 60px; --sgc-carousel-gap: 24px; /* Navigation Arrows */ --sgc-nav-size: 48px; --sgc-nav-color: var(--gray-dark-1, #666); --sgc-nav-color-hover: var(--brand, #18bde6); --sgc-nav-disabled-opacity: 0.3; /* Card */ --sgc-card-background: #ffffff; --sgc-card-border-radius: 0; --sgc-card-padding: 24px 16px; --sgc-card-box-shadow: none; --sgc-card-border: none; /* Card Image */ --sgc-card-image-height: 180px; --sgc-card-image-margin-bottom: 16px; /* Card Name */ --sgc-card-name-font-family: var(--font-family-2); --sgc-card-name-font-size: 20px; --sgc-card-name-font-weight: 700; --sgc-card-name-color: var(--brand-black, #000000); --sgc-card-name-margin-bottom: 4px; /* Card Series (Brand) */ --sgc-card-series-font-family: var(--font-family-1); --sgc-card-series-font-size: 16px; --sgc-card-series-font-weight: 400; --sgc-card-series-color: var(--gray-dark-1, #666); --sgc-card-series-margin-bottom: 12px; /* Card Price */ --sgc-card-price-font-family: var(--font-family-2); --sgc-card-price-font-size: 20px; --sgc-card-price-font-weight: 700; --sgc-card-price-color: var(--brand-black, #000000); --sgc-card-price-margin-bottom: 20px; --sgc-price-label-font-family: var(--font-family-1); --sgc-price-label-font-size: 20px; --sgc-price-label-font-weight: 400; --sgc-price-label-color: var(--brand-black, #000000); /* Card Features */ --sgc-features-gap: 8px; --sgc-features-margin-bottom: 24px; --sgc-feature-label-font-family: var(--font-family-1); --sgc-feature-label-font-size: 14px; --sgc-feature-label-font-weight: 400; --sgc-feature-label-color: var(--gray-dark-1, #666); --sgc-feature-label-text-transform: uppercase; --sgc-feature-value-font-family: var(--font-family-2); --sgc-feature-value-font-size: 14px; --sgc-feature-value-font-weight: 700; --sgc-feature-value-color: var(--brand-black, #000000); /* Card Buttons */ --sgc-buttons-gap: 12px; --sgc-btn-font-family: var(--font-family-1); --sgc-btn-font-size: 18px; --sgc-btn-font-weight: 600; --sgc-btn-padding: 14px 24px; --sgc-btn-border-radius: 30px; --sgc-btn-width: 100%; --sgc-btn-primary-bg: var(--brand, #18bde6); --sgc-btn-primary-color: #00233A; --sgc-btn-primary-border-color: var(--brand, #18bde6); --sgc-btn-primary-bg-hover: #888888; --sgc-btn-primary-color-hover: var(--brand-white, #fff); --sgc-btn-secondary-bg: transparent; --sgc-btn-secondary-color: #00233A; --sgc-btn-secondary-border-color: var(--brand-dark, #001a41); --sgc-btn-secondary-bg-hover: var(--gray-light-2); --sgc-btn-secondary-color-hover: #888888; --sgc-btn-secondary-border-hover: #888888; } /* Desktop (1400px / 1366px) */ @media (max-width: 1400px) { :root { --sgc-carousel-max-width: 1200px; --sgc-card-image-height: 160px; --sgc-title-font-size: 32px; --sgc-tab-font-size: 18px; --sgc-card-name-font-size: 20px; --sgc-card-series-font-size: 16px; --sgc-card-price-font-size: 20px; --sgc-price-label-font-size: 20px; --sgc-feature-label-font-size: 14px; --sgc-feature-value-font-size: 14px; --sgc-btn-font-size: 16px; } } /* Tablet (992px) */ @media (max-width: 992px) { :root { --sgc-section-padding: 48px 0; --sgc-carousel-padding: 0 50px; --sgc-carousel-gap: 20px; --sgc-card-padding: 20px 12px; } } /* Tablet (768px) */ @media (max-width: 768px) { :root { --sgc-section-padding: 40px 0; --sgc-header-margin-bottom: 24px; --sgc-title-font-size: 22px; --sgc-tabs-max-width: 100%; --sgc-tabs-margin-bottom: 32px; --sgc-tab-padding: 12px 16px; --sgc-tab-font-size: 16px; --sgc-carousel-padding: 0 40px; --sgc-carousel-gap: 16px; --sgc-nav-size: 40px; --sgc-card-padding: 20px 16px; --sgc-card-image-height: 150px; --sgc-card-name-font-size: 20px; --sgc-card-series-font-size: 16px; --sgc-card-price-font-size: 20px; --sgc-price-label-font-size: 20px; --sgc-feature-label-font-size: 14px; --sgc-feature-value-font-size: 14px; --sgc-btn-padding: 12px 20px; } } /* Mobile (480px) */ @media (max-width: 480px) { :root { --sgc-section-padding: 32px 0; --sgc-title-font-size: 22px; --sgc-header-margin-bottom: 20px; --sgc-tab-padding: 10px 12px; --sgc-tab-font-size: 14px; --sgc-carousel-padding: 0 32px; --sgc-nav-size: 32px; --sgc-card-padding: 16px 12px; --sgc-card-image-height: 140px; --sgc-card-name-font-size: 16px; --sgc-card-series-font-size: 16px; --sgc-card-price-font-size: 16px; --sgc-price-label-font-size: 16px; --sgc-feature-label-font-size: 12px; --sgc-feature-value-font-size: 12px; --sgc-btn-padding: 10px 16px; } } .showcase-grid-commercial { width: 100%; padding: var(--sgc-section-padding); background-color: var(--sgc-section-background); } /* Header / Title */ .showcase-grid-commercial__header { text-align: center; margin-bottom: var(--sgc-header-margin-bottom); padding: var(--sgc-header-padding); } .showcase-grid-commercial__title { font-family: var(--sgc-title-font-family); font-size: var(--sgc-title-font-size); font-weight: var(--sgc-title-font-weight); color: var(--sgc-title-color); margin: 0; text-transform: var(--sgc-title-text-transform); letter-spacing: var(--sgc-title-letter-spacing); } /* ============================================ Category Tabs (matching commercial-vehicles style) ============================================ */ .showcase-grid-commercial__tabs { max-width: var(--sgc-tabs-max-width); margin: 0 auto var(--sgc-tabs-margin-bottom); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .showcase-grid-commercial__tabs::-webkit-scrollbar { display: none; } .showcase-grid-commercial__tabs-wrapper { display: flex; gap: var(--sgc-tabs-gap); min-width: max-content; justify-content: center; } .showcase-grid-commercial__tab { font-family: var(--sgc-tab-font-family); font-size: var(--sgc-tab-font-size); font-weight: var(--sgc-tab-font-weight); color: var(--sgc-tab-color); padding: var(--sgc-tab-padding); background: none; border: none; border-bottom: var(--sgc-tab-border-width) solid var(--gray-dark-1); cursor: pointer; white-space: nowrap; transition: color 0.3s ease, border-color 0.3s ease; width: 100%; max-width: var(--sgc-tab-max-width); text-align: center; } .showcase-grid-commercial__tab:hover { color: var(--sgc-tab-color-active); } .showcase-grid-commercial__tab--active { color: var(--sgc-tab-color-active); border-bottom: 6px solid var(--sgc-tab-border-color-active); } @media (max-width: 768px) { .showcase-grid-commercial__tabs-wrapper { justify-content: flex-start; min-width: 100%; } .showcase-grid-commercial__tab { width: calc(100% / 3); min-width: calc(100% / 3); flex: 0 0 calc(100% / 3); } } /* ============================================ Carousel Container ============================================ */ .showcase-grid-commercial__carousel { position: relative; display: flex; align-items: center; justify-content: center; max-width: var(--sgc-carousel-max-width); margin: 0 auto; padding: var(--sgc-carousel-padding); } /* Navigation Arrows */ .showcase-grid-commercial__nav { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; z-index: 10; transition: all 0.3s ease; padding: 0; color: var(--sgc-nav-color); } .showcase-grid-commercial__nav--prev { left: 0; } .showcase-grid-commercial__nav--next { right: 0; } .showcase-grid-commercial__nav .nav-arrow { width: var(--sgc-nav-size); height: var(--sgc-nav-size); } .showcase-grid-commercial__nav:hover { color: var(--sgc-nav-color-hover); } .showcase-grid-commercial__nav.swiper-button-disabled { opacity: var(--sgc-nav-disabled-opacity); cursor: not-allowed; } .showcase-grid-commercial__nav--hidden { visibility: hidden; opacity: 0; pointer-events: none; } /* Swiper */ .showcase-grid-commercial__swiper { width: 100%; overflow: hidden; } .showcase-grid-commercial__swiper .swiper-wrapper { align-items: stretch; } .showcase-grid-commercial__slide { height: auto; display: flex; justify-content: center; } .showcase-grid-commercial__slide--hidden { display: none !important; } /* ============================================ Vehicle Card ============================================ */ .showcase-grid-commercial__card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--sgc-card-background); border-radius: var(--sgc-card-border-radius); padding: var(--sgc-card-padding); box-shadow: var(--sgc-card-box-shadow); border: var(--sgc-card-border); height: 100%; } /* Card Image */ .showcase-grid-commercial__card-image { width: 100%; height: var(--sgc-card-image-height); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sgc-card-image-margin-bottom); } .showcase-grid-commercial__card-image img { max-width: 337px; max-height: 100%; object-fit: contain; transition: transform 0.3s ease; } .showcase-grid-commercial__card:hover .showcase-grid-commercial__card-image img { transform: scale(1.05); } /* Card Info */ .showcase-grid-commercial__card-info { margin-bottom: var(--sgc-card-series-margin-bottom); } .showcase-grid-commercial__card-name { font-family: var(--sgc-card-name-font-family); font-size: var(--sgc-card-name-font-size); font-weight: var(--sgc-card-name-font-weight); color: var(--sgc-card-name-color); margin: 0 0 var(--sgc-card-name-margin-bottom); line-height: 1.2; } .showcase-grid-commercial__card-series { font-family: var(--sgc-card-series-font-family); font-size: var(--sgc-card-series-font-size); font-weight: var(--sgc-card-series-font-weight); color: var(--sgc-card-series-color); } /* Card Price */ .showcase-grid-commercial__card-price { margin-bottom: var(--sgc-card-price-margin-bottom); } .showcase-grid-commercial__price-label { font-family: var(--font-family-2); font-size: var(--sgc-price-label-font-size); font-weight: var(--weight-bold, 700); color: var(--sgc-price-label-color); } .showcase-grid-commercial__price-value { font-family: var(--sgc-card-price-font-family); font-size: var(--sgc-card-price-font-size); font-weight: var(--sgc-card-price-font-weight); color: var(--sgc-card-price-color); } /* ============================================ Card Features (3 columns) ============================================ */ .showcase-grid-commercial__card-features { display: flex; justify-content: center; gap: var(--sgc-features-gap); margin-bottom: var(--sgc-features-margin-bottom); width: 100%; } .showcase-grid-commercial__feature { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; } .showcase-grid-commercial__feature-label { font-family: var(--sgc-feature-label-font-family); font-size: var(--sgc-feature-label-font-size); font-weight: var(--sgc-feature-label-font-weight); color: var(--sgc-feature-label-color); text-transform: var(--sgc-feature-label-text-transform); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .showcase-grid-commercial__feature-value { font-family: var(--sgc-feature-value-font-family); font-size: var(--sgc-feature-value-font-size); font-weight: var(--sgc-feature-value-font-weight); color: var(--sgc-feature-value-color); border-bottom: 1px solid var(--gray-dark-1, #414141); padding-bottom: 2px; } /* ============================================ Card Buttons ============================================ */ .showcase-grid-commercial__card-buttons { display: flex; flex-direction: column; gap: var(--sgc-buttons-gap); width: 100%; margin-top: auto; } .showcase-grid-commercial__btn { font-family: var(--sgc-btn-font-family); padding: var(--sgc-btn-padding); font-size: var(--sgc-btn-font-size); font-weight: var(--sgc-btn-font-weight); text-decoration: none; border-radius: var(--sgc-btn-border-radius); transition: all 0.3s ease; text-align: center; width: var(--sgc-btn-width); cursor: pointer; display: inline-block; } .showcase-grid-commercial__btn--primary { background-color: var(--sgc-btn-primary-bg); color: var(--sgc-btn-primary-color); border: 2px solid var(--sgc-btn-primary-border-color); } .showcase-grid-commercial__btn--primary:hover { background-color: var(--sgc-btn-primary-bg-hover); color: var(--sgc-btn-primary-color-hover); border-color: var(--sgc-btn-primary-bg-hover); } .showcase-grid-commercial__btn--secondary { background-color: var(--sgc-btn-secondary-bg); color: var(--sgc-btn-secondary-color); border: 2px solid var(--sgc-btn-secondary-border-color); } .showcase-grid-commercial__btn--secondary:hover { background-color: var(--sgc-btn-secondary-bg-hover); color: var(--sgc-btn-secondary-color-hover); border-color: var(--sgc-btn-secondary-border-hover); } /* ============================================ Responsive Adjustments ============================================ */ @media (max-width: 768px) { .showcase-grid-commercial__card-features { gap: 4px; } .showcase-grid-commercial__feature-label { font-size: 8px; } .showcase-grid-commercial__feature-value { font-size: 11px; } } @media (max-width: 480px) { .showcase-grid-commercial__card-buttons { gap: 8px; } } /* --- Inlined from: ./[blocklist]_components/productListPage/productListPage.css --- */ /* ============================================ PLP (Product Listing Page) Component ============================================ */ /* --- Inlined from: ../../[branding]_components/productListPage.css --- */ :root { /* Section */ --plp-section-padding: 0 0 var(--p-6); --plp-section-background: var(--brand-white); --plp-section-margin-top: var(--p-4\.5); --plp-container-padding: 50px 88px; --plp-container-columns: var(--plp-sidebar-width, 280px) 1fr; --plp-container-gap: 50px; /* Typography */ --plp-font-family: var(--font-family-1); --plp-title-font-family: var(--font-family-5); --plp-font-size: var(--text-base); --plp-font-size-md: var(--text-md); --plp-font-size-sm: var(--text-base); --plp-font-size-xs: var(--text-xs); --plp-font-size-mobile-filter: var(--text-base); --plp-font-weight-mobile-filter: var(--weight-bolder); --plp-font-weight: var(--weight-semilight); --plp-font-weight-card: var(--weight-bolder); --plp-font-weight-mobile-sort: var(--weight-normal); /* Colors */ --plp-text-color: var(--brand-black); --plp-text-muted: var(--gray-dark-3); --plp-title-color: var(--brand-black); --plp-border-color: var(--gray-dark-8); --plp-hover-bg: var(--gray-light-4); --plp-focus-color: var(--brand); --plp-icon-color: var(--brand-black); --plp-price-type-active-btn: #00233a; --plp-price-type-btn: var(--gray-dark-1); --plp-color-mobile-filter: #373637; /* Border Radius */ --plp-border-radius: 0; --plp-btn-border-radius: 30px; --plp-card-border-radius: var(--p-2); /* Sidebar */ --plp-sidebar-width: 450px; --plp-sidebar-min-width: 450px; --plp-sidebar-bg: var(--brand-white); --plp-sidebar-header-padding: var(--p-4) var(--p-4); --plp-sidebar-header-display: flex; --plp-sidebar-header-position: relative; --plp-sidebar-header-top: auto; --plp-sidebar-header-bg: transparent; --plp-sidebar-header-z-index: auto; --plp-sidebar-title-size: var(--text-md); --plp-sidebar-title-weight: var(--weight-bold); --plp-sidebar-footer-padding: var(--p-4) var(--p-4); --plp-sidebar-footer-bg: transparent; --plp-sidebar-footer-position: static; --plp-sidebar-footer-bottom: auto; --plp-sidebar-footer-z-index: auto; --plp-view-results-bg: var(--brand); --plp-view-results-bg-hover: var(--brand-hover); --plp-view-results-color: var(--brand-white); --plp-view-results-border: var(--border-sm) solid var(--brand); --plp-view-results-radius: var(--p-1); /* Mobile header */ --plp-mobile-header-padding: var(--p-4); --plp-mobile-header-bg: var(--brand-white); /* Filters */ --plp-filters-padding: 0; --plp-filter-header-padding: var(--p-4) var(--p-4); --plp-filter-label-size: var(--text-md); --plp-filter-label-weight: var(--weight-bold); --plp-filter-content-padding: var(--p-0) var(--p-4) var(--p-4); --plp-filter-divider-width: 1px; --plp-filter-divider-color: #e5e5e5; --plp-filter-search-border: none; --plp-filter-search-border-bottom: var(--border-xs) solid var(--gray-dark-7); --plp-filter-search-border-radius: 0; --plp-filter-options-border: none; --plp-filter-options-padding: var(--p-2) var(--p-3); --plp-filter-options-gap: var(--p-3); --plp-filter-switch-gap: var(--p-4); --plp-filter-switch-padding: var(--p-3) var(--p-4); --plp-filter-width: 450px; --plp-filter-vertical-line-color: var(--gray-dark-8); --plp-filter-btn: var(--gray-dark-1); --plp-sort-color: var(--gray-dark-1); /* Toggle */ --plp-toggle-bg: var(--brand-black); --plp-toggle-active-bg: var(--brand); /* Checkbox */ --plp-checkbox-border: var(--brand-black); --plp-checkbox-active-bg: var(--brand); /* Input */ --plp-input-bg: var(--gray-dark-9); --plp-price-input-border: none; --plp-price-input-border-bottom: var(--border-xs) solid #373637; /* Slider */ --plp-slider-height: 10px; --plp-slider-thumb-size: 24px; --plp-slider-track-bg: var(--gray-dark-8); --plp-slider-range-bg: #00233A; --plp-slider-thumb-bg: #00233A; --plp-slider-thumb-border: #00233A; /* Controls */ --plp-controls-margin: var(--p-4\.5); --plp-toggle-group-bg: var(--gray-dark-9); --plp-price-type-active-bg: var(--brand-white); --plp-price-type-active-font-weight: var(--weight-bolder); /* Grid */ --plp-grid-gap: var(--p-4\.5); --plp-grid-columns: repeat(3, 1fr); --plp-grid-padding: 0; /* Card */ --plp-card-bg: var(--brand-white); --plp-card-border: var(--gray-dark-8); --plp-card-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); --plp-card-image-padding: var(--p-4); --plp-card-image-bg: var(--brand-white); --plp-card-info-padding: var(--p-4) var(--p-4) var(--p-2); --plp-card-brand-size: var(--text-xs); --plp-card-model-size: var(--text-md); --plp-card-model-weight: var(--weight-bolder); --plp-card-pricing-padding: var(--p-2) var(--p-4) var(--p-4); --plp-card-price-size: var(--text-xl); --plp-card-price-secondary-size: var(--text-md); --plp-card-price-weight: var(--weight-bolder); --plp-card-buttons-padding: var(--p-0) var(--p-4) var(--p-4); --plp-card-disclaimer-padding: var(--p-3) var(--p-4); --plp-card-image-height: 200px; /* Buttons */ --plp-btn-primary-bg: var(--brand); --plp-btn-primary-bg-hover: #888888; --plp-btn-primary-color: var(--brand-white); --plp-btn-primary-color-hover: var(--brand-white); --plp-btn-secondary-color: var(--brand-dark); --plp-btn-secondary-border: var(--brand-black); --plp-btn-secondary-bg-hover: #f3f4f6; --plp-btn-secondary-color-hover: var(--brand-black); --plp-btn-secondary-border-hover: var(--brand-black); --plp-btn-card-color: #00233a; --plp-card-btn-width: 334px; --plp-card-btn-height: 60px; /* Pagination */ --plp-pagination-margin: var(--p-4); --plp-pagination-padding: var(--p-3) var(--p-0); --plp-pagination-active-bg: var(--brand-white); --plp-pagination-active-color: var(--brand-dark); --plp-pagination-border-color: var(--gray-dark-7); --plp-pagination-hover-bg: var(--gray-dark-9); --plp-pagination-size: calc(var(--p-4) * 2); --plp-pagination-font-size: var(--text-xs); --plp-pagination-active-border: var(--brand-light); --plp-card-buttons-gap: 20px; /* Layout / responsive toggles */ /* --plp-container-padding: 24px; */ --plp-controls-padding: var(--p-0); --plp-main-padding-bottom: var(--p-6); --plp-mobile-header-display: none; --plp-sidebar-position: sticky; --plp-sidebar-top: 24px; --plp-sidebar-left: auto; --plp-sidebar-width: auto; --plp-sidebar-height: auto; --plp-sidebar-max-height: calc(100vh - 48px); --plp-sidebar-z-index: auto; --plp-sidebar-transform: none; --plp-sidebar-transition: none; --plp-sidebar-open-transform: none; --plp-sidebar-border-radius: 8px; --plp-sidebar-border: none; --plp-sidebar-display: block; --plp-sidebar-flex-direction: column; --plp-sidebar-close-display: none; --plp-sidebar-footer-display: none; --plp-filters-flex: initial; --plp-filters-overflow-y: visible; --plp-sort-dropdown-display: block; --plp-controls-flex-direction: row; --plp-price-toggle-width: 299px; --plp-price-toggle-height: 48px; --plp-price-toggle-btn-padding: var(--p-3) var(--p-4\.5); --plp-card-price-size: 24px; --plp-card-price-secondary-size: 18px; --plp-price-type-active-width: 149.5px; --plp-price-toggle-btn-width: 145.5px; } /* Small Laptop */ @media (max-width: 1366px) { :root { --plp-container-padding: 50px 48px; --plp-sidebar-min-width: 297px; --plp-sidebar-width: 297px; --plp-sidebar-min-width: 297px; --plp-card-image-height: 150px; } } /* Tablet (1024px and below) */ @media (max-width: 1024px) { :root { --plp-grid-columns: repeat(2, 1fr); --plp-container-padding: 50px 25px; --plp-sidebar-width: 200px; --plp-sidebar-min-width: 200px; --plp-card-image-height: 230px; } } /* Mobile / off-canvas (768px and below) */ @media (max-width: 768px) { :root { --plp-mobile-header-display: flex; --plp-container-padding: 30px 20px; --plp__grid: 0; --plp-grid-columns: repeat(2, 1fr); --plp-grid-padding: 0; --plp-controls-margin: 30px; --plp-font-size-xs: 12px; --plp-font-size-md: 1rem; --plp-sidebar-position: fixed; --plp-sidebar-top: 0; --plp-sidebar-left: 0; --plp-sidebar-width: 100%; --plp-sidebar-min-width: 100%; --plp-sidebar-height: 100%; --plp-sidebar-max-height: 100%; --plp-sidebar-z-index: 1000; --plp-sidebar-transform: translateX(-100%); --plp-sidebar-transition: transform 0.3s ease; --plp-sidebar-open-transform: translateX(0); --plp-sidebar-border-radius: 0; --plp-sidebar-border: none; --plp-sidebar-display: flex; --plp-sidebar-flex-direction: column; --plp-sidebar-close-display: block; --plp-sidebar-footer-display: block; --plp-sidebar-footer-position: sticky; --plp-sidebar-footer-bottom: 50px; --plp-sidebar-footer-bg: var(--brand-white); --plp-sidebar-footer-z-index: 1; --plp-sidebar-header-position: sticky; --plp-sidebar-header-top: var(--p-12); --plp-sidebar-header-bg: var(--brand-white); --plp-sidebar-header-z-index: 1; --plp-filters-flex: 1; --plp-filters-overflow-y: auto; --plp-sort-dropdown-display: none; --plp-pagination-padding: var(--p-4) var(--p-4); --plp-filter-width: 100%; --plp-card-btn-width: 296px; --plp-card-btn-height: 48px; --plp-font-size: 1rem; --plp-font-size-mobile-filter: 20px; } } /* Mobile */ @media (max-width: 576px) { :root { --plp-grid-columns: repeat(1, 1fr); --plp-card-image-height: 250px; --plp-font-size-mobile-filter: 1rem; --plp-font-family: var(--font-family-3); } } /* Small mobile (480px and below) */ @media (max-width: 480px) { :root { --plp-card-price-size: 20px; --plp-card-price-secondary-size: 16px; --plp-price-toggle-width: 100%; --plp-price-toggle-btn-padding: var(--p-3) var(--p-4); --plp-controls-flex-direction: column; } } /* ============================================ Main Section ============================================ */ .plp { width: 100%; /* margin-top: var(--plp-section-margin-top, var(--p-4\.5)); */ padding: var(--plp-section-padding, 0 0 var(--p-6)); background-color: var(--plp-section-background, var(--brand-white)); } .plp__container { display: grid; grid-template-columns: var( --plp-container-columns, var(--plp-sidebar-width, 280px) 1fr ); gap: var(--plp-container-gap, 50px); max-width: 1920px; margin: 0 auto; padding: var(--plp-container-padding); position: relative; } /* ============================================ Mobile Header ============================================ */ .plp__mobile-header { display: var(--plp-mobile-header-display, none); justify-content: space-evenly; align-items: center; /* padding: var(--plp-mobile-header-padding, var(--p-4)); */ background: var(--plp-mobile-header-bg, var(--brand-white)); border-bottom: 1px solid var(--plp-border-color, var(--gray-dark-8)); position: sticky; top: 0; z-index: 100; height: 60px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); } .plp__mobile-filter-btn { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: transparent; border: 1px solid transparent; border-radius: 0; font-family: var(--plp-font-family, var(--font-family-1)); font-size: var(--plp-font-size-mobile-filter, 1.25rem); font-weight: var(--plp-font-weight-mobile-filter); color: var(--plp-color-mobile-filter, var(--gray-dark-1)); cursor: pointer; transition: all 0.2s ease; } .plp__mobile-filter-btn:hover { background: var(--plp-hover-bg, var(--gray-light-4)); } .plp__mobile-sort { min-width: 140px; } /* ============================================ Sidebar ============================================ */ .plp__sidebar { position: var(--plp-sidebar-position, sticky); top: var(--plp-sidebar-top, 24px); left: var(--plp-sidebar-left, auto); width: var(--plp-sidebar-width, 450px); min-width: var(--plp-sidebar-min-width, 450px); height: var(--plp-sidebar-height, auto); max-height: var(--plp-sidebar-max-height, calc(100vh - 48px)); overflow-y: var(--plp-filters-overflow-y, visible); background: var(--plp-sidebar-bg, var(--brand-white)); border-radius: var(--plp-sidebar-border-radius, 8px); border: var(--plp-sidebar-border, none); z-index: var(--plp-sidebar-z-index, auto); transform: var(--plp-sidebar-transform, none); transition: var(--plp-sidebar-transition, none); display: var(--plp-sidebar-display, block); flex-direction: var(--plp-sidebar-flex-direction, column); overflow-x: hidden; } .plp__sidebar--open { transform: var(--plp-sidebar-open-transform, none); } .plp__sidebar--stop { position: absolute; top: auto; bottom: 0; transform: none; } .plp__sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: var(--plp-sidebar-header-padding, var(--p-4) var(--p-4)); border-bottom: none; } .plp__sidebar-title { font-family: var(--plp-title-font-family, var(--font-family-2)); font-size: var(--plp-sidebar-title-size, var(--text-md)); font-weight: var(--plp-sidebar-title-weight, var(--weight-bold)); color: var(--plp-title-color, var(--gray-dark-1)); margin: 0; } .plp__sidebar-close { display: var(--plp-sidebar-close-display, none); background: transparent; border: none; cursor: pointer; padding: 4px; color: var(--plp-icon-color, var(--gray-dark-3)); } .plp__sidebar-footer { display: var(--plp-sidebar-footer-display, none); padding: var(--plp-sidebar-footer-padding, var(--p-4) var(--p-4)); border-top: none; } .plp__view-results-btn { width: 100%; padding: 14px 24px; background: var(--plp-btn-primary-bg, var(--brand)); color: var(--plp-btn-card-color, #00233a); border: none; border-radius: var(--plp-btn-border-radius, 50px); font-family: var(--plp-font-family, var(--font-family-1)); font-size: var(--plp-font-size-md, var(--text-md)); font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .plp__view-results-btn:hover { background: var(--plp-btn-primary-bg-hover, var(--brand-hover)); } /* ============================================ Filters ============================================ */ .plp__filters { padding: var(--plp-filters-padding, 0); flex: var(--plp-filters-flex, initial); overflow-y: var(--plp-filters-overflow-y, visible); } .plp__filter { border-bottom: var(--plp-filter-divider-width, 1px) solid var(--plp-filter-divider-color, #e5e5e5); width: var(--plp-filter-width, 450px); max-width: 100%; } .plp__filter:last-child { border-bottom: none; } .plp__filter-header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: var(--plp-filter-header-padding, var(--p-4) var(--p-4)); background: transparent; border: none; cursor: pointer; text-align: left; transition: background 0.2s ease; } .plp__filter-header:hover { background: transparent; } .plp__filter-header--switch { cursor: default; gap: var(--plp-filter-switch-gap, var(--p-4)); padding: var(--plp-filter-switch-padding, var(--p-3) var(--p-4)); } .plp__filter-header--switch:hover { background: transparent; } .plp__filter-label { font-family: var(--plp-font-family, var(--font-family-1)); font-size: var(--plp-filter-label-size, var(--text-md)); font-weight: var(--plp-filter-label-weight, var(--weight-semibold)); color: var(--plp-text-color, var(--brand-black)); } .plp__filter-icon { transition: transform 0.3s ease; color: var(--plp-icon-color, var(--gray-dark-3)); } .plp__filter-content { padding: var(--plp-filter-content-padding, var(--p-0) var(--p-4) var(--p-4)); overflow-x: hidden; width: 100%; box-sizing: border-box; } .plp__filter--range { width: 100%; max-width: 100%; overflow-x: hidden; } .plp__filter--range .plp__filter-content { max-width: 100%; } .filter-vertical-line svg line { stroke: var(--plp-filter-vertical-line-color, var(--gray-dark-8)); } .plp__mobile-filter-btn svg path { stroke: var(--plp-filter-btn, var(--gray-dark-1)); } .plp__mobile-sort svg g { stroke: var(--plp-sort-color, var(--gray-dark-1)); } /* Toggle Switch */ .plp__toggle { position: relative; display: inline-block; width: 48px; height: 26px; } .plp__toggle-input { opacity: 0; width: 0; height: 0; } .plp__toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--plp-toggle-bg, var(--gray-dark-6)); transition: 0.3s; border-radius: 26px; } .plp__toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; } .plp__toggle-input:checked + .plp__toggle-slider { background-color: var(--plp-toggle-active-bg, var(--brand)); } .plp__toggle-input:checked + .plp__toggle-slider:before { transform: translateX(22px); } /* Filter Search */ .plp__filter-search { margin-bottom: 12px; border-bottom: 1px solid #373637; } .plp__filter-search-input { width: 100%; padding: 10px 12px; border: var(--plp-filter-search-border, none); border-bottom: var( --plp-filter-search-border-bottom, var(--border-xs) solid var(--gray-dark-7) ); border-radius: var(--plp-filter-search-border-radius, 0); font-family: var(--font-family-4); font-size: var(--plp-font-size-sm, var(--text-sm)); background: var(--plp-input-bg, var(--gray-dark-9)); color: #373637; } .plp__filter-search-input:focus { outline: none; border-color: var(--plp-focus-color, var(--brand)); } /* Filter Options (Checkboxes) */ .plp__filter-options { max-height: 200px; overflow-y: auto; border: var(--plp-filter-options-border, none); padding: var(--plp-filter-options-padding, var(--p-2) var(--p-3)); } .plp__filter-option { display: flex; align-items: center; gap: var(--plp-filter-options-gap, var(--p-3)); padding: 8px 0; cursor: pointer; } .plp__filter-checkbox { position: absolute; opacity: 0; cursor: pointer; } .plp__filter-checkbox-custom { width: 18px; height: 18px; border: 2px solid var(--plp-checkbox-border, var(--brand)); border-radius: 3px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; } .plp__filter-checkbox:checked ~ .plp__filter-checkbox-custom { background: var(--plp-checkbox-active-bg, var(--brand)); } .plp__filter-checkbox:checked ~ .plp__filter-checkbox-custom::after { content: ""; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .plp__filter-option-label { font-family: var(--font-family-4); font-size: var(--text-md); color: #373637; } /* Price Range */ .plp__price-inputs { display: flex; gap: 12px; margin-bottom: 16px; width: 100%; box-sizing: border-box; max-width: 100%; } .plp__price-input-group { flex: 1 1 0; min-width: 0; } .plp__price-input { width: 100%; padding: 10px 12px; border: var(--plp-price-input-border, none); border-bottom: 1px solid #373637; border-radius: var(--plp-border-radius, var(--p-1)); font-family: var(--font-family-4); font-size: var(--text-base); background: var(--plp-input-bg, var(--gray-dark-9)); box-sizing: border-box; color: var(--brand-black); } .plp__price-slider { position: relative; height: var(--plp-slider-height, 6px); margin: 20px 0; width: 100%; box-sizing: border-box; max-width: 100%; } .plp__price-slider-track { position: absolute; width: 100%; height: 100%; background: var(--plp-slider-track-bg, var(--gray-dark-8)); border-radius: 3px; pointer-events: none; z-index: 1; } .plp__price-slider-range { position: absolute; height: 100%; background: var(--plp-slider-range-bg); border-radius: 3px; pointer-events: none; z-index: 2; } .plp__price-slider-input { position: absolute; width: 100%; height: var(--plp-slider-height, 6px); background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; top: 0; z-index: 3; cursor: pointer; touch-action: none; } .plp__price-slider-input[data-price-slider-min] { z-index: 4; } .plp__price-slider-input::-webkit-slider-runnable-track { background: transparent; height: var(--plp-slider-height, 6px); } .plp__price-slider-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--plp-slider-thumb-size, 18px); height: var(--plp-slider-thumb-size, 18px); background: var(--plp-slider-thumb-bg, var(--brand-dark)); border: 2px solid var(--plp-slider-thumb-border, var(--brand-white)); border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); margin-top: calc(-1 * (var(--plp-slider-thumb-size, 18px) - var(--plp-slider-height, 6px)) / 2); } .plp__price-slider-input::-moz-range-track { background: transparent; height: var(--plp-slider-height, 6px); } .plp__price-slider-input::-moz-range-thumb { width: var(--plp-slider-thumb-size, 18px); height: var(--plp-slider-thumb-size, 18px); background: var(--plp-slider-thumb-bg, var(--brand-dark)); border: 2px solid var(--plp-slider-thumb-border, var(--brand-white)); border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /* ============================================ Main Content ============================================ */ .plp__main { min-width: 0; padding-bottom: var(--plp-main-padding-bottom, var(--p-6)); } /* Controls Bar */ .plp__controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--plp-controls-margin, var(--p-4\.5)); flex-wrap: wrap; gap: 16px; padding: var(--plp-controls-padding, var(--p-0)); flex-direction: var(--plp-controls-flex-direction, row); } .plp__price-type-toggle { display: flex; background: var(--plp-toggle-group-bg, var(--gray-dark-9)); border-radius: var(--plp-btn-border-radius, 50px); padding: 2px; width: var(--plp-price-toggle-width, 299px); height: var(--plp-price-toggle-height, 48px); } /* FIX: flex: 1 ensures both buttons share equal space — no layout shift on toggle */ .plp__price-type-btn { flex: 1; padding: var(--plp-price-toggle-btn-padding, var(--p-3) var(--p-4\.5)); border: none; background: transparent; font-family: var(--font-family-4); font-size: var(--plp-font-size-xs, var(--text-xs)); font-weight: var(--weight-normal); color: #373637; cursor: pointer; border-radius: var(--plp-btn-border-radius, 50px); transition: all 0.2s ease; } .plp__price-type-btn--active { background: var(--plp-price-type-active-bg, var(--brand-white)); color: var(--plp-price-type-active-btn, #00233a); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); font-weight: var(--plp-price-type-active-font-weight, var(--weight-bolder)); font-size: var(--plp-font-size-xs, var(--text-xs)); font-family: var(--font-family-3); /* Removed hardcoded width — flex: 1 on base handles equal sizing */ } .plp__price-type-btn--disabled { position: relative; color: #aaa !important; cursor: not-allowed !important; } .plp__disabled-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 11px; white-space: nowrap; padding: 4px 8px; border-radius: 4px; pointer-events: none; z-index: 10; animation: plp-tooltip-fade 2.5s ease forwards; } .plp__disabled-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(0, 0, 0, 0.75); } @keyframes plp-tooltip-fade { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } .plp__sort-dropdown { min-width: 160px; display: var(--plp-sort-dropdown-display, block); } .plp__sort-select { width: 100%; padding: 6px 32px 8px 4px; border: none; border-bottom: 1px solid #373637; border-radius: 0; font-family: var(--font-family-4); font-size: var(--plp-font-size-mobile-filter, var(--text-base)); font-weight: var(--plp-font-weight-mobile-sort, 400); color: var(--plp-color-mobile-filter); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center; appearance: none; cursor: pointer; } .plp__sort-select:focus { outline: none; border-bottom-color: var(--plp-focus-color, var(--brand)); } /* ============================================ Vehicle Grid ============================================ */ .plp__grid { display: grid; grid-template-columns: var(--plp-grid-columns, repeat(3, 1fr)); gap: var(--plp-grid-gap, var(--p-4\.5)); padding: var(--plp-grid-padding, 0); align-items: start; } /* ============================================ Vehicle Card ============================================ */ /* FIX: Removed hardcoded padding: 32px 24px — padding is handled by inner elements */ .plp__card { display: flex; flex-direction: column; background: var(--plp-card-bg, var(--brand-white)); border: 1px solid var(--plp-card-border, var(--gray-dark-8)); border-radius: var(--plp-card-border-radius, var(--p-2)); overflow: hidden; transition: box-shadow 0.2s ease; height: auto; box-sizing: border-box; min-width: 0; } .plp__card:hover { box-shadow: var(--plp-card-hover-shadow, 0 4px 12px rgba(0, 0, 0, 0.1)); } .plp__card-image { aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; padding: var(--plp-card-image-padding, var(--p-4)); background: var(--plp-card-image-bg, var(--gray-light-2)); height: var(--plp-card-image-height, 200px); } .plp__card-image img { max-width: 100%; max-height: 100%; object-fit: contain; } .plp__card-info { padding: var(--plp-card-info-padding, var(--p-4) var(--p-4) var(--p-2)); } .plp__card-brand { display: block; font-family: var(--font-family-4); font-size: var(--text-base); font-weight: 400; color: var(--brand-black); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .plp__card-model { font-family: var(--font-family-1); font-size: var(--text-lg); font-weight: var(--plp-card-model-weight, var(--weight-bolder)); color: var(--brand-black); margin: 0 0 4px; } .plp__card-version { display: block; font-family: var(--plp-font-family, var(--font-family-1)); font-size: var(--plp-font-size-sm, var(--text-sm)); color: var(--plp-text-muted, var(--gray-dark-3)); text-transform: uppercase; } /* Card Pricing */ .plp__card-pricing { padding: var(--plp-card-pricing-padding, var(--p-2) var(--p-4) var(--p-4)); flex-grow: 0; } .plp__card-price-view { margin-bottom: 8px; } .plp__card-price-view--hidden { display: none; } .plp__card-price-label { display: block; font-family: var(--font-family-4); font-size: var(--plp-font-size-xs, var(--text-xs)); color: #373637; margin-bottom: 2px; } .plp__card-price-main { display: flex; flex-direction: column; gap: 2px; } .plp__card-price-primary { font-family: var(--font-family-1); font-size: 32px; font-weight: var(--plp-card-price-weight, var(--weight-bolder)); color: var(--brand-black); } .plp__card-price-secondary { font-family: var(--plp-title-font-family, var(--font-family-2)); font-size: 32px; font-weight: var(--weight-normal); color: var(--brand-black); } /* Card Breakdown */ .plp__card-breakdown { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--plp-border-color, var(--gray-dark-8)); } .plp__card-breakdown-row { display: flex; gap: 4px; font-family: var(--font-family-4); font-size: 14px; color: #373637; margin-bottom: 4px; flex-wrap: wrap; } .plp__card-breakdown-label { color: #373637; } .plp__card-breakdown-value strong { color: var(--brand-black); font-family: var(--font-family-3); } /* Card Buttons */ /* FIX: Removed hardcoded width: 334px, height: 60px, and gap: 20px. align-items changed from center to stretch so buttons fill the card width. */ .plp__card-buttons { display: flex; flex-direction: column; gap: var(--plp-card-buttons-gap, 20px); padding: var(--plp-card-buttons-padding, var(--p-0) var(--p-4) var(--p-4)); align-items: center; } .plp__card-btn { display: flex; justify-content: center; align-items: center; width: var(--plp-card-btn-width, 334px); max-width: 100%; height: var(--plp-card-btn-height, 60px); text-align: center; text-decoration: none; font-family: var(--plp-font-family, var(--font-family-1)); font-size: var(--plp-font-size-md, var(--text-md)); font-weight: var(--plp-font-weight-card); border-radius: var(--plp-btn-border-radius, 50px); transition: all 0.2s ease; box-sizing: border-box; } .plp__card-btn--primary { background: var(--plp-btn-primary-bg, var(--brand)); color: var(--plp-btn-primary-color, var(--brand-white)); border: 2px solid var(--plp-btn-primary-bg, var(--brand)); font-family: var(--font-family-1); } .plp__card-btn--primary:hover { background: var(--plp-btn-primary-bg-hover, var(--brand-hover)); border-color: var(--plp-btn-primary-bg-hover, var(--brand-hover)); color: var(--plp-btn-primary-color-hover, var(--brand-whiter)); } .plp__card-btn--secondary { background: transparent; color: var(--brand-black); border: 2px solid var(--plp-btn-secondary-border, var(--brand-dark)); font-family: var(--font-family-1); } .plp__card-btn--secondary:hover { background: var(--plp-btn-secondary-bg-hover, var(--brand-dark)); color: var(--plp-btn-secondary-color-hover, var(--brand-white)); border: 2px solid var(--plp-btn-secondary-border-hover, var(--brand-white)); } /* Card Disclaimer */ .plp__card-disclaimer { padding: var(--plp-card-disclaimer-padding, var(--p-3) var(--p-4)); font-family: var(--font-family-4); font-size: var(--plp-font-size-xs, var(--text-xs)); color: #373637; line-height: 1.4; border-top: 1px solid var(--plp-border-color, var(--gray-dark-8)); } /* ============================================ Empty State ============================================ */ .plp__empty { text-align: center; padding: 60px 20px; color: var(--plp-text-muted, var(--gray-dark-3)); } /* ============================================ Pagination ============================================ */ .plp__pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: var(--plp-pagination-margin, var(--p-4)); padding: var(--plp-pagination-padding, var(--p-3) var(--p-0)); } .plp__pagination-btn { display: flex; align-items: center; justify-content: center; width: var(--plp-pagination-size, calc(var(--p-4) * 2)); height: var(--plp-pagination-size, calc(var(--p-4) * 2)); background: #fff; border: 1px solid var(--plp-pagination-border-color, var(--gray-dark-7)); border-radius: 50%; cursor: pointer; color: var(--plp-text-color, var(--gray-dark-1)); transition: all 0.2s ease; } .plp__pagination-btn:hover:not(:disabled) { background: var(--plp-pagination-hover-bg, var(--gray-dark-9)); } .plp__pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; } .plp__pagination-pages { display: flex; align-items: center; gap: 4px; } .plp__pagination-page { display: flex; align-items: center; justify-content: center; width: var(--plp-pagination-size, calc(var(--p-4) * 2)); height: var(--plp-pagination-size, calc(var(--p-4) * 2)); background: #fff; border: 1px solid var(--plp-pagination-border-color, var(--gray-dark-7)); border-radius: 50%; font-family: var(--plp-font-family, var(--font-family-1)); font-size: var(--plp-pagination-font-size, var(--text-xs)); color: var(--plp-text-color, var(--gray-dark-1)); cursor: pointer; transition: all 0.2s ease; } .plp__pagination-page:hover { background: var(--plp-pagination-hover-bg, var(--gray-dark-9)); } .plp__pagination-page--active { background: var(--plp-pagination-active-bg, var(--brand-white)); color: var(--plp-pagination-active-color, var(--brand-dark)); border-color: var(--plp-pagination-active-border, var(--brand-light)); font-weight: 600; } .plp__pagination-ellipsis { padding: 0 8px; color: var(--plp-text-muted, var(--gray-dark-3)); } @media (max-width: 768px) { .plp__mobile-sort { display: flex; align-items: center; } .plp__sort-select { background: none; border-bottom: none; padding: 6px 32px 8px 6px; font-family: var(--font-family-1); font-size: 20px; } .plp__price-type-toggle { width: 100%; } } @media (max-width: 576px) { .plp__sort-select { font-size: 16px; font-family: var(--font-family-3); } } /* --- Inlined from: ./[blocklist]_components/thankYouPage/thankYouPage.css --- */ /* --- Inlined from: ../../[branding]_components/thankYouPage.css --- */ :root { /*GENERAL / CONTAINER */ --thank-you-page-bg: var(--brand-white); --thank-you-page-padding: 4rem 2rem; --thank-you-page-padding-tablet: 3rem 1.5rem; --thank-you-page-padding-mobile: 2rem 1rem; /* LABEL (small text above title) */ --thank-you-page-label-font-family: var(--font-family-1); --thank-you-page-label-font-size: var(--text-lg); --thank-you-page-label-font-weight: var(--weight-normal); --thank-you-page-label-color: var(--gray-dark-1); --thank-you-page-label-text-transform: none; --thank-you-page-label-margin-bottom: 10px; /* TITLE */ --thank-you-page-title-font-family: var(--font-family-1); --thank-you-page-title-font-size: 40px; --thank-you-page-title-font-size-tablet: 32px; --thank-you-page-title-font-size-mobile: 22px; --thank-you-page-title-font-weight: var(--weight-bolder); --thank-you-page-title-line-height: 1.2; --thank-you-page-title-color: #1a1a1a; /* GREETING (personalized name) */ --thank-you-page-greeting-font-family: var(--font-family-1); --thank-you-page-greeting-font-size: var(--text-xl); --thank-you-page-greeting-font-size-tablet: 20px; --thank-you-page-greeting-font-size-mobile: 18px; --thank-you-page-greeting-font-weight: var(--weight-bolder); --thank-you-page-greeting-color: #1a1a1a; --thank-you-page-greeting-margin-bottom: 20px; /* DESCRIPTION */ --thank-you-page-description-font-family: var(--font-family-4); --thank-you-page-description-font-size: var(--text-md); --thank-you-page-description-font-size-mobile: var(--text-base); --thank-you-page-description-font-weight: var(--weight-normal); --thank-you-page-description-line-height: 100%; --thank-you-page-description-color: #1a1a1a; --thank-you-page-description-max-width: 550px; --thank-you-page-description-margin-bottom: 20px; /* BUTTONS CONTAINER */ --thank-you-page-buttons-gap: 20px; --thank-you-page-buttons-gap-mobile: 20px; /* PRIMARY BUTTON (cyan filled) */ --thank-you-page-btn-font-family: var(--font-family-1); --thank-you-page-btn-font-size: var(--text-md); --thank-you-page-btn-font-weight: var(--weight-normal); --thank-you-page-btn-padding: 0.875rem 3rem; --thank-you-page-btn-padding-mobile: 0.875rem 2rem; --thank-you-page-btn-border-radius: 8px; --thank-you-page-btn-min-width: 405px; --thank-you-page-btn-min-width-mobile: 300px; --thank-you-page-btn-primary-bg: #D70C19; --thank-you-page-btn-primary-color: var(--brand-white); --thank-you-page-btn-primary-border-color: #D70C19; --thank-you-page-btn-primary-hover-bg: #888888; --thank-you-page-btn-primary-hover-color: var(--brand-white); --thank-you-page-btn-primary-hover-border-color: #888888; /* SECONDARY BUTTON (outlined) */ --thank-you-page-btn-secondary-bg: var(--brand-white); --thank-you-page-btn-secondary-color: var(--brand-black); --thank-you-page-btn-secondary-border-color: var(--gray-dark-10); --thank-you-page-btn-secondary-hover-bg: var(--gray-light-4); --thank-you-page-btn-secondary-hover-color: var(--brand-black); --thank-you-page-btn-secondary-hover-border-color: var(--gray-dark-10); /* BACKGROUND IMAGE (optional) */ --thank-you-page-background-overlay: rgba(255, 255, 255, 0.95); /* WITH BACKGROUND VARIANT */ --thank-you-page-with-bg-min-height: 500px; --thank-you-page-with-bg-text-color: var(--brand-white); --thank-you-page-with-bg-description-opacity: 0.9; --thank-you-page-with-bg-content-max-width: 450px; --thank-you-page-with-bg-btn-secondary-bg: transparent; --thank-you-page-with-bg-btn-secondary-color: var(--brand-white); --thank-you-page-with-bg-btn-secondary-border-color: var(--brand-white); --thank-you-page-with-bg-btn-secondary-hover-bg: rgba(255, 255, 255, 0.1); } @media (min-width: 1366px) { :root { --thank-you-page-description-font-size: 18px; } } @media (max-width: 1366px) { :root { --thank-you-page-description-font-size: 16px; --thank-you-page-description-font-size-mobile: 16px; } } @media (max-width: 576px) { :root { --thank-you-page-btn-font-size: 16px; } } /* THANK YOU PAGE COMPONENT */ .thank-you-page-section { position: relative; width: 100%; height: 100%; background-color: var(--thank-you-page-bg); display: flex; align-items: center; justify-content: center; } .thank-you-page-container { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; padding: var(--thank-you-page-padding); display: flex; align-items: center; justify-content: center; height: 720px; } /* BACKGROUND IMAGE (optional) */ .thank-you-page-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .thank-you-page-background::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 720px; z-index: 2; } .thank-you-page-background-image { width: 100%; height: 720px; object-fit: cover; } /* CONTENT */ .thank-you-page-content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 700px; width: 100%; } /* LABEL */ .thank-you-page-label { font-family: var(--thank-you-page-label-font-family); font-size: var(--thank-you-page-label-font-size); font-weight: var(--thank-you-page-label-font-weight); color: var(--thank-you-page-label-color); text-transform: var(--thank-you-page-label-text-transform); margin-bottom: var(--thank-you-page-label-margin-bottom); } /* TITLE */ .thank-you-page-title { font-family: var(--thank-you-page-title-font-family); font-size: var(--thank-you-page-title-font-size); font-weight: var(--thank-you-page-title-font-weight); line-height: var(--thank-you-page-title-line-height); color: var(--thank-you-page-title-color); } /* GREETING */ .thank-you-page-greeting { font-family: var(--thank-you-page-greeting-font-family); font-size: var(--thank-you-page-greeting-font-size); font-weight: var(--thank-you-page-greeting-font-weight); color: var(--thank-you-page-greeting-color); margin: 0 0 var(--thank-you-page-greeting-margin-bottom) 0; } /* DESCRIPTION */ .thank-you-page-description { font-family: var(--thank-you-page-description-font-family); font-size: var(--thank-you-page-description-font-size); font-weight: var(--thank-you-page-description-font-weight); line-height: var(--thank-you-page-description-line-height); color: var(--thank-you-page-description-color); max-width: var(--thank-you-page-description-max-width); margin: 0 0 var(--thank-you-page-description-margin-bottom) 0; } /* BUTTONS */ .thank-you-page-buttons { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--thank-you-page-buttons-gap); width: 100%; } .thank-you-page-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--thank-you-page-btn-padding); font-family: var(--thank-you-page-btn-font-family); font-size: var(--thank-you-page-btn-font-size); font-weight: var(--thank-you-page-btn-font-weight); text-decoration: none; border-radius: var(--thank-you-page-btn-border-radius); border-width: 2px; border-style: solid; transition: all 0.3s ease; cursor: pointer; min-width: var(--thank-you-page-btn-min-width); text-align: center; } /* Primary Button (cyan filled) */ .thank-you-page-btn-primary { background-color: var(--thank-you-page-btn-primary-bg); color: var(--thank-you-page-btn-primary-color); border-color: var(--thank-you-page-btn-primary-border-color); } .thank-you-page-btn-primary:hover, .thank-you-page-btn-primary:focus { background-color: var(--thank-you-page-btn-primary-hover-bg); color: var(--thank-you-page-btn-primary-hover-color); border-color: var(--thank-you-page-btn-primary-hover-border-color); } /* Secondary Button (outlined) */ .thank-you-page-btn-secondary { background-color: var(--thank-you-page-btn-secondary-bg); color: var(--thank-you-page-btn-secondary-color); border-color: var(--thank-you-page-btn-secondary-border-color); } .thank-you-page-btn-secondary:hover, .thank-you-page-btn-secondary:focus { background-color: var(--thank-you-page-btn-secondary-hover-bg); color: var(--thank-you-page-btn-secondary-hover-color); border-color: var(--thank-you-page-btn-secondary-hover-border-color); } .thank-you-page-section--with-bg .thank-you-page-background::after { background: linear-gradient( to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.85) 20%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.2) 60%, transparent 75% ), linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 35%); } @media (max-width: 1366px) { .thank-you-page-background-image, .thank-you-page-background::after, .thank-you-page-container { height: 530px; } } /* RESPONSIVE - TABLET (780px) */ @media (max-width: 780px) { .thank-you-page-container { padding: var(--thank-you-page-padding-tablet); } .thank-you-page-title { font-size: var(--thank-you-page-title-font-size-tablet); } .thank-you-page-greeting { font-size: var(--thank-you-page-greeting-font-size-tablet); } .thank-you-page-buttons { flex-direction: column; width: 100%; gap: var(--thank-you-page-buttons-gap-mobile); max-width: 405px; } .thank-you-page-btn { width: 100%; height: 60px; min-width: var(--thank-you-page-btn-min-width-mobile); } } /* RESPONSIVE - MOBILE (576px) */ @media (max-width: 576px) { .thank-you-page-container { padding: var(--thank-you-page-padding-mobile); } .thank-you-page-title { font-size: var(--thank-you-page-title-font-size-mobile); } .thank-you-page-greeting { font-size: var(--thank-you-page-greeting-font-size-mobile); } .thank-you-page-description { font-size: var(--thank-you-page-description-font-size-mobile); } .thank-you-page-buttons { max-width: 320px; } .thank-you-page-btn { padding: var(--thank-you-page-btn-padding-mobile); } .thank-you-page-background-image, .thank-you-page-background::after, .thank-you-page-container { height: 443px; } } /* WITH BACKGROUND IMAGE VARIANT */ /* .thank-you-page-section--with-bg { min-height: 500px; } */ .thank-you-page-section--with-bg .thank-you-page-container { justify-content: flex-start; padding: 4rem 5rem; } .thank-you-page-section--with-bg .thank-you-page-background-image { object-position: right center; } .thank-you-page-section--with-bg .thank-you-page-content { align-items: flex-start; text-align: left; max-width: 450px; } /* Text colors - white on dark background */ .thank-you-page-section--with-bg .thank-you-page-label { color: var(--brand-white); } .thank-you-page-section--with-bg .thank-you-page-title { color: var(--brand-white); } .thank-you-page-section--with-bg .thank-you-page-greeting { color: var(--brand-white); } .thank-you-page-section--with-bg .thank-you-page-description { color: var(--brand-white); opacity: 0.9; } /* Buttons - stacked vertically on desktop/tablet */ .thank-you-page-section--with-bg .thank-you-page-buttons { flex-direction: column; align-items: flex-start; max-width: 280px; } .thank-you-page-section--with-bg .thank-you-page-btn { width: 100%; } /* Secondary button - white border on dark background */ .thank-you-page-section--with-bg .thank-you-page-btn-secondary { background-color: transparent; color: var(--brand-white); border-color: var(--brand-white); } .thank-you-page-section--with-bg .thank-you-page-btn-secondary:hover, .thank-you-page-section--with-bg .thank-you-page-btn-secondary:focus { background-color: rgba(255, 255, 255, 0.1); color: var(--brand-white); border-color: var(--brand-white); } /* WITH BACKGROUND - TABLET (768px) */ @media (max-width: 768px) { .thank-you-page-section--with-bg .thank-you-page-container { padding: 3rem 2rem; } .thank-you-page-section--with-bg .thank-you-page-content { max-width: 400px; } .thank-you-page-section--with-bg .thank-you-page-buttons { max-width: 280px; } } /* WITH BACKGROUND - MOBILE (576px) */ @media (max-width: 576px) { .thank-you-page-section--with-bg { min-height: 400px; } .thank-you-page-section--with-bg .thank-you-page-container { min-height: inherit; align-items: flex-end; padding-bottom: 2rem; } .thank-you-page-section--with-bg .thank-you-page-background::after { background: linear-gradient( to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100% ); } .thank-you-page-content, .thank-you-page-section--with-bg .thank-you-page-content { align-items: flex-start; text-align: left; max-width: 100%; gap: 8px; } .thank-you-page-section--with-bg .thank-you-page-label, .thank-you-page-section--with-bg .thank-you-page-title, .thank-you-page-section--with-bg .thank-you-page-greeting, .thank-you-page-section--with-bg .thank-you-page-description { margin-bottom: 0; } /* Buttons - stacked vertically on mobile with background */ .thank-you-page-section--with-bg .thank-you-page-buttons { flex-direction: column; align-items: stretch; max-width: 100%; gap: 0.75rem; margin-top: .5rem; } .thank-you-page-section--with-bg .thank-you-page-btn { width: 100%; height: 48px; min-width: unset; padding: 0; line-height: normal; } } /* --- Inlined from: ./[blocklist]_components/blogHomePage/blogHomePage.css --- */ /* Blog Home Page - Component Styles */ /* --- Inlined from: ../../[branding]_components/blogHomePage.css --- */ /* Blog Home Page - Branding Variables */ :root { /* Section */ --blog-home-section-padding: 60px 0; --blog-home-max-width: 1900px; --blog-main-content-max-width: 1152px; --blog-home-container-padding: 0 60px; /* Page Header */ --blog-home-header-margin-bottom: 40px; --blog-home-title-font-family: var(--font-family-1); --blog-home-title-font-size: 32px; --blog-home-title-font-weight: var(--weight-bolder); --blog-home-title-color: var(--brand-black); --blog-home-title-text-transform: uppercase; --blog-home-title-margin-bottom: 16px; --blog-home-description-font-family: var(--font-family-4); --blog-home-description-font-size: var(--text-md); --blog-home-description-color: var(--gray-dark-1); --blog-home-description-line-height: 1.6; /* Featured Section */ --blog-featured-title-font-family: var(--font-family-1); --blog-featured-title-font-size: var(--text-xl); --blog-featured-title-font-weight: var(--weight-bolder); --blog-featured-title-color: var(--brand-black); --blog-featured-title-margin-bottom: 24px; --blog-featured-grid-gap: 16px; --blog-featured-grid-height: 686px; --blog-featured-card-bg: var(--brand-black); --blog-featured-card-radius: 0; --blog-featured-card-title-font-family: var(--font-family-1); --blog-featured-card-title-font-size: 24px; --blog-featured-card-title-font-weight: var(--weight-bolder); --blog-featured-card-title-color: var(--brand-white); --blog-featured-card-date-font-family: var(--font-family-4); --blog-featured-card-date-font-size: var(--text-sm); --blog-featured-card-date-color: var(--brand-white); --blog-featured-large-title-font-size: 24px; --blog-featured-small-title-font-size: 24px; /* Latest Articles */ --blog-latest-title-font-family: var(--font-family-1); --blog-latest-title-font-size: var(--text-xl); --blog-latest-title-font-weight: var(--weight-bolder); --blog-latest-title-color: var(--brand-black); --blog-latest-title-margin-bottom: 24px; --blog-article-card-bg: var(--brand-white); --blog-article-card-border: 1px solid var(--gray-dark-8); --blog-article-card-padding: 0; --blog-article-card-margin-bottom: 24px; --blog-article-card-gap: 24px; --blog-article-image-width: 380px; --blog-article-image-height: 250px; --blog-article-image-radius: 0; --blog-article-title-font-family: var(--font-family-2); --blog-article-title-font-size: 24px; --blog-article-title-font-weight: 400; --blog-article-title-color: var(--brand-black); --blog-article-title-margin-bottom: 8px; --blog-article-description-font-family: var(--font-family-4); --blog-article-description-font-size: 18px; --blog-article-description-font-weight: 400; --blog-article-description-color: var(--gray-dark-1); --blog-article-description-line-height: 1.5; --blog-article-description-margin-bottom: 12px; --blog-article-meta-font-family: var(--font-family-1); --blog-article-meta-font-size: var(--text-xs); --blog-article-meta-color: var(--brand-black); --blog-article-category-bg: var(--gray-dark-9); --blog-article-category-color: var(--gray-dark-1); --blog-article-category-font-size: 14px; --blog-article-category-padding: 6px 14px; --blog-article-category-radius: 50px; --blog-article-link-font-family: var(--font-family-2); --blog-article-link-font-size: 16px; --blog-article-link-font-weight: 400; --blog-article-link-color: var(--brand-black); --blog-article-link-hover-color: var(--brand); /* Sidebar */ --blog-sidebar-width: 100%; --blog-sidebar-gap: 80px; --blog-sidebar-title-font-family: var(--font-family-1); --blog-sidebar-title-font-size: var(--text-xl); --blog-sidebar-title-font-weight: var(--weight-bolder); --blog-sidebar-title-color: var(--brand-black); --blog-sidebar-title-margin-bottom: 16px; --blog-tag-bg: transparent; --blog-tag-bg-active: var(--brand); --blog-tag-color: var(--gray-dark-3); --blog-tag-color-active: var(--brand-white); --blog-tag-border: 1px solid var(--gray-dark-6); --blog-tag-border-active: 1px solid var(--brand); --blog-tag-font-size: var(--text-sm); --blog-tag-padding: 8px 20px; --blog-tag-radius: 50px; --blog-tag-gap: 10px; /* Pagination */ --blog-pagination-margin-top: 40px; --blog-pagination-gap: 8px; --blog-pagination-btn-size: 32px; --blog-pagination-btn-bg: var(--brand-white); --blog-pagination-btn-bg-active: #00233a; --blog-pagination-btn-color: var(--gray-dark-1); --blog-pagination-btn-color-active: var(--brand-white); --blog-pagination-btn-border: 1px solid #373637; --blog-pagination-btn-border-active: 1px solid #00233a; --blog-pagination-btn-radius: 50%; --blog-pagination-btn-font-size: var(--text-sm); --blog-pagination-nav-bg: #ffffff33; --blog-pagination-nav-color: #e5e5e5; --blog-pagination-nav-color-active: #00233a; --blog-pagination-nav-border: 1px solid var(--gray-light-3); --blog-pagination-divider-color: var(--gray-light-4); /* Swiper Navigation */ --blog-swiper-nav-color: var(--brand-black); --blog-swiper-nav-size: 44px; --blog-swiper-pagination-color: var(--gray-dark-7); --blog-swiper-pagination-active-color: var(--brand); } /* Tablet */ @media (max-width: 1024px) { :root { --blog-home-container-padding: 0 40px; --blog-sidebar-width: 280px; --blog-sidebar-gap: 30px; --blog-article-image-width: 180px; } } /* Mobile */ @media (max-width: 768px) { :root { --blog-home-section-padding: 40px 0; --blog-home-container-padding: 0 16px; --blog-home-title-font-size: 20px; --blog-featured-title-font-size: var(--text-lg); --blog-latest-title-font-size: var(--text-lg); --blog-sidebar-title-font-size: var(--text-md); --blog-featured-card-width: 300px; --blog-article-image-width: 120px; --blog-article-image-height: 100px; } } html { scroll-behavior: smooth; } /* =========================================== 1. PAGE HEADER =========================================== */ .blog-home-header { text-align: center; margin-bottom: var(--blog-home-header-margin-bottom); padding: var(--blog-home-section-padding); padding-bottom: 50px; background-color: #f1f1f1; } .blog-home-header__title { font-family: var(--blog-home-title-font-family); font-size: var(--blog-home-title-font-size); font-weight: var(--blog-home-title-font-weight); color: var(--blog-home-title-color); text-transform: var(--blog-home-title-text-transform); margin: 0 0 var(--blog-home-title-margin-bottom) 0; } .blog-home-header__description { font-family: var(--blog-home-description-font-family); font-size: var(--blog-home-description-font-size); color: var(--blog-home-description-color); line-height: var(--blog-home-description-line-height); max-width: 800px; margin: 0 auto; } .blog-home-header__description p { margin: 0; } /* =========================================== 2. FEATURED ARTICLES SECTION =========================================== */ .blog-featured-section { padding: var(--blog-home-section-padding); padding-top: 0; background-color: var(--brand-white); } .blog-featured-section__inner { max-width: var(--blog-home-max-width); margin: 0 auto; padding: var(--blog-home-container-padding); } .blog-featured-section__title { font-family: var(--blog-featured-title-font-family); font-size: var(--blog-featured-title-font-size); font-weight: var(--blog-featured-title-font-weight); color: var(--blog-featured-title-color); margin: 0 0 var(--blog-featured-title-margin-bottom) 0; padding-bottom: 25px; border-bottom: 1px solid var(--gray-dark-8); } /* Featured Grid Layout - Base */ .blog-featured-grid { display: grid; gap: var(--blog-featured-grid-gap); height: var(--blog-featured-grid-height); } /* 3 Images - 1 large + 2 small stacked (50/50) */ .blog-featured-grid--triple { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .blog-featured-grid--triple .blog-featured-card--large { grid-row: 1 / 3; } /* 2 Images - 50/50 split */ .blog-featured-grid--double { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } /* 1 Image - full width */ .blog-featured-grid--single { grid-template-columns: 1fr; grid-template-rows: 1fr; } /* Featured Card Base */ .blog-featured-card { position: relative; display: block; overflow: hidden; border-radius: var(--blog-featured-card-radius); text-decoration: none; background: var(--blog-featured-card-bg); } .blog-featured-card__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .blog-featured-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .blog-featured-card:hover .blog-featured-card__image img { transform: scale(1.05); } /* Gradient overlay */ .blog-featured-card::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient( to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100% ); pointer-events: none; z-index: 1; } /* Card content - positioned at bottom */ .blog-featured-card__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; z-index: 2; } .blog-featured-card__title { font-family: var(--blog-featured-card-title-font-family); font-weight: var(--blog-featured-card-title-font-weight); color: var(--blog-featured-card-title-color); margin: 0 0 8px 0; line-height: 1.3; } /* Large card title */ .blog-featured-card--large .blog-featured-card__title { font-size: var(--blog-featured-large-title-font-size); } /* Small card title */ .blog-featured-card--small .blog-featured-card__title { font-size: var(--blog-featured-small-title-font-size); } .blog-featured-card__categories { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .blog-featured-card__category { display: inline-block; background: var(--blog-article-category-bg); color: var(--blog-article-category-color); font-family: var(--font-family-1); font-size: var(--blog-article-category-font-size); padding: var(--blog-article-category-padding); border-radius: var(--blog-article-category-radius); } .blog-featured-card__date { font-family: var(--blog-featured-card-date-font-family); font-size: var(--blog-featured-card-date-font-size); color: var(--blog-featured-card-date-color); } /* =========================================== 3. MAIN CONTENT AREA (TWO COLUMNS) =========================================== */ .blog-main-content { max-width: var(--blog-home-max-width); margin: 0 auto; padding: var(--blog-home-section-padding); padding-left: 60px; padding-right: 60px; display: flex; gap: var(--blog-sidebar-gap); } /* Left Column - Articles */ .blog-articles-column { flex: 1 1 auto; max-width: var(--blog-main-content-max-width); min-width: 0; } .blog-articles-column__title { font-family: var(--blog-latest-title-font-family); font-size: var(--blog-latest-title-font-size); font-weight: var(--blog-latest-title-font-weight); color: var(--blog-latest-title-color); margin: 0 0 var(--blog-latest-title-margin-bottom) 0; padding-bottom: 25px; border-bottom: 1px solid var(--gray-dark-8); } /* Article Card - Content Left, Image Right */ .blog-article-card { display: flex; flex-direction: row; gap: var(--blog-article-card-gap); padding: var(--blog-article-card-padding); margin-bottom: var(--blog-article-card-margin-bottom); background: var(--blog-article-card-bg); border-bottom: var(--blog-article-card-border); padding-bottom: 24px; } .blog-article-card:last-child { border-bottom: none; margin-bottom: 0; } /* Content on left */ .blog-article-card__content { flex: 1; display: flex; flex-direction: column; min-width: 0; order: 1; } /* Image on right */ .blog-article-card__image { flex-shrink: 0; width: var(--blog-article-image-width); height: var(--blog-article-image-height); overflow: hidden; border-radius: var(--blog-article-image-radius); order: 2; } .blog-article-card__image img { width: 100%; height: 100%; object-fit: cover; } .blog-article-card__title { font-family: var(--blog-article-title-font-family); font-size: var(--blog-article-title-font-size); font-weight: var(--blog-article-title-font-weight); color: var(--blog-article-title-color); margin: 0 0 var(--blog-article-title-margin-bottom) 0; line-height: 1.4; } .blog-article-card__description { font-family: var(--blog-article-description-font-family); font-size: var(--blog-article-description-font-size); font-weight: var(--blog-article-description-font-weight); color: var(--blog-article-description-color); line-height: var(--blog-article-description-line-height); margin-bottom: var(--blog-article-description-margin-bottom); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-article-card__description p { margin: 0; } .blog-article-card__link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--blog-article-link-font-family); font-size: var(--blog-article-link-font-size); font-weight: var(--blog-article-link-font-weight); color: var(--blog-article-link-color); text-decoration: underline; margin-bottom: 12px; transition: color 0.3s ease; } .blog-article-card__link:hover { color: var(--blog-article-link-hover-color); } .blog-article-card__link svg { width: 16px; height: 16px; } /* Meta at bottom */ .blog-article-card__meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: auto; } .blog-article-card__categories { display: flex; flex-wrap: wrap; gap: 8px; } .blog-article-card__category { display: inline-block; background: var(--blog-article-category-bg); color: var(--blog-article-category-color); font-size: var(--blog-article-category-font-size); font-family: var(--font-family-1); padding: var(--blog-article-category-padding); border-radius: var(--blog-article-category-radius); } .blog-article-card__date { font-family: var(--blog-article-meta-font-family); font-size: var(--blog-article-meta-font-size); color: var(--blog-article-meta-color); } /* Hidden article (for filtering) */ .blog-article-card.hidden { display: none; } /* =========================================== 4. SIDEBAR =========================================== */ .blog-sidebar { width: 418px; flex-shrink: 0; margin-left: auto; } .blog-sidebar__section { margin-bottom: 32px; } .blog-sidebar__title { font-family: var(--blog-sidebar-title-font-family); font-size: var(--blog-sidebar-title-font-size); font-weight: var(--blog-sidebar-title-font-weight); color: var(--blog-sidebar-title-color); margin: 0 0 var(--blog-sidebar-title-margin-bottom) 0; padding-bottom: 25px; border-bottom: 1px solid var(--gray-dark-8); } /* Tags */ .blog-tags { display: flex; flex-wrap: wrap; gap: var(--blog-tag-gap); padding-bottom: 25px; border-bottom: 1px solid var(--gray-dark-8); } .blog-tag { display: inline-block; background: var(--blog-article-category-bg); color: var(--blog-article-category-color); font-size: var(--blog-article-category-font-size); font-family: var(--font-family-1); padding: var(--blog-article-category-padding); border-radius: var(--blog-article-category-radius); border: none; cursor: pointer; transition: background 0.3s ease, color 0.3s ease; text-decoration: none; } .blog-tag:hover { background: var(--gray-light-3); color: var(--brand-black); } .blog-tag.active { background: var(--blog-tag-bg-active); color: var(--blog-tag-color-active); } /* Newsletter Form */ .blog-sidebar__form { background: var(--gray-dark-9); padding: 30px 24px; border-radius: 8px; } .blog-sidebar__form-title { font-family: var(--font-family-2); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--brand-black); margin: 0 0 24px 0; text-align: center; } .blog-newsletter-umbraco { margin-top: 8px; --uf-container-max-width: 100%; --uf-container-width: 100%; --uf-container-padding: 0; --uf-button-min-width: 100%; --uf-button-height: 44px; } .blog-newsletter-umbraco .forms-component-container { align-items: stretch; width: 100%; } .blog-newsletter-umbraco .umbraco-forms-form { margin: 0; padding: 0 !important; } .blog-newsletter-form__field { margin-bottom: 20px; } .blog-newsletter-form__field input { width: 100%; padding: 12px 0; font-family: var(--font-family-1); font-size: var(--text-sm); border: none; border-bottom: 1px solid var(--gray-dark-6); background: transparent; outline: none; transition: border-color 0.3s ease; } .blog-newsletter-form__field input:focus { border-color: var(--brand); } .blog-newsletter-form__field input::placeholder { color: var(--gray-dark-4); } .blog-newsletter-form__checkbox { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 24px; } .blog-newsletter-form__checkbox input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; border: 1px solid var(--gray-dark-6); background: var(--brand-white); accent-color: var(--brand); } .blog-newsletter-form__checkbox label { font-family: var(--font-family-1); font-size: var(--text-xs); color: var(--gray-dark-3); line-height: 1.4; } .blog-newsletter-form__submit { width: 100%; padding: 14px 24px; font-family: var(--font-family-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--brand-white); background: var(--brand); border: none; border-radius: 50px; cursor: pointer; transition: background 0.3s ease; } .blog-newsletter-form__submit:hover { background: var(--brand-hover); } /* Campaign Card */ .blog-sidebar__campaign { margin-bottom: 32px; } .blog-campaign-card { display: block; position: relative; border-radius: 0; overflow: hidden; text-decoration: none; } .blog-campaign-card img { width: 100%; height: auto; min-height: 288px; object-fit: cover; display: block; } .blog-campaign-card__cta { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); /* padding: 10px 32px; */ font-family: var(--font-family-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--brand-black); background: var(--brand-white); border: 1px solid var(--gray-dark-6); border-radius: 8px; text-align: center; white-space: nowrap; transition: background 0.3s ease, border-color 0.3s ease; width: 133px; height: 48px; display: flex; align-items: center; justify-content: center; } .blog-campaign-card:hover .blog-campaign-card__cta { background: var(--gray-light-2); border-color: var(--gray-dark-4); } /* Social Media */ .blog-sidebar__social { margin-bottom: 32px; } .blog-social-icons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .blog-social-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; text-decoration: none; transition: transform 0.3s ease, opacity 0.3s ease; } .blog-social-icon:hover { transform: scale(1.1); opacity: 0.8; } .blog-social-icon svg { width: 38px; height: 38px; } /* =========================================== 5. PAGINATION =========================================== */ .blog-pagination { display: flex; justify-content: center; align-items: center; gap: var(--blog-pagination-gap); margin-top: var(--blog-pagination-margin-top); } .blog-pagination__btn { display: flex; align-items: center; justify-content: center; width: var(--blog-pagination-btn-size); height: var(--blog-pagination-btn-size); background: var(--blog-pagination-btn-bg); color: var(--blog-pagination-btn-color); border: var(--blog-pagination-btn-border); border-radius: var(--blog-pagination-btn-radius); font-size: var(--blog-pagination-btn-font-size); font-family: var(--font-family-1); cursor: pointer; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; text-decoration: none; } .blog-pagination__btn:hover, .blog-pagination__btn.active { background: var(--blog-pagination-btn-bg-active); color: var(--blog-pagination-btn-color-active); border: var(--blog-pagination-btn-border-active); } .blog-pagination__btn:disabled { cursor: not-allowed; } /* Nav buttons (prev/next) */ .blog-pagination__btn--nav { background: var(--blog-pagination-nav-bg); color: var(--blog-pagination-nav-color); border: var(--blog-pagination-nav-border); } .blog-pagination__btn--nav:not(:disabled) { color: var(--blog-pagination-nav-color-active); } .blog-pagination__btn--nav:not(:disabled):hover { background: var(--gray-light-3); } .blog-pagination__btn--nav:disabled { background: var(--blog-pagination-nav-bg); color: var(--blog-pagination-nav-color); border: var(--blog-pagination-nav-border); opacity: 1; } /* Next button active state (not disabled) */ .blog-pagination__btn--nav svg { width: 16px; height: 16px; } /* =========================================== 6. EMPTY STATE =========================================== */ .blog-empty-state { text-align: center; padding: 60px 20px; color: var(--gray-dark-4); font-family: var(--font-family-1); font-size: var(--text-md); } /* =========================================== 7. RESPONSIVE =========================================== */ /* Hide description at 1024px */ @media (max-width: 1024px) { .blog-article-card__description { display: none; } } /* Tablet */ @media (max-width: 1320px) { .blog-main-content { padding-left: 40px; padding-right: 40px; gap: 40px; } .blog-articles-column { max-width: none; } .blog-sidebar { width: 30%; min-width: 250px; } .blog-featured-grid { height: 400px; } .blog-featured-card__content { padding: 20px; } .blog-featured-card--large .blog-featured-card__title { font-size: var(--text-xl); } .blog-article-card__image { width: 35%; min-width: 180px; height: auto; aspect-ratio: 380 / 250; } } /* Mobile */ @media (max-width: 767px) { .blog-main-content { flex-direction: column; padding-left: 16px; padding-right: 16px; } .blog-sidebar { width: 100%; margin-left: 0; margin-top: 24px; } .blog-featured-section__inner { padding: 0 16px; } .blog-featured-grid, .blog-featured-grid--triple, .blog-featured-grid--double, .blog-featured-grid--single { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; } .blog-featured-grid--triple .blog-featured-card--large { grid-row: auto; } .blog-featured-card--small { min-height: 200px; } .blog-featured-card--large { min-height: 300px; } .blog-featured-card__content { padding: 16px; } /* Featured Articles - Font sizes */ .blog-featured-card--large .blog-featured-card__title, .blog-featured-card--small .blog-featured-card__title { font-size: 18px; } .blog-featured-card__date { font-size: 14px; } /* Latest Articles - Font sizes */ .blog-articles-column__title { font-size: 18px; } .blog-article-card__title { font-size: 16px; } .blog-article-card__category { font-size: 12px; } .blog-article-card__date { font-size: 12px; } .blog-article-card { flex-direction: column; gap: 16px; } .blog-article-card__image { width: 100%; height: 200px; } .blog-pagination__btn { width: 36px; height: 36px; } .blog-sidebar__form { padding: 20px; } .blog-sidebar__form-title { font-size: var(--text-md); } } /* Small Mobile */ @media (max-width: 480px) { .blog-home-header { padding-left: 16px; padding-right: 16px; } .blog-featured-card { min-height: 200px; } .blog-featured-card--large { min-height: 260px; } .blog-featured-card__title { font-size: var(--text-base) !important; } } /* Umbraco Form Override */ .umbraco-forms-form .dataconsent label, .umbraco-forms-form .dataconsent .umbraco-forms-label { font-weight: var(--weight-normal) !important; } .umbraco-forms-form input[type="submit"], .umbraco-forms-form button[type="submit"], .umbraco-forms-form .btn { height: 48px !important; padding: 0 !important; } /* --- Inlined from: ./[blocklist]_components/blogPage/blogPage.css --- */ /* ============================================= BLOG PAGE STYLES ============================================= */ /* --------------------------------------------- ARTICLE BANNER --------------------------------------------- */ .blog-page-banner { width: 100%; padding: 80px 0px 40px 0px; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .blog-page-banner__image { width: 1742px; max-width: 100%; height: 640px; object-fit: cover; display: block; } /* --------------------------------------------- CONTENT CONTAINER --------------------------------------------- */ .blog-page-content { width: 1742px; max-width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; padding-bottom: 2rem; } /* --------------------------------------------- BACK BUTTON --------------------------------------------- */ .blog-page-back { margin-bottom: 24px; } .blog-page-back__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; font-size: 16px; line-height: 100%; letter-spacing: 0%; color: var(--brand-black); text-decoration: underline; text-decoration-style: solid; transition: color 0.2s ease; font-family: var(--font-family-2); } .blog-page-back__link:hover { color: var(--blog-back-button-hover-color, var(--brand)); } .blog-page-back__link svg { flex-shrink: 0; } /* --------------------------------------------- BLOG DATE --------------------------------------------- */ .blog-page-date { margin-bottom: 24px; } .blog-page-date time { font-size: 16px; font-weight: 400; color: var(--gray-dark-3); font-family: var(--font-family-4); } /* --------------------------------------------- BLOG TITLE --------------------------------------------- */ .blog-page-title { font-size: 36px; font-weight: 600; line-height: 1.3; color: var(--blog-title-color, #1a1a1a); margin: 0 0 32px 0; } /* --------------------------------------------- BLOG ARTICLE CONTENT --------------------------------------------- */ .blog-page-article { font-size: 18px; line-height: 1.7; color: var(--blog-article-text-color, #333); } .blog-page-article h1, .blog-page-article h2, .blog-page-article h3, .blog-page-article h4, .blog-page-article h5, .blog-page-article h6 { margin-top: 32px; margin-bottom: 16px; font-weight: 600; line-height: 1.3; color: var(--blog-article-heading-color, #1a1a1a); } .blog-page-article h1 { font-size: 36px; } .blog-page-article h2 { font-size: 40px; font-family: var(--font-family-2); color: var(--brand-black); } .blog-page-article h3 { font-size: 24px; } .blog-page-article h4 { font-size: 20px; } .blog-page-article p { margin-bottom: 16px; font-family: var(--font-family-4); color: #373637; } .blog-page-article a { color: var(--blog-article-link-color, #0066cc); text-decoration: underline; } .blog-page-article a:hover { color: var(--blog-article-link-hover-color, #004499); } .blog-page-article ul, .blog-page-article ol { margin-bottom: 16px; padding-left: 24px; } .blog-page-article li { margin-bottom: 8px; } .blog-page-article img { max-width: 100%; height: auto; margin: 24px 0; border-radius: 4px; } .blog-page-article blockquote { margin: 24px 0; padding: 16px 24px; border-left: 4px solid var(--blog-article-blockquote-border, #ddd); background-color: var(--blog-article-blockquote-bg, #f9f9f9); font-style: italic; } .blog-page-article pre, .blog-page-article code { font-family: 'Courier New', Courier, monospace; background-color: var(--blog-article-code-bg, #f4f4f4); border-radius: 4px; } .blog-page-article code { padding: 2px 6px; font-size: 0.9em; } .blog-page-article pre { padding: 16px; overflow-x: auto; margin-bottom: 16px; } .blog-page-article pre code { padding: 0; background: none; } /* --------------------------------------------- BLOG TAGS --------------------------------------------- */ .blog-page-tags { display: flex; flex-wrap: wrap; gap: var(--blog-tag-gap, 10px); /* margin-top: 48px; */ } .blog-page-tags__item { display: inline-block; background: var(--blog-article-category-bg, #f5f5f5); color: var(--blog-article-category-color, #666); font-size: var(--blog-article-category-font-size, 12px); font-family: var(--font-family-3); font-weight: 700; padding: var(--blog-article-category-padding, 6px 14px); border-radius: var(--blog-article-category-radius, 50px); } /* --------------------------------------------- GO TO TOP --------------------------------------------- */ .blog-page-go-to-top { display: flex; justify-content: center; align-items: center; padding-bottom: 32px; border-bottom: 1px solid var(--gray-dark-8, #e0e0e0); } .blog-page-go-to-top__button { display: inline-flex; align-items: center; gap: 16px; background: none; border: none; cursor: pointer; padding: 0; transition: opacity 0.2s ease; } .blog-page-go-to-top__button:hover { opacity: 0.7; } .blog-page-go-to-top__text { font-family: var(--font-family-5); font-size: 18px; font-weight: 600; color: var(--brand-black); } .blog-page-go-to-top__icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--gray-light-2, #f5f5f5); color: var(--brand-black, #1a1a1a); transition: background 0.2s ease; } .blog-page-go-to-top__button:hover .blog-page-go-to-top__icon { background: var(--gray-light-3, #e0e0e0); } .blog-page-go-to-top__icon svg { flex-shrink: 0; } /* --------------------------------------------- RESPONSIVE - TABLET (1024px) --------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1900px) { .blog-page-content { padding: 0 40px; } } @media (max-width: 1024px) { .blog-page-banner { padding: 60px 40px; } .blog-page-banner__image { height: 400px; } .blog-page-content { padding: 60px 40px; } .blog-page-title { font-size: 28px; margin-bottom: 24px; } .blog-page-article { font-size: 16px; } .blog-page-article h1 { font-size: 28px; } .blog-page-article h2 { font-size: 24px; } .blog-page-article h3 { font-size: 20px; } .blog-page-go-to-top { margin-top: 40px; padding-bottom: 24px; } } /* --------------------------------------------- RESPONSIVE - MOBILE (768px) --------------------------------------------- */ @media (max-width: 768px) { .blog-page-banner { padding: 40px 20px; } .blog-page-banner__image { height: 300px; } .blog-page-content { padding: 40px 20px; } .blog-page-back { margin-bottom: 16px; } .blog-page-back__link { font-size: 16px; } .blog-page-date { margin-bottom: 16px; } .blog-page-date time { font-size: 14px; } .blog-page-title { font-size: 22px; margin-bottom: 20px; } .blog-page-article { font-size: 15px; line-height: 1.6; } .blog-page-article h1 { font-size: 24px; } .blog-page-article h2 { font-size: 24px; } .blog-page-article h3 { font-size: 18px; } .blog-page-article h4 { font-size: 16px; } .blog-page-go-to-top { margin-top: 32px; padding-bottom: 20px; } .blog-page-go-to-top__button { gap: 12px; } .blog-page-go-to-top__text { font-size: 18px; } .blog-page-go-to-top__icon { width: 40px; height: 40px; } .blog-page-go-to-top__icon svg { width: 16px; height: 16px; } .blog-page-article p { font-size: 16px; } } /* --- Inlined from: ./[blocklist]_components/errorPage/errorPage.css --- */ /* --- Inlined from: ../../[branding]_components/errorPage.css --- */ /* Desktop */ :root { /* 1. Section */ --error-page-section-padding-y: 4rem; --error-page-section-padding-x: 2rem; --error-page-container-max-width: 1200px; --error-page-container-gap: 4rem; /* 2. Title - No Background Mode */ --error-page-title-font-family: var(--font-family-2); --error-page-title-font-size: var(--text-5xl); --error-page-title-color: var(--brand-black); --error-page-title-first-font-weight: var(--weight-bolder); /* 3. Title - With Background Mode (Hero) */ --error-page-hero-title-font-size: 48px; --error-page-hero-title-color: var(--brand-white); --error-page-hero-title-underline-color: var(--brand-white); --error-page-hero-title-underline-height: 1px; /* 4. Description */ --error-page-description-font-family: var(--font-family-5); --error-page-description-font-size: var(--text-md); --error-page-description-color: var(--gray-dark-10); --error-page-description-hero-color: var(--brand-white); --error-page-description-margin-bottom: 20px; --error-page-description-font-weight: var(--weight-bold); /* 5. Primary Button */ --error-page-btn-primary-bg: var(--brand); --error-page-btn-primary-color: var(--brand-white); --error-page-btn-primary-border-radius: 8px; --error-page-btn-primary-max-width: 193px; --error-page-btn-primary-max-height: 60px; --error-page-btn-primary-hover-bg: #888888; --error-page-btn-primary-hover-color: var(--brand-white); /* 6. Secondary Button (With Background Mode) */ --error-page-btn-secondary-bg: transparent; --error-page-btn-secondary-color: var(--brand-white); --error-page-btn-secondary-border-color: var(--brand-white); --error-page-btn-secondary-border-radius: 30px; --error-page-btn-secondary-hover-bg: rgba(255, 255, 255, 0.1); /* 7. Secondary Button (Mobile - Dark text) */ --error-page-btn-secondary-mobile-color: var(--gray-dark-10); --error-page-btn-secondary-mobile-border-color: var(--gray-dark-10); /* 8. Link (No Background Mode) */ --error-page-link-color: var(--brand-black); --error-page-link-font-family: var(--font-family-2); --error-page-link-font-size: var(--text-base); --error-page-link-margin-top: 1rem; /* 9. Image - No Background Mode */ --error-page-image-width: 280px; --error-page-image-height: auto; /* 10. Hero Image - With Background Mode */ --error-page-hero-height: 720px; } /* ---------------- Media Queries ---------------- */ @media (max-width: 1366px) { :root { --error-page-hero-height: 530px; --error-page-hero-title-font-size: var(--text-4xl); } } @media (max-width: 1024px) { :root { --error-page-container-gap: 2rem; --error-page-section-padding-y: 3rem; --error-page-title-font-size: var(--text-4xl); } } @media (max-width: 768px) { :root { --error-page-section-padding-y: 2rem; --error-page-section-padding-x: 1rem; --error-page-container-gap: 1.5rem; --error-page-title-font-size: 20px; --error-page-hero-title-font-size: 32px; --error-page-description-font-size: 1rem; --error-page-image-width: 200px; --error-page-hero-height: 530px; --error-page-btn-primary-max-width: 160px; --error-page-btn-primary-max-height: 48px; --error-page-description-font-weight: var(--weight-bolder); } } @media (max-width: 576px) { :root { --error-page-hero-title-font-size: 28px; } } @media (max-width: 480px) { :root { --error-page-title-font-size: var(--text-2xl); --error-page-hero-title-font-size: var(--text-2xl); --error-page-image-width: 160px; } } /* ============================================ ERROR PAGE - NO BACKGROUND MODE ============================================ */ /* 1. Section */ .error-page { padding: var(--error-page-section-padding-y) var(--error-page-section-padding-x); display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .error-page__container { max-width: var(--error-page-container-max-width); margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: var(--error-page-container-gap); } /* 2. Image */ .error-page__image { flex-shrink: 0; } .error-page__image img { width: var(--error-page-image-width); height: var(--error-page-image-height); object-fit: contain; } /* 3. Content */ .error-page__content { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } /* 4. Title - No Background */ .error-page__title { font-family: var(--error-page-title-font-family); font-size: var(--error-page-title-font-size); margin: 0 0 1rem 0; line-height: 1.2; color: var(--error-page-title-color); text-transform: var(--error-page-title-text-transform); } .error-page__title--bold { font-weight: var(--error-page-title-first-font-weight); font-family: var(--font-family-1); } .error-page__title--light { font-weight: var(--error-page-title-second-font-weight); } /* 5. Description */ .error-page__description { color: var(--error-page-description-color); } .error-page__description p { font-family: var(--error-page-description-font-family); font-size: var(--error-page-description-font-size); color: var(--error-page-description-color); margin: 0 0 var(--error-page-description-margin-bottom) 0; line-height: 1.5; font-weight: var(--error-page-description-font-weight); } .error-page__description_with-bg { color: var(--error-page-description-color); } .error-page__description_with-bg p { font-family: var(--error-page-description-font-family-with-bg); font-size: var(--error-page-description-font-size-with-bg); color: var(--error-page-description-color-with-bg); margin: 0 0 var(--error-page-description-margin-bottom-with-bg) 0; line-height: 1.5; font-weight: var(--error-page-description-font-weight-with-bg); } /* 6. Actions Container */ .error-page__actions { display: flex; flex-direction: column; gap: 20px; } /* 7. Primary Button */ .error-page__btn-primary { display: inline-flex; align-items: center; justify-content: center; min-width: var(--error-page-btn-primary-max-width); min-height: var(--error-page-btn-primary-max-height); padding: 0.5rem 2rem; background-color: var(--error-page-btn-primary-bg); color: var(--error-page-btn-primary-color); border: none; border-radius: var(--error-page-btn-primary-border-radius); font-family: var(--font-family-1); font-size: var(--text-md); font-weight: var(--weight-semibold); text-decoration: none; cursor: pointer; transition: background-color 0.3s ease; } .error-page__btn-primary_with-bg { display: inline-flex; align-items: center; justify-content: center; min-width: var(--error-page-btn-primary-min-width-with-bg); min-height: var(--error-page-btn-primary-max-height-with-bg); padding: 0.5rem 2rem; background-color: var(--error-page-btn-primary-bg); color: var(--error-page-btn-primary-color); border: none; border-radius: var(--error-page-btn-primary-border-radius); font-family: var(--font-family-1); font-size: var(--error-page-btn-secondary-font-size); font-weight: var(--weight-semibold); text-decoration: none; cursor: pointer; transition: background-color 0.3s ease; width: 100%; } .error-page__btn-primary:hover { background-color: var(--error-page-btn-primary-hover-bg); color: var(--error-page-btn-primary-hover-color); } .error-page__btn-primary_with-bg:hover { background-color: var(--error-page-btn-primary-hover-with-bg-bg-color); color: var(--error-page-btn-primary-hover-with-bg-color); } /* 8. Link (No Background Mode) */ .error-page__link { font-family: var(--error-page-link-font-family); font-size: var(--error-page-link-font-size); color: var(--error-page-link-color); text-decoration: underline; cursor: pointer; transition: opacity 0.3s ease; padding: 0 32px; } .error-page__link:hover { display: flex; opacity: 0.8; color: var(--error-page-link-color); background: var(--error-page-link-color-hover); border-radius: var(--error-page-link-color-radius); max-width: var(--error-page-link-color-max-width); min-height: var(--error-page-link-color-min-height); } /* ============================================ ERROR PAGE - WITH BACKGROUND MODE (HERO) ============================================ */ /* 1. Hero Section */ .error-page--hero { position: relative; padding: 0; } .error-page--hero .error-page__hero-wrapper { position: relative; width: 100%; min-height: var(--error-page-hero-height); display: flex; align-items: center; overflow: hidden; } /* 2. Hero Background */ .error-page__background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .error-page__background::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100% ); } /* 3. Hero Background Image */ .error-page__hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* 4. Hero Content Overlay */ .error-page__hero-content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 4rem 5rem; } /* 5. Hero Title Wrapper - contains title and underline */ .error-page__title-wrapper { display: inline-flex; flex-direction: column; align-items: flex-start; } /* 6. Hero Title */ .error-page--hero .error-page__title { color: var(--error-page-hero-title-color); font-size: var(--error-page-hero-title-font-size); margin-bottom: 0.5rem; font-weight: var(--error-page-hero-title-font-weight); } .error-page--hero .error-page__title--bold, .error-page--hero .error-page__title--light { color: var(--error-page-hero-title-color); } /* 7. Hero Title Underline - matches title width with center fade effect */ .error-page__title-underline { width: 100%; height: var(--error-page-hero-title-underline-height); background: linear-gradient( to right, var(--error-page-hero-title-underline-color) 0%, var(--error-page-hero-title-underline-color) 60%, transparent 100% ); margin-bottom: 8px; } /* 7. Hero Description */ .error-page--hero .error-page__description { color: var(--error-page-description-hero-color); opacity: 0.9; } /* 8. Hero Actions */ .error-page--hero .error-page__actions { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; } .error-page--hero .error-page__btn-primary { max-width: none; width: 100%; } /* 9. Secondary Button (Hero Mode) - outlined pill */ .error-page__btn-secondary { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 3rem; padding: 0.5rem 2rem; font-family: var(--font-family-1); font-size: var(--error-page-btn-secondary-font-size); font-weight: var(--weight-semibold); color: var(--error-page-btn-secondary-color, var(--brand-white)); background-color: transparent; border: 2px solid var(--error-page-btn-secondary-border-color, var(--brand-white)); border-radius: var(--error-page-btn-secondary-border-radius, 30px); text-decoration: none; cursor: pointer; transition: background-color 0.3s ease; } .error-page__btn-secondary_with-bg { display: inline-flex; align-items: center; justify-content: center; max-width: var(--error-page-btn-primary-max-width-with-bg); width: 100%; min-height: var(--error-page-btn-secondary-max-height-with-bg); padding: 0.5rem 2rem; font-family: var(--font-family-1); font-size: var(--error-page-btn-secondary-font-size); font-weight: var(--weight-semibold); color: var(--error-page-btn-secondary-color, var(--brand-white)); background-color: transparent; border: 2px solid var(--error-page-btn-secondary-border-color, var(--brand-white)); border-radius: var(--error-page-btn-secondary-border-radius, 30px); text-decoration: none; cursor: pointer; transition: background-color 0.3s ease; } .error-page__btn-secondary:hover { background-color: var( --error-page-btn-secondary-hover-bg, rgba(255, 255, 255, 0.1) ); color: var(--error-page-btn-secondary-color, var(--brand-white)); } .error-page__btn-secondary_with-bg:hover { background-color: var(--error-page-btn-secondary-hover-with-bg-bg-color); color: var(--error-page-btn-secondary-hover-with-bg-color); border: 2px solid var(--error-page-btn-secondary-hover-with-bg-border); } /* ============================================ MEDIA QUERIES ============================================ */ /* Section heights per breakpoint */ @media (min-width: 1920px) { .error-page { min-height: 720px; } } @media (min-width: 1366px) and (max-width: 1919px) { .error-page { min-height: 530px; } } @media (min-width: 768px) and (max-width: 1365px) { .error-page { min-height: 530px; } } @media (max-width: 767px) { .error-page { min-height: 451px; } .error-page__container { flex-direction: column; align-items: center; text-align: center; } .error-page__content { align-items: center; text-align: center; } .error-page__description p { text-align: center; } .error-page__actions { align-items: center; width: 100%; } .error-page__btn-primary { min-width: 160px; } .error-page__link { text-align: center; padding: 0; } } @media (max-width: 1366px) { /* 4. Hero Content Overlay */ .error-page__hero-content { padding: 4rem 3rem; } } /* Tablet */ @media (min-width: 768px) and (max-width: 1024px) { .error-page__container { flex-direction: row; align-items: center; } .error-page__content { align-items: flex-start; text-align: left; } .error-page__actions { align-items: flex-start; } .error-page__description { max-width: 180px; } .error-page__description p { text-align: left; } } /* Tablet - Hero Mode */ @media (max-width: 768px) { .error-page--hero .error-page__hero-wrapper { min-height: var(--error-page-hero-height); } .error-page--hero .error-page__hero-content { padding: 3rem 24px; } } /* Mobile */ @media (max-width: 576px) { /* Hero Mode - Content at bottom with gradient overlay */ .error-page--hero .error-page__hero-wrapper { align-items: flex-end; } .error-page--hero .error-page__background::after { background: linear-gradient( to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100% ); } .error-page--hero .error-page__hero-content { max-width: 100%; width: 100%; padding: 0 1rem 2rem; } .error-page--hero .error-page__description { margin-bottom: 0; } /* Buttons - side by side */ .error-page--hero .error-page__actions { flex-direction: row-reverse; justify-content: flex-end; max-width: 100%; gap: 10px; margin-top: 1rem; } .error-page--hero .error-page__btn-primary, .error-page--hero .error-page__btn-secondary { flex: 1; min-width: 0; } .error-page--hero .error-page__btn-primary { max-width: none; } } /* --- Inlined from: ./[blocklist]_components/productListPage/productListPage.css --- */ /* ============================================ PLP (Product Listing Page) Component ============================================ */ /* --- Inlined from: ../../[branding]_components/productListPage.css --- */ :root { /* Section */ --plp-section-padding: 0 0 var(--p-6); --plp-section-background: var(--brand-white); --plp-section-margin-top: var(--p-4\.5); --plp-container-padding: 50px 88px; --plp-container-columns: var(--plp-sidebar-width, 280px) 1fr; --plp-container-gap: 50px; /* Typography */ --plp-font-family: var(--font-family-1); --plp-title-font-family: var(--font-family-5); --plp-font-size: var(--text-base); --plp-font-size-md: var(--text-md); --plp-font-size-sm: var(--text-base); --plp-font-size-xs: var(--text-xs); --plp-font-size-mobile-filter: var(--text-base); --plp-font-weight-mobile-filter: var(--weight-bolder); --plp-font-weight: var(--weight-semilight); --plp-font-weight-card: var(--weight-bolder); --plp-font-weight-mobile-sort: var(--weight-normal); /* Colors */ --plp-text-color: var(--brand-black); --plp-text-muted: var(--gray-dark-3); --plp-title-color: var(--brand-black); --plp-border-color: var(--gray-dark-8); --plp-hover-bg: var(--gray-light-4); --plp-focus-color: var(--brand); --plp-icon-color: var(--brand-black); --plp-price-type-active-btn: #00233a; --plp-price-type-btn: var(--gray-dark-1); --plp-color-mobile-filter: #373637; /* Border Radius */ --plp-border-radius: 0; --plp-btn-border-radius: 30px; --plp-card-border-radius: var(--p-2); /* Sidebar */ --plp-sidebar-width: 450px; --plp-sidebar-min-width: 450px; --plp-sidebar-bg: var(--brand-white); --plp-sidebar-header-padding: var(--p-4) var(--p-4); --plp-sidebar-header-display: flex; --plp-sidebar-header-position: relative; --plp-sidebar-header-top: auto; --plp-sidebar-header-bg: transparent; --plp-sidebar-header-z-index: auto; --plp-sidebar-title-size: var(--text-md); --plp-sidebar-title-weight: var(--weight-bold); --plp-sidebar-footer-padding: var(--p-4) var(--p-4); --plp-sidebar-footer-bg: transparent; --plp-sidebar-footer-position: static; --plp-sidebar-footer-bottom: auto; --plp-sidebar-footer-z-index: auto; --plp-view-results-bg: var(--brand); --plp-view-results-bg-hover: var(--brand-hover); --plp-view-results-color: var(--brand-white); --plp-view-results-border: var(--border-sm) solid var(--brand); --plp-view-results-radius: var(--p-1); /* Mobile header */ --plp-mobile-header-padding: var(--p-4); --plp-mobile-header-bg: var(--brand-white); /* Filters */ --plp-filters-padding: 0; --plp-filter-header-padding: var(--p-4) var(--p-4); --plp-filter-label-size: var(--text-md); --plp-filter-label-weight: var(--weight-bold); --plp-filter-content-padding: var(--p-0) var(--p-4) var(--p-4); --plp-filter-divider-width: 1px; --plp-filter-divider-color: #e5e5e5; --plp-filter-search-border: none; --plp-filter-search-border-bottom: var(--border-xs) solid var(--gray-dark-7); --plp-filter-search-border-radius: 0; --plp-filter-options-border: none; --plp-filter-options-padding: var(--p-2) var(--p-3); --plp-filter-options-gap: var(--p-3); --plp-filter-switch-gap: var(--p-4); --plp-filter-switch-padding: var(--p-3) var(--p-4); --plp-filter-width: 450px; --plp-filter-vertical-line-color: var(--gray-dark-8); --plp-filter-btn: var(--gray-dark-1); --plp-sort-color: var(--gray-dark-1); /* Toggle */ --plp-toggle-bg: var(--brand-black); --plp-toggle-active-bg: var(--brand); /* Checkbox */ --plp-checkbox-border: var(--brand-black); --plp-checkbox-active-bg: var(--brand); /* Input */ --plp-input-bg: var(--gray-dark-9); --plp-price-input-border: none; --plp-price-input-border-bottom: var(--border-xs) solid #373637; /* Slider */ --plp-slider-height: 10px; --plp-slider-thumb-size: 24px; --plp-slider-track-bg: var(--gray-dark-8); --plp-slider-range-bg: #00233A; --plp-slider-thumb-bg: #00233A; --plp-slider-thumb-border: #00233A; /* Controls */ --plp-controls-margin: var(--p-4\.5); --plp-toggle-group-bg: var(--gray-dark-9); --plp-price-type-active-bg: var(--brand-white); --plp-price-type-active-font-weight: var(--weight-bolder); /* Grid */ --plp-grid-gap: var(--p-4\.5); --plp-grid-columns: repeat(3, 1fr); --plp-grid-padding: 0; /* Card */ --plp-card-bg: var(--brand-white); --plp-card-border: var(--gray-dark-8); --plp-card-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); --plp-card-image-padding: var(--p-4); --plp-card-image-bg: var(--brand-white); --plp-card-info-padding: var(--p-4) var(--p-4) var(--p-2); --plp-card-brand-size: var(--text-xs); --plp-card-model-size: var(--text-md); --plp-card-model-weight: var(--weight-bolder); --plp-card-pricing-padding: var(--p-2) var(--p-4) var(--p-4); --plp-card-price-size: var(--text-xl); --plp-card-price-secondary-size: var(--text-md); --plp-card-price-weight: var(--weight-bolder); --plp-card-buttons-padding: var(--p-0) var(--p-4) var(--p-4); --plp-card-disclaimer-padding: var(--p-3) var(--p-4); --plp-card-image-height: 200px; /* Buttons */ --plp-btn-primary-bg: var(--brand); --plp-btn-primary-bg-hover: #888888; --plp-btn-primary-color: var(--brand-white); --plp-btn-primary-color-hover: var(--brand-white); --plp-btn-secondary-color: var(--brand-dark); --plp-btn-secondary-border: var(--brand-black); --plp-btn-secondary-bg-hover: #f3f4f6; --plp-btn-secondary-color-hover: var(--brand-black); --plp-btn-secondary-border-hover: var(--brand-black); --plp-btn-card-color: #00233a; --plp-card-btn-width: 334px; --plp-card-btn-height: 60px; /* Pagination */ --plp-pagination-margin: var(--p-4); --plp-pagination-padding: var(--p-3) var(--p-0); --plp-pagination-active-bg: var(--brand-white); --plp-pagination-active-color: var(--brand-dark); --plp-pagination-border-color: var(--gray-dark-7); --plp-pagination-hover-bg: var(--gray-dark-9); --plp-pagination-size: calc(var(--p-4) * 2); --plp-pagination-font-size: var(--text-xs); --plp-pagination-active-border: var(--brand-light); --plp-card-buttons-gap: 20px; /* Layout / responsive toggles */ /* --plp-container-padding: 24px; */ --plp-controls-padding: var(--p-0); --plp-main-padding-bottom: var(--p-6); --plp-mobile-header-display: none; --plp-sidebar-position: sticky; --plp-sidebar-top: 24px; --plp-sidebar-left: auto; --plp-sidebar-width: auto; --plp-sidebar-height: auto; --plp-sidebar-max-height: calc(100vh - 48px); --plp-sidebar-z-index: auto; --plp-sidebar-transform: none; --plp-sidebar-transition: none; --plp-sidebar-open-transform: none; --plp-sidebar-border-radius: 8px; --plp-sidebar-border: none; --plp-sidebar-display: block; --plp-sidebar-flex-direction: column; --plp-sidebar-close-display: none; --plp-sidebar-footer-display: none; --plp-filters-flex: initial; --plp-filters-overflow-y: visible; --plp-sort-dropdown-display: block; --plp-controls-flex-direction: row; --plp-price-toggle-width: 299px; --plp-price-toggle-height: 48px; --plp-price-toggle-btn-padding: var(--p-3) var(--p-4\.5); --plp-card-price-size: 24px; --plp-card-price-secondary-size: 18px; --plp-price-type-active-width: 149.5px; --plp-price-toggle-btn-width: 145.5px; } /* Small Laptop */ @media (max-width: 1366px) { :root { --plp-container-padding: 50px 48px; --plp-sidebar-min-width: 297px; --plp-sidebar-width: 297px; --plp-sidebar-min-width: 297px; --plp-card-image-height: 150px; } } /* Tablet (1024px and below) */ @media (max-width: 1024px) { :root { --plp-grid-columns: repeat(2, 1fr); --plp-container-padding: 50px 25px; --plp-sidebar-width: 200px; --plp-sidebar-min-width: 200px; --plp-card-image-height: 230px; } } /* Mobile / off-canvas (768px and below) */ @media (max-width: 768px) { :root { --plp-mobile-header-display: flex; --plp-container-padding: 30px 20px; --plp__grid: 0; --plp-grid-columns: repeat(2, 1fr); --plp-grid-padding: 0; --plp-controls-margin: 30px; --plp-font-size-xs: 12px; --plp-font-size-md: 1rem; --plp-sidebar-position: fixed; --plp-sidebar-top: 0; --plp-sidebar-left: 0; --plp-sidebar-width: 100%; --plp-sidebar-min-width: 100%; --plp-sidebar-height: 100%; --plp-sidebar-max-height: 100%; --plp-sidebar-z-index: 1000; --plp-sidebar-transform: translateX(-100%); --plp-sidebar-transition: transform 0.3s ease; --plp-sidebar-open-transform: translateX(0); --plp-sidebar-border-radius: 0; --plp-sidebar-border: none; --plp-sidebar-display: flex; --plp-sidebar-flex-direction: column; --plp-sidebar-close-display: block; --plp-sidebar-footer-display: block; --plp-sidebar-footer-position: sticky; --plp-sidebar-footer-bottom: 50px; --plp-sidebar-footer-bg: var(--brand-white); --plp-sidebar-footer-z-index: 1; --plp-sidebar-header-position: sticky; --plp-sidebar-header-top: var(--p-12); --plp-sidebar-header-bg: var(--brand-white); --plp-sidebar-header-z-index: 1; --plp-filters-flex: 1; --plp-filters-overflow-y: auto; --plp-sort-dropdown-display: none; --plp-pagination-padding: var(--p-4) var(--p-4); --plp-filter-width: 100%; --plp-card-btn-width: 296px; --plp-card-btn-height: 48px; --plp-font-size: 1rem; --plp-font-size-mobile-filter: 20px; } } /* Mobile */ @media (max-width: 576px) { :root { --plp-grid-columns: repeat(1, 1fr); --plp-card-image-height: 250px; --plp-font-size-mobile-filter: 1rem; --plp-font-family: var(--font-family-3); } } /* Small mobile (480px and below) */ @media (max-width: 480px) { :root { --plp-card-price-size: 20px; --plp-card-price-secondary-size: 16px; --plp-price-toggle-width: 100%; --plp-price-toggle-btn-padding: var(--p-3) var(--p-4); --plp-controls-flex-direction: column; } } /* ============================================ Main Section ============================================ */ .plp { width: 100%; /* margin-top: var(--plp-section-margin-top, var(--p-4\.5)); */ padding: var(--plp-section-padding, 0 0 var(--p-6)); background-color: var(--plp-section-background, var(--brand-white)); } .plp__container { display: grid; grid-template-columns: var( --plp-container-columns, var(--plp-sidebar-width, 280px) 1fr ); gap: var(--plp-container-gap, 50px); max-width: 1920px; margin: 0 auto; padding: var(--plp-container-padding); position: relative; } /* ============================================ Mobile Header ============================================ */ .plp__mobile-header { display: var(--plp-mobile-header-display, none); justify-content: space-evenly; align-items: center; /* padding: var(--plp-mobile-header-padding, var(--p-4)); */ background: var(--plp-mobile-header-bg, var(--brand-white)); border-bottom: 1px solid var(--plp-border-color, var(--gray-dark-8)); position: sticky; top: 0; z-index: 100; height: 60px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); } .plp__mobile-filter-btn { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: transparent; border: 1px solid transparent; border-radius: 0; font-family: var(--plp-font-family, var(--font-family-1)); font-size: var(--plp-font-size-mobile-filter, 1.25rem); font-weight: var(--plp-font-weight-mobile-filter); color: var(--plp-color-mobile-filter, var(--gray-dark-1)); cursor: pointer; transition: all 0.2s ease; } .plp__mobile-filter-btn:hover { background: var(--plp-hover-bg, var(--gray-light-4)); } .plp__mobile-sort { min-width: 140px; } /* ============================================ Sidebar ============================================ */ .plp__sidebar { position: var(--plp-sidebar-position, sticky); top: var(--plp-sidebar-top, 24px); left: var(--plp-sidebar-left, auto); width: var(--plp-sidebar-width, 450px); min-width: var(--plp-sidebar-min-width, 450px); height: var(--plp-sidebar-height, auto); max-height: var(--plp-sidebar-max-height, calc(100vh - 48px)); overflow-y: var(--plp-filters-overflow-y, visible); background: var(--plp-sidebar-bg, var(--brand-white)); border-radius: var(--plp-sidebar-border-radius, 8px); border: var(--plp-sidebar-border, none); z-index: var(--plp-sidebar-z-index, auto); transform: var(--plp-sidebar-transform, none); transition: var(--plp-sidebar-transition, none); display: var(--plp-sidebar-display, block); flex-direction: var(--plp-sidebar-flex-direction, column); overflow-x: hidden; } .plp__sidebar--open { transform: var(--plp-sidebar-open-transform, none); } .plp__sidebar--stop { position: absolute; top: auto; bottom: 0; transform: none; } .plp__sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: var(--plp-sidebar-header-padding, var(--p-4) var(--p-4)); border-bottom: none; } .plp__sidebar-title { font-family: var(--plp-title-font-family, var(--font-family-2)); font-size: var(--plp-sidebar-title-size, var(--text-md)); font-weight: var(--plp-sidebar-title-weight, var(--weight-bold)); color: var(--plp-title-color, var(--gray-dark-1)); margin: 0; } .plp__sidebar-close { display: var(--plp-sidebar-close-display, none); background: transparent; border: none; cursor: pointer; padding: 4px; color: var(--plp-icon-color, var(--gray-dark-3)); } .plp__sidebar-footer { display: var(--plp-sidebar-footer-display, none); padding: var(--plp-sidebar-footer-padding, var(--p-4) var(--p-4)); border-top: none; } .plp__view-results-btn { width: 100%; padding: 14px 24px; background: var(--plp-btn-primary-bg, var(--brand)); color: var(--plp-btn-card-color, #00233a); border: none; border-radius: var(--plp-btn-border-radius, 50px); font-family: var(--plp-font-family, var(--font-family-1)); font-size: var(--plp-font-size-md, var(--text-md)); font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .plp__view-results-btn:hover { background: var(--plp-btn-primary-bg-hover, var(--brand-hover)); } /* ============================================ Filters ============================================ */ .plp__filters { padding: var(--plp-filters-padding, 0); flex: var(--plp-filters-flex, initial); overflow-y: var(--plp-filters-overflow-y, visible); } .plp__filter { border-bottom: var(--plp-filter-divider-width, 1px) solid var(--plp-filter-divider-color, #e5e5e5); width: var(--plp-filter-width, 450px); max-width: 100%; } .plp__filter:last-child { border-bottom: none; } .plp__filter-header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: var(--plp-filter-header-padding, var(--p-4) var(--p-4)); background: transparent; border: none; cursor: pointer; text-align: left; transition: background 0.2s ease; } .plp__filter-header:hover { background: transparent; } .plp__filter-header--switch { cursor: default; gap: var(--plp-filter-switch-gap, var(--p-4)); padding: var(--plp-filter-switch-padding, var(--p-3) var(--p-4)); } .plp__filter-header--switch:hover { background: transparent; } .plp__filter-label { font-family: var(--plp-font-family, var(--font-family-1)); font-size: var(--plp-filter-label-size, var(--text-md)); font-weight: var(--plp-filter-label-weight, var(--weight-semibold)); color: var(--plp-text-color, var(--brand-black)); } .plp__filter-icon { transition: transform 0.3s ease; color: var(--plp-icon-color, var(--gray-dark-3)); } .plp__filter-content { padding: var(--plp-filter-content-padding, var(--p-0) var(--p-4) var(--p-4)); overflow-x: hidden; width: 100%; box-sizing: border-box; } .plp__filter--range { width: 100%; max-width: 100%; overflow-x: hidden; } .plp__filter--range .plp__filter-content { max-width: 100%; } .filter-vertical-line svg line { stroke: var(--plp-filter-vertical-line-color, var(--gray-dark-8)); } .plp__mobile-filter-btn svg path { stroke: var(--plp-filter-btn, var(--gray-dark-1)); } .plp__mobile-sort svg g { stroke: var(--plp-sort-color, var(--gray-dark-1)); } /* Toggle Switch */ .plp__toggle { position: relative; display: inline-block; width: 48px; height: 26px; } .plp__toggle-input { opacity: 0; width: 0; height: 0; } .plp__toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--plp-toggle-bg, var(--gray-dark-6)); transition: 0.3s; border-radius: 26px; } .plp__toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; } .plp__toggle-input:checked + .plp__toggle-slider { background-color: var(--plp-toggle-active-bg, var(--brand)); } .plp__toggle-input:checked + .plp__toggle-slider:before { transform: translateX(22px); } /* Filter Search */ .plp__filter-search { margin-bottom: 12px; border-bottom: 1px solid #373637; } .plp__filter-search-input { width: 100%; padding: 10px 12px; border: var(--plp-filter-search-border, none); border-bottom: var( --plp-filter-search-border-bottom, var(--border-xs) solid var(--gray-dark-7) ); border-radius: var(--plp-filter-search-border-radius, 0); font-family: var(--font-family-4); font-size: var(--plp-font-size-sm, var(--text-sm)); background: var(--plp-input-bg, var(--gray-dark-9)); color: #373637; } .plp__filter-search-input:focus { outline: none; border-color: var(--plp-focus-color, var(--brand)); } /* Filter Options (Checkboxes) */ .plp__filter-options { max-height: 200px; overflow-y: auto; border: var(--plp-filter-options-border, none); padding: var(--plp-filter-options-padding, var(--p-2) var(--p-3)); } .plp__filter-option { display: flex; align-items: center; gap: var(--plp-filter-options-gap, var(--p-3)); padding: 8px 0; cursor: pointer; } .plp__filter-checkbox { position: absolute; opacity: 0; cursor: pointer; } .plp__filter-checkbox-custom { width: 18px; height: 18px; border: 2px solid var(--plp-checkbox-border, var(--brand)); border-radius: 3px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; } .plp__filter-checkbox:checked ~ .plp__filter-checkbox-custom { background: var(--plp-checkbox-active-bg, var(--brand)); } .plp__filter-checkbox:checked ~ .plp__filter-checkbox-custom::after { content: ""; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .plp__filter-option-label { font-family: var(--font-family-4); font-size: var(--text-md); color: #373637; } /* Price Range */ .plp__price-inputs { display: flex; gap: 12px; margin-bottom: 16px; width: 100%; box-sizing: border-box; max-width: 100%; } .plp__price-input-group { flex: 1 1 0; min-width: 0; } .plp__price-input { width: 100%; padding: 10px 12px; border: var(--plp-price-input-border, none); border-bottom: 1px solid #373637; border-radius: var(--plp-border-radius, var(--p-1)); font-family: var(--font-family-4); font-size: var(--text-base); background: var(--plp-input-bg, var(--gray-dark-9)); box-sizing: border-box; color: var(--brand-black); } .plp__price-slider { position: relative; height: var(--plp-slider-height, 6px); margin: 20px 0; width: 100%; box-sizing: border-box; max-width: 100%; } .plp__price-slider-track { position: absolute; width: 100%; height: 100%; background: var(--plp-slider-track-bg, var(--gray-dark-8)); border-radius: 3px; pointer-events: none; z-index: 1; } .plp__price-slider-range { position: absolute; height: 100%; background: var(--plp-slider-range-bg); border-radius: 3px; pointer-events: none; z-index: 2; } .plp__price-slider-input { position: absolute; width: 100%; height: var(--plp-slider-height, 6px); background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; top: 0; z-index: 3; cursor: pointer; touch-action: none; } .plp__price-slider-input[data-price-slider-min] { z-index: 4; } .plp__price-slider-input::-webkit-slider-runnable-track { background: transparent; height: var(--plp-slider-height, 6px); } .plp__price-slider-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--plp-slider-thumb-size, 18px); height: var(--plp-slider-thumb-size, 18px); background: var(--plp-slider-thumb-bg, var(--brand-dark)); border: 2px solid var(--plp-slider-thumb-border, var(--brand-white)); border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); margin-top: calc(-1 * (var(--plp-slider-thumb-size, 18px) - var(--plp-slider-height, 6px)) / 2); } .plp__price-slider-input::-moz-range-track { background: transparent; height: var(--plp-slider-height, 6px); } .plp__price-slider-input::-moz-range-thumb { width: var(--plp-slider-thumb-size, 18px); height: var(--plp-slider-thumb-size, 18px); background: var(--plp-slider-thumb-bg, var(--brand-dark)); border: 2px solid var(--plp-slider-thumb-border, var(--brand-white)); border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /* ============================================ Main Content ============================================ */ .plp__main { min-width: 0; padding-bottom: var(--plp-main-padding-bottom, var(--p-6)); } /* Controls Bar */ .plp__controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--plp-controls-margin, var(--p-4\.5)); flex-wrap: wrap; gap: 16px; padding: var(--plp-controls-padding, var(--p-0)); flex-direction: var(--plp-controls-flex-direction, row); } .plp__price-type-toggle { display: flex; background: var(--plp-toggle-group-bg, var(--gray-dark-9)); border-radius: var(--plp-btn-border-radius, 50px); padding: 2px; width: var(--plp-price-toggle-width, 299px); height: var(--plp-price-toggle-height, 48px); } /* FIX: flex: 1 ensures both buttons share equal space — no layout shift on toggle */ .plp__price-type-btn { flex: 1; padding: var(--plp-price-toggle-btn-padding, var(--p-3) var(--p-4\.5)); border: none; background: transparent; font-family: var(--font-family-4); font-size: var(--plp-font-size-xs, var(--text-xs)); font-weight: var(--weight-normal); color: #373637; cursor: pointer; border-radius: var(--plp-btn-border-radius, 50px); transition: all 0.2s ease; } .plp__price-type-btn--active { background: var(--plp-price-type-active-bg, var(--brand-white)); color: var(--plp-price-type-active-btn, #00233a); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); font-weight: var(--plp-price-type-active-font-weight, var(--weight-bolder)); font-size: var(--plp-font-size-xs, var(--text-xs)); font-family: var(--font-family-3); /* Removed hardcoded width — flex: 1 on base handles equal sizing */ } .plp__price-type-btn--disabled { position: relative; color: #aaa !important; cursor: not-allowed !important; } .plp__disabled-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 11px; white-space: nowrap; padding: 4px 8px; border-radius: 4px; pointer-events: none; z-index: 10; animation: plp-tooltip-fade 2.5s ease forwards; } .plp__disabled-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(0, 0, 0, 0.75); } @keyframes plp-tooltip-fade { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } .plp__sort-dropdown { min-width: 160px; display: var(--plp-sort-dropdown-display, block); } .plp__sort-select { width: 100%; padding: 6px 32px 8px 4px; border: none; border-bottom: 1px solid #373637; border-radius: 0; font-family: var(--font-family-4); font-size: var(--plp-font-size-mobile-filter, var(--text-base)); font-weight: var(--plp-font-weight-mobile-sort, 400); color: var(--plp-color-mobile-filter); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center; appearance: none; cursor: pointer; } .plp__sort-select:focus { outline: none; border-bottom-color: var(--plp-focus-color, var(--brand)); } /* ============================================ Vehicle Grid ============================================ */ .plp__grid { display: grid; grid-template-columns: var(--plp-grid-columns, repeat(3, 1fr)); gap: var(--plp-grid-gap, var(--p-4\.5)); padding: var(--plp-grid-padding, 0); align-items: start; } /* ============================================ Vehicle Card ============================================ */ /* FIX: Removed hardcoded padding: 32px 24px — padding is handled by inner elements */ .plp__card { display: flex; flex-direction: column; background: var(--plp-card-bg, var(--brand-white)); border: 1px solid var(--plp-card-border, var(--gray-dark-8)); border-radius: var(--plp-card-border-radius, var(--p-2)); overflow: hidden; transition: box-shadow 0.2s ease; height: auto; box-sizing: border-box; min-width: 0; } .plp__card:hover { box-shadow: var(--plp-card-hover-shadow, 0 4px 12px rgba(0, 0, 0, 0.1)); } .plp__card-image { aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; padding: var(--plp-card-image-padding, var(--p-4)); background: var(--plp-card-image-bg, var(--gray-light-2)); height: var(--plp-card-image-height, 200px); } .plp__card-image img { max-width: 100%; max-height: 100%; object-fit: contain; } .plp__card-info { padding: var(--plp-card-info-padding, var(--p-4) var(--p-4) var(--p-2)); } .plp__card-brand { display: block; font-family: var(--font-family-4); font-size: var(--text-base); font-weight: 400; color: var(--brand-black); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .plp__card-model { font-family: var(--font-family-1); font-size: var(--text-lg); font-weight: var(--plp-card-model-weight, var(--weight-bolder)); color: var(--brand-black); margin: 0 0 4px; } .plp__card-version { display: block; font-family: var(--plp-font-family, var(--font-family-1)); font-size: var(--plp-font-size-sm, var(--text-sm)); color: var(--plp-text-muted, var(--gray-dark-3)); text-transform: uppercase; } /* Card Pricing */ .plp__card-pricing { padding: var(--plp-card-pricing-padding, var(--p-2) var(--p-4) var(--p-4)); flex-grow: 0; } .plp__card-price-view { margin-bottom: 8px; } .plp__card-price-view--hidden { display: none; } .plp__card-price-label { display: block; font-family: var(--font-family-4); font-size: var(--plp-font-size-xs, var(--text-xs)); color: #373637; margin-bottom: 2px; } .plp__card-price-main { display: flex; flex-direction: column; gap: 2px; } .plp__card-price-primary { font-family: var(--font-family-1); font-size: 32px; font-weight: var(--plp-card-price-weight, var(--weight-bolder)); color: var(--brand-black); } .plp__card-price-secondary { font-family: var(--plp-title-font-family, var(--font-family-2)); font-size: 32px; font-weight: var(--weight-normal); color: var(--brand-black); } /* Card Breakdown */ .plp__card-breakdown { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--plp-border-color, var(--gray-dark-8)); } .plp__card-breakdown-row { display: flex; gap: 4px; font-family: var(--font-family-4); font-size: 14px; color: #373637; margin-bottom: 4px; flex-wrap: wrap; } .plp__card-breakdown-label { color: #373637; } .plp__card-breakdown-value strong { color: var(--brand-black); font-family: var(--font-family-3); } /* Card Buttons */ /* FIX: Removed hardcoded width: 334px, height: 60px, and gap: 20px. align-items changed from center to stretch so buttons fill the card width. */ .plp__card-buttons { display: flex; flex-direction: column; gap: var(--plp-card-buttons-gap, 20px); padding: var(--plp-card-buttons-padding, var(--p-0) var(--p-4) var(--p-4)); align-items: center; } .plp__card-btn { display: flex; justify-content: center; align-items: center; width: var(--plp-card-btn-width, 334px); max-width: 100%; height: var(--plp-card-btn-height, 60px); text-align: center; text-decoration: none; font-family: var(--plp-font-family, var(--font-family-1)); font-size: var(--plp-font-size-md, var(--text-md)); font-weight: var(--plp-font-weight-card); border-radius: var(--plp-btn-border-radius, 50px); transition: all 0.2s ease; box-sizing: border-box; } .plp__card-btn--primary { background: var(--plp-btn-primary-bg, var(--brand)); color: var(--plp-btn-primary-color, var(--brand-white)); border: 2px solid var(--plp-btn-primary-bg, var(--brand)); font-family: var(--font-family-1); } .plp__card-btn--primary:hover { background: var(--plp-btn-primary-bg-hover, var(--brand-hover)); border-color: var(--plp-btn-primary-bg-hover, var(--brand-hover)); color: var(--plp-btn-primary-color-hover, var(--brand-whiter)); } .plp__card-btn--secondary { background: transparent; color: var(--brand-black); border: 2px solid var(--plp-btn-secondary-border, var(--brand-dark)); font-family: var(--font-family-1); } .plp__card-btn--secondary:hover { background: var(--plp-btn-secondary-bg-hover, var(--brand-dark)); color: var(--plp-btn-secondary-color-hover, var(--brand-white)); border: 2px solid var(--plp-btn-secondary-border-hover, var(--brand-white)); } /* Card Disclaimer */ .plp__card-disclaimer { padding: var(--plp-card-disclaimer-padding, var(--p-3) var(--p-4)); font-family: var(--font-family-4); font-size: var(--plp-font-size-xs, var(--text-xs)); color: #373637; line-height: 1.4; border-top: 1px solid var(--plp-border-color, var(--gray-dark-8)); } /* ============================================ Empty State ============================================ */ .plp__empty { text-align: center; padding: 60px 20px; color: var(--plp-text-muted, var(--gray-dark-3)); } /* ============================================ Pagination ============================================ */ .plp__pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: var(--plp-pagination-margin, var(--p-4)); padding: var(--plp-pagination-padding, var(--p-3) var(--p-0)); } .plp__pagination-btn { display: flex; align-items: center; justify-content: center; width: var(--plp-pagination-size, calc(var(--p-4) * 2)); height: var(--plp-pagination-size, calc(var(--p-4) * 2)); background: #fff; border: 1px solid var(--plp-pagination-border-color, var(--gray-dark-7)); border-radius: 50%; cursor: pointer; color: var(--plp-text-color, var(--gray-dark-1)); transition: all 0.2s ease; } .plp__pagination-btn:hover:not(:disabled) { background: var(--plp-pagination-hover-bg, var(--gray-dark-9)); } .plp__pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; } .plp__pagination-pages { display: flex; align-items: center; gap: 4px; } .plp__pagination-page { display: flex; align-items: center; justify-content: center; width: var(--plp-pagination-size, calc(var(--p-4) * 2)); height: var(--plp-pagination-size, calc(var(--p-4) * 2)); background: #fff; border: 1px solid var(--plp-pagination-border-color, var(--gray-dark-7)); border-radius: 50%; font-family: var(--plp-font-family, var(--font-family-1)); font-size: var(--plp-pagination-font-size, var(--text-xs)); color: var(--plp-text-color, var(--gray-dark-1)); cursor: pointer; transition: all 0.2s ease; } .plp__pagination-page:hover { background: var(--plp-pagination-hover-bg, var(--gray-dark-9)); } .plp__pagination-page--active { background: var(--plp-pagination-active-bg, var(--brand-white)); color: var(--plp-pagination-active-color, var(--brand-dark)); border-color: var(--plp-pagination-active-border, var(--brand-light)); font-weight: 600; } .plp__pagination-ellipsis { padding: 0 8px; color: var(--plp-text-muted, var(--gray-dark-3)); } @media (max-width: 768px) { .plp__mobile-sort { display: flex; align-items: center; } .plp__sort-select { background: none; border-bottom: none; padding: 6px 32px 8px 6px; font-family: var(--font-family-1); font-size: 20px; } .plp__price-type-toggle { width: 100%; } } @media (max-width: 576px) { .plp__sort-select { font-size: 16px; font-family: var(--font-family-3); } } /* --- Inlined from: ./[blocklist]_components/popUpBanner/popUpBanner.css --- */ /* --- Inlined from: ../../[branding]_components/popUpBanner.css --- */ :root { /* Container */ --popup-bg-color: #ffffff; --popup-border-radius: 0; /* Close Button */ --popup-close-color: #333333; /* Title */ --popup-title-font-family: var(--font-family-1); --popup-title-font-size: 1.375rem; --popup-title-font-size-imageCta: 2rem; --popup-title-font-weight: var(--weight-bolder); --popup-title-color: var(--brand-black); /* Description */ --popup-description-font-family: var(--font-family-4); --popup-description-font-size: 1rem; --popup-description-color: #373637; /* Buttons */ --popup-button-font-family: var(--font-family-1); --popup-button-font-size: var(--text-md); --popup-button-font-weight: 700; --popup-button-border-radius: 8px; /* Primary Button */ --popup-button-primary-bg: var(--brand); --popup-button-primary-color: var(--brand-white); --popup-button-primary-hover-bg: #888888; --popup-button-primary-hover-color: var(--brand-white); /* Secondary Button */ --popup-button-secondary-bg: var(--brand-dark); --popup-button-secondary-color: #ffffff; --popup-button-secondary-hover-bg: var(--brand); /* Outline Button */ --popup-button-outline-color: var(--brand-dark); --popup-button-outline-border: var(--brand-dark); --popup-button-outline-hover-bg: #888888; --popup-button-outline-hover-color: #ffffff; } @media (max-width: 1024px) { :root { --popup-title-font-size-imageCta: 1.75rem; --popup-description-font-size: 1rem; --popup-button-font-size: 1.125rem; } } @media (max-width: 480px) { :root { --popup-title-font-size-imageCta: 1.25rem; --popup-description-font-size: 0.875rem; --popup-button-font-size: 1rem; --popup-title-font-size: 1.25rem; } } /* Overlay */ .popup-banner-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: none; justify-content: center; align-items: center; z-index: 10000000; padding: 1rem; box-sizing: border-box; opacity: 0; transition: opacity 0.3s ease; } .popup-banner-overlay.popup-visible { display: flex; opacity: 1; } /* Container */ .popup-banner-container { position: relative; background-color: var(--popup-bg-color, #ffffff); border-radius: var(--popup-border-radius, 0); max-width: 900px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: popupSlideIn 0.3s ease; } @keyframes popupSlideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Layout: Form Only */ .popup-layout-formOnly { max-width: 848px; width: 100%; } .popup-layout-formOnly .popup-content-section { padding: 2.5rem; } /* Layout: Image + CTA */ .popup-layout-imageCta { display: flex; flex-direction: row; max-width: 1113px; padding: 40px; } .popup-layout-imageCta .popup-image-section { flex: 0 0 45%; max-width: 45%; } .popup-layout-imageCta .popup-content-section { flex: 1; padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } /* Layout: Image + Form */ .popup-layout-imageForm { display: flex; flex-direction: row; max-width: 1446px; } .popup-layout-imageForm .popup-image-section { flex: 0 0 45%; max-width: 45%; } .popup-layout-imageForm .popup-content-section { flex: 1; padding: 2.5rem; overflow-y: auto; max-height: 80vh; } /* Close Button */ .popup-close-btn { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background-color 0.2s ease; color: var(--popup-close-color, #333333); } .popup-close-btn:focus { outline: none; } /* Image Section */ .popup-image-section { overflow: hidden; } .popup-image-section img { width: 100%; height: 100%; object-fit: cover; display: block; } .popup-image-link { display: block; height: 100%; } /* Content Section */ .popup-content-section { text-align: center; } .popup-title { font-family: var(--popup-title-font-family); font-size: var(--popup-title-font-size); font-weight: var(--popup-title-font-weight); color: var(--popup-title-color); margin: 0 0 1rem 0; text-transform: uppercase; } .popup-layout-imageCta .popup-title { font-size: var(--popup-title-font-size-imageCta); } .popup-description { font-family: var(--popup-description-font-family, var(--font-family-2)); font-size: var(--popup-description-font-size, 0.875rem); color: var(--popup-description-color); margin: 0 0 1.5rem 0; line-height: 1.5; } .popup-mandatory-note { font-size: 0.75rem; color: #666; margin-bottom: 1rem; text-align: left; } /* Form Container */ .popup-form-container { text-align: left; margin-bottom: 1rem; } .popup-form-container .umbraco-forms-form { padding: 0 !important; max-width: 100%; } .popup-form-container .forms-component-container { background: transparent; } .popup-form-container .umbraco-forms-field { margin-bottom: 1rem; } .popup-form-container .umbraco-forms-navigation { margin-top: 1.5rem; } /* CTA Button */ .popup-cta-container { margin-top: 1rem; width: 100%; } .popup-cta-button { display: inline-flex; align-items: center; justify-content: center; width: 193px; min-height: 60px; padding: 12px 32px; font-family: var(--popup-button-font-family, var(--font-family-1)); font-size: var(--popup-button-font-size, 0.875rem); font-weight: var(--popup-button-font-weight, 600); text-decoration: none; border-radius: var(--popup-button-border-radius, 50px); cursor: pointer; transition: all 0.2s ease; border: 2px solid transparent; } .popup-cta-primary { background-color: var(--popup-button-primary-bg, var(--brand, #18bde6)); color: var(--popup-button-primary-color, #ffffff); border-color: var(--popup-button-primary-bg, var(--brand, #18bde6)); } .popup-cta-primary:hover { background-color: var(--popup-button-primary-hover-bg, var(--brand-dark, #001a41)); border-color: var(--popup-button-primary-hover-bg, var(--brand-dark, #001a41)); color: var(--popup-button-primary-hover-color, #ffffff); } .popup-cta-secondary { background-color: var(--popup-button-secondary-bg, var(--brand-dark, #001a41)); color: var(--popup-button-secondary-color, #ffffff); border-color: var(--popup-button-secondary-bg, var(--brand-dark, #001a41)); } .popup-cta-secondary:hover { background-color: var(--popup-button-secondary-hover-bg, var(--brand, #18bde6)); border-color: var(--popup-button-secondary-hover-bg, var(--brand, #18bde6)); } .popup-cta-outline { background-color: transparent; color: var(--popup-button-outline-color, var(--brand-dark, #001a41)); border-color: var(--popup-button-outline-border, var(--brand-dark, #001a41)); } .popup-cta-outline:hover { background-color: var(--popup-button-outline-hover-bg, var(--brand-dark, #001a41)); color: var(--popup-button-outline-hover-color, #ffffff); } /* Tablet (max-width: 1024px) */ @media (max-width: 1024px) { .popup-layout-imageForm { flex-direction: column; max-width: 664px; } .popup-layout-imageCta { flex-direction: column; max-width: 480px; padding: 2.5rem; padding-top: 3rem; } .popup-layout-imageCta .popup-image-section { flex: none; max-width: 100%; max-height: 180px; margin-bottom: 1.5rem; } .popup-layout-imageCta .popup-image-section img { max-height: 180px; } .popup-layout-imageCta .popup-content-section { padding: 0; } .popup-layout-imageForm .popup-image-section { flex: none; max-width: 100%; } .popup-layout-imageForm .popup-content-section { max-height: none; overflow-y: unset; padding: 20px 61px; } .popup-layout-imageForm .popup-close-btn { top: auto; bottom: auto; position: sticky; align-self: flex-end; margin-top: 10px; margin-right: 32px; margin-bottom: 0; order: 2; } .popup-layout-imageForm .popup-image-section { order: 1; } .popup-layout-imageForm .popup-content-section { order: 3; } } /* Mobile (max-width: 576px) */ @media (max-width: 576px) { .popup-banner-overlay { padding: 1rem; align-items: center; } .popup-banner-container { max-width: 100%; max-height: 90vh; } .popup-layout-formOnly { max-width: 320px; width: 100%; margin: 0 auto; } .popup-layout-formOnly .popup-content-section { padding: 1.5rem; padding-top: 2.5rem; } .popup-layout-imageCta { display: grid; grid-template-columns: 1fr; padding: 1.5rem; padding-top: 2.5rem; max-width: 320px; width: 100%; margin: 0 auto; } .popup-layout-imageCta .popup-content-section { display: contents; } .popup-layout-imageCta .popup-description { order: 2; } .popup-layout-imageCta .popup-image-section { order: 3; max-height: 150px; } .popup-layout-imageCta .popup-image-section img { max-height: 150px; } .popup-layout-imageCta .popup-cta-container { order: 4; } .popup-layout-imageForm .popup-content-section { padding: 1.5rem; } .popup-layout-imageForm { padding: 40px 20px; } .popup-close-btn { top: 0; right: 8px; } .popup-layout-imageForm .popup-close-btn { top: 0; position: absolute; margin-top: 0; margin-right: 0; } } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { .popup-banner-overlay { transition: none; } .popup-banner-container { animation: none; } } /* Print */ @media print { .popup-banner-overlay { display: none !important; } } /* --- Inlined from: ./[blocklist]_components/comparator/comparator.css --- */ /* ========================================================================== Comparator Component ========================================================================== */ .comparator { max-width: var(--comparator-max-width, 1744px); margin: var(--comparator-margin, 0 auto); padding: var(--comparator-padding, 2rem 1rem); } /* ========================================================================== Vehicle Slots ========================================================================== */ .comparator__slots { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--comparator-slots-gap, 1rem); margin-bottom: 2rem; } .comparator__slot { flex: 0 0 calc((100% - 2 * var(--comparator-slots-gap, 1rem)) / 3); max-width: calc((100% - 2 * var(--comparator-slots-gap, 1rem)) / 3); min-height: var(--comparator-slot-min-height, 350px); border: var(--comparator-slot-border, none); border-radius: var(--comparator-slot-border-radius, 8px); background-color: var(--comparator-slot-bg, var(--brand-white, #ffffff)); overflow: hidden; } .comparator__slots--centered { padding-left: 0; justify-content: center; } .comparator__slot--hidden { display: none; } /* Empty State */ .comparator__slot-empty { display: flex; align-items: center; justify-content: center; width: 433px; max-width: 100%; height: 594px; background-color: var(--gray-dark-9); } .comparator__add-btn { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem; background: none; border: none; cursor: pointer; transition: all 0.2s ease; color: var(--comparator-add-btn-color, var(--gray-dark-4, #838383)); } .comparator__add-btn:hover .comparator__add-icon { background-color: var(--comparator-add-icon-hover-bg, var(--hover-dark, #00233a)); } .comparator__add-icon { display: flex; align-items: center; justify-content: center; width: var(--comparator-add-icon-size, 100px); height: var(--comparator-add-icon-size, 100px); border-radius: 50%; background-color: var(--comparator-add-icon-bg, var(--brand-black, #000)); color: var(--brand-white, #ffffff); transition: background-color 0.2s ease; } .comparator__add-icon svg { width: 32px; height: 32px; } .comparator__add-text { font-family: var(--font-family-4); font-size: var(--text-md); font-weight: var(--weight-normal, 400); color: #373637; } /* Filled State */ .comparator__slot-filled { display: flex; flex-direction: column; height: 100%; } .comparator__slot-actions { display: flex; justify-content: flex-end; gap: 1.5rem; padding: 0.75rem 1rem; } .comparator__action-btn { display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0; font-family: var(--font-family-2); font-size: var(--comparator-action-btn-font-size, var(--text-sm, 0.875rem)); font-weight: var(--weight-normal); background: none; border: none; cursor: pointer; color: var(--comparator-action-btn-color, #00233A); text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.2s ease; } .comparator__action-icon { display: none; } .comparator__action-btn:hover { opacity: 0.7; } .comparator__vehicle-image { display: flex; align-items: center; justify-content: center; background-color: var(--comparator-vehicle-image-bg, var(--brand-white, #ffffff)); } .comparator__vehicle-image img { width: 100%; height: auto; object-fit: cover; } .comparator__vehicle-info { padding: 1.25rem 1rem; flex: 1; display: flex; flex-direction: column; } .comparator__vehicle-brand { font-family: var(--font-family-4); font-size: 14px; color: var(--comparator-vehicle-brand-color, var(--brand-black, #000)); text-transform: uppercase; letter-spacing: 0.5px; } .comparator__vehicle-model { margin: 0.25rem 0 0.25rem; font-family: var(--font-family-2); font-size: 20px; font-weight: var(--weight-normal); color: var(--comparator-vehicle-model-color, var(--brand-black, #000)); } .comparator__vehicle-version { font-family: var(--font-family-2); font-size: 20px; font-weight: var(--weight-normal); color: var(--comparator-vehicle-version-color, var(--brand-black, #000)); margin-bottom: 1.25rem; } .comparator__vehicle-pricing { margin-top: auto; } .comparator__price-row { display: flex; flex-direction: column; padding: 0 0 0.5rem; font-family: var(--font-family-1); } .comparator__price-label { font-size: 14px; color: var(--comparator-price-label-color, var(--brand-black, #000)); font-family: var(--font-family-4); } .comparator__price-value { font-size: 20px; font-weight: 400; color: var(--comparator-price-value-color, var(--brand-black, #000)); font-family: var(--font-family-2); } .comparator__list-price-row, .comparator__bonus-row, .comparator__financing-row { display: flex; gap: 0.25rem; padding: 0.125rem 0; font-family: var(--font-family-1); font-size: 12px; } .comparator__list-price-label, .comparator__bonus-label, .comparator__financing-label { font-weight: 400; color: #373637; font-family: var(--font-family-4); } .comparator__list-price-value, .comparator__bonus-value, .comparator__financing-value { font-family: var(--font-family-3); font-weight: 700; color: #373637; } .comparator__cta-buttons { display: flex; gap: 0.75rem; margin-top: 1.25rem; } .comparator__cta-btn { display: inline-block; font-family: var(--font-family-2); font-size: 14px; font-weight: 400; color: var(--comparator-quote-color, #00233A); text-decoration: underline; text-underline-offset: 4px; transition: opacity 0.2s ease; } .comparator__cta-btn:hover { opacity: 0.7; } /* ========================================================================== Features Accordion ========================================================================== */ .comparator__features { border: var(--comparator-features-border, 1px solid var(--gray-dark-8, #e5e5e5)); border-radius: var(--comparator-features-border-radius, 0px); overflow: hidden; } .comparator__features--hidden { display: none; } .comparator__feature-group { border-bottom: var(--comparator-feature-row-border, 1px solid var(--gray-dark-8, #e5e5e5)); } .comparator__feature-group:last-child { border-bottom: none; } .comparator__feature-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--comparator-feature-header-padding, 1rem 1.5rem); font-family: var(--font-family-1); font-size: var(--comparator-feature-header-font-size, var(--text-lg)); color: var(--comparator-feature-header-collapsed-color, var(--brand-black)); background-color: var(--comparator-feature-header-collapsed-bg, var(--brand-white, #ffffff)); border: none; cursor: pointer; text-align: left; transition: background-color 0.2s ease, color 0.2s ease; font-weight: var(--weight-bolder); } .comparator__feature-header:hover { background-color: var(--comparator-feature-header-hover-bg, var(--gray-light-2, #f2f2f2)); } .comparator__feature-header[aria-expanded="true"] { color: var(--comparator-feature-header-color, var(--brand-white, #ffffff)); background-color: var(--comparator-feature-header-bg, #00233A); } .comparator__feature-header[aria-expanded="true"]:hover { background-color: var(--comparator-feature-header-hover-bg, var(--hover-dark, #00233a)); } .comparator__chevron { transition: transform 0.3s ease, color 0.2s ease; color: var(--comparator-feature-header-collapsed-color, var(--brand-black)); } .comparator__feature-header[aria-expanded="true"] .comparator__chevron { transform: rotate(180deg); color: var(--comparator-feature-header-color, var(--brand-white, #ffffff)); } .comparator__feature-panel { background-color: var(--comparator-slot-bg, var(--brand-white, #ffffff)); } .comparator__feature-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .comparator__feature-row { border-bottom: var(--comparator-feature-row-border, 1px solid var(--gray-dark-8, #e5e5e5)); } .comparator__feature-row:last-child { border-bottom: none; } .comparator__feature-name { padding: 0.75rem 1rem; font-family: var(--font-family-5); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--comparator-feature-name-color, var(--brand-black)); background-color: var(--comparator-feature-name-bg, var(--gray-dark-9)); text-align: left; } .comparator__feature-value { padding: 0.75rem 1rem; font-family: var(--font-family-4); font-size: var(--text-md); color: var(--comparator-feature-value-color, #373637); text-align: center; border-left: var(--comparator-feature-col-border, 1px solid var(--gray-dark-8, #e5e5e5)); } /* ========================================================================== Modal ========================================================================== */ .comparator__modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; } .comparator__modal[hidden] { display: none; } .comparator__modal-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--comparator-modal-backdrop-bg, rgba(0, 0, 0, 0.5)); } .comparator__modal-content { position: relative; width: 90%; max-width: var(--comparator-modal-max-width, 600px); height: var(--comparator-modal-height, 470px); max-height: 90vh; background-color: var(--comparator-modal-bg, var(--brand-white, #ffffff)); border-radius: var(--comparator-modal-border-radius, 8px); overflow: hidden; display: flex; flex-direction: column; } .comparator__modal-header { display: flex; align-items: center; justify-content: center; position: relative; padding: 1.25rem 1.5rem; background-color: var(--comparator-modal-header-bg, var(--brand-white, #ffffff)); border-bottom: 1px solid var(--gray-dark-9); } .comparator__modal-title { margin: 0; font-family: var(--font-family-1); font-size: var(--comparator-modal-title-font-size, var(--text-lg, 1.25rem)); font-weight: var(--weight-bolder, 700); color: var(--brand-black); } .comparator__modal-close { position: absolute; right: 1.5rem; display: flex; align-items: center; justify-content: center; padding: 0.25rem; background: none; border: none; cursor: pointer; color: var(--brand-black); transition: opacity 0.2s ease; } .comparator__modal-close:hover { opacity: 0.6; } .comparator__modal-body { padding: 1.5rem; overflow-y: auto; } .comparator__modal-text { margin: 0 0 1.5rem; font-family: var(--font-family-4); font-size: var(--text-base); color: #373637; text-align: center; } .comparator__form-group { margin-bottom: 1rem; } .comparator__label { display: none; } .comparator__select { width: 100%; padding: 0.75rem 2rem 0.75rem 0.5rem; font-family: var(--font-family-2); font-size: var(--text-base); color: #373637; background-color: var(--gray-dark-9); border: none; border-bottom: var(--comparator-select-border, 1px solid #373637); border-radius: 0; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 14 8'%3E%3Cpath fill='%23373637' d='M0.247521 0.321725C0.597151 -0.0840958 1.18763 -0.109402 1.5664 0.265201L7 5.63909L12.4336 0.265201C12.8124 -0.109402 13.4028 -0.0840958 13.7525 0.321725C14.1021 0.727545 14.0785 1.3602 13.6997 1.73481L7.63306 7.7348C7.27554 8.0884 6.72446 8.0884 6.36694 7.7348L0.300276 1.73481C-0.0784894 1.3602 -0.102109 0.727545 0.247521 0.321725Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; } .comparator__select:focus { outline: none; border-bottom-color: var(--comparator-select-focus-border, #373637); } .comparator__select:disabled { opacity: 0.5; cursor: not-allowed; } .comparator__modal-footer { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem 1.5rem; } .comparator__btn { font-family: var(--font-family-2); font-size: var(--text-base, 1rem); font-weight: var(--weight-bolder); cursor: pointer; transition: all 0.2s ease; } .comparator__btn--primary { width: 100%; padding: 1rem 1.5rem; color: var(--comparator-btn-primary-color, var(--brand-white, #ffffff)); background-color: var(--comparator-btn-primary-bg, var(--brand, #18bde6)); border: none; border-radius: 8px; } .comparator__btn--primary:hover:not(:disabled) { background-color: var(--comparator-btn-primary-hover-bg, var(--brand-dark, #001a41)); } .comparator__btn--primary:disabled { background-color: var(--comparator-btn-primary-disabled-bg, #00000066); color: var(--comparator-btn-primary-disabled-color, var(--brand-white)); cursor: not-allowed; font-family: var(--font-family-1); } .comparator__btn--link { padding: 0.5rem; color: var(--comparator-btn-link-color, var(--brand-black)); background: none; border: none; text-decoration: underline; text-underline-offset: 3px; font-weight: var(--weight-normal); } .comparator__btn--link:hover { color: var(--comparator-btn-link-hover-color, var(--brand-dark, #001a41)); } /* ========================================================================== Responsive Styles ========================================================================== */ /* ---- Cards: mobile mode (≤1160px) ---- */ @media (max-width: 1160px) { /* Slots: centered grid */ .comparator__slots { padding-left: 0; gap: 0.5rem; justify-content: center; } .comparator__slot { flex: 0 0 calc(33.333% - 0.334rem); max-width: calc(33.333% - 0.334rem); min-height: auto; } /* Empty slot: full-width add button (same style as modal submit) */ .comparator__slot:has(.comparator__slot-filled[hidden]) { flex: 0 0 100%; max-width: 100%; min-height: auto; background-color: transparent; border-radius: 0; } .comparator__slot:has(.comparator__slot-filled[hidden]) .comparator__slot-empty { width: auto; height: auto; background-color: transparent; } .comparator__slot:has(.comparator__slot-filled[hidden]) .comparator__add-btn { flex-direction: row; gap: 0.5rem; padding: 1rem 1.5rem; width: 100%; justify-content: center; background-color: var(--comparator-btn-primary-bg, var(--brand, #18bde6)); border-radius: 8px; transition: background-color 0.2s ease; } .comparator__slot:has(.comparator__slot-filled[hidden]) .comparator__add-btn:hover { background-color: var(--comparator-btn-primary-hover-bg, var(--brand-dark, #001a41)); } .comparator__slot:has(.comparator__slot-filled[hidden]) .comparator__add-icon { width: 24px; height: 24px; background-color: transparent; border-radius: 0; color: var(--comparator-btn-primary-color, #00233A); } .comparator__slot:has(.comparator__slot-filled[hidden]) .comparator__add-icon svg { width: 18px; height: 18px; } .comparator__slot:has(.comparator__slot-filled[hidden]) .comparator__add-text { color: var(--comparator-btn-primary-color, var(--brand-white, #ffffff)); font-size: 1rem; font-weight: var(--weight-bolder); font-family: var(--font-family-1); } /* Action buttons: icons instead of text */ .comparator__slot-actions { justify-content: space-between; padding: 0.5rem 0.75rem; } .comparator__action-btn { text-decoration: none; padding: 0.25rem; } .comparator__action-icon { display: block; } .comparator__action-text { display: none; } /* Vehicle card: centered text */ .comparator__vehicle-info { text-align: center; align-items: center; } .comparator__vehicle-brand { font-size: 14px; } .comparator__vehicle-model { font-size: 12px; font-weight: 400; } .comparator__vehicle-version { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .comparator__price-row { align-items: center; } .comparator__price-label { font-size: 12px; } .comparator__price-value { font-size: 16px; } .comparator__list-price-row, .comparator__bonus-row, .comparator__financing-row { justify-content: center; flex-wrap: wrap; font-size: 11px; } .comparator__cta-buttons { justify-content: center; } .comparator__cta-btn { font-size: 12px; } } /* ---- Features & Modal: mobile (≤768px) ---- */ @media (max-width: 768px) { /* Features: stacked vertical layout */ .comparator__feature-header { font-size: var(--text-sm, 0.875rem); padding: 0.75rem 1rem; } /* Hide chevron, show +/- instead */ .comparator__chevron { display: none; } .comparator__feature-header::after { content: "+"; font-size: 1.5rem; font-weight: 300; line-height: 1; } .comparator__feature-header[aria-expanded="true"]::after { content: "�2"; } /* Stacked table layout */ .comparator__feature-table, .comparator__feature-table tbody { display: block; width: 100%; } .comparator__feature-row { display: flex; flex-wrap: wrap; border-bottom: var(--comparator-feature-row-border, 1px solid var(--gray-dark-8, #e5e5e5)); } .comparator__feature-name { flex: 0 0 100%; min-width: auto; max-width: none; font-weight: 700; font-size: var(--text-sm, 0.875rem); padding: 0.625rem 1rem; text-align: center; } .comparator__feature-value { flex: 1 1 0; min-width: 0; text-align: center; border-left: var(--comparator-feature-col-border, 1px solid var(--gray-dark-8, #e5e5e5)); border-top: var(--comparator-feature-row-border, 1px solid var(--gray-dark-8, #e5e5e5)); padding: 0.5rem 1rem; font-size: var(--text-sm, 0.875rem); } /* Modal */ .comparator__modal-content { width: 95%; max-height: 95vh; } } /* --- Inlined from: ./[blocklist]_components/vinChecker/vinChecker.css --- */ /* --- Inlined from: ../../[branding]_components/vinChecker.css --- */ :root { /* Layout */ --vin-checker-max-width: 1744px; --vin-checker-padding: 2rem 1rem; --vin-checker-margin: 0 auto; /* Instruction */ --vin-checker-instruction-font-size: var(--text-base); --vin-checker-instruction-color: var(--brand-black); /* Form */ --vin-checker-form-bg: var(--gray-light-2); --vin-checker-form-padding: 1.5rem 2rem; --vin-checker-form-border-radius: 0; /* Input */ --vin-checker-input-font-size: var(--text-base); --vin-checker-input-color: var(--brand-black); --vin-checker-input-border: 1px solid var(--gray-dark-4); --vin-checker-input-focus-border: var(--brand); /* Message */ --vin-checker-message-font-size: var(--text-xs); --vin-checker-message-color: #373637; /* Button */ --vin-checker-btn-bg: var(--brand); --vin-checker-btn-color: var(--brand-white); --vin-checker-btn-hover-bg: #888888; --vin-checker-btn-hover-color: var(--brand-white); --vin-checker-btn-padding: 1rem 2.5rem; --vin-checker-btn-font-size: var(--text-base); /* Guide Link */ --vin-checker-guide-color: var(--brand); --vin-checker-guide-font-size: var(--text-sm); } /* Desktop (≥1200px) */ @media (min-width: 1200px) { :root { --vin-checker-padding: 3rem 2rem; } } /* Mobile (≤767px) */ @media (max-width: 767px) { :root { --vin-checker-padding: 1.5rem 1rem; } } /* ========================================================================== Recall Page General Styles ========================================================================== */ .general-paragraph-section { padding: 0 !important; } /* ========================================================================== VIN Checker Component ========================================================================== */ .vin-checker { max-width: var(--vin-checker-max-width, 1744px); margin: var(--vin-checker-margin, 0 auto); padding: var(--vin-checker-padding, 2rem 1rem); } .vin-checker__instruction-row { display: flex; align-items: baseline; gap: 0.5rem; max-width: var(--vin-checker-form-max-width, 925px); margin: 0 auto 1rem; } .vin-checker__instruction { margin: 0; font-family: var(--font-family-1); font-size: var(--vin-checker-instruction-font-size, var(--text-base, 1rem)); color: var(--vin-checker-instruction-color, var(--brand-black, #000)); } /* ========================================================================== Form ========================================================================== */ .vin-checker__form { display: flex; align-items: flex-start; gap: 1.5rem; max-width: var(--vin-checker-form-max-width, 925px); margin: 0 auto; padding: var(--vin-checker-form-padding, 1.5rem 2rem); background-color: var(--vin-checker-form-bg, var(--gray-light-2, #f2f2f2)); border-radius: var(--vin-checker-form-border-radius, 0); } .vin-checker__input-group { flex: 1; display: flex; flex-direction: column; } .vin-checker__input { width: 100%; padding: 0.5rem 0; font-family: var(--font-family-1); font-size: var(--vin-checker-input-font-size, var(--text-base, 1rem)); color: var(--vin-checker-input-color, var(--brand-black, #000)); background: transparent; border: none; border-bottom: var(--vin-checker-input-border, 1px solid var(--gray-dark-4, #838383)); outline: none; transition: border-color 0.2s ease; } .vin-checker__input:focus { border-bottom-color: var(--vin-checker-input-focus-border, var(--brand, #18bde6)); } .vin-checker__input--invalid { border-bottom-color: var(--vin-checker-input-error-border, #d32f2f); } .vin-checker__message { margin-top: 0.375rem; font-family: var(--font-family-4); font-size: var(--vin-checker-message-font-size, var(--text-xs, 0.75rem)); color: var(--vin-checker-message-color, var(--gray-dark-4, #838383)); } .vin-checker__message--error { color: var(--vin-checker-message-error-color, #d32f2f); } .vin-checker__btn { flex-shrink: 0; width: 338px; height: 60px; padding: 0; font-family: var(--font-family-1); font-size: var(--vin-checker-btn-font-size, var(--text-base, 1rem)); font-weight: var(--weight-semibold, 500); text-transform: uppercase; letter-spacing: 0.5px; color: var(--vin-checker-btn-color, var(--brand-dark, #001a41)); background-color: var(--vin-checker-btn-bg, var(--brand, #18bde6)); border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .vin-checker__btn:hover:not(:disabled) { background-color: var(--vin-checker-btn-hover-bg, var(--brand-dark, #001a41)); color: var(--vin-checker-btn-hover-color, var(--brand-white, #ffffff)); } .vin-checker__btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ========================================================================== VIN Guide Link & Modal ========================================================================== */ .vin-checker__guide-link { display: inline-block; flex-shrink: 0; font-family: var(--font-family-1); font-size: var(--vin-checker-guide-font-size, var(--text-sm, 0.875rem)); font-weight: var(--weight-semibold, 500); color: var(--vin-checker-guide-color, var(--brand, #18bde6)); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.2s ease; } .vin-checker__guide-link:hover { opacity: 0.7; } .vin-checker__guide-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; } .vin-checker__guide-modal[hidden] { display: none; } .vin-checker__guide-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .vin-checker__guide-content { position: relative; max-width: 90%; max-height: 90vh; background-color: var(--brand-white, #ffffff); border-radius: 8px; overflow: hidden; } .vin-checker__guide-content img { display: block; max-width: 100%; height: auto; } .vin-checker__guide-close { position: absolute; top: 0.75rem; right: 0.75rem; display: flex; align-items: center; justify-content: center; padding: 0.25rem; background: rgba(255, 255, 255, 0.8); border: none; border-radius: 50%; cursor: pointer; color: var(--brand-black, #000); transition: opacity 0.2s ease; } .vin-checker__guide-close:hover { opacity: 0.7; } /* ========================================================================== Result ========================================================================== */ .vin-checker__result { margin-top: 1.5rem; font-family: var(--font-family-1); font-size: var(--text-base, 1rem); } .vin-checker__result[hidden] { display: none; } /* ========================================================================== Responsive Styles ========================================================================== */ @media (max-width: 576px) { .vin-checker__form { flex-direction: column; padding: 1.25rem 1rem; background-color: transparent; } .vin-checker__input-group { width: 100%; } .vin-checker__input { width: 100%; background-color: #F1F1F1; padding: 0.75rem 0.5rem; border: none; border-bottom: 1px solid var(--gray-dark-4, #838383); } .vin-checker__btn { width: 100%; } } /* --- Inlined from: ./[blocklist]_components/downloadBanner/downloadBanner.css --- */ /* --- Inlined from: ../../[branding]_components/downloadBanner.css --- */ /* Download Banner - Branding Variables */ :root { /* Section */ --download-banner-bg: var(--brand-white); --download-banner-padding-y: 40px; --download-banner-padding-x: 50px; --download-banner-max-width: 1920px; /* Image column */ --download-banner-image-width: 58%; /* Content column */ --download-banner-content-width: 42%; --download-banner-content-padding-tablet: 0 0 62px; --download-banner-content-align-items: flex-end; --download-banner-content-text-align: right; /* Title */ --download-banner-title-font-family: var(--font-family-1); --download-banner-title-font-size: 48px; --download-banner-title-font-weight: var(--weight-bolder); --download-banner-title-color: var(--brand-black); --download-banner-title-margin-bottom: 24px; /* Description */ --download-banner-description-font-family: var(--font-family-2); --download-banner-description-font-size: 28px; --download-banner-description-font-weight: var(--weight-semibold); --download-banner-description-color: var(--brand-black); --download-banner-description-margin-bottom: 95px; /* Buttons */ --download-banner-buttons-gap: 35px; /* Image button */ --download-banner-btn-height: 89px; } /* Section */ .download-banner { background-color: var(--download-banner-bg); width: 100%; padding: var(--download-banner-padding-y) var(--download-banner-padding-x); } /* Two-column container */ .download-banner__container { max-width: var(--download-banner-max-width); margin: 0 auto; display: flex; flex-direction: row; align-items: stretch; } /* Left: image column */ .download-banner__image { width: var(--download-banner-image-width); flex-shrink: 0; overflow: hidden; padding: 40px 0; } .download-banner__image-img { width: 100%; height: 100%; object-fit: none; object-position: left bottom; display: block; } /* Right: content column */ .download-banner__content { width: var(--download-banner-content-width); display: flex; flex-direction: column; justify-content: center; align-items: var(--download-banner-content-align-items); text-align: var(--download-banner-content-text-align); } /* Title */ .download-banner__title { font-family: var(--download-banner-title-font-family); font-size: var(--download-banner-title-font-size); font-weight: var(--download-banner-title-font-weight); color: var(--download-banner-title-color); margin-bottom: var(--download-banner-title-margin-bottom); } /* Description */ .download-banner__description { font-family: var(--download-banner-description-font-family); font-size: var(--download-banner-description-font-size); font-weight: var(--download-banner-description-font-weight); color: var(--download-banner-description-color); margin-bottom: var(--download-banner-description-margin-bottom); } .download-banner__description * { margin: 0; } /* Image buttons row */ .download-banner__buttons { display: flex; flex-direction: row; gap: var(--download-banner-buttons-gap); align-items: center; justify-content: end; width: 100%; } .download-banner__btn { display: inline-block; line-height: 0; flex-shrink: 0; } .download-banner__btn img { height: var(--download-banner-btn-height); width: auto; display: block; } /* Tablet: ≤ 768px — stack vertically, content on top, image below */ @media (max-width: 768px) { .download-banner__container { flex-direction: column; } .download-banner__description { margin-bottom: 53px; } .download-banner__image { width: 100%; order: 2; } .download-banner__image-img { height: auto; } .download-banner__content { width: 100%; order: 1; padding: var(--download-banner-content-padding-tablet); align-items: flex-start; text-align: left; } .download-banner__buttons { display: flex; justify-content: space-between; align-items: stretch; } } /* Mobile: ≤ 425px */ @media (max-width: 430px) { .download-banner { padding: 40px 20px 32px; } .download-banner__title { font-size: 24px; } .download-banner__description { font-size: 20px; margin-bottom: 23px; } .download-banner__btn img { height: 50px; } .download-banner__content { padding: 0 0 12px; } .download-banner__image { padding: 40px 0 18px; display: flex; justify-content: center; align-items: flex-end; } .download-banner__image-img { width: auto; height: auto; object-fit: none; object-position: center bottom; } .download-banner__buttons { gap: unset; width: 100%; } } /* Mobile: ≤ 425px */ @media (max-width: 375px) { .download-banner__btn img { height: 40px; } } /* --- Inlined from: ./umbracoForms.css --- */ /* --- Inlined from: ./[branding]_components/umbracoForms.css --- */ /* =========================================== UMBRACO FORMS - BRANDING VARIABLES =========================================== */ :root { /* ===================== FORM CONTAINER ===================== */ --uf-container-max-width: 1920px; --uf-container-width: 925px; --uf-container-padding: 0 0 80px 0; --uf-container-font-family: var(--font-family-4); /* ===================== FIELD SPACING ===================== */ --uf-field-margin-bottom: 24px; --uf-field-gap: 12px; /* ===================== INPUT BASE STYLES ===================== */ --uf-input-padding-y: 12px; --uf-input-padding-x: 12px; --uf-input-font-size: var(--text-base); --uf-input-font-weight: var(--weight-normal); --uf-input-color: #373637; --uf-input-bg: var(--gray-dark-9); --uf-input-border-color: var(--gray-dark-1); --uf-input-border-width: 1px; --uf-input-accent-color: var(--brand); --uf-input-accent-width: 1px; --uf-input-border-radius: 0; --uf-input-transition: border-color 0.2s ease; /* Focus State */ --uf-input-focus-border-color: var(--gray-dark-9); --uf-input-focus-accent-color: var(--brand); /* Placeholder */ --uf-placeholder-color: var(--gray-dark-1); --uf-placeholder-opacity: 1; /* ===================== TEXTAREA ===================== */ --uf-textarea-min-height: 100%; /* ===================== SELECT / DROPDOWN ===================== */ --uf-select-padding-right: 40px; --uf-select-arrow-color: var(--gray-dark-11); --uf-select-arrow-size: 12px; /* ===================== CHECKBOX & RADIO ===================== */ --uf-checkbox-size: 24px; --uf-checkbox-border-width: 2px; --uf-checkbox-border-color: var(--brand); --uf-checkbox-border-radius: 3px; --uf-checkbox-bg: var(--brand-white); --uf-checkbox-checked-bg: var(--brand); --uf-checkbox-checked-border-color: var(--brand); --uf-checkbox-checkmark-color: var(--brand-white); /* Radio specific */ --uf-radio-border-radius: 50%; --uf-radio-dot-size: 10px; --uf-radio-dot-color: var(--brand); /* Checkbox/Radio label */ --uf-checkbox-label-font-size: var(--text-base); --uf-checkbox-label-color: #373637; --uf-checkbox-label-line-height: 1.5; /* ===================== FILE UPLOAD ===================== */ --uf-file-button-padding-y: 8px; --uf-file-button-padding-x: 16px; --uf-file-button-bg: var(--brand); --uf-file-button-color: var(--brand-white); --uf-file-button-border-radius: 4px; --uf-file-button-font-size: var(--text-xs); --uf-file-button-hover-bg: var(--brand-hover); /* ===================== DATE PICKER ===================== */ --uf-date-icon-opacity: 0.6; --uf-date-icon-hover-opacity: 1; /* ===================== TITLE & DESCRIPTION ===================== */ --uf-title-font-size: 2rem; --uf-title-font-weight: var(--weight-normal); --uf-title-color: var(--brand-black); --uf-title-margin-bottom: 8px; --uf-title-text-align: center; --uf-description-font-size: var(--text-md); --uf-description-color: #373637; --uf-description-line-height: 1.5; /* Mandatory note */ --uf-mandatory-font-size: var(--text-sm); --uf-mandatory-color: var(--gray-dark-11); --uf-mandatory-margin-bottom: 20px; /* ===================== RICH TEXT ===================== */ --uf-richtext-font-size: var(--text-sm); --uf-richtext-color: var(--gray-dark-11); --uf-richtext-line-height: 1.6; --uf-richtext-link-color: var(--brand); --uf-richtext-link-hover-color: var(--brand-hover); /* ===================== SUBMIT BUTTON ===================== */ --uf-button-min-width: 450px; --uf-button-height: 60px; --uf-button-padding-y: 14px; --uf-button-padding-x: 48px; --uf-button-font-size: var(--text-md); --uf-button-font-weight: var(--weight-bolder); --uf-button-color: var(--brand-white); --uf-button-bg: var(--brand); --uf-button-border-radius: 8px; --uf-button-hover-bg: var(--brand-hover); --uf-button-transition: background-color 0.2s ease; /* ===================== VALIDATION / ERRORS ===================== */ --uf-error-color: var(--alert-error-main); --uf-error-font-size: var(--text-xs); --uf-error-bg: var(--alert-error-light); --uf-error-border-color: var(--alert-error-main); /* ===================== RECAPTCHA ===================== */ --uf-recaptcha-margin-top: 20px; --uf-recaptcha-justify: flex-end; /* ===================== DATA CONSENT LINKS ===================== */ --uf-consent-link-color: var(--brand); --uf-consent-link-hover-color: var(--brand-hover); } /* ============================================= RESPONSIVE - 1366 ============================================= */ @media (max-width: 1366px) { :root { --uf-container-width: 886px; } } /* ============================================= RESPONSIVE - LAPTOP (1024px) ============================================= */ @media (max-width: 1024px) { :root { --uf-container-padding: 0 5rem 100px; } } /* ============================================= RESPONSIVE - 992px ============================================= */ @media (max-width: 992px) { :root { --uf-container-width: 100%; --uf-container-padding: 0 5rem 100px; } } /* ============================================= RESPONSIVE - TABLET (768px) ============================================= */ @media (max-width: 768px) { :root { --uf-container-max-width: 100%; --uf-container-padding: 24px 5rem; --uf-recaptcha-justify: center; --uf-title-font-size: 28px; --uf-container-width: 100%; --uf-button-min-width: 450px; --uf-button-height: 60px; --uf-description-font-size: var(--text-base); --uf-button-font-size: 1rem; --uf-checkbox-label-font-size: 0.875rem; } } /* ============================================= RESPONSIVE - MOBILE (576) ============================================= */ @media (max-width: 576px) { :root { --uf-container-width: 100%; --uf-container-padding: 0; --uf-button-min-width: 276px; --uf-button-height: 48px; } } /* =========================================== UMBRACO FORMS - BASE STRUCTURE =========================================== */ .forms-component-container { display: flex; flex-direction: column; justify-content: center; align-items: center; /* background: #f1f1f1; */ } .form-type-container { display: flex; justify-content: center; font-size: 3rem; line-height: 56px; font-weight: var(--weight-bolder); font-family: var(--font-family-1); padding: 5rem 0; display: none; } .rich-text-container { font-family: var(--font-family-1); font-size: 18px; font-weight: var(--weight-semibold); } .rte-container { width: 100%; } .rich-text-container p { margin-bottom: 0; padding: 3rem 0; } .umbraco-forms-hidden { display: none !important; } .umbraco-forms-caption { display: none; } .umbraco-forms-form { max-width: var(--uf-container-max-width); width: var(--uf-container-width); margin: 0 auto; padding: var(--uf-container-padding) !important; font-family: var(--uf-container-font-family); } /* Fieldset Reset */ .umbraco-forms-form fieldset { border: none; padding: 0 !important; margin: 0 !important; } label.umbraco-forms-label { font-weight: 500px !important; font-size: 12px; display: flex; } /* Input Text Reset */ .umbraco-forms-form input.text, .umbraco-forms-form input.title, .umbraco-forms-form select, .umbraco-forms-form textarea { margin: 0 !important; } .umbraco-forms-form input.text { padding: 12px !important; } /* Checkbox and Radio Reset} */ .umbraco-forms-form .checkboxlist, .umbraco-forms-form .radiobuttonlist, .umbraco-forms-form span.checkbox { padding: 0 !important; margin: 1rem 1rem 1rem 0 !important; } /* Form Field Container */ .umbraco-forms-form .umbraco-forms-field { margin-bottom: var(--uf-field-margin-bottom); } /* Form Help Block (This is the description for answer type in the back office} */ .umbraco-forms-tooltip.help-block { display: none !important; } /* Form Group Name (This is the group name of the property in the back office} */ .umbraco-forms-fieldset > legend { display: none !important; } .umbraco-forms-fieldset .umbraco-forms-field legend.umbraco-forms-legend:not(.umbraco-forms-hidden) { display: block !important; font-size: var(--uf-checkbox-label-font-size); font-weight: var(--weight-bolder); color: var(--uf-checkbox-label-color); } /* Hide Default Labels (using placeholders) */ /* .umbraco-forms-form .umbraco-forms-label { display: none; } */ /* =========================================== 1. SHORT ANSWER INPUT TYPE (text, date, datetime-local, email, tel, number, time, url, week) =========================================== */ .umbraco-forms-form input.text, .umbraco-forms-form textarea, .umbraco-forms-form .shortanswer input[type="text"], .umbraco-forms-form .shortanswer input[type="date"], .umbraco-forms-form .shortanswer input[type="datetime-local"], .umbraco-forms-form .shortanswer input[type="email"], .umbraco-forms-form .shortanswer input[type="tel"], .umbraco-forms-form .shortanswer input[type="number"], .umbraco-forms-form .shortanswer input[type="time"], .umbraco-forms-form .shortanswer input[type="url"], .umbraco-forms-form .shortanswer input[type="week"] { max-width: 100% !important; width: 100% !important; padding: var(--uf-input-padding-y) var(--uf-input-padding-x); font-size: var(--uf-input-font-size); font-weight: var(--uf-input-font-weight); color: var(--uf-input-color); background-color: var(--uf-input-bg); border: var(--uf-input-border-width) solid var(--gray-dark-9); border-bottom: var(--uf-input-border-width) solid var(--uf-input-border-color); /* border-left: var(--uf-input-accent-width) solid var(--uf-input-accent-color); */ border-radius: var(--uf-input-border-radius); outline: none; box-sizing: border-box; transition: var(--uf-input-transition); } .umbraco-forms-form .shortanswer input[type="text"]:focus, .umbraco-forms-form .shortanswer input[type="date"]:focus, .umbraco-forms-form .shortanswer input[type="email"]:focus, .umbraco-forms-form .shortanswer input[type="tel"]:focus, .umbraco-forms-form .shortanswer input[type="number"]:focus, .umbraco-forms-form .shortanswer input[type="time"]:focus, .umbraco-forms-form .shortanswer input[type="url"]:focus, .umbraco-forms-form .shortanswer input[type="week"]:focus { border-color: var(--uf-input-focus-border-color); border-bottom: var(--uf-input-accent-width) solid var(--uf-input-focus-accent-color); } /* Placeholder */ .umbraco-forms-form .shortanswer input::placeholder { color: var(--uf-placeholder-color); opacity: var(--uf-placeholder-opacity); } /* =========================================== 2. LONG ANSWER (textarea) =========================================== */ .umbraco-forms-form .longanswer textarea, .umbraco-forms-form textarea.textarea { max-width: 100% !important; width: 100%; min-height: var(--uf-textarea-min-height); padding: var(--uf-input-padding-y) var(--uf-input-padding-x); font-size: var(--uf-input-font-size); font-family: inherit; color: var(--uf-input-color); background-color: var(--uf-input-bg); border: var(--uf-input-border-width) solid var(--gray-dark-9); border-bottom: var(--uf-input-accent-width) solid var(--uf-input-border-color); border-radius: var(--uf-input-border-radius); outline: none; box-sizing: border-box; resize: vertical; transition: var(--uf-input-transition); } .umbraco-forms-form .longanswer textarea:focus { border-color: var(--uf-input-focus-border-color); border-bottom: var(--uf-input-accent-width) solid var(--uf-input-focus-accent-color); } .umbraco-forms-form .longanswer textarea::placeholder { color: var(--uf-placeholder-color); opacity: var(--uf-placeholder-opacity); } /* =========================================== 3. DATE (date picker) =========================================== */ .umbraco-forms-form .date input[type="date"], .umbraco-forms-form .datepicker input, .umbraco-forms-form input.datepickerfield { max-width: 100% !important; width: 100% !important; padding: var(--uf-input-padding-y) var(--uf-input-padding-x); font-size: var(--uf-input-font-size); color: var(--uf-input-color); background-color: var(--uf-input-bg); border: var(--uf-input-border-width) solid var(--gray-dark-9); border-bottom: var(--uf-input-accent-width) solid var(--uf-input-border-color); border-radius: var(--uf-input-border-radius); outline: none; box-sizing: border-box; transition: var(--uf-input-transition); cursor: pointer; } .umbraco-forms-form .date input[type="date"]:focus { border-color: var(--uf-input-focus-border-color); border-bottom: var(--uf-input-accent-width) solid var(--uf-input-focus-accent-color); } /* Date picker icon styling */ .umbraco-forms-form .date input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: var(--uf-date-icon-opacity); } .umbraco-forms-form .date input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: var(--uf-date-icon-hover-opacity); } /* =========================================== 4. CHECKBOX (single checkbox) =========================================== */ .umbraco-forms-field-wrapper { display: flex; flex-direction: column; } .umbraco-forms-form .checkbox, .umbraco-forms-form .umbraco-forms-field.checkbox { display: flex !important; flex-direction: row !important; align-items: center !important; gap: var(--uf-field-gap) !important; margin-bottom: 16px !important; } .umbraco-forms-form .checkbox input[type="checkbox"], .umbraco-forms-form input.checkboxfield { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; display: inline-flex !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; border: 2px solid var(--brand) !important; border-radius: 3px !important; background-color: var(--brand-white, #ffffff) !important; cursor: pointer !important; margin: 0 !important; position: relative !important; flex-shrink: 0 !important; opacity: 1 !important; visibility: visible !important; } .umbraco-forms-form .umbraco-forms-field.checkbox .umbraco-forms-field-wrapper { display: flex !important; flex-direction: row !important; align-items: center !important; gap: var(--uf-field-gap) !important; } .umbraco-forms-form .checkbox input[type="checkbox"], .umbraco-forms-form input.checkboxfield { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; display: block !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; border: 2px solid var(--brand) !important; border-radius: 3px !important; background-color: var(--brand-white, #ffffff) !important; cursor: pointer !important; margin: 0 !important; position: relative !important; flex-shrink: 0 !important; opacity: 1 !important; visibility: visible !important; } .umbraco-forms-form .checkbox input[type="checkbox"]:checked { background-color: var(--brand) !important; border-color: var(--brand) !important; } .umbraco-forms-form .checkbox input[type="checkbox"]:checked::after, .umbraco-forms-form .multiplechoice input[type="checkbox"]:checked::after, .umbraco-forms-form .checkboxlist input[type="checkbox"]:checked::after { content: "" !important; display: block !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 6px !important; height: 12px !important; border: solid #ffffff !important; border-width: 0 2px 2px 0 !important; transform: translate(-50%, -60%) rotate(45deg) !important; } .umbraco-forms-form .checkbox label { display: inline; font-size: var(--uf-checkbox-label-font-size); color: var(--uf-checkbox-label-color); line-height: var(--uf-checkbox-label-line-height); cursor: pointer; } /* =========================================== 5. FILE UPLOAD =========================================== */ .umbraco-forms-form .fileupload, .umbraco-forms-form .umbraco-forms-field.fileupload { margin-bottom: 16px; } .umbraco-forms-form .fileupload input[type="file"], .umbraco-forms-form input.fileuploadfield { max-width: 100% !important; width: 100% !important; padding: var(--uf-input-padding-y) var(--uf-input-padding-x); font-size: var(--uf-input-font-size); color: var(--uf-input-color); background-color: var(--uf-input-bg); border: var(--uf-input-border-width) solid var(--gray-dark-9); border-bottom: var(--uf-input-accent-width) solid var(--uf-input-border-color); border-radius: var(--uf-input-border-radius); outline: none; box-sizing: border-box; cursor: pointer; } .umbraco-forms-form .fileupload input[type="file"]::file-selector-button { padding: var(--uf-file-button-padding-y) var(--uf-file-button-padding-x); margin-right: 16px; background-color: var(--uf-file-button-bg); color: var(--uf-file-button-color); border: none; border-radius: var(--uf-file-button-border-radius); cursor: pointer; font-size: var(--uf-file-button-font-size); transition: background-color 0.2s ease; } .umbraco-forms-form .fileupload input[type="file"]::file-selector-button:hover { background-color: var(--uf-file-button-hover-bg); } /* =========================================== 6. PASSWORD =========================================== */ .umbraco-forms-form .password input[type="password"], .umbraco-forms-form input.passwordfield { max-width: 100% !important; width: 100% !important; padding: var(--uf-input-padding-y) var(--uf-input-padding-x); font-size: var(--uf-input-font-size); color: var(--uf-input-color); background-color: var(--uf-input-bg); border: var(--uf-input-border-width) solid var(--gray-dark-9); border-bottom: var(--uf-input-border-width) solid var(--uf-input-border-color); border-radius: var(--uf-input-border-radius); outline: none; box-sizing: border-box; transition: var(--uf-input-transition); } .umbraco-forms-form .password input[type="password"]:focus { border-color: var(--uf-input-focus-border-color); border-bottom: var(--uf-input-accent-width) solid var(--uf-input-focus-accent-color); background: var(--uf-input-bg) !important; } .umbraco-forms-form .password input::placeholder { color: var(--uf-placeholder-color); opacity: var(--uf-placeholder-opacity); } /* =========================================== 7. MULTIPLE CHOICE (multiple checkboxes) =========================================== */ .checkboxlist-vertical { display: flex; flex-direction: column; } .checkboxlist-horizontal { display: flex !important; flex-direction: row; justify-content: flex-start; gap: 30px; } .checkboxlist-vertical div { display: flex; gap: 10px; padding-bottom: 10px; } .checkboxlist-horizontal div { display: flex !important; gap: 10px; } .umbraco-forms-form .multiplechoice .umbraco-forms-label { display: block; font-size: var(--uf-input-font-size); color: var(--uf-input-color); margin-bottom: 12px; font-weight: var(--weight-semibold); } .umbraco-forms-form .multiplechoice label, .umbraco-forms-form .checkboxlist label { display: flex; align-items: center; gap: var(--uf-field-gap); font-size: var(--uf-checkbox-label-font-size); color: var(--uf-checkbox-label-color); cursor: pointer; } .umbraco-forms-form .multiplechoice input[type="checkbox"], .umbraco-forms-form .checkboxlist input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: var(--uf-checkbox-size) !important; height: var(--uf-checkbox-size) !important; min-width: var(--uf-checkbox-size) !important; border: var(--uf-checkbox-border-width) solid var(--uf-checkbox-border-color) !important; border-radius: var(--uf-checkbox-border-radius) !important; background-color: var(--uf-checkbox-bg) !important; cursor: pointer; margin: 0; position: relative; flex-shrink: 0; display: inline-flex !important; } .umbraco-forms-form .multiplechoice input[type="checkbox"]:checked, .umbraco-forms-form .checkboxlist input[type="checkbox"]:checked { background-color: var(--uf-checkbox-checked-bg) !important; border-color: var(--uf-checkbox-checked-border-color) !important; } .umbraco-forms-form .multiplechoice input[type="checkbox"]:checked::after, .umbraco-forms-form .checkboxlist input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 50%; top: 45%; width: 6px; height: 12px; border: solid var(--uf-checkbox-checkmark-color); border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); } /* =========================================== 8. DATA CONSENT (checkbox with consent text) =========================================== */ .umbraco-forms-form .dataconsent .umbraco-forms-field-wrapper { display: grid !important; grid-template-columns: 24px 1fr !important; grid-template-rows: auto auto !important; gap: 0 var(--uf-field-gap) !important; align-items: start !important; } .umbraco-forms-form .dataconsent, .umbraco-forms-form .umbraco-forms-field.dataconsent { display: flex; flex-direction: column; align-items: flex-start; gap: var(--uf-field-gap); margin: 1rem 0 !important; } .umbraco-forms-form .dataconsent input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: var(--uf-checkbox-size, 24px) !important; height: var(--uf-checkbox-size, 24px) !important; min-width: var(--uf-checkbox-size, 24px) !important; min-height: var(--uf-checkbox-size, 24px) !important; border: var(--uf-checkbox-border-width) solid var(--uf-checkbox-border-color); border-radius: var(--uf-checkbox-border-radius); background-color: var(--uf-checkbox-bg); cursor: pointer; grid-column: 1 !important; grid-row: 1 !important; margin-top: 3px; position: relative !important; flex-shrink: 0; } .umbraco-forms-form .dataconsent input[type="checkbox"]:checked { background-color: var(--uf-checkbox-checked-bg); border-color: var(--uf-checkbox-checked-border-color); } .umbraco-forms-form .dataconsent input[type="checkbox"]:checked::after { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 6px !important; height: 12px !important; border: solid var(--uf-checkbox-checkmark-color, #ffffff) !important; border-width: 0 2px 2px 0 !important; transform: translate(-50%, -60%) rotate(45deg) !important; } .umbraco-forms-form .dataconsent label { grid-column: 2 !important; grid-row: 1 !important; } .umbraco-forms-form .dataconsent label { display: inline; flex: 1; font-size: var(--uf-checkbox-label-font-size); font-weight: var(--uf-checkbox-label-font-family); color: var(--uf-checkbox-label-color); line-height: var(--uf-checkbox-label-line-height); cursor: pointer; } .umbraco-forms-form .dataconsent .umbraco-forms-label { display: inline; flex: 1; font-size: var(--uf-checkbox-label-font-size); font-weight: var(--weight-bolder) !important; color: var(--uf-checkbox-label-color); line-height: var(--uf-checkbox-label-line-height); cursor: pointer; } /* Data consent links */ .umbraco-forms-form .dataconsent a { color: var(--uf-consent-link-color); text-decoration: underline; } .umbraco-forms-form .dataconsent a:hover { color: var(--uf-consent-link-hover-color); } .umbraco-forms-form .dataconsent .field-validation-error { grid-column: 2 !important; grid-row: 2 !important; margin-top: 4px !important; padding-left: 0 !important; } /* =========================================== 9. DROPDOWN (select) =========================================== */ .umbraco-forms-form .dropdown, .umbraco-forms-form .umbraco-forms-field.dropdown, .umbraco-forms-form .umbraco-forms-field.dropdown .umbraco-forms-field-wrapper { width: 100%; } .umbraco-forms-form .dropdown { position: relative; } .umbraco-forms-form .dropdown select, .umbraco-forms-form .umbraco-forms-field.dropdown select, .umbraco-forms-form select.dropdownfield { display: block; max-width: 100%; width: 100%; min-height: 48px; padding: var(--uf-input-padding-y) var(--uf-select-padding-right) var(--uf-input-padding-y) var(--uf-input-padding-x); font-size: var(--uf-input-font-size); font-family: var(--uf-container-font-family); line-height: 1.5; color: var(--uf-input-color); background-color: var(--uf-input-bg); border: var(--uf-input-border-width) solid var(--gray-dark-9); border-bottom: var(--uf-input-border-width) solid var(--uf-input-border-color); border-radius: var(--uf-input-border-radius); outline: none; box-sizing: border-box; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDE0IDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC4yNDc1MjEgMC4zMjE3MjVDMC41OTcxNTEgLTAuMDg0MDk1OCAxLjE4NzYzIC0wLjEwOTQwMiAxLjU2NjQgMC4yNjUyMDFMNyA1LjYzOTA5TDEyLjQzMzYgMC4yNjUyMDFDMTIuODEyNCAtMC4xMDk0MDIgMTMuNDAyOCAtMC4wODQwOTU4IDEzLjc1MjUgMC4zMjE3MjVDMTQuMTAyMSAwLjcyNzU0NSAxNC4wNzg1IDEuMzYwMiAxMy42OTk3IDEuNzM0ODFMNy42MzMwNiA3LjczNDhDNy4yNzU1NCA4LjA4ODQgNi43MjQ0NiA4LjA4ODQgNi4zNjY5NCA3LjczNDhMMC4zMDAyNzYgMS43MzQ4MUMtMC4wNzg0ODk0IDEuMzYwMiAtMC4xMDIxMDkgMC43Mjc1NDUgMC4yNDc1MjEgMC4zMjE3MjVaIiBmaWxsPSIjNDE0MTQxIi8+Cjwvc3ZnPgo="); background-repeat: no-repeat; background-position: right 16px center; background-size: var(--uf-select-arrow-size); transition: var(--uf-input-transition); } .umbraco-forms-form .dropdown select:focus { border-color: var(--uf-input-focus-border-color); border-bottom: var(--uf-input-accent-width) solid var(--uf-input-focus-accent-color); } /* Dropdown option styling */ .umbraco-forms-form .dropdown select option { padding: 10px; color: var(--uf-input-color); background-color: var(--brand-white); } .umbraco-forms-form .uf-custom-select { position: relative; width: 100%; } .umbraco-forms-form .uf-custom-select-host { position: relative; width: 100%; } .umbraco-forms-form .uf-custom-select__native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none; } .umbraco-forms-form .uf-custom-select__trigger { width: 100%; min-height: 48px; padding: var(--uf-input-padding-y) var(--uf-select-padding-right) var(--uf-input-padding-y) var(--uf-input-padding-x); font-size: var(--uf-input-font-size); font-family: var(--uf-container-font-family); line-height: 1.5; text-align: left; color: var(--uf-input-color); background-color: #f1f1f1; border: var(--uf-input-border-width) solid var(--gray-dark-9); border-bottom: var(--uf-input-border-width) solid var(--uf-input-border-color); border-radius: var(--uf-input-border-radius); cursor: pointer; position: relative; } .umbraco-forms-form .uf-custom-select__trigger::after { content: ""; position: absolute; top: 50%; right: 16px; width: 12px; height: 12px; transform: translateY(-50%); background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDE0IDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC4yNDc1MjEgMC4zMjE3MjVDMC41OTcxNTEgLTAuMDg0MDk1OCAxLjE4NzYzIC0wLjEwOTQwMiAxLjU2NjQgMC4yNjUyMDFMNyA1LjYzOTA5TDEyLjQzMzYgMC4yNjUyMDFDMTIuODEyNCAtMC4xMDk0MDIgMTMuNDAyOCAtMC4wODQwOTU4IDEzLjc1MjUgMC4zMjE3MjVDMTQuMTAyMSAwLjcyNzU0NSAxNC4wNzg1IDEuMzYwMiAxMy42OTk3IDEuNzM0ODFMNy42MzMwNiA3LjczNDhDNy4yNzU1NCA4LjA4ODQgNi43MjQ0NiA4LjA4ODQgNi4zNjY5NCA3LjczNDhMMC4zMDAyNzYgMS43MzQ4MUMtMC4wNzg0ODk0IDEuMzYwMiAtMC4xMDIxMDkgMC43Mjc1NDUgMC4yNDc1MjEgMC4zMjE3MjVaIiBmaWxsPSIjNDE0MTQxIi8+Cjwvc3ZnPgo="); background-repeat: no-repeat; background-position: center; background-size: 12px; } .umbraco-forms-form .uf-custom-select.is-open .uf-custom-select__trigger { border-bottom-color: var(--uf-input-focus-accent-color); } .umbraco-forms-form .uf-custom-select__menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; max-height: 240px; overflow-y: auto; background: #f1f1f1; border: 1px solid var(--gray-dark-7); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); } .umbraco-forms-form .uf-custom-select__list { list-style: none; margin: 0; padding: 0; } .umbraco-forms-form .uf-custom-select__item { margin: 0; } .umbraco-forms-form .uf-custom-select__group-label { padding: 10px 12px 6px; font-size: var(--text-xs); font-family: var(--uf-container-font-family); color: var(--gray-dark-3); background: #f1f1f1; } .umbraco-forms-form .uf-custom-select__option { width: 100%; padding: 0 12px; text-align: left; font-size: var(--uf-input-font-size); font-family: var(--uf-container-font-family); color: var(--uf-input-color); background: #f1f1f1; border: 0; cursor: pointer; } .umbraco-forms-form .uf-custom-select__option:hover, .umbraco-forms-form .uf-custom-select__option.is-selected { color: var(--brand-white); background: #7c7c7c; } /* =========================================== 10. SINGLE CHOICE (radio buttons) =========================================== */ .umbraco-forms-form .singlechoice, .umbraco-forms-form .radiobuttonlist, .umbraco-forms-form .umbraco-forms-field.singlechoice { margin-bottom: 16px; } .radiobuttonlist-vertical { display: flex !important; flex-direction: column; } .radiobuttonlist-vertical div { display: flex; gap: 10px; padding-bottom: 10px; } .radiobuttonlist-horizontal { display: flex !important; flex-direction: row; justify-content: flex-start; gap: 30px; } .radiobuttonlist-horizontal div { display: flex !important; gap: 10px; padding-bottom: 10px; } .umbraco-forms-form .singlechoice .umbraco-forms-label { display: block; font-size: var(--uf-input-font-size); color: var(--uf-input-color); margin-bottom: 12px; font-weight: var(--weight-semibold); } .umbraco-forms-form .singlechoice .umbraco-forms-field-wrapper { display: flex; flex-direction: column; gap: 10px; } .umbraco-forms-form .singlechoice label, .umbraco-forms-form .radiobuttonlist label { display: flex; align-items: center; gap: var(--uf-field-gap); font-size: var(--uf-checkbox-label-font-size); color: var(--uf-checkbox-label-color); cursor: pointer; } .umbraco-forms-form .singlechoice input[type="radio"], .umbraco-forms-form .radiobuttonlist input[type="radio"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: var(--uf-checkbox-size); height: var(--uf-checkbox-size); min-width: var(--uf-checkbox-size); border: var(--uf-checkbox-border-width) solid var(--uf-checkbox-border-color) !important; border-radius: var(--uf-radio-border-radius); background-color: var(--uf-checkbox-bg) !important; cursor: pointer; margin: 0; position: relative; flex-shrink: 0; } .umbraco-forms-form .singlechoice input[type="radio"]:checked, .umbraco-forms-form .radiobuttonlist input[type="radio"]:checked { border-color: var(--uf-checkbox-border-color); } .umbraco-forms-form .singlechoice input[type="radio"]:checked::after, .umbraco-forms-form .radiobuttonlist input[type="radio"]:checked::after { content: "" !important; display: block !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 6px !important; height: 12px !important; border: solid #ffffff !important; border-width: 0 2px 2px 0 !important; transform: translate(-50%, -60%) rotate(45deg) !important; } /* =========================================== 11. TITLE AND DESCRIPTION =========================================== */ .umbraco-forms-form .titleanddescription, .umbraco-forms-form .umbraco-forms-field.titleanddescription, .umbraco-forms-form .umbraco-forms-caption { margin-bottom: var(--uf-mandatory-margin-bottom); } .umbraco-forms-form .titleanddescription h2, .umbraco-forms-form .titleanddescription .umbraco-forms-title { font-size: var(--uf-title-font-size); font-weight: var(--uf-title-font-weight); color: var(--uf-title-color); margin: 0 0 var(--uf-title-margin-bottom) 0; text-align: var(--uf-title-text-align); } .umbraco-forms-form .titleanddescription p, .umbraco-forms-form .titleanddescription .umbraco-forms-description, .umbraco-forms-form .umbraco-forms-caption { font-size: var(--uf-description-font-size); color: var(--uf-description-color); line-height: var(--uf-description-line-height); margin: 0; } /* Mandatory note styling */ .umbraco-forms-form .mandatory-note, .umbraco-forms-form .umbraco-forms-caption { font-size: var(--uf-mandatory-font-size); color: var(--uf-mandatory-color); margin-bottom: var(--uf-mandatory-margin-bottom); } /* =========================================== 12. RICH TEXT =========================================== */ /* .umbraco-forms-form .richtext, .umbraco-forms-form .umbraco-forms-field.richtext { margin-bottom: 20px; } */ /* .umbraco-forms-form .richtext .umbraco-forms-field-wrapper { font-size: var(--uf-richtext-font-size); color: var(--uf-richtext-color); line-height: var(--uf-richtext-line-height); } */ /* .umbraco-forms-form .richtext p { margin: 0 0 12px 0; } */ .umbraco-forms-form .richtext a { color: var(--uf-richtext-link-color); text-decoration: underline; } .umbraco-forms-form .richtext a:hover { color: var(--uf-richtext-link-hover-color); } .umbraco-forms-form .richtext ul, .umbraco-forms-form .richtext ol { margin: 0 0 12px 0; padding-left: 20px; } .umbraco-forms-form .richtext li { margin-bottom: 6px; } /* =========================================== 13. HIDDEN =========================================== */ .umbraco-forms-form .hidden, .umbraco-forms-form .umbraco-forms-field.hidden, .umbraco-forms-form input[type="hidden"] { display: none !important; visibility: hidden; height: 0; margin: 0; padding: 0; border: none; } /* =========================================== 14. RANGE SELECTOR (slider) =========================================== */ .umbraco-forms-form .rangeselector { margin-bottom: var(--uf-field-margin-bottom); } .umbraco-forms-form .rangeselector label.umbraco-forms-label { display: none !important; } .range-selector { width: 100%; display: flex; flex-direction: column; gap: 12px; } /* Track wrapper */ .range-selector-track { position: relative; width: 100%; padding-top: 40px; } /* The slider input */ .range-selector-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 4px; background: linear-gradient( to right, var(--brand) 0%, var(--brand) var(--range-fill, 50%), var(--gray-dark-9) var(--range-fill, 50%), var(--gray-dark-9) 100% ); border-radius: 2px; outline: none; cursor: pointer; border: none; padding: 0; margin: 0; display: block; } /* Thumb - Chrome/Safari */ .range-selector-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background-color: var(--brand); border: 3px solid var(--brand-white); box-shadow: 0 0 0 2px var(--brand); cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease; } .range-selector-input::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent); } /* Thumb - Firefox */ .range-selector-input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background-color: var(--brand); border: 3px solid var(--brand-white); box-shadow: 0 0 0 2px var(--brand); cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease; } .range-selector-input::-moz-range-thumb:hover { transform: scale(1.15); } /* Track - Firefox */ .range-selector-input::-moz-range-track { height: 4px; border-radius: 2px; background-color: var(--gray-dark-9); } .range-selector-input::-moz-range-progress { height: 4px; border-radius: 2px; background-color: var(--brand); } /* Focus state */ .range-selector-input:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent); } /* Labels row: min | current value | max */ .range-selector-labels { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); color: var(--gray-dark-1); font-family: var(--font-family-1); } .range-selector-min, .range-selector-max { font-size: var(--uf-input-font-size); color: var(--uf-input-color); font-weight: var(--uf-input-font-weight); min-width: 40px; } .range-selector-max { text-align: right; } /* Track wrapper needs relative positioning for the badge */ .range-selector-track { position: relative; width: 100%; padding-top: 40px; } /* Current value badge — absolutely positioned above thumb */ .range-selector-current-value { position: absolute; top: 0; transform: translateX(-50%); font-size: var(--uf-input-font-size); font-weight: var(--weight-semibold); color: var(--brand-white); background-color: var(--brand); padding: 4px 14px; border-radius: 50px; min-width: 60px; text-align: center; transition: left 0.1s ease; white-space: nowrap; pointer-events: none; } /* Small triangle pointer under the badge */ .range-selector-current-value::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); border-width: 6px 5px 0 5px; border-style: solid; border-color: var(--brand) transparent transparent transparent; } /* Validation error state */ .range-selector-input.input-validation-error { background: linear-gradient( to right, var(--uf-error-border-color) 0%, var(--uf-error-border-color) var(--range-fill, 50%), var(--gray-dark-9) var(--range-fill, 50%), var(--gray-dark-9) 100% ); } .range-selector-input.input-validation-error::-webkit-slider-thumb { background-color: var(--uf-error-border-color); box-shadow: 0 0 0 2px var(--uf-error-border-color); } /* Range selector placeholder/hint text */ .range-selector-placeholder { font-size: var(--uf-input-font-size); color: var(--uf-input-color); font-weight: var(--uf-input-font-weight); margin: 0 0 30px 0; } /* =========================================== DUAL RANGE SELECTOR =========================================== */ /* Input boxes row */ .range-selector-inputs { display: flex; gap: 16px; margin-bottom: 24px; } .range-selector-input-box { flex: 1; } .range-selector-text-input { width: 100%; padding: var(--uf-input-padding-y) var(--uf-input-padding-x); font-size: var(--uf-input-font-size); font-weight: var(--uf-input-font-weight); color: var(--uf-input-color); background-color: var(--uf-input-bg); border: none; border-bottom: 1px solid var(--uf-input-border-color); outline: none; box-sizing: border-box; cursor: default; text-align: left; } /* Track */ .range-selector-track { position: relative; width: 100%; height: 4px; background-color: var(--gray-dark-9, #e0e0e0); border-radius: 2px; margin: 16px 0; padding-top: 0; } /* Filled area between thumbs */ .range-selector-fill { position: absolute; height: 100%; background-color: var(--brand); border-radius: 2px; top: 0; left: 0; width: 100%; pointer-events: none; } /* Both thumbs stacked on the same track */ .range-selector-thumb { -webkit-appearance: none; appearance: none; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: 4px; background: transparent; pointer-events: none; outline: none; border: none; margin: 0; padding: 0; } .range-selector-thumb::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background-color: var(--brand, #00233a); border: 3px solid var(--brand-white, #ffffff); box-shadow: 0 0 0 2px var(--brand, #00233a); cursor: pointer; pointer-events: all; transition: transform 0.2s ease; } .range-selector-thumb::-webkit-slider-thumb:hover { transform: scale(1.15); } .range-selector-thumb::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background-color: var(--brand, #00233a); border: 3px solid var(--brand-white, #ffffff); box-shadow: 0 0 0 2px var(--brand, #00233a); cursor: pointer; pointer-events: all; } /* =========================================== 15. SINGLE CHOICE =========================================== */ .umbraco-forms-form .singlechoice input[type="radio"], .umbraco-forms-form .radiobuttonlist input[type="radio"] { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; border: 2px solid var(--brand) !important; border-radius: 3px !important; /* ✅ square corners like a checkbox */ background-color: var(--brand-white, #ffffff) !important; cursor: pointer !important; margin: 0 !important; position: relative !important; flex-shrink: 0 !important; } /* ✅ Checked state — filled background like a checkbox */ .umbraco-forms-form .singlechoice input[type="radio"]:checked, .umbraco-forms-form .radiobuttonlist input[type="radio"]:checked { background-color: var(--brand) !important; border-color: var(--brand) !important; } /* ✅ Checkmark instead of dot */ .umbraco-forms-form .singlechoice input[type="radio"]:checked::after, .umbraco-forms-form .radiobuttonlist input[type="radio"]:checked::after { content: "" !important; display: block !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 6px !important; height: 12px !important; border: solid #ffffff !important; border-width: 0 2px 2px 0 !important; transform: translate(-50%, -60%) rotate(45deg) !important; } /* =========================================== RESPONSIVE - MOBILE (576px) — Range =========================================== */ @media (max-width: 576px) { .range-selector-current-value { font-size: var(--text-sm); padding: 4px 10px; min-width: 48px; } } /* =========================================== SUBMIT BUTTON =========================================== */ .umbraco-forms-form .umbraco-forms-navigation { margin-top: 24px; text-align: center; } .umbraco-forms-form input[type="submit"], .umbraco-forms-form button[type="submit"], .umbraco-forms-form .btn { display: inline-block; min-width: var(--uf-button-min-width); height: var(--uf-button-height) !important; padding: var(--uf-button-padding-y) var(--uf-button-padding-x); font-size: var(--uf-button-font-size); font-weight: var(--uf-button-font-weight); color: var(--uf-button-color); background-color: var(--uf-button-bg); border: none; border-radius: var(--uf-button-border-radius); cursor: pointer; transition: var(--uf-button-transition); } .umbraco-forms-form input[type="submit"]:hover, .umbraco-forms-form button[type="submit"]:hover, .umbraco-forms-form .btn:hover { background-color: #888888; } /* Button disabled state - when required fields are not filled */ .umbraco-forms-form input[type="submit"]:disabled, .umbraco-forms-form button[type="submit"]:disabled, .umbraco-forms-form .btn:disabled, .umbraco-forms-form input[type="submit"].btn-disabled, .umbraco-forms-form button[type="submit"].btn-disabled, .umbraco-forms-form .btn.btn-disabled { opacity: 0.5; cursor: not-allowed; color: var(--uf-button-color) !important; background-color: #00000066; } .umbraco-forms-navigation .col-md-12 { color: var(--uf-button-color) !important; font-size: var(--uf-button-font-size); } /* Button enabled state - when all required fields are filled */ .umbraco-forms-form input[type="submit"]:not(:disabled), .umbraco-forms-form button[type="submit"]:not(:disabled), .umbraco-forms-form .btn:not(:disabled):not(.btn-disabled) { opacity: 1; } /* =========================================== VALIDATION / ERROR STATES =========================================== */ .umbraco-forms-form .field-validation-error { color: var(--uf-error-color); font-size: var(--uf-error-font-size); margin-top: 4px; display: block; } .umbraco-forms-form input.input-validation-error, .umbraco-forms-form select.input-validation-error, .umbraco-forms-form textarea.input-validation-error { border-color: var(--uf-error-border-color); border-left-color: var(--uf-error-border-color); } .umbraco-forms-form .validation-summary-errors { background-color: var(--uf-error-bg); border: 1px solid var(--uf-error-border-color); border-left: 3px solid var(--uf-error-border-color); padding: 12px 16px; margin-bottom: 20px; color: var(--uf-error-color); font-size: var(--uf-checkbox-label-font-size); } .umbraco-forms-form .validation-summary-errors ul { margin: 0; padding-left: 20px; } /* =========================================== RECAPTCHA =========================================== */ .umbraco-forms-form .g-recaptcha, .umbraco-forms-form .umbraco-forms-field.recaptcha { margin-top: var(--uf-recaptcha-margin-top); display: flex; justify-content: var(--uf-recaptcha-justify); } /* =========================================== RESPONSIVE - SMALL LAPTOP (1024px) =========================================== */ @media (max-width: 1024px) { .rich-text-container p { padding: 0 5rem; margin-bottom: 0; } } /* =========================================== RESPONSIVE - TABLET (768px) =========================================== */ @media (max-width: 768px) { /* Fix radio button becoming oblong */ .umbraco-forms-form .singlechoice input[type="radio"], .umbraco-forms-form .radiobuttonlist input[type="radio"] { width: var(--uf-checkbox-size) !important; height: var(--uf-checkbox-size) !important; min-width: var(--uf-checkbox-size) !important; min-height: var(--uf-checkbox-size) !important; aspect-ratio: 1 / 1; flex-shrink: 0; } .form-type-container { font-size: 2rem; padding: 2rem 0; } .rich-text-container p { margin: 0 auto; } } /* =========================================== RESPONSIVE - LAPTOP (1024px) =========================================== */ @media (max-width: 1024px) { .rich-text-container p { padding: 0; margin: 0; } } /* =========================================== RESPONSIVE - TABLET (768px) =========================================== */ @media (max-width: 768px) { /* .rich-text-container p { padding: 1rem 24px; } */ } /* =========================================== RESPONSIVE - MOBILE (576px) =========================================== */ @media (max-width: 576px) { .umbraco-forms-form { padding: 0 1rem 2rem 1rem !important; } .umbraco-forms-form input.text, .umbraco-forms-form input.title, .umbraco-forms-form select, .umbraco-forms-form textarea { margin: 0 !important; } /* Ensure checkbox/radio stay circular on mobile */ .umbraco-forms-form .singlechoice input[type="radio"], .umbraco-forms-form .radiobuttonlist input[type="radio"], .umbraco-forms-form .multiplechoice input[type="checkbox"], .umbraco-forms-form .checkboxlist input[type="checkbox"], .umbraco-forms-form .checkbox input[type="checkbox"], .umbraco-forms-form .dataconsent input[type="checkbox"] { width: var(--uf-checkbox-size) !important; height: var(--uf-checkbox-size) !important; min-width: var(--uf-checkbox-size) !important; min-height: var(--uf-checkbox-size) !important; flex-shrink: 0; } .rich-text-container p { width: 100%; padding: 2rem 1rem; margin: 0 auto; font-size: 14px; } .umbraco-forms-form .umbraco-forms-navigation { display: flex; justify-content: center; } } /* --- Inlined from: ./[blocklist]_components/componentPage.css --- */ /* General styles */ .sectionName { text-align: center; font-family: var(--font-family-1); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-normal); line-height: normal; letter-spacing: 0.2rem; /*text-transform: uppercase;*/ color: var(--gray-dark-10); } .encabezadoDelModulo { margin: 0; margin-top: 1.25rem; margin-bottom: 1.25rem; font-family: var(--font-family-1); font-size: var(--text-4xl); font-style: normal; font-weight: var(--weight-bolder); line-height: 30px; /*text-transform: uppercase;*/ color: var(--gray-dark-10); } @media (max-width: 576px) { .encabezadoDelModulo { /* font-size: var(--text-base); */ font-size: 1.375rem; } } .text-description { margin: 0; margin-bottom: 2rem; font-family: var(--font-family-1); font-size: var(--text-base); font-weight: var(--weight-normal); margin-top: 1.5rem; color: var(--gray-dark-2); letter-spacing: 0.72px; } @media (max-width: 576px) { .text-description { /* font-size: var(--text-sm); */ font-size: var(--text-base); } } /* Base element: Hero banner */ .hero-banner__dynamic-view { position: relative; } .hero-banner__dynamic-view__banner-content { position: absolute; top: 0; width: 66%; height: 100%; display: flex; flex-direction: column; justify-content: center; color: #fff; background-image: linear-gradient( 90deg, rgba(0, 0, 0, 0.8) 20%, rgba(255, 255, 255, 0) 57% ); padding: 0 5rem; } .hero-banner__dynamic-view__banner-content > h1 { font-family: var(--font-family-1); font-size: var(--text-6xl); font-weight: var(--weight-bolder); text-transform: uppercase; } .hero-banner__dynamic-view__banner-content > p { font-family: var(--font-family-1); font-size: var(--text-base); font-weight: var(--weight-normal); letter-spacing: 0.4px; } .hero-banner__dynamic-view > picture > img { width: 100%; } @media (max-width: 1024px) { .hero-banner__dynamic-view__banner-content { padding: var(--p-4) 6.5rem 0 3.5rem; } } @media (max-width: 790px) { .hero-banner__dynamic-view__banner-content { padding: var(--p-4) 1.5rem 0 2rem; } } @media (max-width: 592px) { .hero-banner__dynamic-view__banner-content { background-image: linear-gradient(360deg, #000 43%, rgba(0, 0, 0, 0) 63%); width: 100%; height: 100%; padding: 7rem var(--p-4) 1.5rem 1.5rem; margin-top: 12%; } .hero-banner__dynamic-view { height: 20rem; } .hero-banner__dynamic-view > picture > img { object-fit: cover; aspect-ratio: 8/4; } } @media (max-width: 360px) { .hero-banner__dynamic-view { height: 15rem; } } @media (max-width: 460px) { .hero-banner__dynamic-view > picture > img { object-fit: cover; aspect-ratio: 6/3; } .hero-banner__dynamic-view__banner-content { background-image: linear-gradient( 360deg, #000 27.62% 50%, rgba(0, 0, 0, 0) 67% ); height: 90%; padding: 4rem var(--p-4) 1.5rem 1.5rem; } } /* Comentarios */ textarea#Comentarios { padding: var(--p-4); border-radius: 0; border: none; background-color: var(--gray-light-4); font-family: var(--font-family-1); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-normal); line-height: 22px; border-bottom: 2px solid #000; } /* Component 1: Parrafo General */ .general-paragraph { padding: var(--p-4) 10rem 0 10rem; font-family: var(--font-family-1); font-size: var(--text-base); font-weight: var(--weight-normal); color: var(--gray-dark-1); } .general-paragraph h1, .general-paragraph h2, .general-paragraph h4, .general-paragraph strong { color: var(--gray-dark-10) !important; } .link-flota { color: var(--brand) !important; } .link-flota:hover { color: var(--brand-dark) !important; } @media (max-width: 1024px) { .general-paragraph { padding: var(--p-4) 6.5rem 0 6.5rem; } } @media (max-width: 768px) { .general-paragraph { padding: var(--p-4) 3.5rem 0 3.5rem; } } @media (max-width: 470px) { .general-paragraph { padding: var(--p-4) 2rem 0 2rem; } } /* Component 2: Rotulo con CTA */ .rotulo-cta__secundario { background-color: var(--gray-light-4); padding: 1.5rem 0; } .rotulo-cta h4 { text-align: center; font-family: var(--font-family-1); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-normal); line-height: normal; letter-spacing: 0.25rem; text-transform: uppercase; color: var(--gray-dark-10); } .rotulo-cta h3 { margin: 0; margin-top: 1.25rem; font-family: var(--font-family-1); font-size: var(--text-4xl); font-style: normal; font-weight: var(--weight-bolder); line-height: normal; text-transform: uppercase; } .rotulo-cta p { font-family: var(--font-family-1); font-size: var(--text-base); font-weight: var(--weight-normal); margin-top: 2rem; color: var(--gray-dark-2); letter-spacing: 0.72px; line-height: 26px; padding: 0rem 11rem 0rem 11rem; } .rotulo-cta__button-cta { margin: 2rem 0; display: block; text-decoration: none; padding: 0.75rem 2rem; transition: all 200ms; background-color: var(--brand); color: #fff; font-family: var(--font-family-1); font-size: var(--text-base); font-weight: var(--weight-bold); /* text-transform: uppercase; */ } .rotulo-cta__button-cta:hover { color: var(--gray-light-1); background-color: var(--brand-dark); border: none; } .rotulo-cta__button-cta:active { color: var(--gray-light-1); background-color: var(--brand-dark); border: none; } .rotulo-cta__button-viewMore { margin: 2rem 0; display: flex; align-items: center; gap: 1rem; text-decoration: none; padding: 0.75rem 2rem; transition: all 200ms; background-color: transparent; color: var(--gray-dark-10); font-family: var(--font-family-1); font-size: var(--text-base); font-weight: var(--weight-bolder); border: #565656 2px solid; /* text-transform: uppercase; */ } .rotulo-cta__button-viewMore:hover { color: var(--gray-light-1); background-color: var(--brand-dark); border: none; } .rotulo-cta__button-viewMore:hover svg path { fill: var(--gray-light-1); background-color: var(--brand-dark); border: none; } .rotulo-cta__button-viewMore:active { color: var(--gray-light-1); background-color: var(--brand-dark); border: none; } .rotulo-cta__button-viewMore:active svg path { fill: var(--gray-light-1); background-color: var(--brand-dark); border: none; } @media (max-width: 768px) { .rotulo-cta { padding: var(--p-4) 1.5rem; } .rotulo-cta p { padding: 0rem var(--p-4) var(--p-4) var(--p-4); } } /* Component 4: accordion */ .accordion-area { background-color: var(--gray-light-2); padding-bottom: 3rem; margin-bottom: 4.25rem; } .accordion-area > h3 { padding-top: 2.5rem; margin-bottom: 2rem; font-family: var(--font-family-1); font-size: var(--text-4xl); font-style: normal; font-weight: var(--weight-bolder); line-height: 42px; text-transform: uppercase; color: var(--gray-dark-1); } .acordion { padding: 0 10rem; } @media (max-width: 1400px) { .acordion { padding: 0 7rem; } } @media (max-width: 1024px) { .acordion { padding: 0 6.5rem; } } @media (max-width: 768px) { .acordion { padding: 0 3.5rem; } } @media (max-width: 470px) { .acordion { padding: 0 2rem; } } .acordion__title { display: flex; justify-content: space-between; width: 100%; background-color: var(--gray-light-1); border: none; padding: 0.625rem 1.5rem; border-bottom: 1px solid var(--gray-dark-7); border-top: 1px solid var(--gray-dark-7); /* height: 3.8rem; */ align-items: center; text-align: left; } .acordion__title > h4 { margin: 0; color: var(--gray-dark-10); font-family: var(--font-family-1); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-bolder); line-height: normal; letter-spacing: 0.4px; } .acordion__title > svg { transform: rotate(0deg); transition: all 400ms; min-width: 3rem; } .acordion__content { background-color: var(--brand-white); padding: 0 1.5rem; max-height: 0; overflow: hidden; transition: all 200ms linear; } .acordion__title-is-active > h4 { /* color: var(--brand-secundary); font-family: var(--font-family-1); border-bottom: var(--brand-secundary); */ } .acordion__title-is-active { border-bottom: 1px solid var(--gray-dark-3); } .acordion__title-is-active > svg { transform: rotate(180deg); transition: all 400ms; color: var(--gray-dark-3); } /* .acordion__title-is-active > svg > path{ fill:var(--gray-dark-3); } */ .acordion__content-is-active { padding: 1.5rem; max-height: 5000px; overflow: auto; overflow-y: hidden; transition: all 400ms; font-family: var(--font-family-1); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-normal); line-height: 26px; } /* Component 5: service cards */ .service-card__wrapper { margin: 4.5rem 1.25rem; background-color: #f1f1f1; } .service-card__wrapper:hover { box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15); } .service-card__wrapper > img { width: 100%; height: 200px; object-fit: cover; } .service-card__text_content { height: 15.25rem; padding: 2rem 1.5rem; color: #6c6c6c; } .service-card__text_content > h4 { font-family: var(--font-family-1); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-bolder); line-height: normal; letter-spacing: 0.4px; color: var(--gray-dark-10); } .service-card__text_content > p { margin-top: var(--text-xl); font-family: var(--font-family-1); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-normal); line-height: 26px; color: var(--gray-dark-10); letter-spacing: 0.72px; } .service-card__links > a { font-family: var(--font-family-1); font-size: var(--text-base); color: var(--gray-dark-10); font-weight: var(--weight-bold); line-height: 20px; text-decoration-line: underline; letter-spacing: 0.56px; } .first-element-url > a { color: var(--gray-dark-4); } .second-element-url { margin-top: 1.5rem; } @media (max-width: 1366px) { .service-card__text_content { height: 16.25rem; } } @media (max-width: 768px) { .service-card__wrapper { margin: 1.5rem 0; } .service-card__wrapper > img { height: 300px; } } @media (max-width: 470px) { .service-card__wrapper > img { height: 250px; } } /* Component 6: Slider */ .sliderAsComponent { width: 100%; /*margin-top: 1rem;*/ } /* .swiper-slide{ width: 90%; scroll-snap-align: center end !important; } .swiper-slide-active, .swiper-slide-prev, .swiper-slide-custom-prev, .swiper-slide-next{ transform: translateX(195px) !important; } */ .swiper-slide__content_wrapper { position: relative; display: flex; } .slide-component_text-wrapper { padding: 3rem; background: var(--gray-dark-9); display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; top: 0; left: 87px; z-index: 1; width: 36%; height: 550px; } .Security-Swiper .swiper-slide__content_link > a { color: var(--gray-light-1); font-family: var(--font-family-1); font-size: 16px; font-style: normal; font-weight: var(--weight-normal); line-height: 22px; /* 137.5% */ /* text-transform: uppercase; */ text-decoration: none; cursor: pointer; } .swiper-slide__content_link { max-width: 25.313rem; max-height: 3.75rem; background: var(--brand); justify-content: center; padding: 12px; text-align: center; } .Security-Swiper .swiper-slide__content_link:hover { background: var(--brand-dark); } .arrow-swiper-rows { position: relative; display: flex; gap: 10px; top: 5%; } .slide-component_text-wrapper > h3 { margin: 0; font-family: var(--font-family-1); font-size: var(--text-4xl); font-style: normal; font-weight: var(--weight-bolder); line-height: 42px; text-transform: uppercase; padding: 0 0 3rem; text-align: center; } .slide-component_text-wrapper > p { font-family: var(--font-family-1); font-size: var(--text-base); font-weight: var(--weight-normal); letter-spacing: 0.72px; color: var(--gray-dark-1); text-align: justify; } .slide-component-section { text-align: center; font-family: var(--font-family-1); font-size: var(--text-base); font-weight: var(--weight-normal); font-style: normal; line-height: normal; letter-spacing: 0.2rem; /*text-transform: uppercase;*/ color: var(--gray-dark-10); } .slide-component_image { height: 100%; display: flex; } .slide-component_image > img { aspect-ratio: 1.99; object-fit: cover; position: absolute; width: 100%; } .swiper-button-prev, .swiper-button-next { color: var(--brand); transform: scale(0.5); position: inherit; } .swiper-pagination { visibility: hidden; } @media (max-width: 768px) { .slide-component_image { flex-direction: column-reverse; display: flex; } .slide-component_image > img { position: inherit; } .arrow-swiper-rows { display: none; } .swiper-pagination { position: relative; visibility: visible; } .swiper-pagination-bullet { background-color: white; border: 1px solid var(--gray-dark); } .swiper-pagination-bullet-active { background-color: var(--brand); border: 1px solid var(--brand); width: 10px; height: 10px; } .slide-component_text-wrapper { padding: 2rem var(--p-2); left: 0%; width: 100%; align-items: center; } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { top: 15rem; justify-content: center; align-items: center; } } /* Component 7: Image/Video centered */ .multimedia-content { margin-top: 1.5rem; display: flex; justify-content: center; align-items: center; text-align: center; /*background: linear-gradient(to bottom, var(--gray-dark-9), rgba(255, 255, 255, 0) 95.71%);*/ background: var(--gray-dark-9); } .multimedia-content__wrapper { padding: 0 10rem 2rem; } @media (max-width: 992px) { .multimedia-content__wrapper { padding: 0 var(--p-4) 2rem; } } .text-description { /* padding: 0rem 3.5rem 0rem; */ padding: 0rem var(--p-4) 0rem; } .multimedia-content__video > img, .multimedia-content__video > video > source, .multimedia-content__video > iframe { width: 950px; height: 480px; object-fit: cover; } @media (max-width: 1366px) { .multimedia-content__video > img, .multimedia-content__video > video > source, .multimedia-content__video > iframe { width: 854px; height: 440px; } } @media (max-width: 992px) { .multimedia-content__video > img, .multimedia-content__video > video > source, .multimedia-content__video > iframe { width: 85%; height: 440px; } .multimedia-content { display: flow-root; } } @media (max-width: 769px) { .multimedia-content__video > img, .multimedia-content__video > video > source, .multimedia-content__video > iframe { width: 100%; height: 402px; } } @media (max-width: 576px) { .multimedia-content__video > img, .multimedia-content__video > video > source, .multimedia-content__video > iframe { width: 85%; height: 300px; } } @media (max-width: 380px) { .multimedia-content__video > img, .multimedia-content__video > video > source, .multimedia-content__video > iframe { height: 200px; } } @media (max-width: 360px) { .multimedia-content__video > img, .multimedia-content__video > video > source, .multimedia-content__video > iframe { width: 320px; height: 205px; } } @media (max-width: 320px) { .multimedia-content__video > img, .multimedia-content__video > video > source, .multimedia-content__video > iframe { width: 85%; height: 205px; } } /* Component 8: blog content */ .ListNews { padding: 0 1.5rem; } .blog_post-wrapper > img { width: 100%; max-height: 327px; object-fit: contain; background-color: var(--gray-dark-9); } .blog_post-wrapper_body { text-align: left; padding: var(--p-4) 1.5rem; height: 250px; } .blog_post-wrapper_body > h4 { font-family: var(--font-family-1); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-bolder); line-height: normal; color: var(--gray-dark-10); } .blog_post-wrapper_body > p { margin-top: var(--text-xl); font-family: var(--font-family-1); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-normal); line-height: 26px; letter-spacing: 0.72px; } @media (max-width: 280px) { .blog_post-wrapper_body { height: 350px; } } .blog_post-wrapper { box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15); } .blog_post-wrapper_body > p { margin-top: 1.5rem; height: 72px; } @media (max-width: 328px) { .blog_post-wrapper_body > p { height: 95px; } } @media (max-width: 280px) { .blog_post-wrapper_body > p { height: 150px; } } .blog_post-wrapper_body > a, .blog_post-wrapper_body > a:hover, .blog_post-wrapper_body > a:focus, .blog_post-wrapper_body > a:visited, .blog_post-wrapper_body > a:focus-within, .blog_post-wrapper_body > a:active { color: var(--gray-dark-10); text-decoration: none; font-family: var(--font-family-1); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-bold); line-height: 22px; text-decoration-line: underline; } .arrow-container { margin: 2.5rem 0; display: flex; justify-content: center; align-items: center; flex-direction: column; } .swiperBlog-button-next { transform: rotate(180deg); } /* Component 9: dynamic form */ .form-input_wrapper { flex: 0 0 auto; width: 100%; margin: var(--p-4) 0; } .form-input_wrapper > input { padding: var(--p-4); border-radius: 0; border: none; background-color: var(--gray-dark-9); font-family: var(--font-family-1); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-normal); line-height: 22px; border-bottom: 2px solid #000; letter-spacing: 0.64px; } .form-input_wrapper > input:focus { border: none; background-color: var(--gray-light-4); border-bottom: 2px solid #000; box-shadow: none; } .form-input_wrapper > input::placeholder { color: #9a9a9a; } .form-input_wrapper > input:focus::placeholder { color: #000; } .form-input_wrapper .required { border-bottom: 2px solid var(--brand); } .form-input_wrapper .required::placeholder { color: var(--brand); } .select-wrapper .required { background-image: url("/figma/select-arrow/Lg-required.svg"); } .form-input_wrapper > select { width: 100%; padding: var(--p-4); border-radius: 0; border: none; background-color: var(--gray-light-4); -moz-appearance: none; /* Firefox */ -webkit-appearance: none; /* Safari and Chrome */ appearance: none; background-image: url("/figma/select-arrow/Lg.svg"); background-repeat: no-repeat; background-position-x: 98%; background-position-y: 50%; font-family: var(--font-family-1); font-size: var(--text-base); font-weight: var(--weight-normal); line-height: 22px; border-bottom: 2px solid #000; } .form-input_wrapper > select:focus-visible { outline-width: 0; } .form-input_wrapper > select.selected { border-bottom: 2px solid #000; font-family: var(--font-family-1); } .form-input_wrapper > select > option { height: 200px !important; } .form-input_wrapper > label { color: var(--gray-dark-1); font-family: var(--font-family-1); text-align: right; font-size: var(--text-base); line-height: 22px; letter-spacing: 0.48px; font-weight: var(--weight-normal); letter-spacing: 0.64px; } .form-input_wrapper .label-required { font-family: var(--font-family-1); font-size: var(--text-xs); color: var(--brand); } .checkbox__wrapper { display: flex; gap: 50px; font-family: var(--font-family-1); font-size: var(--text-base); font-weight: var(--weight-normal); line-height: 22px; /* align-items: center;*/ } .disclaimer-1 { gap: 1rem; flex: auto; } .check-box { width: 50%; } input#Terminosycondiciones1 { border: 2px solid; } .form-input_wrapper > input[type="checkbox"]:focus, .form-input_wrapper > input[type="radio"]:focus, .form-input_wrapper > input[type="checkbox"]:checked, .form-input_wrapper > input[type="radio"]:checked { border: none; box-shadow: none; background-color: var(--brand); } .checkbox__wrapper .form-check-input:checked[type="checkbox"] { background-color: var(--brand); } .specialDisclaimer__radio_buttom { width: 100%; font-family: var(--font-family-1); font-size: var(--text-base); font-weight: var(--weight-normal); line-height: 22px; } .form-input_wrapper > textarea:focus { color: #000; border: none; box-shadow: none; border-bottom: 3px solid #000; } .submit__buttom { /* text-transform: uppercase; */ width: 100%; margin-top: 2.5rem; padding: 0.85rem 0; background-color: var(--brand); color: #fff; font-family: var(--font-family-1); font-size: var(--text-base); font-weight: var(--weight-bold); /* text-transform: uppercase; */ border: none; } .submit__buttom:hover { color: var(--gray-light-1); background-color: var(--brand-dark); border: none; } .submit__buttom:active { color: var(--gray-light-1); background-color: var(--brand-dark); border: none; } .submit__buttom:disabled { background-color: var(--brand-light); } @media (max-width: 767px) { .submit__buttom { padding: 12px 45px; } } .iframe-content { padding: 5rem 5rem 5rem; } .iframe-content > iframe { width: 100%; height: 50rem; } /*Banner CTA*/ .boxBannerCTA { position: absolute; top: calc(50% - 8rem); left: 5rem; } @media (max-width: 768px) { .boxBannerCTA { background: black; padding: 0rem 0.9rem; } } .containerToGoUpBannerCTA { position: relative; top: -66px; } @media (max-width: 768px) { .boxBannerCTA { left: 0rem; top: -1px; width: 100%; position: relative; } } @media (max-width: 768px) { .text_banner_CTA { text-align: left; width: 34.25rem; left: 1.5rem; position: relative; } } .text_banner_CTA { text-align: left; width: 34.25rem; left: 0; } .p_banner_cta { font-size: 14px; text-transform: initial; } @media (max-width: 768px) { .p_banner_cta { font-size: var(--text-base); text-wrap: wrap; padding-bottom: var(--p-4); padding-top: var(--p-4); } } @media (max-width: 768px) { .marcaSvg svg { width: 7.173rem; height: auto; } .text_banner_CTA { width: 30.25rem; } } .derko-bannerModel .gradient { position: relative; display: inline-block; } .derko-bannerModel .gradient:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: inline-block; background: -moz-linear-gradient( 90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100% ); /* FF3.6+ */ background: -webkit-linear-gradient( 90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100% ); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient( 90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100% ); /* Opera 11.10+ */ background: -ms-linear-gradient( 90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100% ); /* IE10+ */ background: linear-gradient( 90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100% ); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3000000', endColorstr='#00000000', GradientType=1); /* IE6-9 */ } @media (max-width: 768px) { .derko-bannerModel .gradient:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: inline-block; background: -moz-linear-gradient( 0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100% ); /* FF3.6+ */ background: -webkit-linear-gradient( 0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100% ); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient( 0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100% ); /* Opera 11.10+ */ background: -ms-linear-gradient( 0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100% ); /* IE10+ */ background: linear-gradient( 0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100% ); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF000000', endColorstr='#00000000', GradientType=0); /* IE6-9 */ } } /*Import pre header*/ /* --- Inlined from: ./preheader.css --- */ /* Import Component Variables here */ /* --- Inlined from: ./[branding]_components/preheader.css --- */ /* Desktop */ :root { /* Pre Header */ --preheader-height: 36px; --preheader-height-tablet: 100%; --preheader-default-bg-color: var(--brand-black); /* Pre Header Text Links */ --preheader-text-color: var(--gray-dark-8); --preheader-text-color-hover: var(--gray-dark-8); --preheader-text-color-active: var(--brand); --preheader-text-decoration-hover: none; --preheader-icon-filter-hover: brightness(0) saturate(100%) invert(15%) sepia(94%) saturate(5667%) hue-rotate(351deg) brightness(86%) contrast(109%); --preheader-icon-filter-active: brightness(0) saturate(100%) invert(63%) sepia(60%) saturate(500%) hue-rotate(152deg) brightness(100%) contrast(95%); --preheader-text-color-active: var(--brand); --preheader-text-decoration-active: none; --preheader-text-font-weight-active: var(--weight-bolder); --preheader-text-font-family: var(--font-family-3); --preheader-text-font-size: 12px; --preheader-text-font-weight: var(--weight-bolder); /* Pre Header Icon Links */ --preheader-icon-color: var(--brand-white); --preheader-divider-color: var(--gray-dark-7); --preheader-divider-height: 20px; } /*** **** Pre - Header */ .preheader { display: flex; justify-content: space-between; width: 100%; height: var(--preheader-height); padding: 0rem 3rem; } @media (max-width: 991px) { .preheader { flex-direction: column; height: var(--preheader-height-tablet); padding: 0.3rem 0; } } @media (min-width: 768px) { .preheader-mobile { display: none; } } @media (max-width: 767px) { .preheader-mobile { width: 100%; visibility: visible; opacity: 1; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.3rem 0; } .preheader { position: absolute; top: 0; opacity: 0; } } /*** **** Pre-Header Left */ .preheader .links_preheaderLeft, .preheader .links_preheaderLeft > a, .preheader-mobile .links_preheaderLeft, .preheader-mobile .links_preheaderLeft > a { padding: 0 var(--p-4) 0 var(--p-4); color: var(--preheader-text-color); text-decoration: none; justify-content: center; align-items: center; display: flex; font-size: var(--preheader-text-font-size); font-family: var(--preheader-text-font-family); font-weight: var(--preheader-text-font-weight); } .preheader .links_preheaderLeft > a:hover, .preheader-mobile .links_preheaderLeft > a:hover { color: var(--preheader-text-color-hover); } .preheader .links_preheaderLeft > a:active .preheader-mobile .links_preheaderLeft > a:active { color: var(--preheader-text-color-active); } .preheader .links_preheaderLeft, .preheader .links_preheaderLeft, .preheader-mobile .links_preheaderLeft, .preheader-mobile .links_preheaderLeft { display: flex; width: 100%; justify-content: start; } @media (min-width: 1156px) { .menu .mobileBottomLinks { display: none !important; } .submenu .submenuHead { display: none !important; } } @media (max-width: 991px) { .preheader .links_preheaderLeft, .preheader-mobile .links_preheaderLeft { justify-content: space-around; } } @media (max-width: 768px) { .preheader .links_preheaderLeft > a:last-child, .preheader-mobile .links_preheaderLeft > a:last-child { border-right: none; } } /*** **** Pre-Header Right */ .preheader .links_preheaderRight > a:last-child, .preheader-mobile .links_preheaderRight > a:last-child { border-right: none; } .preheader .links_preheaderRight, .preheader .links_preheaderRight > a, .preheader-mobile .links_preheaderRight, .preheader-mobile .links_preheaderRight > a { padding: 0 var(--p-4) 0 var(--p-4); color: var(--brand-white); text-decoration: none; display: flex; justify-content: center; align-items: center; font-size: var(--preheader-text-font-size); font-family: var(--preheader-text-font-family); font-weight: var(--preheader-text-font-weight); } .preheader .links_preheaderRight, .preheader-mobile .links_preheaderRight { display: flex; width: 100%; justify-content: end; } .preheader .links_preheaderRight > a:hover svg, .preheader-mobile .links_preheaderRight > a:hover svg { filter: var(--preheader-icon-filter-hover); } .preheader .links_preheaderRight > a:active svg, .preheader-mobile .links_preheaderRight > a:active svg { filter: var(--preheader-icon-filter-active); } @media (max-width: 1155px) { .preheader .links_preheaderRight, .links_preheaderRight, .preheader-mobile .links_preheaderRight { justify-content: space-evenly !important; } .preheader .links_preheaderRight > a, .links_preheaderRight > a, .preheader-mobile .links_preheaderRight > a { width: 100%; padding: 0 var(--p-2) !important; } .preheader .links_preheaderRight > a svg, .links_preheaderRight > a svg, .preheader-mobile .links_preheaderRight > a svg { width: auto; height: auto; max-width: 100%; } } /* Pre Header Icon Links */ .preheader .icon-links > a:not(:last-child), .preheader-mobile .icon-links > a:not(:last-child) { border-right: 1px solid var(--preheader-divider-color); height: var(--preheader-divider-height); } /* Mobile: Show preheader (panel state handled by header.css) */ @media (max-width: 767px) { .preheader { position: relative !important; top: auto !important; opacity: 1 !important; display: flex !important; } } /* Mobile/Tablet: Hide left side of preheader */ @media (max-width: 991px) { .preheader .links_preheaderLeft { display: none !important; } } /*Import header*/ /* --- Inlined from: ./header.css --- */ /* --- Inlined from: ./[branding]_components/header.css --- */ :root { /* Pre-header (Top bar with brands) */ --header-preheader-bg: var(--brand-dark); --header-preheader-text: var(--brand-white); --header-preheader-link: var(--brand-white); --header-preheader-link-hover: var(--brand-primary); /* Main Header (Navigation) */ --header-main-bg: var(--brand-black); --header-main-text: var(--brand-white); --header-main-link: var(--brand-black); --header-main-link-hover: var(--brand-primary); --header-main-border: var(--gray-light-2); --header--main-font-family: var(--font-family-4); --header--main-font-size: var(--text-base); --header--main-font-weight: var(--weight-normal); --header--main-border-bottom: 4px solid transparent; --header-main-transition: background-color 0.25s ease, color 0.25s ease; --header-main-hover: #888; --header-main-color-hover: var(--brand-white); --header-main-color-active: var(--brand-white); --header-main-font-weight-hover: var(--weight-bolder); --header-main-background-color-active: #888; --header-main-color-clicked: var(--brand-white); --header-main-font-weight-clicked: var(--weight-bolder); --header-main-content: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%228%22%20viewBox%3D%220%200%2014%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.247521%200.321725C0.597151%20-0.0840958%201.18763%20-0.109402%201.5664%200.265201L7%205.63909L12.4336%200.265201C12.8124%20-0.109402%2013.4028%20-0.0840958%2013.7525%200.321725C14.1021%200.727545%2014.0785%201.3602%2013.6997%201.73481L7.63306%207.7348C7.27554%208.0884%206.72446%208.0884%206.36694%207.7348L0.300276%201.73481C-0.0784894%201.3602%20-0.102109%200.727545%200.247521%200.321725Z%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E"); --header-main-icon-border-bottom: none; --header-submenu-background-color: var(--gray-dark-9); --header-layer: 99; /* Mobile Menu Title */ --menu-logo-display: none; --menu-text-font-family: var(--font-family-2); --menu-text-font-weight: var(--weight-bolder); --menu-text-color: var(--brand-white); --menu-text-font-size: 1rem; --menu-border-bottom: 3px solid #00233a; /* Mobile Submenu */ --panel-border-bottom: 1px solid rgba(0, 0, 0, 0.08); --panel-span-color: var(--brand-white); --panel-span-font-family: var(--font-family-1); --panel-span-font-size: 1rem; /* Header Logo */ --header-logo-text: var(--brand-dark); /* Submenu */ --submenu-bg: var(--gray-dark-9); --submenu-text: var(--gray-dark-1); --submenu-font: var(--montserrat); --submenu-tabs-padding-y: var(--p-4\.6); --submenu-tabs-padding-x: var(--p-4); --submenu-tabs-gap: 1rem; --submenu-option-padding-x: var(--p-1); --submenu-option-padding-bottom: var(--p-2); --submenu-list-min-width: 16rem; --submenu-list-item-padding-x: 0rem; --submenu-list-alt-padding-y: 3rem; --submenu-list-alt-padding-x: 0rem; --submenu-list-alt-ul-padding-x: 5rem; --submenu-link-color: var(--gray-dark-1); --submenu-link-hover-color: var(--brand-white); --submenu-link-letter-spacing: 0.32px; --submenu-link-line-height: 1.2; --submenu-link-padding-y: var(--p-4); --submenu-link-padding-x: 1rem; --submenu-alt-link-padding-y: 0.8rem; --submenu-alt-link-font-size: var(--text-base); --submenu-title-padding-y: var(--p-2); --submenu-title-padding-x: 0rem; --submenu-title-font: var(--font-family-1); --submenu-title-weight: var(--weight-bolder); --submenu-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2); --submenu-zindex: calc(var(--header-layer) + 2); --submenu-close-animation: fade-Out 0.5s forwards; --header-search-bg: var(--gray-light-2); --header-search-text: var(--gray-dark-5); --header-search-placeholder: var(--gray-dark-6); --header-search-icon: var(--gray-dark-5); /* Models Wrapper */ --models-wrapper-gap: 0.5rem; --models-wrapper-width: 100%; --models-wrapper-height: 81vh; --models-wrapper-left: 0; --models-wrapper-margin-y: var(--p-4); --models-wrapper-padding-y: var(--p-4); --models-wrapper-padding-x: 3rem; --models-wrapper-bg: var(--gray-dark-9); --models-wrapper-overflow-y: auto; --models-wrapper-opacity: 1; --models-open-animation: fade-In 1s forwards; --models-close-animation: fade-Out 1s forwards; --models-item-width: 25%; --models-content-margin-bottom: 80px; --models-content-padding-top: 4rem; --models-content-padding-x: var(--p-4); /* Models Card */ --card-wrapper-padding-y: 2rem; --card-wrapper-padding-x: var(--p-4); --card-wrapper-font: var(--font-family-1); --card-wrapper-max-height: 35%; --card-wrapper-width: fit-content; --card-label-top: 1rem; --card-label-left: 1rem; --card-label-bg: var(--gray-light-1); --card-label-radius: 4px; --card-label-padding-y: 0rem; --card-label-padding-x: 0.5rem; --card-label-color: var(--brand-secundary); --card-label-weight: var(--weight-normal); --card-label-font-size: var(--paragraph-5); --card-image-max-width: 280px; --card-image-margin-bottom: 1rem; --card-title-font-size: var(--text-base); --card-title-font: var(--font-family-1); --card-title-weight: var(--weight-bolder); --card-title-color: var(--gray-dark-10); --card-text-color: var(--gray-dark-2); --card-text-font-size: var(--text-sm); --card-text-weight: var(--weight-normal); --card-footer-margin-top: 0.5rem; --card-footer-even-padding-x: 0.4rem; --card-footer-li-color: var(--gray-light-2); --card-footer-link-color: var(--gray-dark-3); --card-footer-link-hover-color: var(--gray-dark-10); --card-footer-link-font-size: var(--text-xs); --card-footer-link-weight: var(--weight-bold); --card-footer-link-transition: all 0.5s ease-in-out; --card-footer-icon-color: var(--gray-dark-3); --card-footer-icon-top: 0.15rem; --card-footer-icon-hover-margin-left: 1.5rem; --card-footer-icon-transition: margin 0.5s ease-in-out; --card-title-transform: uppercase; /* Search Wrapper */ --search-wrapper-position: relative; --search-wrapper-width: 32.4%; --search-form-height: 3.125rem; --search-form-bg: var(--brand-white); --search-form-border-color: var(--gray-dark-1); --search-form-text: var(--gray-dark-4); --search-form-font: var(--font-family-1); --search-input-padding-x: var(--p-4); --search-input-bg: var(--brand-white); --search-input-text: var(--gray-dark-4); --search-input-placeholder: var(--gray-dark-4); --search-icon-bg: var(--brand-white); --search-close-btn-size: 44px; --search-close-btn-bg: transparent; --search-close-icon-bg: var(--gray-light-4); --search-focus-bg: var(--brand-secundary); --search-focus-icon-fill: var(--brand-white); --search-open-animation: fade-In 0.5s ease forwards; --search-close-animation: fade-Out 0.3s ease forwards; /* Search Autocomplete */ --search-autocomplete-position: absolute; --search-autocomplete-top: calc(100% + 6px); --search-autocomplete-left: 0; --search-autocomplete-right: 0; --search-autocomplete-width: 100%; --search-autocomplete-max-width: 100%; --search-autocomplete-bg: #fff; --search-autocomplete-border: 1px solid var(--gray-dark-8, #ddd); --search-autocomplete-radius: 4px; --search-autocomplete-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); --search-autocomplete-zindex: 999999; --search-autocomplete-max-height: 320px; --search-autocomplete-overflow-y: auto; --search-autocomplete-item-padding-y: 10px; --search-autocomplete-item-padding-x: 14px; --search-autocomplete-item-color: var(--gray-dark-10, #333); --search-autocomplete-item-font: var(--font-family-1); --search-autocomplete-item-font-size: var(--text-sm, 13px); --search-autocomplete-item-border: 1px solid rgba(0, 0, 0, 0.05); --search-autocomplete-item-transition: background-color 0.15s ease; --search-autocomplete-item-hover-bg: var(--gray-dark-9, #f5f5f5); --search-autocomplete-item-hover-color: var(--brand, #003399); --search-autocomplete-name-margin-right: 8px; --search-autocomplete-type-font-size: 11px; --search-autocomplete-type-color: var(--gray-dark-4, #999); --search-autocomplete-type-transform: capitalize; /* Search Inline / Overlay */ --search-inline-width: 345px; --search-inline-flex: 0 0 345px; --search-inline-zindex: 10; --search-inline-bg: var(--header-bg, #fff); --search-overlay-autocomplete-top: 56px; --search-overlay-autocomplete-radius: 0; --search-overlay-dropdown-top: calc(100% + 6px); --search-overlay-dropdown-radius: 8px; --search-overlay-dropdown-max-height: 320px; --search-overlay-dropdown-zindex: 999999; --search-overlay-dropdown-overflow-y: auto; /* Preheader / Banner Info */ --preheader-banner-padding-top: var(--p-2); --preheader-banner-padding-right: 0.75rem; --preheader-banner-padding-bottom: var(--p-2); --preheader-banner-padding-left: 0rem; --preheader-banner-gap: 0.25rem; --preheader-banner-text-color: var(--gray-dark-9); --preheader-banner-text-size: var(--text-xs); /* Language Switcher */ --lang-switcher-height: 100%; --lang-toggle-padding-x: 1rem; --lang-toggle-cursor: pointer; --lang-icon-size: 28px; /* Menu Wrapper State */ --menu-wrapper-hidden-display: none; --models-wrapper-bg: var(--gray-dark-9); /* Models Menu */ --models-submenu-width: 100%; --models-submenu-left: 0; --models-submenu-right: 0; --models-submenu-bg: #f3f3f3; --models-submenu-padding-top: 24px; --models-submenu-padding-right: 0; --models-submenu-padding-bottom: 40px; --models-submenu-padding-left: 0; --models-submenu-border-top: 1px solid rgba(0, 0, 0, 0.06); --models-submenu-display-default: none; --models-submenu-direction: column; --models-submenu-align: stretch; --models-submenu-justify: flex-start; --models-submenu-active-display: flex; --models-submenu-active-gap: 0; /* Models Tabs */ --models-tabs-wrapper-max-width: 100%; --models-tabs-wrapper-margin: auto; --models-tabs-width: 100%; --models-tabs-margin-bottom: 24px; --models-tabs-justify: space-evenly; --models-tabs-border-bottom: 1px solid rgba(0, 0, 0, 0.15); --models-grid-wrapper-width: 100%; --models-tab-bg: transparent; --models-tab-border: 0; --models-tab-padding-y: 12px; --models-tab-padding-x: 0; --models-tab-font: var(--font-family-5); --models-tab-font-size: var(--text-md); --models-tab-font-weight: var(--weight-semibold); --models-tab-letter-spacing: 0.5px; --models-tab-color: #373637; --models-tab-text-transform: uppercase; --models-tab-cursor: pointer; --models-tab-width: 206.5px; --models-tab-active-font: var(--font-family-5); --models-tab-active-color: #00233a; --models-tab-indicator-height: 6px; --models-tab-indicator-bg: #00233a; --models-tab-indicator-bottom: -1px; --models-tab-border-bottom-active: 6px solid #00233a; /* Models Grid */ --models-grid-width: 100%; --models-grid-max-width: 1400px; --models-grid-margin: 0 auto; --models-grid-padding-y: 0; --models-grid-padding-x: 40px; --models-grid-columns: repeat(4, minmax(200px, 1fr)); --models-grid-gap-row: 24px; --models-grid-gap-col: 20px; --models-grid-box-sizing: border-box; --models-grid-justify: center; /* Models Card */ --models-card-padding-y: 16px; --models-card-padding-x: 40px; --models-card-radius: 6px; --models-card-transition: all 0.2s ease-in-out; --models-card-hover-bg: rgba(255, 255, 255, 0.6); --models-card-img-width: 100%; --models-card-img-height: 150px; --models-card-image-width: 200px; --models-card-image-margin-bottom: 12px; --models-card-image-object-fit: contain; --models-card-image-transition: transform 0.2s ease; --models-card-image-hover-scale: 1.03; --models-card-brand-font-size: var(--text-xs); --models-card-brand-font-weight: var(--weight-normal); --models-card-brand-color: #373637; --models-card-brand-font: var(--font-family-4); --models-card-brand-transform: uppercase; --models-card-brand-margin-bottom: 2px; --models-card-name-font-size: var(--text-md); --models-card-name-font-weight: var(--weight-bold); --models-card-name-color: var(--brand-black); --models-card-name-font: var(--font-family-5); --models-card-name-transform: uppercase; --models-card-name-margin-bottom: 4px; --models-card-price-font-size: 11px; --models-card-price-color: rgba(0, 0, 0, 0.55); --models-card-price-line-height: 1.6; --models-card-price-gap: 2px; --models-card-price-span-font-size: var(--text-sm); --models-card-price-span-font: var(--font-family-4); --models-card-price-span-color: #373637; --models-card-price-strong-weight: var(--weight-bolder); --models-card-price-strong-color: #373637; --models-card-price-strong-font: var(--font-family-3); --models-card-links-margin-top: 10px; --models-card-links-gap: 16px; --models-card-link-font-family: var(--font-family-2); --models-card-link-font-size: var(--text-base); --models-card-link-font-weight: var(--weight-normal); --models-card-link-color: var(--gray-dark-3); --models-card-link-hover-color: var(--gray-dark-3); --models-card-link-decoration: underline; --models-card-link-transition: color 0.2s ease; --models-card-link-first-color: #00233a; --models-card-link-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%228%22%20height%3D%2212%22%20viewBox%3D%220%200%208%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M2%201L7%206L2%2011%22%20stroke%3D%22%236C6C6C%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E"); --models-card-link-arrow-first-child: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%228%22%20height%3D%2212%22%20viewBox%3D%220%200%208%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M2%201L7%206L2%2011%22%20stroke%3D%22%2300233A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E"); --models-card-link-arrow-size: 18px; --models-card-link-arrow-line-height: 1; --models-card-link-gap: 10px; /* Models Mobile Default Hidden */ --models-mobile-categories-display: none; --models-mobile-title-display: none; /* Body Lock (Models Panel Open) */ --models-body-lock-overflow: hidden; --models-body-lock-padding-right: var(--scrollbar-width, 0px); /* Tab Outline */ --outline-color: var(--brand); } @media (max-width: 1155px) { :root { --header-layer: 99; /* Search */ --search-wrapper-width: 100%; --search-form-height: 44px; --search-input-padding-x: 12px; /* Models Card */ --models-card-padding-y: 0; --models-card-padding-x: 0; --models-card-image-width: 230px; /* Grid */ --models-grid-columns: repeat(2, minmax(160px, 1fr)); --models-grid-padding-x: 16px; --models-grid-gap-row: 16px; --models-grid-gap-col: 12px; } } @media (max-width: 520px) { :root { --models-grid-columns: 1fr; --models-grid-padding-x: 16px; --models-card-image-width: 180px; } } @media (max-width: 320px) { :root { --preheader-banner-text-color: var(--gray-dark-10); } } @media (max-width: 670px) { :root { --preheader-banner-padding-right: 0.7rem; } } @media (max-width: 390px) { :root { --preheader-banner-text-size: var(--text-sm); --preheader-banner-gap: 0.25rem; } } @media (min-width: 1200px) { :root { --models-grid-columns: repeat(4, 1fr); --models-grid-padding-x: 40px; } } @media (min-width: 1400px) { :root { --models-grid-columns: repeat(4, minmax(200px, 1fr)); } } /* Search & Language icons - white */ .icon-search svg path { fill: var(--brand-white); } .language-switcher svg path { stroke: var(--brand-white); } /* Panel prev/close button icons - white on all panels */ @media (max-width: 1155px) { .go-back-mobile svg path, .close-menu-mobile svg path { fill: var(--brand-white); } } /* Center main menu */ @media (min-width: 1156px) { .right-wrapper { position: absolute !important; left: 0; right: 0; top: 0; bottom: 0; align-items: center !important; pointer-events: none; } .menu-wrapper { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: stretch; flex: none !important; pointer-events: none; } .menu { margin: 0 !important; pointer-events: auto; } .search-wrapper, .language-switcher { pointer-events: auto; } } /*Animations*/ @keyframes fade-In { 0% { display: flex; opacity: 0; } 100% { opacity: 1; } } @keyframes fade-Out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes slide-In { 0% { transform: translateX(-100%); } 100% { transform: translateX(0%); } } @keyframes slide-Out { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } /*Helpers*/ .no-show { display: none; } .animable.fade-in { animation: fade-In 1s forwards; } .animable.fade-out { animation: fade-Out 1s forwards; } /*Header*/ .header-wrapper { display: flex; background-color: var(--header-main-bg); align-items: stretch; position: sticky; top: 0; width: 100%; z-index: var(--header-layer); box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2); justify-content: start; height: 5.6rem; } .left-wrapper { display: flex; justify-content: start; align-items: center; } .icon-menu { display: none; } .right-wrapper { display: flex; justify-content: end; align-items: stretch; flex: 1 1 0; min-width: 0; padding-right: 3rem; position: relative; } .logotipo { font-weight: var(--weight-bold); display: flex; align-items: center; padding: 0; } .logo { margin: 0; } .menu-wrapper { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; } /*Logo*/ #link-logo { color: var(--gray-dark); text-decoration: none; } #link-logo > img { width: 10.938rem; height: 33px; margin: 1rem 0 1rem 2rem; object-fit: contain; } /*Menu*/ .menu { display: flex; align-items: stretch; list-style: none; margin: 0; margin-left: auto; padding: 0rem var(--p-4); } .menu .title-mobile #link-logo { display: var(--menu-logo-display); } .menu .menu-mob-text { font-family: var(--menu-text-font-family); font-weight: var(--menu-text-font-weight); color: var(--menu-text-color); font-size: var(--menu-text-font-size); } .menu li { list-style: none; } .menu .title-mobile { display: none; } .menu .option { text-decoration: none; color: var(--header-main-text); padding: 0 1rem; font-family: var(--header--main-font-family); font-size: var(--header--main-font-size); font-style: normal; font-weight: var(--header--main-font-weight); letter-spacing: 0.32px; display: flex; height: 100%; align-items: center; border-bottom: var(--header--main-border-bottom); box-sizing: border-box; transition: var(--header-main-transition); white-space: nowrap; } .menu .option:hover { background-color: var(--header-main-hover); color: var(--header-main-color-hover); font-weight: var(--header-main-font-weight-hover); border-bottom: var(--header-main-icon-border-bottom); } .menu .option.active { color: var(--header-main-color-active); background-color: var(--header-main-background-color-active); } .menu .option.with-icon.active, .menu .option.with-icon.clicked { color: var(--header-main-color-clicked) !important; font-weight: var(--header-main-font-weight-clicked); } .menu .option.with-icon::after { content: var(--header-main-content); width: 15px; display: inline-flex; margin-left: 0.7rem; cursor: pointer; user-select: none; } .menu .option.with-icon:hover, .menu .option.with-icon.active { border-bottom: var(--header-main-icon-border-bottom); position: relative; z-index: 1000; } .menu .submenuItems .option:hover { box-shadow: none; height: 100%; display: flex; background-color: var(--header-submenu-background-color); color: var(--brand-black); text-shadow: none; } .title-menu-mobile { display: none; } /*Submenu*/ /*Submenu*/ .submenu-wrapper.relative { position: relative; } .submenu { position: absolute; width: 100%; padding: 0; background: var(--submenu-bg); left: 0; top: 100%; } .submenu .submenuContent { display: flex; justify-content: center; } .submenu.tabs { display: none; justify-content: center; padding: var(--submenu-tabs-padding-y) var(--submenu-tabs-padding-x); left: 0; font-family: var(--submenu-font); color: var(--submenu-text); } .menu .option.active + .submenu.tabs { display: flex; gap: var(--submenu-tabs-gap); } .menu .option.active + .submenu.tabs.models-submenu__content { flex-direction: column; gap: 0; } .menu .option.closing + .submenu.tabs { animation: var(--submenu-close-animation); } .submenu.tabs .option { padding: 0 var(--submenu-option-padding-x) var(--submenu-option-padding-bottom); } .submenu.list, .submenu.listAlternate { display: none; justify-content: center; box-shadow: var(--submenu-shadow); } .submenu.list { min-width: var(--submenu-list-min-width); } .submenu.listAlternate { padding: var(--submenu-list-alt-padding-y) var(--submenu-list-alt-padding-x); } .submenu.list li, .submenu.listAlternate li { padding: 0rem var(--submenu-list-item-padding-x); color: var(--submenu-text); } .submenu.listAlternate ul { padding: 0rem var(--submenu-list-alt-ul-padding-x); } .menu .option.active + .submenu.list { display: block; width: 100%; min-width: unset; z-index: var(--submenu-zindex); } .menu .option.active + .submenu.listAlternate { display: flex; width: 100%; z-index: var(--submenu-zindex); } .menu .option.closing + .submenu.list, .menu .option.closing + .submenu.listAlternate { animation: var(--submenu-close-animation); } .submenu.list li a, .submenu.listAlternate li a { color: var(--submenu-link-color); text-decoration: none; font-family: var(--font-family-2); font-weight: var(--weight-normal); letter-spacing: var(--submenu-link-letter-spacing); } .submenu.list li a { padding: var(--submenu-link-padding-y) var(--submenu-link-padding-x); white-space: normal; display: block; line-height: var(--submenu-link-line-height); } .submenu.listAlternate li a { padding: var(--submenu-alt-link-padding-y) 0; font-size: var(--submenu-alt-link-font-size); } .submenu .submenuTitle { padding: var(--submenu-title-padding-y) var(--submenu-title-padding-x); font-family: var(--submenu-title-font); font-weight: var(--submenu-title-weight); color: var(--submenu-text); } .submenu.list li a:hover, .submenu.listAlternate li a:hover { color: var(--submenu-link-hover-color); } .submenu.listAlternate li a.only:hover { border: none; padding: var(--submenu-alt-link-padding-y) 0; } .submenu.list li a.option.only:hover { display: block; height: auto; box-shadow: none; } /*Models Wrapper*/ .menu .content-wrapper { display: none; justify-content: center; gap: var(--models-wrapper-gap); flex-wrap: wrap; position: absolute; width: var(--models-wrapper-width); height: var(--models-wrapper-height); left: var(--models-wrapper-left); margin: var(--models-wrapper-margin-y) 0; padding: var(--models-wrapper-padding-y) var(--models-wrapper-padding-x); background: var(--models-wrapper-bg); overflow-y: var(--models-wrapper-overflow-y); opacity: var(--models-wrapper-opacity); } .submenu.tabs .option.active + .content-wrapper { display: flex; } .submenu.tabs .option.active + .content-wrapper .content-models { animation: var(--models-wrapper-open-animation); } .submenu.tabs .option.closing + .content-wrapper .content-models { animation: var(--models-wrapper-close-animation); } .submenu.tabs .option.closing + .content-wrapper { display: flex; animation: var(--models-wrapper-close-animation); } .content-wrapper li { width: var(--models-wrapper-item-width); } .content-models { display: flex; flex-wrap: inherit; margin-bottom: var(--models-content-margin-bottom); padding: var(--models-content-padding-top) var(--models-content-padding-x); } /* Models Card*/ .card-wrapper { padding: var(--card-wrapper-padding-y) var(--card-wrapper-padding-x); font-family: var(--card-wrapper-font); display: flex; flex-direction: column; justify-content: center; align-content: center; position: relative; max-height: var(--card-wrapper-max-height); width: var(--card-wrapper-width); } .card-wrapper label { position: absolute; top: var(--card-label-top); left: var(--card-label-left); background-color: var(--card-label-bg); border-radius: var(--card-label-radius); padding: var(--card-label-padding-y) var(--card-label-padding-x); font-family: var(--card-wrapper-font); color: var(--card-label-color); font-weight: var(--card-label-weight); font-size: var(--card-label-font-size); } .card-wrapper .model-area { width: 100%; display: flex; flex-direction: column; justify-content: center; } .card-wrapper .model-area img { width: 100%; max-width: var(--card-image-max-width); margin-bottom: var(--card-image-margin-bottom); } .card-wrapper a, .card-wrapper h3 { font-size: var(--card-title-font-size); font-family: var(--card-title-font); font-weight: var(--card-title-weight); color: var(--card-title-color); text-decoration: none; } .card-wrapper .model-area h3 { text-transform: var(--card-title-transform); } .card-wrapper p, .card-wrapper p.text-bold { margin: 0; font-family: var(--card-wrapper-font); font-weight: var(--card-text-weight); color: var(--card-text-color); font-size: var(--card-text-font-size); } .card-wrapper .footer-links { display: flex; justify-content: space-between; margin-top: var(--card-footer-margin-top); padding: 0; } .card-wrapper .footer-links li { width: auto; color: var(--card-footer-li-color); } .card-wrapper .footer-links li a { text-decoration: none; font-family: var(--card-wrapper-font); font-weight: var(--card-footer-link-weight); color: var(--card-footer-link-color); font-size: var(--card-footer-link-font-size); transition: var(--card-footer-link-transition); display: flex; align-items: center; } .card-wrapper .footer-links li:nth-child(even) a { padding: 0 var(--card-footer-even-padding-x); } .card-wrapper .footer-links li a::after { content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3LnczLm9yZy53Myv...=="); color: var(--card-footer-icon-color); transition: var(--card-footer-icon-transition); position: relative; top: var(--card-footer-icon-top); } .card-wrapper .footer-links li a:hover { color: var(--card-footer-link-hover-color); } .card-wrapper .footer-links li a:hover::after { content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDcgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjI1NzM4IDExLjAwMTlDLTAuMDY3Mjc2NyAxMC43MjIyIC0wLjA4NzUyMTggMTAuMjQ5OCAwLjIxMjE2MSA5Ljk0NjgzTDQuNTExMjcgNS41OTk5NUwwLjIxMjE2MSAxLjI1MzA3Qy0wLjA4NzUyMjIgMC45NTAwNTYgLTAuMDY3Mjc3MSAwLjQ3NzY3MSAwLjI1NzM3OSAwLjE5Nzk2OEMwLjU4MjIzNiAtMC4wODE3MzY2IDEuMDg4MTYgLTAuMDYyODQxNSAxLjM4Nzg1IDAuMjQwMTcxTDYuMTg3ODQgNS4wOTM1QzYuNDcwNzIgNS4zNzk1MiA2LjQ3MDcyIDUuODIwMzggNi4xODc4NCA2LjEwNjRMMi4zODc4NSAxMC45NTk3QzEuMDg4MTYgMTEuMjYyNyAwLjU4MjIzNiAxMS4yODE2IDAuMjU3MzggMTEuMDAxOVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo="); margin-left: var(--card-footer-icon-hover-margin-left); } /*Search*/ .search-wrapper { display: flex; justify-content: center; align-items: center; position: var(--search-wrapper-position); } .search-wrapper:hover { cursor: pointer; } .search-wrapper.icon input { display: none; } .search-wrapper.icon .icon-search { display: flex; } .search-wrapper.form-search .icon-search { display: none !important; } .search-wrapper.icon .form-search { display: none; } .search-wrapper:not(.icon) .icon-search { display: none; } .search-wrapper.form-search { position: static; height: auto; display: flex; align-items: center; width: var(--search-wrapper-width); } .search-wrapper.form-search.opening .form-search { animation: var(--search-open-animation); } .search-wrapper.form-search.closing .form-search { animation: var(--search-close-animation); } .search-wrapper .form-search { display: flex; padding: 0; width: 100%; height: var(--search-form-height); align-items: center; background: var(--search-form-bg); border-bottom: solid 1px var(--search-form-border-color); position: relative; font-family: var(--search-form-font); color: var(--search-form-text); } .search-wrapper .form-search input, .search-wrapper .form-search input:hover, .search-wrapper .form-search input:visited, .search-wrapper .form-search input:focus-within, .search-wrapper .form-search input:focus-visible, .search-wrapper .form-search input:active, .search-wrapper .form-search input:focus { border: none; outline: none; padding: 0 var(--search-input-padding-x); width: 100%; font-family: var(--search-form-font); background: var(--search-input-bg); color: var(--search-input-text); } .search-wrapper .form-search input::placeholder { color: var(--search-input-placeholder); opacity: 1; } .icon_search__bg { background: var(--search-icon-bg); justify-content: center; display: flex; align-items: center; padding: 0; flex-shrink: 0; } .search-wrapper.is-inline .close-search { display: none !important; } .search-wrapper .form-search button.close-search { background: var(--search-close-btn-bg); border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; padding: 0; width: var(--search-close-btn-size); height: var(--search-close-btn-size); } .search-wrapper .form-search button.close-search svg { display: block; background-color: var(--search-close-icon-bg); } .icon_search__bg:focus { background: transparent; } .icon_search__bg:focus svg path { fill: currentColor; } /*Search Autocomplete*/ .search-autocomplete { position: var(--search-autocomplete-position); top: var(--search-autocomplete-top); left: var(--search-autocomplete-left); right: var(--search-autocomplete-right); width: var(--search-autocomplete-width); max-width: var(--search-autocomplete-max-width); background: var(--search-autocomplete-bg); border: var(--search-autocomplete-border); border-radius: var(--search-autocomplete-radius); box-shadow: var(--search-autocomplete-shadow); display: none; z-index: var(--search-autocomplete-zindex); max-height: var(--search-autocomplete-max-height); overflow-y: var(--search-autocomplete-overflow-y); } .search-autocomplete.is-visible { display: block; } .search-autocomplete__item { display: flex; justify-content: space-between; align-items: center; padding: var(--search-autocomplete-item-padding-y) var(--search-autocomplete-item-padding-x); text-decoration: none; color: var(--search-autocomplete-item-color); font-family: var(--search-autocomplete-item-font); font-size: var(--search-autocomplete-item-font-size); border-bottom: var(--search-autocomplete-item-border); transition: var(--search-autocomplete-item-transition); } .search-autocomplete__item:last-child { border-bottom: none; } .search-autocomplete__item:hover, .search-autocomplete__item.is-active { background-color: var(--search-autocomplete-item-hover-bg); color: var(--search-autocomplete-item-hover-color); } .search-autocomplete__name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: var(--search-autocomplete-name-margin-right); } .search-autocomplete__type { font-size: var(--search-autocomplete-type-font-size); color: var(--search-autocomplete-type-color); text-transform: var(--search-autocomplete-type-transform); flex-shrink: 0; } .search-wrapper.is-inline:not(.form-search) .search-autocomplete { display: none !important; } #searchRecentSection:not(.has-items) { display: none; } .search-wrapper.icon .search-autocomplete { display: none; } /*Search Inline/Overlay*/ .search-wrapper.is-inline { width: auto; flex: 0 0 auto; } .search-wrapper.is-inline.form-search { position: relative; flex: var(--search-inline-flex); width: var(--search-inline-width); z-index: var(--search-inline-zindex); background: var(--search-inline-bg); } .search-wrapper.form-search .form-search { display: flex; align-items: center; gap: 0; } .search-wrapper.form-search .form-search input#searchInput { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-wrapper.is-overlay .search-autocomplete { position: fixed; top: var(--search-overlay-autocomplete-top); left: 0; right: 0; width: 100%; border-radius: var(--search-overlay-autocomplete-radius); } .search-wrapper.is-overlay { position: relative !important; } .search-wrapper.is-overlay .search-autocomplete { position: absolute !important; top: var(--search-overlay-dropdown-top) !important; left: 0 !important; right: 0 !important; width: 100% !important; border-radius: var(--search-overlay-dropdown-radius) !important; max-height: var(--search-overlay-dropdown-max-height) !important; overflow-y: var(--search-overlay-dropdown-overflow-y) !important; z-index: var(--search-overlay-dropdown-zindex) !important; } /*Preheader*/ .banner_info { padding: var(--preheader-banner-padding-top) var(--preheader-banner-padding-right) var(--preheader-banner-padding-bottom) var(--preheader-banner-padding-left); gap: var(--preheader-banner-gap); } .banner_info > p, .banner_info > a { margin: 0; color: var(--preheader-banner-text-color); font-size: var(--preheader-banner-text-size); } .icon_marks_mobile { width: 100%; display: none; } /*Language Switcher*/ .language-switcher { display: flex; align-items: center; height: var(--lang-switcher-height); } .language-switcher .dropdown-toggle { display: flex; align-items: center; justify-content: center; padding: 0 var(--lang-toggle-padding-x); height: var(--lang-switcher-height); cursor: var(--lang-toggle-cursor); background: transparent; border: 2px solid transparent; } .language-switcher svg { display: block; width: var(--lang-icon-size); height: var(--lang-icon-size); } #langSwitcher::after { display: none; content: none; } .language-switcher .dropdown-menu { display: none; } .language-switcher .dropdown-menu.show { display: block; } /*Menu Wrapper State*/ .menu-wrapper.no-show { display: var(--menu-wrapper-hidden-display); } /*Models Menu (Desktop Base)*/ .submenu.tabs.models-submenu__content { width: var(--models-submenu-width); left: var(--models-submenu-left); right: var(--models-submenu-right); background: var(--models-submenu-bg); padding: var(--models-submenu-padding-top) var(--models-submenu-padding-right) var(--models-submenu-padding-bottom) var(--models-submenu-padding-left); border-top: var(--models-submenu-border-top); display: var(--models-submenu-display-default); flex-direction: var(--models-submenu-direction); align-items: var(--models-submenu-align); justify-content: var(--models-submenu-justify); } .menu .option.active + .submenu.tabs.models-submenu__content { display: var(--models-submenu-active-display); flex-direction: var(--models-submenu-direction); align-items: var(--models-submenu-align); gap: var(--models-submenu-active-gap); } /*Models Tabs*/ .models-tabs-wrapper { max-width: var(--models-tabs-wrapper-max-width); list-style: none; padding: 0; margin: var(--models-tabs-wrapper-margin); } .models-tabs { width: var(--models-tabs-width); display: flex; justify-content: var(--models-tabs-justify); margin-bottom: var(--models-tabs-margin-bottom); border-bottom: var(--models-tabs-border-bottom); } .models-grid-wrapper { width: var(--models-grid-wrapper-width); list-style: none; padding: 0; margin: 0; } .models-tab { background: var(--models-tab-bg); border: var(--models-tab-border); padding: var(--models-tab-padding-y) var(--models-tab-padding-x); font-family: var(--models-tab-font); font-size: var(--models-tab-font-size); font-weight: var(--models-tab-font-weight); letter-spacing: var(--models-tab-letter-spacing); color: var(--models-tab-color); text-transform: var(--models-tab-text-transform); cursor: var(--models-tab-cursor); width: var(--models-tab-width); } .models-tab.is-active { font-weight: var(--models-tab-font-weight); font-size: var(--models-tab-font-size); font-family: var(--models-tab-active-font); color: var(--models-tab-active-color); border-bottom: var(--models-tab-border-bottom-active); } .models-tab.is-active::after { content: ""; position: absolute; left: 0; bottom: var(--models-tab-indicator-bottom); width: 100%; height: var(--models-tab-indicator-height); background: var(--models-tab-indicator-bg); } /*Models Grid*/ .models-grid { width: var(--models-grid-width); max-width: var(--models-grid-max-width); margin: var(--models-grid-margin); padding: var(--models-grid-padding-y) var(--models-grid-padding-x); display: grid; grid-template-columns: var(--models-grid-columns); gap: var(--models-grid-gap-row) var(--models-grid-gap-col); box-sizing: var(--models-grid-box-sizing); justify-content: var(--models-grid-justify); } /*Models Card*/ .models-card { text-decoration: none; display: flex; flex-direction: column; align-items: flex-start; padding: var(--models-card-padding-y) var(--models-card-padding-x); border-radius: var(--models-card-radius); transition: var(--models-card-transition); } .models-card:hover { background: var(--models-card-hover-bg); } .models-card__img { display: flex; justify-content: center; align-items: center; width: var(--models-card-img-width); text-decoration: none; height: var(--models-card-img-height); flex-shrink: 0; overflow: hidden; } .models-card__img img { width: var(--models-card-image-width); max-width: 100%; height: auto; max-height: 100%; object-fit: var(--models-card-image-object-fit); margin-bottom: var(--models-card-image-margin-bottom); transition: var(--models-card-image-transition); } .models-card__img:hover img { transform: scale(var(--models-card-image-hover-scale)); } .models-card__info { width: 100%; display: flex; flex-direction: column; align-items: flex-start; flex: 1; } .models-card__brand { font-size: var(--models-card-brand-font-size); font-weight: var(--models-card-brand-font-weight); color: var(--models-card-brand-color); font-family: var(--models-card-brand-font); text-transform: var(--models-card-brand-transform); margin-bottom: var(--models-card-brand-margin-bottom); } .models-card__name { font-size: var(--models-card-name-font-size); font-weight: var(--models-card-name-font-weight); color: var(--models-card-name-color); font-family: var(--models-card-name-font); text-transform: var(--models-card-name-transform); margin: 0 0 var(--models-card-name-margin-bottom) 0; text-decoration: none; display: block; } .models-card__name:hover { color: var(--models-card-name-color); } .models-card__price { font-size: var(--models-card-price-font-size); color: var(--models-card-price-color); margin: 0; line-height: var(--models-card-price-line-height); display: flex; flex-direction: column; gap: var(--models-card-price-gap); min-height: calc(2 * 0.875rem * 1.6 + 2px); } .models-card__price span { display: block; font-size: var(--models-card-price-span-font-size); font-family: var(--models-card-price-span-font); color: var(--models-card-price-span-color); } .models-card__price strong { font-weight: var(--models-card-price-strong-weight); color: var(--models-card-price-strong-color); font-family: var(--models-card-price-strong-font); } .models-card__links { margin-top: var(--models-card-links-margin-top); width: 100%; display: flex; justify-content: flex-start; gap: var(--models-card-links-gap); padding: 0; list-style: none; } .models-card__links a, .models-card__link { font-family: var(--models-card-link-font-family); font-size: var(--models-card-link-font-size); font-weight: var(--models-card-link-font-weight); color: var(--models-card-link-color); text-decoration: var(--models-card-link-decoration); display: inline-flex; align-items: center; gap: var(--models-card-link-gap); transition: var(--models-card-link-transition); } .models-card__link--first:first-child { color: var(--models-card-link-first-color); } .models-card__link--first:first-child:hover { color: var(--models-card-link-first-color); } .models-card__links--first a:first-child::after, .models-card__link--first:first-child::after { content: var(--models-card-link-arrow-first-child); } .models-card__links a::after, .models-card__link::after { content: var(--models-card-link-arrow); font-size: var(--models-card-link-arrow-size); line-height: var(--models-card-link-arrow-line-height); } .models-card__links a:hover, .models-card__link:hover { color: var(--models-card-link-hover-color); text-decoration: var(--models-card-link-decoration); } /*Models Mobile Default Hidden*/ .models-mobile-categories { display: var(--models-mobile-categories-display); } .models-submenu__content > .title-mobile:not(.models-mobile-header) { display: var(--models-mobile-title-display); } /*Body Lock*/ body.models-panel-open { overflow: var(--models-body-lock-overflow); padding-right: var(--models-body-lock-padding-right); } /*Responsive - Mobile Header/Menu/Search*/ @media (max-width: 1155px) { .icon-menu { display: flex; position: relative; z-index: 1000000; } .right-wrapper { position: relative; z-index: 1000000; } .header-wrapper { padding: 0rem 1rem; justify-content: space-between; min-height: 50px; height: 100%; } .left-wrapper { display: flex; align-items: center; flex: 1 1 0; width: auto; gap: var(--models-grid-gap-col); padding: 0; } #link-logo > img { width: 122px; margin: 0; } .logotipo { flex: 0 0 auto; justify-content: center; } .right-wrapper { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 0; width: auto; padding-right: 0; min-width: 0; gap: 4px; } .left-wrapper.no-show .icon-menu, .left-wrapper.no-show .logotipo { display: none; } .menu-wrapper { display: none; justify-content: center; position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 99999; background-color: var(--gray-light-4); transform: translateX(-100%); } .menu-wrapper.show { display: flex; opacity: 1; animation: slide-In 1s forwards; overflow: hidden; } .menu-wrapper.closing { display: flex; animation: slide-Out 1s forwards; } .menu { background-color: var(--gray-light-1); align-items: center; justify-content: start; flex-direction: column; padding: var(--p-0); width: 100vw; height: 100vh; overflow-y: auto; } .submenu-wrapper.relative { position: initial; } .submenu { display: none; } .menu .submenu.tabs, .menu .submenu.list, .menu .submenu.listAlternate { display: none !important; visibility: hidden !important; pointer-events: none !important; position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow-y: auto !important; z-index: 999999 !important; background: #fff !important; } .menu .option.active + .submenu.tabs, .menu .option.active + .submenu.list, .menu .option.active + .submenu.listAlternate { display: flex !important; visibility: visible !important; pointer-events: auto !important; } .menu .option.active + .submenu.list, .menu .option.active + .submenu.listAlternate { flex-direction: column !important; } .submenu.tabs { flex-direction: column; justify-content: start; align-items: center; } .submenu .submenuHead { width: 100%; justify-content: space-between; align-items: center; border-bottom: var(--border-md) var(--gray-dark-10); padding: 0rem var(--p-4); font-size: var(--text-base); background-color: var(--brand-black); position: relative; height: 50px; } .submenu .submenuHead span { position: absolute; left: 50%; transform: translateX(-50%); color: var(--panel-span-color); font-family: var(--panel-span-font-family); font-size: var(--panel-span-font-size); text-transform: uppercase; pointer-events: none; } .submenu .submenuContent { flex-direction: column; overflow-y: auto; justify-content: flex-start; } .submenuItems .submenuTitle { padding: 2.5rem var(--p-4) var(--p-4) var(--p-4); border-bottom: 2px solid var(--gray-dark-8); } .menu .option { display: flex; justify-content: space-between; align-items: flex-start; width: 100vw; padding: var(--p-4) 2rem var(--p-4) var(--p-4); font-size: var(--text-base); border-bottom: var(--border-sm) var(--gray-dark-8); } .menu .option:hover { box-shadow: none; height: 100%; display: flex; background-color: var(--gray-dark-9); color: var(--brand); text-shadow: none; border-bottom: 2px solid var(--gray-dark-8); } .menu .option.active, .menu .option.clicked { color: var(--header-main-color-clicked) !important; box-shadow: none; text-shadow: none; background-color: var(--gray-dark-9); border-bottom: 2px solid var(--gray-dark-8); font-weight: var(--header-main-font-weight-clicked); } .menu .option.active { border: none; margin: 0; } .menu .option.with-icon { border-bottom: var(--border-xs) var(--gray-dark-8); padding: 18px 24px; font-size: var(--text-2xl); font-family: var(--font-family-4); font-weight: var(--weight-normal); color: #373637; text-transform: uppercase; } .menu .option.with-icon::after, .submenu.tabs .option::after { content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%277%27%20height%3D%2712%27%20viewBox%3D%270%200%207%2012%27%20fill%3D%27none%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20clip-rule%3D%27evenodd%27%20d%3D%27M0.25738%2011.0019C-0.0672767%2010.7222%20-0.0875218%2010.2498%200.212161%209.94683L4.51127%205.59995L0.212161%201.25307C-0.0875222%200.950056%20-0.0672771%200.477671%200.257379%200.197968C0.582236%20-0.0817366%201.08816%20-0.0628415%201.38785%200.240171L6.18784%205.0935C6.47072%205.37952%206.47072%205.82038%206.18784%206.1064L1.38785%2010.9597C1.08816%2011.2627%200.582236%2011.2816%200.25738%2011.0019Z%27%20fill%3D%27%23414141%27/%3E%3C/svg%3E"); transition: margin 0.5s ease-in-out; top: 0.1rem; width: 10.4px; height: 18.2px; } .menu .option.only { border-bottom: 1px solid var(--gray-dark-8); padding: 18px 24px; font-size: var(--text-2xl); font-family: var(--font-family-4); color: #373637; text-transform: uppercase; } .menu .option.only::after { content: none; } .menu .option.only.active, .menu .option.only.clicked { color: #373637 !important; } .submenu.tabs .option { transform: none; padding: var(--p-4) 2rem var(--p-4) var(--p-4); } .menu .option.active + .submenu.tabs { animation: slide-In 1s forwards; gap: 0; } .menu .option.closing + .submenu.tabs { animation: slide-Out 1s forwards; } .title-menu-mobile { position: fixed; top: 0; left: 0; width: 100vw; padding: var(--p-4) 3rem; z-index: 1; background: white; color: black; display: none; justify-content: space-around; } .title-menu-mobile a { color: black; text-decoration: none; } .menu .title-mobile { background: var(--brand-black); margin: 0; width: 100%; padding: 0rem var(--p-4); display: flex; justify-content: space-between; align-items: center; border-bottom: var(--menu-border-bottom); height: 50px; position: relative; } .menu .title-mobile span { color: var(--panel-span-color); font-family: var(--panel-span-font-family); padding: 0.8rem; font-size: var(--panel-span-font-size); text-transform: uppercase; font-weight: var(--weight-bolder); } /* Center the MENU label in the first panel title bar */ .menu .title-mobile .menu-mob-text { position: absolute; left: 50%; transform: translateX(-50%); color: var(--panel-span-color); font-family: var(--panel-span-font-family); font-size: var(--panel-span-font-size); text-transform: uppercase; pointer-events: none; } .title-mobile.label { position: fixed; } .title-mobile button, .title-mobile a { color: var(--gray-dark-4); text-decoration: none; border: none; background: transparent; } .menu .align-left { display: flex; justify-content: space-between; align-items: center; height: 50px; } .submenu.list li, .submenu.listAlternate li { padding: 0; } .submenu.list li.title-mobile, .submenu.listAlternate li.title-mobile { padding: var(--p-4) 2rem; height: 50px; } .submenu.list li a { color: var(--gray-dark-10); padding: 1.315rem 0.3rem; } header .content-wrapper { display: none; position: absolute; top: 0; left: 0; height: 100%; } .content-models { justify-content: center; margin-top: 4rem; overflow-y: auto; height: 89%; width: 100%; padding: 1.5rem; gap: 3rem; } .menu .option.active + .content-wrapper { display: flex; animation: slide-In 1s forwards; margin: 0; padding: 0; height: 100%; } .submenu.tabs .option.active + .content-wrapper { display: flex; animation: slide-In 1s forwards; } .submenu.tabs .option.closing + .content-wrapper { display: flex; animation: slide-Out 1s forwards; } .card-wrapper { padding: 0; max-height: 100%; } .card-wrapper .footer-links li a { font-size: 0.8rem; } .card-wrapper .model-area img { width: 100%; max-width: var(--models-card-image-width); } .card-wrapper p, .card-wrapper p.text-bold { font-size: var(--text-sm); } .icon_marks_mobile { width: 100%; display: flex; } .icon_marks_mobile > svg { width: 100%; } body:has(.menu-wrapper.show) { overflow: hidden; } .header-wrapper:has(.search-wrapper.is-inline.form-search) .logotipo { display: none; } .header-wrapper:has(.search-wrapper.is-inline.form-search) .left-wrapper { flex: 0 0 auto; width: auto; } .search-wrapper.is-inline { position: relative; flex: 0 0 auto; width: auto; min-width: 0; } .search-wrapper.is-inline .icon-search svg { width: 33px; } .search-wrapper.is-inline.form-search { position: relative; width: 100%; max-width: 100%; flex: 1 1 100%; z-index: auto; background: transparent; } .search-wrapper.is-inline.form-search .form-search { position: relative; width: 100%; height: var(--search-form-height); border-bottom: 2px solid var(--gray-dark-1); display: flex; align-items: center; min-width: 0; } .search-wrapper.is-inline.form-search input#searchInput { flex: 1 1 auto; min-width: 0; width: 0; padding: 0 var(--search-input-padding-x); font-size: 14px; } .search-wrapper.is-inline.form-search .close-search { width: 36px; height: 36px; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: none; cursor: pointer; font-size: 20px; } .search-wrapper.is-inline.form-search .close-search svg { width: 18px; height: 18px; display: block; } .search-wrapper.is-inline.form-search .icon_search__bg { width: 36px; height: 36px; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; padding: 0; } .search-wrapper.is-inline.form-search .icon_search__bg svg { width: 28px; height: 28px; } .search-wrapper.is-inline.form-search .search-autocomplete { position: absolute; top: calc(100% + 6px); left: 0; right: 0; width: 100%; max-width: 100%; border-radius: 4px; max-height: 280px; z-index: 999999; } body.mobile-search-open header.header-wrapper { position: sticky; top: 0; z-index: 999999; padding: 0; } body.mobile-search-open .left-wrapper, body.mobile-search-open .menu-wrapper, body.mobile-search-open .logotipo, body.mobile-search-open #link-logo, body.mobile-search-open .logo, body.mobile-search-open .language-switcher { display: none; } body.mobile-search-open .right-wrapper { width: 100%; flex: 1; padding-right: 0; justify-content: center; align-items: center; } body.mobile-search-open .search-wrapper { width: 100%; padding: 0; } body.mobile-search-open .search-wrapper.form-search { width: 100%; height: 50px; position: relative; display: flex; align-items: center; max-width: 100%; } body.mobile-search-open .search-wrapper .form-search { width: 100%; height: 50px; display: flex; align-items: center; background: #fff; border-bottom: 2px solid #000; } body.mobile-search-open .search-wrapper .form-search input#searchInput { width: 100%; height: 50px; border: none; outline: none; outline-offset: -2px; padding: 0 14px; font-size: 16px; background: transparent; } body.mobile-search-open .icon_search__bg, body.mobile-search-open .close-search { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; background: transparent; border: none; padding: 0; flex-shrink: 0; } body.mobile-search-open .search-wrapper.form-search .search-autocomplete { position: fixed; top: 50px; left: 0; right: 0; width: 100%; max-width: 100%; border-radius: 0; max-height: calc(100vh - 50px); overflow-y: auto; z-index: 1 !important; } .search-wrapper.icon .icon-search { width: 33px; } .language-switcher .dropdown-toggle { padding: 0 !important; } .language-switcher .dropdown-item, .language-switcher li { font-family: var(--font-family-1); } } /*Responsive - Mobile submenu exceptions*/ @media (max-width: 1155px) { .models-submenu .submenu.tabs.models-submenu__content { background: #fff !important; } .menu li:not(.models-submenu) > .submenu.list, .menu li:not(.models-submenu) > .submenu.listAlternate, .menu li:not(.models-submenu) > .submenu.tabs { background: var(--gray-dark-8) !important; align-items: stretch !important; justify-content: flex-start !important; } .menu li:not(.models-submenu) > .submenu.list, .menu li:not(.models-submenu) > .submenu.listAlternate { overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .menu li:not(.models-submenu) > .submenu.list ul, .menu li:not(.models-submenu) > .submenu.listAlternate ul { width: 100% !important; padding: 0 !important; margin: 0 !important; } .menu li:not(.models-submenu) > .submenu.list li, .menu li:not(.models-submenu) > .submenu.listAlternate li { width: 100% !important; padding: 0 !important; } .menu li:not(.models-submenu) > .submenu.list li a, .menu li:not(.models-submenu) > .submenu.listAlternate li a { display: flex !important; width: 100% !important; padding: 18px 20px !important; border-bottom: var(--panel-border-bottom) !important; color: var(--gray-dark-10) !important; font-size: var(--text-md) !important; font-family: var(--font-family-4); font-weight: var(--weight-normal); color: #373637; line-height: 1.2 !important; white-space: normal !important; } .menu li:not(.models-submenu) > .submenu .submenuTitle { display: none !important; } .menu li:not(.models-submenu) > .submenu .title-mobile { display: flex !important; position: sticky !important; top: 0 !important; z-index: 5 !important; } .menu .option.active + .submenu.tabs, .menu .option.active + .submenu.list, .menu .option.active + .submenu.listAlternate { animation: slide-In 1s forwards; } .menu .option.closing + .submenu.tabs, .menu .option.closing + .submenu.list, .menu .option.closing + .submenu.listAlternate { animation: slide-Out 1s forwards; } body.mobile-search-open .search-wrapper.form-search { position: relative !important; } body.mobile-search-open .search-wrapper.form-search .search-autocomplete { position: absolute !important; top: calc(100% + 6px) !important; left: 8px !important; right: 8px !important; width: auto !important; border-radius: 8px !important; max-height: 280px !important; z-index: 999999 !important; } } /*Responsive - 320px*/ @media (max-width: 320px) { .left-wrapper { gap: 8px; } .menu { background: var(--header-main-bg); } .menu .title-mobile { background: var(--brand-white); } .menu .title-mobile span { color: var(--gray-dark-10); font-size: var(--text-base); font-weight: var(--weight-bolder); text-transform: uppercase; } } /*Responsive - Banner*/ @media (max-width: 768px) { .banner_info > a { max-width: 32rem; } .banner_info > svg { width: 3.2rem; } #link-logo > img { width: 100px; height: 23px; } } @media (max-width: 576px) { #link-logo > img { height: 20px; } } @media (max-width: 670px) { .banner_info { padding: var(--p-2) var(--preheader-banner-padding-right); } } @media (max-width: 390px) { .banner_info { line-height: 1rem; font-size: var(--preheader-banner-text-size); padding: var(--p-2) 0.7rem; gap: var(--preheader-banner-gap); } } @media (max-width: 299px) { .banner_info > svg { width: 4.8rem; } } @media (min-width: 300px) and (max-width: 321px) { .banner_info > svg { width: 4.3rem; } } @media (min-width: 322px) and (max-width: 359px) { .banner_info > svg { width: 3.8rem; } } @media (min-width: 360px) and (max-width: 389px) { .banner_info > svg { width: 3.5rem; } } /*Responsive - card font*/ @media (min-width: 992px) and (max-width: 1200px) { .card-wrapper .footer-links li a { font-size: 0.5rem; } } /*Responsive - Models Desktop Height*/ @media (min-width: 1156px) { .submenu.tabs.models-submenu__content { position: absolute; height: auto; max-height: 85vh; overflow-y: auto; } } /*Responsive - Models Desktop Large*/ @media (min-width: 1200px) { .models-submenu .submenu.tabs.models-submenu__content { position: fixed !important; top: var(--header-bottom, 5.6rem); left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; height: calc(100vh - var(--header-bottom, 5.6rem)) !important; max-height: none !important; overflow-y: auto; overflow-x: hidden; background: var(--models-wrapper-bg); padding: 0; z-index: 999999; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .menu .option.active + .submenu.tabs.models-submenu__content { opacity: 1; visibility: visible; display: flex; } .models-submenu .models-mobile-header, .models-submenu .models-mobile-header--panel1, .models-submenu .models-mobile-header--panel2, .models-submenu__content .models-mobile-header { display: none; } .models-submenu .models-mobile-categories, .models-submenu__content .models-mobile-categories { display: none; } .models-submenu .models-tabs-wrapper, .models-submenu__content .models-tabs-wrapper { display: block; flex-shrink: 0; background: #f3f3f3; } .models-submenu .models-grid-wrapper, .models-submenu__content .models-grid-wrapper { display: block; flex: 1; overflow-y: auto; padding-bottom: 40px; } .models-tabs { gap: 24px; padding: 20px 0 0 0; border-bottom: 2px solid #373637; } .models-grid { padding: 30px var(--models-grid-padding-x); grid-template-columns: var(--models-grid-columns); } } /*Responsive - card font*/ @media (min-width: 1201px) { .card-wrapper .footer-links li a { font-size: 0.75rem; } .card-wrapper .footer-links { width: 96%; } } /*Responsive - Menu padding*/ @media (min-width: 1156px) and (max-width: 1500px) { .menu .option { padding: 0 1rem; } } @media (min-width: 1156px) and (max-width: 1280px) { .menu .option { padding: 0 0.7rem; font-size: 0.875rem; } } /*Responsive - Desktop XL*/ @media (min-width: 1400px) { .card-wrapper .footer-links { width: 100%; } .menu .content-wrapper { height: 90vh; padding: 0 10%; } .card-wrapper .footer-links li a::after { margin-left: 0.1rem; } .card-wrapper .footer-links li a:hover::after { margin-left: 0.3rem; } .models-grid { grid-template-columns: var(--models-grid-columns); } } /*Responsive - Models Grid*/ @media (max-width: 1400px) { .models-grid { grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 20px 16px; } } @media (max-width: 1100px) { .models-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); } } @media (max-width: 800px) { .models-grid { grid-template-columns: var(--models-grid-columns); } } @media (max-width: 520px) { .models-tabs { gap: 18px; padding: 0 16px; overflow-x: auto; justify-content: flex-start; } .models-grid { grid-template-columns: var(--models-grid-columns); padding: 0 var(--models-grid-padding-x); } .models-card { align-items: flex-start; } .models-card__img img { width: 180px; margin: 0 auto 12px; display: block; } } @media (min-width: 1850px) { .menu .content-wrapper { padding: 0 21%; } } /*Responsive - Models Mobile Panel*/ @media (max-width: 1199px) { .models-submenu .submenu.tabs.models-submenu__content { position: fixed; inset: 0; width: auto; height: auto; max-height: none; background: #fff; z-index: 999999; display: none; flex-direction: column; padding: 0; margin: 0; overflow-y: auto; } .models-submenu .option.active + .submenu.tabs.models-submenu__content { display: flex; } .models-tabs-wrapper { display: none; } .models-mobile-categories { display: block; width: 100%; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; background-color: var(--gray-dark-9); } .models-mobile-categories__list { list-style: none; margin: 0; padding: 0; } .models-mobile-category { width: 100%; text-align: left; padding: 18px 24px; border: 0; background: transparent; border-bottom: var(--border-sm) var(--gray-dark-8); font-size: var(--text-md); font-family: var(--font-family-4); color: #373637; font-weight: var(--weight-normal); text-transform: uppercase; cursor: pointer; } .models-mobile-category:hover, .models-mobile-category:active { background: rgba(0, 0, 0, 0.03); } .models-grid-wrapper { display: none; } .models-grid-wrapper.is-visible { display: block; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 100px; background-color: var(--gray-light-4); } .models-mobile-categories.is-hidden { display: none; } .models-submenu .models-mobile-header--panel1, .models-submenu .models-mobile-header--panel2 { display: none; } .models-submenu:not(.is-models-level2) .models-mobile-header--panel1 { display: flex; } .models-submenu.is-models-level2 .models-mobile-header--panel2 { display: flex; } .models-mobile-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; background: var(--brand-black); border-bottom: var(--menu-border-bottom); flex-shrink: 0; } .models-mobile-header__title { font-family: var(--panel-span-font-family); font-size: var(--panel-span-font-size); font-weight: var(--weight-bolder); text-transform: uppercase; color: var(--panel-span-color); } .models-mobile-header button { background: transparent; border: 0; padding: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .models-grid { grid-template-columns: repeat(2, 1fr); padding: 16px; gap: var(--models-grid-gap-row) 12px; } .models-card { padding: 10px; } .models-card__img img { width: 140px; max-width: 100%; margin: 0 auto 8px; } .models-card__brand { font-size: 0.75rem; } .models-card__name { font-size: 1.125rem; margin-bottom: 2px; } .models-card__price span { font-size: 0.875rem; } .models-card__links a, .models-card__link { font-size: 0.875rem; } .models-card__price { font-size: 10px; } .models-card__links { gap: 8px; margin-top: 6px; flex-wrap: wrap; } .models-card__link { font-size: 10px; } } /*Responsive - Models Tablet Grid*/ @media (min-width: 768px) and (max-width: 1199px) { .models-grid { grid-template-columns: repeat(3, 1fr); gap: var(--models-grid-gap-row); } .models-card__img img { width: 160px; } } /*Responsive - Models Small*/ @media (max-width: 480px) { .models-grid { grid-template-columns: 1fr; } .models-card__img img { width: 180px; } } /* =========================== ACCESSIBILITY =========================== */ /* Visually hidden (screen-reader only) */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Focus States --- */ .header-wrapper *:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; } .icon-menu:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; } .menu .option:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; } .close-menu-mobile:focus-visible, .go-back-mobile:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; } .icon-search:focus-visible, .icon_search__bg:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; } .search-wrapper.form-search .icon-search:focus-visible { outline: none; } .close-search:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; } .models-tab:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; } .models-mobile-category:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; } .language-switcher .dropdown-toggle:focus-visible { outline: 2px solid var(--outline-color); outline-offset: 2px; } .search-autocomplete__item:focus-visible { outline: 2px solid var(--outline-color); outline-offset: -2px; } /* --- Touch Targets (minimum 44x44px) --- */ .icon-menu { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; cursor: pointer; background: none; border: none; padding: 0; } .close-menu-mobile { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; } .go-back-mobile { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; } .icon-search { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; } .close-search { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .icon_search__bg { min-width: 44px; min-height: 44px; border: 0; } .models-tab { min-height: 44px; } .models-mobile-category { min-height: 44px; width: 100%; text-align: left; background: none; cursor: pointer; } .language-switcher .dropdown-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; } /* --- Reduced Motion --- */ @media (prefers-reduced-motion: reduce) { .menu-wrapper, .menu-wrapper *, .header-wrapper, .header-wrapper *, .search-wrapper, .search-wrapper * { animation-duration: 0.15s !important; animation-delay: 0s !important; transition-duration: 0.15s !important; transition-delay: 0s !important; } @keyframes slide-In { from { transform: translateX(-100%); } to { transform: translateX(0%); } } @keyframes slide-Out { from { transform: translateX(0%); } to { transform: translateX(-100%); } } @keyframes fade-In { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-Out { from { opacity: 1; } to { opacity: 0; } } } /* Desktop: Compact list submenu - left-aligned with nav item, right-aligned on overflow */ @media (min-width: 1156px) { .menu .option.active + .submenu.list { width: max-content; min-width: 16rem; left: 0; right: auto; } .menu .option.active + .submenu.list.align-right { left: auto; right: 0; } } /* Hide logo and preheader inside mobile panel */ @media (max-width: 1155px) { .menu-wrapper .preheader, .menu-wrapper .preheader-mobile, .menu .preheader, .menu .preheader-mobile { display: none !important; } .menu .logotipo, .menu-wrapper .logotipo, .menu .title-mobile #link-logo, .menu .title-mobile .logo, .menu .title-mobile img { display: none !important; } body:has(.menu-wrapper.show) .preheader, body:has(.menu-wrapper.show) .preheader-mobile { display: none !important; } } /* Mobile Panel: hide go-back in first panel, show in submenus only */ @media (max-width: 1155px) { .menu > .title-mobile .go-back-mobile { display: none !important; } } @media (max-width: 1155px) { .menu .title-mobile.align-left .go-back-mobile { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; } .menu .title-mobile.align-left .go-back-mobile svg path { fill: var(--brand-white); } } /* Mobile: Logo right-aligned, search & language hidden (360px - 768px) */ @media (max-width: 768px) { .logotipo { order: 3; } .right-wrapper { flex: 0 0 auto; padding-right: 0; } .search-wrapper, .language-switcher { display: none !important; } } /*Import footer*/ /* --- Inlined from: ./footer.css --- */ /* Import Component Variables here */ /* --- Inlined from: ./[branding]_components/footer.css --- */ :root { --footer-background-color: #141414; --footer-text-color: var(--brand-white); --footer-copyright-background-color: var(--brand-black); --footer-copyright-text-color: var(--gray-dark-9); } /* Tablet */ /* Mobile Devices */ @media (max-width: 768px) { :root { --footer-background-color: #141414; --footer-text-color: var(--brand-white); --footer-copyright-background-color: var(--brand-black); --footer-copyright-text-color: var(--brand-white); } } /* FOOTER */ footer { background-color: var(--footer-background-color); /*padding-top: var(--text-5xl);*/ padding-bottom: 0rem; margin-top: 0rem; border-top: var(--border-xs) var(--gray-dark-8, #E5E5E5); } .footer-content { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; background-color: var(--footer-background-color); padding: 2rem; /* margin-left: 2rem; */ } .footer-content .footer-content_herramientas .acordeon-cuerpo .acordeon .contenedorF .contenido > ul { list-style: none; display: flex; flex-direction: column; gap: 1rem; padding-left: 0; padding-right: 2rem; } .footer-content .footer-content_herramientas .acordeon-cuerpo .acordeon .contenedorF .etiqueta > h5 { font-family: var(--font-family-3); color: var(--footer-text-color); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-bolder); line-height: 1.44444rem; /* 144.444% */ letter-spacing: 0.04rem; } @media (max-width:768px) { .footer-content { flex-wrap: nowrap; flex-direction: column; padding: 0 1.5rem; gap: 0; } } .footer-content_herramientas { flex: 1 auto; max-width: 12rem; /* border-radius: 50%; */ } @media (max-width:768px) { .footer-content_herramientas { flex: 1 auto; max-width: 100%; margin-top: 0rem; } } .footer-content_legal { flex: 1 auto; max-width: 16.3rem; margin-left: 10px; } .footer-content_legal > h5 { color: var(--brand-white); font-family: var(--font-family-1); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-bolder); line-height: 1.44444rem; letter-spacing: 0.04rem; } .footer-content_modelos > ul, .footer-content_herramientas > ul, .footer-content_ayuda > ul, .footer-content_servicios > ul, .footer-content_legal > ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2rem; } .footer-content_modelos > ul > li > a, .footer-content_herramientas > ul > li > a, .footer-content_ayuda > ul > li > a, .footer-content_servicios > ul > li > a, .footer-content_legal > ul > li > a { text-decoration: none; color: var(--brand-white); font-family: var(--font-family-3); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-bolder); line-height: 1.22222rem; letter-spacing: 0.03556rem; display: flex; justify-content: center; align-items: center; gap: 1rem; } .footer-content_legal > ul > li { display: flex; } .footer-copyright { /*border-top: 1px solid var(--gray3);*/ padding: 0.5rem 5rem; color: var(--footer-copyright-text-color); background-color: var(--footer-copyright-background-color); display: flex; /* gap: 15rem; */ justify-content: space-between; font-family: var(--font-family-3); font-size: var(--text-xs); font-style: normal; font-weight: var(--weight-bolder); line-height: 1rem; /* 133.333% */ letter-spacing: 0.025rem; align-items: center; justify-content: space-between; min-height: 80px; } .footer_logo_copy { height: 2rem; } .footer-copyright .copyright { margin: 1rem 0; } @media (min-width:768px) and (max-width: 800px) { .footer-copyright { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 0 2rem !important; margin: 0 !important; min-height: 80px; border-top: 1px solid rgba(255, 255, 255, 0.2); width: 100%; } .footer-copyright > img { margin-top: 0 !important; } .footer-copyright .copyright { text-align: left !important; padding: 0 !important; margin: 0 !important; } .footer-content_legal { padding-bottom: 2rem; } } /* .footer-copyright p { padding-left: 6.5rem; padding-top: .5rem; } */ @media (max-width:768px) { .footer-copyright p { padding-left: 0rem; padding-top: .5rem; margin-bottom: -1rem; } } @media (max-width:768px) { .footer-copyright .copyright { margin-top: 1rem; margin-bottom: 3rem; text-align: center; padding: 0 3rem 2rem 3rem; font-size: 0.75rem; color: var(--gray-light-4); } .footer-copyright { margin-top: 3rem; } } .footer-content .footer-content_herramientas .acordeon-cuerpo .acordeon .contenedorF .contenido > ul > li > a { text-decoration: none; color: var(--footer-text-color); font-family: var(--font-family-4); font-size: var(--text-base); font-style: var(--leading-normal); font-weight: var(--weight-normal); line-height: 1.375rem; } @media(max-width:422px) { .footer-copyright { padding: 24px 12px; align-items: center; flex-direction: column-reverse; margin-top: 3rem; height: 116px; justify-content: flex-end; } } @media (min-width: 769px) and (max-width: 863px) { .footer-content { justify-content: initial; } } @media (max-width: 768px) { footer { padding-top: .5rem; } .footer-content_herramientas { width: 100%; } .footer-content .footer-content_herramientas .acordeon-cuerpo .acordeon .contenedorF.activa .contenido > ul { list-style: none; padding: 0; margin: 0; } .footer-content .footer-content_herramientas .acordeon-cuerpo .acordeon .contenedorF.activa .contenido > ul > li > a { text-decoration: none; color: var(--gray-dark-3); font-family: var(--font-family-1); font-size: var(--text-base); font-style: normal; font-weight: var(--weight-normal); line-height: 26px; } .acordeon { width: 100%; /* margin: 90px auto; */ color: gray; padding: 0; } /**************/ .acordeon .contenedorF { position: relative; margin: 10px 10px; } /* Posiciona las etiquetas en relación con el contenedor. Añade relleno en la parte superior e inferior y aumenta el tamaño de la fuente. También hace que su cursor sea un puntero */ .acordeon .etiqueta { position: relative; padding: 10px 0; font-size: 30px; color: var(--gray-light-1); cursor: pointer; border-bottom: 1px solid var(--gray-dark-8); } /* H5 modificado por margin´s implicitos desde Bootstrap */ .acordeon .etiqueta h5 { margin-bottom: 0rem; font-size: 1rem !important; } /**************/ /* Posiciona el signo más a 5px de la derecha. Lo centra utilizando la propiedad transform. */ .acordeon .etiqueta::before { content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2246%22%20height%3D%2246%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%20fill%3D%22%23fff%22%20class%3D%22bi%20bi-plus%22%3E%3Cpath%20d%3D%22M8%204a.5.5%200%200%201%20.5.5v3h3a.5.5%200%200%201%200%201h-3v3a.5.5%200%200%201-1%200v-3h-3a.5.5%200%200%201%200-1h3v-3A.5.5%200%200%201%208%204z%22/%3E%3C/svg%3E"); /* color: gray; */ position: absolute; top: 50%; right: 0; font-size: 30px; transform: translateY(-50%); } /* Oculta el contenido (altura: 0), disminuye el tamaño de la fuente, justifica el texto y añade la transición */ .acordeon .contenido { position: relative; /* background: var(--gray-dark-7); */ height: 0; font-size: 20px; text-align: justify; width: 100%; overflow: hidden; transition: 0.5s; } /* Añade una línea horizontal entre los contenidos */ .acordeon hr { width: 100; margin-left: 0; border: 1px solid grey; } /* Muestra la parte de contenido cuando está activa. Establece la altura */ .acordeon .contenedorF.activa .contenido { height: auto; } /* Cambia de signo positivo a negativo una vez activado */ .acordeon .contenedorF.activa .etiqueta::before { content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20height%3D%2246%22%20width%3D%2246%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2050%2050%22%20fill%3D%22%23fff%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M40%2023.99H10a1%201%200%201%200%200%202h30a1%201%200%201%200%200-2z%22/%3E%3C/svg%3E"); font-size: 30px; } } /* Mobile: push footer above the fixed quick action bar (56px tall) */ @media (max-width: 575.98px) { footer { padding-bottom: 56px; } /* When quick action is hidden, footer sits flush at page bottom */ body:has(.quick-action-menu[style*="display: none"]) footer, body:has(.quick-action-menu[style*="display:none"]) footer, body:has(.quick-action-menu[hidden]) footer { padding-bottom: 0; } } /* FONT FAMILY */ @font-face { font-family: Montserrat-Bold; src: url("../fonts/Montserrat-Bold.ttf?v=oWokDNg0xkzk9pD9H8iKP-ilqeE"); font-display: swap; } @font-face { font-family: Montserrat-Regular; src: url("../fonts/Montserrat-Regular.ttf?v=oWokDNg0xkzk9pD9H8iKP-ilqeE"); font-display: swap; } @font-face { font-family: SourceSansPro-Bold; src: url("../fonts/SourceSansPro-Bold.ttf?v=oWokDNg0xkzk9pD9H8iKP-ilqeE"); font-display: swap; } @font-face { font-family: SourceSansPro-Regular; src: url("../fonts/SourceSansPro-Regular.ttf?v=oWokDNg0xkzk9pD9H8iKP-ilqeE"); font-display: swap; } @font-face { font-family: SourceSansPro-SemiBold; src: url("../fonts/SourceSansPro-SemiBold.ttf?v=oWokDNg0xkzk9pD9H8iKP-ilqeE"); font-display: swap; } /* END FONT FAMILY */ :root { /*Colors*/ /*Primary*/ --brand: #D70C19; --brand-dark: #b30a14; --brand-light: #f7c8c6; --brand-white: #ffffff; --brand-disabled: #ffccc5; --brand-hover: #18bde6; --brand-black: #000000; /*Secondary*/ /*Gray*/ --gray-dark-11: #222222; --gray-dark-10: #191919; --gray-dark-9: #f1f1f1; --gray-dark-8: #e5e5e5; --gray-dark-7: #cccccc; --gray-dark-6: #b3b3b3; --gray-dark-5: #9a9a9a; --gray-dark-4: #838383; --gray-dark-3: #6c6c6c; --gray-dark-2: #565656; --gray-dark-1: #414141; --gray-dark: #000000; --gray-light-1: #ffffff; --gray-light-2: #f2f2f2; --gray-light-3: #e5e5e5; --gray-light-4: #f1f1f1; --gray-light-5: #666666; --gray-light-6: #969696; /*Alerts*/ --alert-error-main: #a32016; --alert-error-light: #e9cac7; --alert-success-email: #087f23; --alert-main: #f4b840; --alert-information-main: #2a7fd3; --alert-information-light: #d3e5ea; --alert-information-blue: #e7f1fa; /* Pagination */ --gray-pagination: #b2b2b2; /* Hover Effects */ --hover-dark: #00233a; /* Fonts */ --font-family-1: "Montserrat-Bold"; --font-family-2: "Montserrat-Regular"; --font-family-3: "SourceSansPro-Bold"; --font-family-4: "SourceSansPro-Regular"; --font-family-5: "SourceSansPro-SemiBold"; /* Font sizes*/ --text-6xl: 3rem; --text-5xl: 2.5rem; --text-4xl: 2.125rem; --text-3xl: 1.875rem; --text-2xl: 1.75rem; --text-xl: 1.5rem; --text-lg: 1.25rem; --text-md: 1.125rem; --text-base: 1rem; --text-sm: 0.875rem; --text-xs: 0.75rem; /* Font weights*/ --weight-extra-bold: 800; --weight-bolder: 700; --weight-bold: 600; --weight-semibold: 500; --weight-normal: 400; --weight-semilight: 300; --weight-light: 200; --weight-lighter: 100; /* Line Heights */ --leading-normal: normal; /* Borders */ --border-xlg: 12px solid; --border-lg: 6px solid; --border-md: 4px solid; --border-sm: 2px solid; --border-xs: 1px solid; /* Padding */ --p-0: 0rem; --p-0\.5: 0.125rem; --p-1: 0.25rem; --p-1\.5: 0.375rem; --p-2: 0.5rem; --p-3: 0.75rem; --p-3\.5: 0.875rem; --p-4: 1rem; --p-4\.5: 1.5rem; --p-4\.6: 1.975rem; /* Layers */ --aside-model-layer: 9; } /*FONT FAMILIES*/ .title-1 { font-family: var(--font-family-1); font-size: var(--text-6xl); } .title-2 { font-family: var(--font-family-1); font-size: var(--text-5xl); line-height: 1; } .title-3 { font-family: var(--font-family-1); font-size: var(--text-4xl); line-height: 1; } .title-4 { font-family: var(--font-family-1); font-size: var(--text-2xl); line-height: 1; } .title-5 { font-family: var(--font-family-1); font-size: var(--text-xl); line-height: 1; } .title-6 { font-family: var(--font-family-1); font-size: var(--text-base); line-height: 1; } .ta-r { text-align: right; } /*BODY(Reset) & MAIN STYLES*/ body { margin: 0; padding: 0; border: 0; } /* Styles for captcha v2 */ .captcha-v2-container { display: flex; justify-content: center; padding: 1rem; } /*Wrapper the text (Truncated in 3 lines)*/ .truncated-text-3l { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* number of lines to show */ /* line-height: X; */ /* fallback */ /*max-height: X * 3;*/ /* fallback */ } /* HEADER */ .social-media { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .d-flex.gap-3 a { text-decoration: none; } .social-media > a { margin: 0 0.5rem; } .grecaptcha-badge { z-index: 100 !important; bottom: 90px !important; } /* Customizing the vertical scrollbar */ body * ::-webkit-scrollbar { width: 6px; height: 6px; } body * { scrollbar-width: thin; } ::-webkit-scrollbar-thumb { background-color: #8888888a; /* Scroll thumb color */ border-radius: 5px; /* Rounded corners of the thumb */ } ::-webkit-scrollbar-track { background-color: #f2f2f2; /* Background color of the scrollbar track */ } /* Customizing the horizontal scrollbar */ ::-webkit-scrollbar-horizontal { height: 5px; /* Scrollbar height for horizontal scrollbar */ } ::-webkit-scrollbar-thumb:horizontal { background-color: #888; /* Color of the horizontal scroll thumb */ border-radius: 5px; /* Rounded corners of the horizontal thumb */ } ::-webkit-scrollbar-track:horizontal { background-color: #f2f2f2; /* Background color of the horizontal scrollbar track */ } @media (max-width: 576px) { } /* Medium devices (tablets, 768px and up) */ @media (max-width: 768px) { :root { /* Font sizes*/ --text-5xl: 1.625rem; --text-5xl: 1.5rem; --text-4xl: 1.375rem; --text-2xl: 1.125rem; --text-xl: 1.125rem; --text-base: 1.125rem; --text-base: 1rem; --text-base: 0.875rem; --text-sm: 0.75rem; --text-xs: 0.65rem; /* CAUTION:--text-xs is not found in branding figma */ } } /* Large devices (desktops, 992px and up) */ @media (max-width: 992px) { } /* X-Large devices (large desktops, 1200px and up) */ @media (max-width: 1200px) { } /* XX-Large devices (larger desktops, 1400px and up) */ @media (max-width: 1400px) { } .title { color: var(--gray-dark); font-family: var(--font-family-1); font-size: var(--text-4xl); font-style: normal; font-weight: var(--weight-normal); line-height: normal; text-transform: uppercase; } .title-white { color: var(--brand-white); font-family: var(--font-family-1); font-size: var(--text-4xl); font-style: normal; font-weight: var(--weight-normal); line-height: normal; text-transform: uppercase; } .max-w { max-width: 1920px; margin-right: auto; margin-left: auto; }