/* ============================================================================ Hyundai Aftersales — Winter campaign 2026/27 Page: /oszi-teli-szervizajanlatok/ (template: page-oszi-teli-szervizajanlatok.twig) Ported from docs/01_Landingpage/Landingpage_HME-Winter-2026/styles.css (HME source). Every rule below the reset block is the source stylesheet, unchanged except: - every selector prefixed with `#content .eclick-campaign-winter2026` - `:root` / `body` rules folded onto the wrapper - the source @font-face block dropped: the theme already ships these faces as HyundaiHead / HyundaiText (src/sass/common/fonts.scss), so "HyundaiSansHead" -> HyundaiHead and "HyundaiSansText" -> HyundaiText. `font-weight:bold` -> 600, the heaviest HyundaiText face the theme ships. - url("img/...") -> url("../../vehicle-files/winter2026/img/...") REM values are NOT converted: this source assumes the browser default 16px root and hyundai.hu's is also 16px. (The 10px note in CLAUDE.md is about the vehicle-page sources, which set their own root size — it does not apply here.) The source page ships bootstrap-reboot.min.css, which we do not load. The reset block below replaces the parts of reboot the layout actually depends on, and at the same time out-specifies the site's own `#content h1..h6 / p / ul` typography (1,1,1 beats 1,0,1). ============================================================================ */ #content .eclick-campaign-winter2026 { /* the site header is position:fixed, --header-height 83px at every breakpoint */ padding-top: var(--header-height, 83px); background-color: #fff; } #content .eclick-campaign-winter2026 *, #content .eclick-campaign-winter2026 *::before, #content .eclick-campaign-winter2026 *::after { box-sizing: border-box; } #content .eclick-campaign-winter2026 h1, #content .eclick-campaign-winter2026 h2, #content .eclick-campaign-winter2026 h3, #content .eclick-campaign-winter2026 h4, #content .eclick-campaign-winter2026 h5, #content .eclick-campaign-winter2026 h6 { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; } #content .eclick-campaign-winter2026 p { margin: 0 0 1rem; } #content .eclick-campaign-winter2026 ul, #content .eclick-campaign-winter2026 ol { margin: 0 0 1rem; padding-left: 2rem; line-height: inherit; } #content .eclick-campaign-winter2026 figure { margin: 0 0 1rem; } #content .eclick-campaign-winter2026 img { max-width: 100%; vertical-align: middle; border-style: none; } #content .eclick-campaign-winter2026 button { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: 1.15; margin: 0; text-transform: none; -webkit-appearance: button; appearance: button; } #content .eclick-campaign-winter2026 sub, #content .eclick-campaign-winter2026 sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } #content .eclick-campaign-winter2026 sup { top: -0.5em; } #content .eclick-campaign-winter2026 sub { bottom: -0.25em; } /* ========================================================================== HME source stylesheet, scoped ========================================================================== */ #content .eclick-campaign-winter2026 { --element-white-space: 3.125rem; --dark-white: #f6f3f2; --key-color: #002c5f; --lightblue: #33b9d9; --light-gray: #ebe5df; --dots-color: var(--dark-white); --dots-color-active: #E4DCD3 } @media(min-width: 600px) { #content .eclick-campaign-winter2026 { --element-white-space: 6.25rem } } #content .eclick-campaign-winter2026 .container { width:100%; max-width:1150px; margin:0 auto; padding:0 15px } #content .eclick-campaign-winter2026 .section { padding:var(--element-white-space) 0 } #content .eclick-campaign-winter2026 .section--colored { background-color:var(--dark-white) } #content .eclick-campaign-winter2026 .section--white { padding:0; background-color:#fff } #content .eclick-campaign-winter2026 .section--colored .article.article--group,#content .eclick-campaign-winter2026 .section--colored .article.showroom { background-color:#fff } #content .eclick-campaign-winter2026 .section--colored .tab-navigation .tab-link { border-color:var(--dark-white) } #content .eclick-campaign-winter2026 { font-family:HyundaiText,sans-serif; font-size:16px; letter-spacing:.03em; line-height:1.3 } #content .eclick-campaign-winter2026 .headline { font-weight:500; font-family:HyundaiHead,sans-serif; line-height:1.1; text-align:center } #content .eclick-campaign-winter2026 .headline--small { font-size:1.875rem; margin-bottom:1.875rem } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .headline--small { margin-inline:auto } } #content .eclick-campaign-winter2026 .headline--module { margin-bottom:1rem; font-size:1.5rem } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .headline--module { text-align:left; margin-bottom:1.5rem; font-size:1.875rem } } #content .eclick-campaign-winter2026 .headline--module small { font-size:1.1rem; display:block; line-height:1.3; font-weight:500 } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .headline--module small { font-size:1.25rem } } #content .eclick-campaign-winter2026 .headline--section { margin:var(--element-white-space) auto; font-size:2.2rem } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .headline--section { font-size:3rem } } #content .eclick-campaign-winter2026 .headline--section.headline--first { margin-top:0 } #content .eclick-campaign-winter2026 .mini-headline { font-weight:400; margin-bottom:1rem } #content .eclick-campaign-winter2026 .service-list-wrapper { display:flex; flex-direction:column; align-content:flex-start; align-items:flex-start } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .service-list-wrapper { flex-direction:row; gap:3rem } } #content .eclick-campaign-winter2026 .service-list-wrapper .service-list { padding-left:1rem; margin:0 } #content .eclick-campaign-winter2026 .paragraph { line-height:1.3 } #content .eclick-campaign-winter2026 .paragraph--highlighted { line-height:1.3; font-size:1.25rem; text-align:center } #content .eclick-campaign-winter2026 .section:has(+ .section--legal-footer) { padding-bottom:0 } #content .eclick-campaign-winter2026 .section--legal-footer { padding-top:0; padding-bottom:3.125rem } #content .eclick-campaign-winter2026 .legal-footer__divider { width:100%; height:1px; border:none; background-color:#707070; margin:30px 0 } #content .eclick-campaign-winter2026 .paragraph--legal-footer { line-height:1.3 } #content .eclick-campaign-winter2026 .paragraph--legal-footer sup { top:-0.4em; font-size:65% } #content .eclick-campaign-winter2026 .article { position:relative } #content .eclick-campaign-winter2026 .article:not(:last-child) { margin-bottom:var(--element-white-space) } #content .eclick-campaign-winter2026 .article--winter-panel { background:var(--dark-white); padding:5rem 0; margin-top:5rem; width:100% } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article.article--winter-panel { padding:5rem 0 } #content .eclick-campaign-winter2026 .article.article--winter-panel>.container { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start } #content .eclick-campaign-winter2026 .article.article--winter-panel .article__content--left { order:1; width:100%; max-width:none; flex:none; margin:0; text-align:left } #content .eclick-campaign-winter2026 .article.article--winter-panel .article__image--right { order:2; width:100%; max-width:none; flex:none; margin:0; aspect-ratio:600/456; height:auto; object-fit:cover; display:block } } #content .eclick-campaign-winter2026 .article--white-panel { background:#fff; padding:5rem 0; margin-top:0; width:100% } #content .eclick-campaign-winter2026 .article--white-panel>.container+.container { margin-top:var(--element-white-space) } #content .eclick-campaign-winter2026 .article--white-panel>.container:first-child .headline--section { margin-bottom:0 } @media(max-width:599px) { #content .eclick-campaign-winter2026 .article--white-panel>.container:last-child { display:flex; flex-direction:column } #content .eclick-campaign-winter2026 .article--white-panel>.container:last-child .article__image--right { order:1; margin-bottom:2rem } #content .eclick-campaign-winter2026 .article--white-panel>.container:last-child .article__content--left { order:2 } } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article.article--white-panel { display:block } #content .eclick-campaign-winter2026 .article.article--white-panel>.container { display:flex; align-items:flex-start } } #content .eclick-campaign-winter2026 .article--slider-panel { background:var(--dark-white); padding:2.5rem 2rem 2.2rem; display:block; margin:0 } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article--slider-panel { padding:3.125rem 0 } } #content .eclick-campaign-winter2026 .article--slider-panel .article__slider-layout { display:block } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article--slider-panel .article__slider-layout { display:flex; align-items:flex-start } } #content .eclick-campaign-winter2026 .article--slider-panel .article__image-slider { position:relative; width:100%; margin-bottom:1rem } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article--slider-panel .article__image-slider { width:60%; max-width:544px; margin-left:1.5625rem; margin-right:1.5rem; margin-bottom:0; flex:0 0 auto } } #content .eclick-campaign-winter2026 .article--slider-panel .article__image-slider__slides img { display:none; width:100%; height:auto } #content .eclick-campaign-winter2026 .article--slider-panel .article__image-slider__slides img.active { display:block } #content .eclick-campaign-winter2026 .article--slider-panel .article__content { width:100% } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article--slider-panel .article__content { width:50%; padding:5% 5% 0 0; margin-left:1.5rem } } #content .eclick-campaign-winter2026 .article--slider-panel .article__image-slider .blaze-pagination { gap:9px; align-items:center } #content .eclick-campaign-winter2026 .article--slider-panel .article__image-slider .blaze-pagination button { width:18px; height:18px; min-width:18px; min-height:18px; padding:0; flex:0 0 18px; background-color:#fff; border:1px solid transparent; box-sizing:border-box; border-radius:50% } #content .eclick-campaign-winter2026 .article--slider-panel .article__image-slider .blaze-pagination button.active { background-color:#00aad2; border-color:#fff } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article { display:flex; align-items:flex-start } #content .eclick-campaign-winter2026 .article.article--slider-panel { display:block } } #content .eclick-campaign-winter2026 .article--boxed { background:#fff } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article--boxed { display:flex; align-items:stretch } } #content .eclick-campaign-winter2026 .article--boxed .article__image { margin:0; object-fit:cover } @media(min-width: 1030px) { #content .eclick-campaign-winter2026 .article--boxed .article__image { max-width:100%; width:auto } } #content .eclick-campaign-winter2026 .article--boxed .article__content { padding:1rem } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article--boxed .article__content { padding:1.875rem } } #content .eclick-campaign-winter2026 .article__image,#content .eclick-campaign-winter2026 .article__image-slider { max-width:100%; height:auto; margin-bottom:1rem } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article__image,#content .eclick-campaign-winter2026 .article__image-slider { width:65%; margin-bottom:0; flex:0 0 auto; max-width:var(--_img-size, 600px) } } #content .eclick-campaign-winter2026 .article__image--left,#content .eclick-campaign-winter2026 .article__image-slider--left { order:1 } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article__image--left,#content .eclick-campaign-winter2026 .article__image-slider--left { margin-right:1.5rem } } #content .eclick-campaign-winter2026 .article__image--right,#content .eclick-campaign-winter2026 .article__image-slider--right { order:2 } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article__image--right,#content .eclick-campaign-winter2026 .article__image-slider--right { margin-left:1.5rem } } #content .eclick-campaign-winter2026 .article__image .blaze-pagination,#content .eclick-campaign-winter2026 .article__image-slider .blaze-pagination { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:6px } #content .eclick-campaign-winter2026 .article__image .blaze-pagination button,#content .eclick-campaign-winter2026 .article__image-slider .blaze-pagination button { -webkit-appearance:none; height:18px; width:18px; min-width:18px; min-height:18px; padding:0; flex:0 0 18px; background-color:var(--dots-color); border-radius:50%; font-size:0; line-height:0; overflow:hidden; border:0 } #content .eclick-campaign-winter2026 .article__image .blaze-pagination button.active,#content .eclick-campaign-winter2026 .article__image-slider .blaze-pagination button.active { background-color:var(--dots-color-active) } #content .eclick-campaign-winter2026 .article__content { flex:0 1 auto } @media(max-width: 599px) { #content .eclick-campaign-winter2026 .article__content { text-align:center; width:100% } } #content .eclick-campaign-winter2026 .article__content--left { order:1 } #content .eclick-campaign-winter2026 .article__content--right { order:2 } #content .eclick-campaign-winter2026 .article__content ul { padding-left:1rem; text-align:left } #content .eclick-campaign-winter2026 .article__content ul:last-child { margin-bottom:0 } #content .eclick-campaign-winter2026 .article--group { background:var(--dark-white); padding:2.5rem 2rem 2.2rem; display:block; margin-left:-15px; margin-right:-15px } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article--group { margin-left:3.125rem; margin-right:auto; padding:3.125rem 0 } } #content .eclick-campaign-winter2026 .article--group .article__content-wrapper { display:none } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article--group .article__content-wrapper { align-items:flex-start; align-content:space-between } } #content .eclick-campaign-winter2026 .article--group .article__content-wrapper.active { display:block } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article--group .article__content-wrapper.active { display:flex } } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article--group .article__content-wrapper .article__image,#content .eclick-campaign-winter2026 .article--group .article__content-wrapper .article__image-slider { margin-left:-3.125rem; width:60%; max-width:544px } } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article--group .article__content-wrapper .article__content { width:50%; padding:5% 5% 0 0; margin-left:1.5rem } } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article--group.article--reverse { margin-right:3.125rem; margin-left:auto } } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article--group.article--reverse .article__content-wrapper .article__image { margin-right:-3.125rem; margin-left:auto; width:60%; max-width:544px; order:2 } } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .article--group.article--reverse .article__content-wrapper .article__content { width:50%; padding:5% 0 0 5%; margin-left:auto; margin-right:1.5rem; order:1 } } #content .eclick-campaign-winter2026 .information { text-align:left; margin:var(--element-white-space) 0 } #content .eclick-campaign-winter2026 .information .paragraph { line-height:1.3; font-size:1.25rem } #content .eclick-campaign-winter2026 .information .list { padding-left:1.5rem; line-height:1.3; font-size:1.25rem } #content .eclick-campaign-winter2026 .header-slider .slide-wrapper { position:relative; display:flex; justify-content:center; align-items:flex-start } #content .eclick-campaign-winter2026 .header-slider .slide-wrapper.slide-wrapper--background { background-size:cover; background-repeat:no-repeat; padding-bottom:50px } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .header-slider .slide-wrapper.slide-wrapper--background { padding-bottom:100px } } #content .eclick-campaign-winter2026 .header-slider .slide__media { width:100%; height:auto; position:relative; z-index:1 } #content .eclick-campaign-winter2026 .header-slider .slide__gradient { position:absolute; left:0; right:0; bottom:0; height:58.3%; mix-blend-mode:multiply; opacity:.6513; background:linear-gradient(180deg,rgba(255,255,255,0) 18.114%,#000 84.172%); z-index:2; pointer-events:none } #content .eclick-campaign-winter2026 .header-slider .slide__logo { position:absolute; left:6%; top:13.2%; width:20.4%; max-width:392px; height:auto; z-index:3 } @media(max-width:599px) { #content .eclick-campaign-winter2026 .header-slider .slide__logo { left:15px; top:20px; width:44%; max-width:224px } } #content .eclick-campaign-winter2026 .header-slider .slide__media.slider__image-with-bg { max-width:1640px } #content .eclick-campaign-winter2026 .header-slider .headline { position:absolute; color:#fff; font-size:1.3rem; text-align:left; max-width:1700px; bottom:5px; left:15px; right:15px; z-index:1000; width:fit-content; line-height:1.1 } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .header-slider .headline { font-size:2.2rem; left:55px; bottom:30px } } @media(min-width: 1100px) { #content .eclick-campaign-winter2026 .header-slider .headline { font-size:3.375rem } } @media(min-width: 1700px) { #content .eclick-campaign-winter2026 .header-slider .headline { font-size:5rem; left:110px } } #content .eclick-campaign-winter2026 .header-slider .headline--keyvisual { font-weight:500; font-size:clamp(1.5rem,4.17vw,5rem); letter-spacing:.02em; line-height:1; bottom:7.5%; left:5.86%; right:auto; max-width:90%; z-index:4 } @media(max-width:599px) { #content .eclick-campaign-winter2026 .header-slider .headline--keyvisual { font-size:1.3rem; left:15px; bottom:15px; letter-spacing:.03em } } #content .eclick-campaign-winter2026 .tile-grid { --_col-max-width: 558px; display:grid; grid-template-columns:1fr; gap:4px; margin-bottom:1rem } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .tile-grid { margin-bottom:1.5rem; grid-template-columns:1fr 1fr } } #content .eclick-campaign-winter2026 .tile-grid .tile { position:relative; margin:0 } #content .eclick-campaign-winter2026 .tile-grid .tile img { max-width:100%; height:auto } #content .eclick-campaign-winter2026 .tile-grid .tile figcaption { position:absolute; top:1rem; left:1rem; color:#fff; font-family:HyundaiText,sans-serif; font-size:1.125rem; font-weight:normal; line-height:1.3 } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .tile-grid .tile figcaption { top:1.5rem; left:1.5rem } } #content .eclick-campaign-winter2026 .jumbotron { background-color:#fff; padding:calc(var(--element-white-space)/2) } #content .eclick-campaign-winter2026 .jumbotron:not(:last-child) { margin-bottom:var(--element-white-space) } #content .eclick-campaign-winter2026 .jumbotron__image { max-width:100%; height:auto; display:block } @media(min-width: 1050px) { #content .eclick-campaign-winter2026 .jumbotron__image { margin-inline:auto } } #content .eclick-campaign-winter2026 .partner-logo-cluster { display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:1rem 2rem } #content .eclick-campaign-winter2026 .partner-logo-cluster img { flex:0 0 auto; max-width:100% } #content .eclick-campaign-winter2026 .section__mood { position:relative; margin:var(--element-white-space) 0 } #content .eclick-campaign-winter2026 .section__mood--bottom-gradient::after { content:""; display:block; position:absolute; z-index:1; inset:40% 0 0; background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 100%) } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .section__mood--bottom-gradient::after { top:70% } } #content .eclick-campaign-winter2026 .section__mood:first-child { margin-top:0 } #content .eclick-campaign-winter2026 .section__mood img,#content .eclick-campaign-winter2026 .section__mood video { width:100%; height:auto } #content .eclick-campaign-winter2026 .section__mood figcaption { position:absolute; font-family:HyundaiText,sans-serif; font-weight:normal; font-size:24px; bottom:15px; left:15px; color:#fff; z-index:5 } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .section__mood figcaption { bottom:30px; left:30px; font-size:44px } } #content .eclick-campaign-winter2026 .showroom { padding:1rem; background-color:var(--dark-white); display:flex; flex-direction:column; gap:1rem } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .showroom { display:grid; grid-template-columns:370px 1fr; grid-template-rows:auto; padding:2.375rem; gap:1.8rem 1.3rem } } #content .eclick-campaign-winter2026 .showroom .article__content .paragraph:last-child { margin-bottom:0 } #content .eclick-campaign-winter2026 .showroom__image img { display:none; width:100%; height:auto } #content .eclick-campaign-winter2026 .showroom__image img.active { display:block } #content .eclick-campaign-winter2026 .showroom__options { grid-row:2; display:flex; gap:1rem 1.5rem; flex-wrap:wrap; justify-content:space-evenly } #content .eclick-campaign-winter2026 .showroom__options__option { --_checkmark-size: 1.25rem; position:relative; font-size:12px; display:flex; flex-direction:column; align-items:center; cursor:pointer; flex:0; margin:0 } #content .eclick-campaign-winter2026 .showroom__options__option input { display:none } #content .eclick-campaign-winter2026 .showroom__options__option::after { content:url("../../vehicle-files/winter2026/img/checkmark.svg"); display:block; position:absolute; right:calc(var(--_checkmark-size)*-0.5); top:calc(var(--_checkmark-size)*-0.5); width:var(--_checkmark-size); height:var(--_checkmark-size); opacity:0; transition:opacity .25s linear } #content .eclick-campaign-winter2026 .showroom__options__option:has(input:checked)::after { opacity:1 } #content .eclick-campaign-winter2026 .showroom__options__option .option__image { display:block; flex:0 } #content .eclick-campaign-winter2026 .showroom.options-left .showroom__image { grid-row:1/span 2 } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .showroom.options-left .showroom__options { grid-column:1 } } #content .eclick-campaign-winter2026 .showroom.options-right .article__content { grid-row:1/span 2 } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .showroom.options-right .showroom__options { grid-column:2 } } #content .eclick-campaign-winter2026 .switch-jumbotron { --_content-padding: 1.125rem; position:relative; width:100%; padding:var(--_content-padding) var(--_content-padding) 300px } @media(max-width:767px) { #content .eclick-campaign-winter2026 .switch-jumbotron { padding-top:2.5rem } } #content .eclick-campaign-winter2026 .switch-jumbotron:not(:last-child) { margin-bottom:var(--element-white-space) } @media(min-width: 768px) { #content .eclick-campaign-winter2026 .switch-jumbotron { --_content-padding: 3.125rem; height:508px } } #content .eclick-campaign-winter2026 .switch-jumbotron .option__image { position:absolute; inset:0; display:block; object-fit:cover; width:100%; height:100% } @media(max-width:767px) { #content .eclick-campaign-winter2026 .switch-jumbotron .option__image { object-position:right center } } #content .eclick-campaign-winter2026 .switch-jumbotron.switch-on .option__image--on { z-index:2 } #content .eclick-campaign-winter2026 .switch-jumbotron.switch-on .option__image--off { z-index:0 } #content .eclick-campaign-winter2026 .switch-jumbotron.switch-on .button-on::after { opacity:1 !important } #content .eclick-campaign-winter2026 .switch-jumbotron.switch-on .button-on { font-weight:600 } #content .eclick-campaign-winter2026 .switch-jumbotron.switch-off .option__image--on { z-index:0 } #content .eclick-campaign-winter2026 .switch-jumbotron.switch-off .option__image--off { z-index:2 } #content .eclick-campaign-winter2026 .switch-jumbotron.switch-off .button-off::after { opacity:1 !important } #content .eclick-campaign-winter2026 .switch-jumbotron.switch-off .button-off { font-weight:600 } #content .eclick-campaign-winter2026 .switch-jumbotron__content { color:#fff; z-index:5; position:relative } @media(min-width: 768px) { #content .eclick-campaign-winter2026 .switch-jumbotron__content { top:var(--_content-padding); left:var(--_content-padding); position:absolute; z-index:5; max-width:430px } } #content .eclick-campaign-winter2026 .switch-jumbotron__content .switch-jumbotron__buttons { display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:1.75rem } @media(min-width: 768px) { #content .eclick-campaign-winter2026 .switch-jumbotron__content .switch-jumbotron__buttons { margin-top:8.125rem } } #content .eclick-campaign-winter2026 .switch-jumbotron__content .switch-jumbotron__buttons .switch-jumbotron__button { --_checkmark-size:1.3125rem; position:relative; font-size:14px; font-family:HyundaiText,sans-serif; font-weight:500; color:#000; cursor:pointer; text-decoration:none; -webkit-appearance:none; appearance:none; outline:none; border:none; line-height:20px; padding:14px 29px; border-radius:4px; width:100%; height:auto; text-align:center; background-color:#f6f3f2; transition:all .25s linear } #content .eclick-campaign-winter2026 .switch-jumbotron__content .switch-jumbotron__buttons .switch-jumbotron__button:hover { color:#000; background-color:#e4dcd3 } #content .eclick-campaign-winter2026 .switch-jumbotron__content .switch-jumbotron__buttons .switch-jumbotron__button::after { content:url("../../vehicle-files/winter2026/img/checkmark.svg"); display:block; position:absolute; right:calc(var(--_checkmark-size)*-0.5); top:calc(var(--_checkmark-size)*-0.5); width:var(--_checkmark-size); height:var(--_checkmark-size); opacity:0; transition:opacity .25s linear } #content .eclick-campaign-winter2026 .tab-navigation { font-family:HyundaiText,sans-serif; font-weight:500; display:flex; flex-direction:column; align-items:flex-start } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .tab-navigation { flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-end; text-align:center; margin-left:3.125rem } } #content .eclick-campaign-winter2026 .tab-navigation .tab-link { color:#666; transition:color .25s; text-decoration:none; padding:1rem 0 .6rem; line-height:1; font-size:.875rem; display:inline-block; width:auto; border-bottom:3px solid #fff; margin-left:0 } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .tab-navigation .tab-link { display:inline-block; width:auto; margin-left:2rem } } #content .eclick-campaign-winter2026 .tab-navigation .tab-link:first-of-type { margin-left:0 } #content .eclick-campaign-winter2026 .tab-navigation .tab-link.active,#content .eclick-campaign-winter2026 .tab-navigation .tab-link:hover { color:#000; text-decoration:none; border-bottom:3px solid #000; font-weight:600 } #content .eclick-campaign-winter2026 .text-in-picture { position:relative; margin:var(--element-white-space) auto 1rem } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .text-in-picture { margin-bottom:1.5rem } } #content .eclick-campaign-winter2026 .text-in-picture img { max-width:100%; height:auto } #content .eclick-campaign-winter2026 .text-in-picture__gradient { position:absolute; left:0; right:0; bottom:0; height:58.3%; mix-blend-mode:multiply; opacity:.6513; background:linear-gradient(180deg,rgba(255,255,255,0) 18.114%,#000 84.172%); z-index:1; pointer-events:none } #content .eclick-campaign-winter2026 .text-in-picture figcaption { z-index:2 } #content .eclick-campaign-winter2026 .text-in-picture .text-background { background-color:rgba(0,0,0,.3); position:absolute; left:0; right:0; top:0; bottom:0 } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .text-in-picture .text-background { background-color:rgba(0,0,0,0); background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%) } } @media(min-width: 1005px) { #content .eclick-campaign-winter2026 .text-in-picture .text-background { top:70% } } #content .eclick-campaign-winter2026 .text-in-picture .text-background--bottom { right:0 } @media(min-width: 1005px) { #content .eclick-campaign-winter2026 .text-in-picture .text-background--right { top:0; background-image:linear-gradient(-90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%) } } #content .eclick-campaign-winter2026 .text-in-picture figcaption { position:absolute; color:#fff; font-size:1.1rem; left:1rem; bottom:1.5rem; right:1rem; line-height:1.3; font-family:HyundaiHead,sans-serif; font-weight:500 } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .text-in-picture figcaption { font-size:2.2rem; max-width:70% } } @media(min-width: 1005px) { #content .eclick-campaign-winter2026 .text-in-picture figcaption { font-size:2.5rem; top:40%; max-width:300px; right:2.5rem; left:62%; transform:translateY(-50%) } #content .eclick-campaign-winter2026 .text-in-picture figcaption.text--left { left:2.5rem; right:auto; bottom:0 } #content .eclick-campaign-winter2026 .text-in-picture figcaption.text--black { color:#000 } #content .eclick-campaign-winter2026 .text-in-picture figcaption.text--right { left:auto; right:2.5rem; bottom:0 } #content .eclick-campaign-winter2026 .text-in-picture figcaption.text--bottom { top:auto; bottom:1.5rem; transform:none } #content .eclick-campaign-winter2026 .text-in-picture figcaption.text--full { max-width:100%; right:auto; left:2rem } #content .eclick-campaign-winter2026 .text-in-picture figcaption.text--center-vert { top:50%; bottom:auto; transform:translateY(-50%) } } #content .eclick-campaign-winter2026 .two-columns { display:grid; grid-template-columns:1fr; grid-template-rows:auto; gap:15px } @media(min-width: 600px) { #content .eclick-campaign-winter2026 .two-columns { gap:35px; grid-template-columns:1fr 1fr } } #content .eclick-campaign-winter2026 .two-columns .column__img { max-width:100%; height:auto; margin:0 auto; flex:1 1 auto } #content .eclick-campaign-winter2026 .two-columns .article { flex-direction:column; align-items:stretch; justify-content:flex-start; gap:25px } #content .eclick-campaign-winter2026 .two-columns .article__content,#content .eclick-campaign-winter2026 .two-columns .article__image { width:100%; max-width:100%; height:auto } /* ========================================================================== Site integration — rules the HME source never needed ========================================================================== */ /* The tabs are