/* ===== extracted from inline-style-1 ===== */ :root { --md-bg: #061225; --md-panel: #08172a; --md-panel-2: #0b1c32; --md-card: #071528; --md-border: #243a59; --md-border-2: #304968; --md-text: #f6f9fd; --md-muted: #91a3ba; --md-purple: #7c3aed; --md-purple-2: #9b4dff; --cs-blue: #00bbff; --cs-blue-2: #53d2ff; --cs-green: #82e6ab; } html, body { background: var(--md-bg) !important; } body { color: var(--md-text) !important; font-family: 'DM Sans', sans-serif !important; } /* On the homepage the header must sit ABOVE the hero, not over it. */ /* Homepage-only header cleanup: no global layout overwrite required. */ .cs-home-header-remove { display:none !important; visibility:hidden !important; width:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } @media (min-width:1024px) { .cs-home-header-plain { background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0 12px !important; min-width:0 !important; color:#E7ECF2 !important; font-size:12.5px !important; font-weight:700 !important; letter-spacing:-.01em !important; } .cs-home-header-plain:hover { background:transparent !important; color:#00BBFF !important; } .cs-home-header-plain svg { display:none !important; } } .md-home, .md-home * { box-sizing: border-box; } .md-home { background: linear-gradient(180deg,#061225 0%,#071326 52%,#050f1e 100%); color: var(--md-text); min-height: 100vh; } .md-shell { width: min(1100px, calc(100% - 56px)); margin: 0 auto; } .md-hero { position: relative; height: 540px; overflow: hidden; background: #071427; } .md-hero::before { content: ''; position: absolute; inset: 0; background-image: url('/images/home/carselect-home-hero-bmw-wide.jpg'); background-size: cover; background-position: center 56%; transform: scale(1.01); } .md-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 48%, rgba(0,187,255,.12), transparent 32%), linear-gradient(90deg, rgba(4,13,26,.96) 0%, rgba(4,13,26,.78) 37%, rgba(4,13,26,.18) 70%, rgba(4,13,26,.08) 100%), linear-gradient(0deg, rgba(4,13,26,.62) 0%, transparent 48%); } .md-hero-copy { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 134px; } .md-hero h1 { margin: 0; max-width: 660px; font-size: clamp(46px, 5.2vw, 70px); line-height: .98; letter-spacing: -.045em; font-weight: 900; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.22); } .md-hero p { margin: 16px 0 0; max-width: 620px; font-size: 17px; line-height: 1.5; font-weight: 650; color: #b8c6d8; text-shadow: 0 1px 14px rgba(0,0,0,.25); } .md-kicker { display:inline-flex; align-items:center; gap:9px; margin-bottom:14px; color:var(--cs-blue-2); font-size:11px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; } .md-kicker::before { content:''; width:26px; height:2px; border-radius:999px; background:linear-gradient(90deg,var(--cs-blue),var(--md-purple)); } .md-hero h1 .cs-gradient { background:linear-gradient(90deg,#19c8ff 0%,#57d3ff 40%,#a55cff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .md-search-stack { position: relative; z-index: 5; margin-top: -82px; } .md-panel { background: linear-gradient(145deg, rgba(10,25,46,.98), rgba(7,20,38,.98)); border: 1px solid var(--md-border); border-radius: 17px; box-shadow: 0 20px 54px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.018); } .md-smart-search { padding: 27px 70px 26px; } .md-smart-search h2 { margin: 0 0 17px; text-align: center; font-size: 25px; line-height: 1.2; font-weight: 750; letter-spacing: -.02em; } .md-smart-form { display: grid; grid-template-columns: 1fr 52px; gap: 0; } .md-smart-input-wrap { position: relative; } .md-smart-input-wrap svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 20px; color: #7f95ad; } .md-smart-input { width: 100%; height: 64px; padding: 0 18px 0 52px; border: 1px solid #314a68; border-right: 0; border-radius: 12px 0 0 12px; background: #07182d; color: #fff; font-size: 16px; font-style: italic; outline: none; } .md-smart-input:focus { border-color: var(--cs-blue); box-shadow: inset 0 0 0 1px rgba(0,187,255,.35), 0 0 0 3px rgba(0,187,255,.07); } .md-smart-go { height: 64px; border: 1px solid #314a68; border-left: 0; border-radius: 0 12px 12px 0; background: #07182d; display: flex; align-items: center; justify-content: center; cursor: pointer; } .md-smart-go span { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg,var(--md-purple),#8d49f4 52%,var(--cs-blue)); color: #fff; font-size: 24px; font-weight: 800; transition: transform .15s ease, filter .15s ease; } .md-smart-go:hover span { transform: translateX(2px); filter: brightness(1.08); } .md-filter-panel { margin-top: 14px; display: grid; grid-template-columns: 96px 1fr; overflow: hidden; } .md-vehicle-tabs { border-right: 1px solid var(--md-border); background: #071426; } .md-vehicle-tab { height: 58px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--md-border); color: #b7b4bd; cursor: pointer; } .md-vehicle-tab:last-child { border-bottom: 0; } .md-vehicle-tab.active { color: var(--cs-blue); box-shadow: inset 3px 0 0 var(--cs-blue); background: linear-gradient(90deg,rgba(0,187,255,.12),rgba(124,58,237,.055)); } .md-vehicle-tab svg { width: 27px; height: 27px; } .md-filter-body { padding: 20px 18px 18px; } .md-filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px 16px; } .md-field label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; color: #d8e1ec; } .md-control { width: 100%; height: 42px; border: 1px solid #314760; border-radius: 9px; background: #0a1b31; color: #f2f6fb; padding: 0 12px; font-size: 14px; outline: none; } .md-control:focus { border-color: var(--cs-blue); box-shadow:0 0 0 2px rgba(0,187,255,.08); } .md-control:disabled { color: #687b92; border-color: #283c56; opacity:.62; } .md-toggle-group { display: grid; grid-template-columns: 1fr 1fr; height: 42px; } .md-toggle-btn { border: 1px solid #314760; background: #0a1b31; color: #b8c5d4; font-size: 13px; font-weight: 800; cursor: pointer; } .md-toggle-btn:first-child { border-radius: 9px 0 0 9px; } .md-toggle-btn:last-child { border-radius: 0 9px 9px 0; border-left: 0; } .md-toggle-btn.active { box-shadow: inset 0 0 0 1px rgba(124,58,237,.8); border-color: #8b5cf6; color: #fff; background: linear-gradient(90deg,rgba(124,58,237,.18),rgba(0,187,255,.08)); } .md-search-btn { width: 100%; height: 42px; border: 1px solid rgba(139,92,246,.45); border-radius: 9px; background: linear-gradient(100deg,#6e36e8 0%,#833ff2 56%,#168ed7 100%); color: #fff; box-shadow:0 10px 24px rgba(99,52,220,.20); font-size: 14px; font-weight: 900; cursor: pointer; } .md-search-btn:hover { filter: brightness(1.08); } .md-filter-bottom { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .md-filter-bottom-left, .md-filter-bottom-right { display: flex; align-items: center; gap: 22px; color: #d2cfd7; font-size: 13px; } .md-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .md-check input { width: 20px; height: 20px; accent-color: var(--cs-blue); } .md-text-action { color: #9eafc4; text-decoration: none; font-weight: 750; } .md-text-action:hover { color: #fff; text-decoration: underline; } .md-main { padding: 16px 0 38px; } .md-section { margin-top: 16px; padding: 26px; } .md-section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; } .md-section-title { margin: 0; font-size: 26px; line-height: 1.12; font-weight: 750; letter-spacing: -.025em; } .md-show-all { color: var(--cs-blue); font-size: 13px; font-weight: 800; text-decoration: none; } .md-show-all:hover { color:var(--cs-blue-2); } .md-card-scroll { position: relative; } .md-scroll-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: repeat(4, 1fr); gap: 24px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; } .md-scroll-row::-webkit-scrollbar { display: none; } .md-car-card { min-width: 0; color: inherit; text-decoration: none; } .md-car-photo { position: relative; height: 160px; border-radius: 11px; overflow: hidden; background: #071225; border:1px solid rgba(80,112,151,.16); } .md-car-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .md-heart { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #1d1b22; border: 1px solid #3d3943; color: #c583ef; } .md-car-name { margin-top: 9px; font-size: 16px; line-height: 1.2; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .md-car-price { margin-top: 5px; font-size: 17px; font-weight: 800; } .md-car-sub { margin-top: 4px; color: #9eafc4; font-size: 12px; line-height: 1.35; } .md-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; } .md-tag { padding: 4px 7px; border-radius: 5px; background: #071426; border:1px solid rgba(71,103,143,.22); color: #dfe8f2; font-size: 11px; line-height: 1; } .md-location { margin-top: 9px; color: #8294aa; font-size: 11px; display: flex; align-items: center; gap: 5px; } .md-deal-badge { display: inline-flex; margin-top: 9px; padding: 4px 7px; border-radius: 7px; background: linear-gradient(100deg,#6f36e8,#8b43f1); color: #fff; font-size: 10px; font-weight: 900; } .md-scroll-arrow { position: absolute; right: -18px; top: 86px; width: 52px; height: 52px; border-radius: 50%; border: 0; background: #18171c; color: #ddd9e2; box-shadow: 0 8px 22px rgba(0,0,0,.35); cursor: pointer; z-index: 4; display: grid; place-items: center; font-size: 28px; } .md-assistant { margin-top: 16px; min-height: 112px; border-radius: 16px; padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(105deg, #492085 0%, #3a1d78 45%, #1b2a63 100%); border: 1px solid #473274; } .md-assistant-logo { font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -.04em; } .md-assistant-logo b { color: #fff; } .md-assistant-logo small { font-size: 11px; margin-left: 8px; padding: 4px 6px; border-radius: 5px; background: rgba(255,255,255,.13); vertical-align: middle; } .md-assistant p { margin: 8px 0 0; color: #ded8eb; font-size: 14px; } .md-assistant-btn { border:1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 14px 22px; background:linear-gradient(100deg,#7c3aed,#9b42d2); color: #fff; font-weight: 850; cursor: pointer; white-space: nowrap; } .md-featured-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .md-feature-card { min-height: 190px; border-radius: 18px; overflow: hidden; position: relative; text-decoration: none; color: #fff; background: #101014; border: 1px solid #24232a; } .md-feature-card.blue { background:linear-gradient(145deg,#112b55,#222c70); } .md-feature-visual { height: 110px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .md-feature-visual img { width: 100%; height: 100%; object-fit: cover; } .md-feature-visual svg { width: 74px; height: 74px; color: #f7f5fa; opacity: .9; } .md-feature-copy { padding: 13px 16px 16px; display: flex; gap: 12px; align-items: center; } .md-feature-icon { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.12); flex: 0 0 36px; } .md-feature-name { font-size: 16px; font-weight: 800; } .md-feature-note { margin-top: 2px; color: #9eafc4; font-size: 12px; } .md-finance { display: grid; grid-template-columns: 1fr 1.08fr; overflow: hidden; min-height: 330px; padding: 0; background: #6d2a99; border-color: #643080; } .md-finance-copy { padding: 48px 50px; background: linear-gradient(135deg,#6528b5 0%,#51259b 42%,#123f83 100%); } .md-finance-copy h2 { margin: 0; font-size: 29px; line-height: 1.12; letter-spacing: -.025em; } .md-finance-copy p { margin: 7px 0 28px; font-size: 15px; color: #f4eafb; } .md-finance-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; } .md-finance-fields label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 800; } .md-finance-fields select { width: 100%; height: 43px; border-radius: 8px; border: 1px solid #637192; background: rgba(6,18,37,.72); color: #fff; padding: 0 12px; } .md-finance-btn { margin-top: 26px; width: 100%; height: 48px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background:linear-gradient(100deg,#7c3aed,#8c46ef 56%,#168ed7); color: #fff; font-weight: 900; cursor: pointer; } .md-finance-photo { position: relative; min-height: 330px; background: linear-gradient(90deg,rgba(6,18,37,.06),rgba(6,18,37,.18)), url('/images/home/carselect-home-hero-bmw-wide.jpg') center right / cover no-repeat; } .md-finance-photo::after { content:'CARSELECT × AUTOMESAČNE'; position:absolute; right:24px; bottom:20px; padding:7px 10px; border-radius:999px; background:rgba(5,15,30,.78); border:1px solid rgba(255,255,255,.12); color:#d9e5f2; font-size:9px; font-weight:900; letter-spacing:.08em; } .md-popular-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .md-popular-card { min-height: 290px; border-radius: 12px; overflow: hidden; background:#071528; border:1px solid #29415f; color: #fff; text-decoration: none; transition:.18s ease; } .md-popular-card:hover { transform:translateY(-2px); border-color:#3f638c; } .md-popular-image { height: 205px; overflow: hidden; background: #222129; } .md-popular-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .md-popular-copy { padding: 14px 17px 16px; } .md-popular-name { font-size: 20px; font-weight: 800; } .md-type-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; } .md-type-card { min-height: 205px; border-radius: 11px; background:linear-gradient(145deg,#0b1c32,#071426); border:1px solid #29415f; text-decoration: none; color: #fff; overflow: hidden; display: flex; flex-direction: column; transition:.18s ease; } .md-type-card:hover { transform:translateY(-2px); border-color:#3f638c; } .md-type-img { height: 135px; display: flex; align-items: center; justify-content: center; overflow: hidden; background:radial-gradient(circle at 50% 55%,rgba(0,187,255,.12),transparent 58%); } .md-type-img svg { width:72%; max-width:150px; color:#c8d6e5; filter:drop-shadow(0 10px 18px rgba(0,0,0,.22)); } .md-type-copy { margin-top: auto; text-align: center; padding: 12px 10px 15px; } .md-type-name { font-size: 16px; font-weight: 800; } .md-type-count { margin-top: 4px; color: #8294aa; font-size: 12px; } .md-dealers-grid { display: grid; grid-template-columns: 42% 1fr; gap: 28px; align-items: stretch; } .md-dealer-intro { position: relative; min-height: 220px; border-radius: 12px; overflow: hidden; padding: 26px; background:linear-gradient(145deg,#102952,#212c70); border:1px solid rgba(80,112,170,.35); } .md-dealer-intro h3 { margin: 0; max-width: 330px; font-size: 16px; line-height: 1.55; } .md-dealer-intro a { color: var(--cs-blue); } .md-dealer-cars { position: absolute; right: 6px; bottom: -2px; width: 70%; opacity: .9; } .md-dealer-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; align-content: center; } .md-dealer-item { display: grid; grid-template-columns: 80px 1fr; gap: 13px; align-items: center; } .md-dealer-logo { height: 64px; border: 1px solid #29415f; border-radius: 9px; background: #071426; display: grid; place-items: center; padding: 8px; } .md-dealer-logo img { max-width: 100%; max-height: 44px; object-fit: contain; } .md-dealer-name { font-size: 14px; font-weight: 800; } .md-dealer-loc { margin-top: 5px; color: #8294aa; font-size: 12px; } .md-seo { padding: 30px 26px 38px; } .md-seo h2 { margin: 0 0 34px; font-size: 25px; line-height: 1.25; max-width: 930px; } .md-seo p { color: #aebccc; font-size: 14px; line-height: 1.55; } .md-seo h3 { margin: 22px 0 9px; font-size: 19px; } .md-seo-two { margin-top: 38px; display: grid; grid-template-columns: 1fr 1fr; gap: 46px 54px; } .md-seo-two h4 { margin: 0 0 14px; font-size: 16px; } @media (max-width: 980px) { .md-shell { width: min(100% - 24px, 900px); } .md-hero { height: 540px; } .md-hero-copy { padding-bottom: 112px; } .md-smart-search { padding: 24px 28px; } .md-filter-grid { grid-template-columns: repeat(2, 1fr); } .md-scroll-row { grid-template-columns: none; grid-auto-columns: 44%; } .md-featured-grid { grid-template-columns: repeat(2, 1fr); } .md-type-grid { grid-template-columns: repeat(3, 1fr); } .md-dealers-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .md-shell { width: calc(100% - 20px); } .md-hero { height: 540px; } .md-hero::before { background-position: 68% center; } .md-hero-copy { justify-content: flex-start; padding-top: 44px; padding-bottom: 0; } .md-hero h1 { max-width: 310px; font-size: 40px; } .md-hero p { max-width: 300px; font-size: 15px; } .md-search-stack { margin-top: -68px; } .md-smart-search { padding: 20px 16px; } .md-smart-search h2 { font-size: 19px; } .md-smart-input, .md-smart-go { height: 56px; } .md-smart-go span { width: 38px; height: 38px; } .md-filter-panel { grid-template-columns: 1fr; } .md-vehicle-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-right: 0; border-bottom: 1px solid var(--md-border); } .md-vehicle-tab { border-bottom: 0; border-right: 1px solid var(--md-border); height: 52px; } .md-vehicle-tab:last-child { border-right: 0; } .md-vehicle-tab.active { color:var(--cs-blue); box-shadow: inset 0 -3px 0 var(--cs-blue); background:linear-gradient(180deg,rgba(0,187,255,.08),rgba(124,58,237,.06)); } .md-filter-body { padding: 16px; } .md-filter-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .md-field.payment { grid-column: span 2; } .md-field.city { grid-column: span 2; } .md-field.submit { grid-column: span 2; } .md-filter-bottom { align-items: flex-start; flex-direction: column; } .md-filter-bottom-left, .md-filter-bottom-right { gap: 14px; flex-wrap: wrap; } .md-section { padding: 20px 16px; } .md-section-title { font-size: 22px; } .md-scroll-row { grid-auto-columns: 76%; gap: 14px; } .md-scroll-arrow { display: none; } .md-car-photo { height: 170px; } .md-assistant { padding: 20px; align-items: flex-start; flex-direction: column; } .md-featured-grid { display: flex; overflow-x: auto; gap: 14px; scrollbar-width: none; } .md-feature-card { min-width: 72%; } .cs-offer-grid { grid-template-columns: 1fr; } .md-finance { grid-template-columns: 1fr; } .md-finance-copy { padding: 30px 22px; } .md-finance-photo { min-height: 220px; } .md-popular-grid { display: flex; overflow-x: auto; gap: 14px; scrollbar-width: none; } .md-popular-card { min-width: 82%; } .md-type-grid { display: flex; overflow-x: auto; gap: 14px; scrollbar-width: none; } .md-type-card { min-width: 60%; } .md-dealer-list { grid-template-columns: 1fr; } .md-seo-two { grid-template-columns: 1fr; gap: 24px; } } /* ========================================================= CARSELECT V10 — COMPACT / PREMIUM RESKIN OVERRIDES Homepage-only. No routes/controllers/services changed. ========================================================= */ :root { --cs-purple: #813DF2; --cs-purple-2: #9148F5; --cs-purple-soft: rgba(129,61,242,.14); --md-bg: #061225; --md-panel: #08182B; --md-panel-2: #0A1B31; --md-card: #071629; --md-border: #223B59; --md-border-2: #2B4767; --md-text: #F7F9FC; --md-muted: #91A3BA; --md-purple: var(--cs-purple); --md-purple-2: var(--cs-purple-2); } /* Align the homepage and its header to one compact premium grid. */ .md-shell { width: min(1100px, calc(100% - 88px)) !important; } @media (min-width: 1024px) { body > header > div > div { max-width: 1120px !important; padding-left: 20px !important; padding-right: 20px !important; } body > header a[aria-label="CarSelect.sk"] { margin-left: 0 !important; transform: translateY(2px) !important; } body > header nav { margin-left: 54px !important; gap: 4px !important; } .cs-home-header-plain { height: 38px !important; min-height: 38px !important; padding: 0 10px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #D6DEE9 !important; font-size: 12.5px !important; font-weight: 750 !important; } .cs-home-header-plain:hover { color: #FFFFFF !important; background: transparent !important; } .cs-home-header-plain svg { display: none !important; } } .md-home { background: linear-gradient(180deg, #061225 0%, #071528 50%, #061225 100%) !important; } .md-panel { background: rgba(8,24,43,.96) !important; border-color: var(--md-border) !important; border-radius: 15px !important; box-shadow: 0 18px 44px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.018) !important; } /* Hero: user-selected M4, copy stays clean white. */ .md-hero { height: 540px; background: #061225 !important; } .md-hero::before { display: none !important; } .md-hero-image { position: absolute; inset: 0 0 0 auto; width: 61%; height: 100%; object-fit: cover; object-position: center center; display: block; z-index: 0; transform: scale(1.00); } .md-hero::after { z-index: 1; background: linear-gradient(90deg, #061225 0%, rgba(6,18,37,.98) 31%, rgba(6,18,37,.82) 49%, rgba(6,18,37,.32) 70%, rgba(6,18,37,.10) 100%), linear-gradient(0deg, rgba(6,18,37,.62) 0%, rgba(6,18,37,0) 44%) !important; } .md-hero-copy { z-index: 2 !important; justify-content: center !important; padding-bottom: 54px !important; padding-top: 34px !important; } .md-hero h1 { max-width: 560px !important; font-size: clamp(45px, 4.4vw, 62px) !important; line-height: 1.01 !important; letter-spacing: -.042em !important; color: #FFFFFF !important; text-shadow: 0 2px 20px rgba(0,0,0,.20) !important; } .md-hero h1 .cs-gradient { color: #fff !important; background: none !important; -webkit-text-fill-color: #fff !important; } .md-hero p { max-width: 560px !important; margin-top: 17px !important; color: #B7C4D5 !important; font-size: 15px !important; line-height: 1.52 !important; font-weight: 560 !important; } /* Search / filter: purple is the action color, nothing orange/blue-gradient. */ .md-search-stack { margin-top: -72px !important; } .md-smart-search { padding: 24px 62px 23px !important; } .md-smart-search h2 { font-size: 23px !important; margin-bottom: 16px !important; } .md-smart-input { height: 58px !important; background: #07182D !important; border-color: #2C4462 !important; } .md-smart-go { height: 58px !important; background: #07182D !important; border-color: #2C4462 !important; } .md-smart-go span { width: 38px !important; height: 38px !important; border-radius: 9px !important; background: linear-gradient(135deg, #793DF3 0%, #8D39EE 100%) !important; box-shadow: 0 8px 20px rgba(129,61,242,.28) !important; } .md-filter-panel { grid-template-columns: 76px 1fr !important; margin-top: 12px !important; } .md-vehicle-tabs { background: #07172A !important; border-right-color: #203853 !important; } .md-vehicle-tab { height: 56px !important; color: #8292A7 !important; background: transparent !important; box-shadow: none !important; border-bottom-color: #203853 !important; transition: color .16s ease, opacity .16s ease !important; } .md-vehicle-tab:hover { color: #D9E2EE !important; background: transparent !important; } .md-vehicle-tab.active { color: var(--cs-purple) !important; background: transparent !important; box-shadow: none !important; } .md-vehicle-tab svg { width: 24px !important; height: 24px !important; } .md-filter-body { padding: 18px 18px 16px !important; } .md-filter-grid { gap: 13px 14px !important; } .md-control { background: #0A1B31 !important; border-color: #2C4562 !important; } .md-control:focus { border-color: var(--cs-purple) !important; box-shadow: 0 0 0 2px rgba(129,61,242,.10) !important; } .md-toggle-btn { background: #0A1B31 !important; border-color: #2C4562 !important; } .md-toggle-btn.active { color: #fff !important; background: rgba(129,61,242,.10) !important; border-color: var(--cs-purple) !important; box-shadow: inset 0 0 0 1px rgba(129,61,242,.35) !important; } .md-search-btn, .md-finance-btn, .md-assistant-btn { background: linear-gradient(135deg, #793DF3 0%, #8D39EE 100%) !important; border-color: #8A44F4 !important; box-shadow: 0 9px 22px rgba(129,61,242,.24) !important; } .md-check input { accent-color: var(--cs-purple) !important; } /* Keep the existing Carselect Live Market, only align it to our compact shell. */ .cs-live-market-wrap > section { background: transparent !important; padding: 16px 0 0 !important; } .cs-live-market-wrap > section > div { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } .md-main { padding-top: 0 !important; } .md-section { margin-top: 14px !important; padding: 22px 24px !important; } .md-section-title-row { margin-bottom: 16px !important; } .md-section-title { font-size: 24px !important; } .md-show-all { color: #B7C4D4 !important; } .md-show-all:hover { color: #FFFFFF !important; } .md-scroll-row { grid-template-columns: none !important; grid-auto-columns: 238px !important; gap: 18px !important; } .md-car-photo { height: 154px !important; border-radius: 10px !important; } .md-heart { color: #B26AFF !important; background: rgba(9,17,30,.90) !important; } .md-deal-badge { background: var(--cs-purple) !important; } /* The previously unstyled Carselect feature block. */ .cs-offer-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } .cs-offer-card { min-width: 0; min-height: 118px; display: flex; align-items: flex-start; gap: 12px; padding: 17px; border: 1px solid #233D5B; border-radius: 13px; background: #091A2F; color: #F5F8FC; text-decoration: none; transition: transform .16s ease, border-color .16s ease, background .16s ease; } .cs-offer-card:hover { transform: translateY(-1px); border-color: rgba(129,61,242,.62); background: #0A1D35; } .cs-offer-icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #B98BFF; background: rgba(129,61,242,.11); border: 1px solid rgba(129,61,242,.20); font-size: 16px; font-weight: 850; } .cs-offer-card strong { display:block; font-size:14px; line-height:1.25; } .cs-offer-card p { margin:5px 0 0; color:#8FA0B6; font-size:11.5px; line-height:1.45; } .md-assistant { min-height: 98px !important; margin-top: 14px !important; background: linear-gradient(105deg, #251650 0%, #322068 48%, #192B58 100%) !important; border-color: rgba(129,61,242,.34) !important; } .md-featured-grid { gap: 16px !important; } .md-feature-card { min-height: 176px !important; background:#08182B !important; border-color:#233C59 !important; } .md-feature-card.blue { background: #0A1B32 !important; } .md-feature-visual { height: 96px !important; background: radial-gradient(circle at 50% 120%, rgba(129,61,242,.16), transparent 62%); } .md-feature-visual svg { width: 58px !important; height: 58px !important; color:#C6D1DE !important; } .md-feature-icon { color:#B98BFF !important; background:rgba(129,61,242,.10) !important; } /* Finance: keep purple as accent, not as a giant flat surface. */ .md-finance { min-height: 300px !important; background: #08182B !important; border-color: #263E5C !important; } .md-finance-copy { padding: 40px 42px !important; background: radial-gradient(circle at 5% 5%, rgba(129,61,242,.20), transparent 38%), linear-gradient(135deg, #0B1A31 0%, #101C3B 100%) !important; } .md-finance-photo { min-height: 300px !important; background: #071225 !important; overflow:hidden; } .md-finance-photo img { width:100%; height:100%; object-fit:cover; object-position:76% 50%; display:block; } .md-finance-photo::after { display:none !important; } .md-finance-photo > span { position:absolute; right:18px; bottom:17px; z-index:2; padding:6px 9px; border-radius:999px; background:rgba(5,15,30,.78); border:1px solid rgba(255,255,255,.13); color:#E3EAF4; font-size:8.5px; font-weight:900; letter-spacing:.09em; } .md-popular-grid { gap: 16px !important; } .md-popular-card { border-color:#243E5C !important; background:#08172A !important; } .md-popular-image { height: 178px !important; background:#071225 !important; } .md-popular-image img { width:100%; height:100%; display:block; object-fit:cover; } .md-popular-card:nth-child(1) .md-popular-image img { object-position:72% center; } .md-popular-card:nth-child(2) .md-popular-image img { object-position:53% 61%; } .md-popular-card:nth-child(3) .md-popular-image img { object-position:53% 61%; } .md-type-grid { gap: 12px !important; } .md-type-card { background:#08182B !important; border-color:#294663 !important; } .md-type-img { color:#AEBED0 !important; } .md-type-card:hover { border-color:rgba(129,61,242,.65) !important; } .md-dealer-intro { background:linear-gradient(145deg,#101F42,#182B5C) !important; min-height:222px !important; } .md-dealer-proof { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:34px; } .md-dealer-proof > div { padding:12px 13px; border-radius:10px; background:rgba(6,18,37,.28); border:1px solid rgba(255,255,255,.08); } .md-dealer-proof strong { display:block; color:#fff; font-size:13px; } .md-dealer-proof span { display:block; margin-top:2px; color:#AAB8CA; font-size:10.5px; } .md-dealer-cars { display:none !important; } .md-seo { background:#08182B !important; } @media (max-width: 1023px) { .md-shell { width: min(100% - 24px, 760px) !important; } .md-hero-image { width:100% !important; opacity:.55; object-position: center center; } .md-hero::after { background:linear-gradient(90deg,rgba(6,18,37,.94),rgba(6,18,37,.62)) !important; } .md-hero-copy { padding-bottom: 70px !important; } .md-filter-panel { grid-template-columns: 1fr !important; } .md-vehicle-tabs { grid-template-columns:repeat(4,1fr) !important; border-right:0 !important; } .md-vehicle-tab.active { box-shadow:none !important; border-bottom-color:#203853 !important; } .cs-offer-grid { grid-template-columns:1fr 1fr; } .md-scroll-row { grid-auto-columns: min(72vw, 250px) !important; } } @media (max-width: 640px) { .md-shell { width: calc(100% - 20px) !important; } .md-hero { height: 540px; } .md-hero h1 { font-size: 43px !important; } .md-smart-search { padding:20px 16px !important; } .cs-offer-grid { grid-template-columns:1fr; } .md-finance-copy { padding:28px 20px !important; } } /* ========================================================= CARSELECT V13 — HERO HQ IMAGE LOCK Mobile.de-like composition, Carselect styling: photo + copy, then the search card overlaps the photo edge. The photo ends around the vertical middle of the search card. Only a subtle BOTTOM gradient is allowed on the photo. ========================================================= */ .md-hero { height: 540px; background: #061225 !important; overflow: hidden !important; } .md-hero-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; object-position: center center; opacity: 1 !important; display: block !important; z-index: 0 !important; } .md-hero::after { content: '' !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; background-image: linear-gradient( 0deg, rgba(4,18,38,.34) 0%, rgba(4,18,38,.12) 15%, rgba(4,18,38,.03) 27%, rgba(4,18,38,0) 40% ), url('/images/home/carselect-hero-grain.png') !important; background-repeat: no-repeat, repeat-x !important; background-position: bottom, bottom !important; background-size: 100% 100%, 512px 256px !important; pointer-events: none !important; } .md-hero-copy { position: relative !important; z-index: 2 !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; padding-top: 0 !important; padding-bottom: 126px !important; } .md-hero h1 { max-width: 610px !important; margin: 0 !important; color: #fff !important; font-size: clamp(50px, 4.45vw, 64px) !important; line-height: 1.00 !important; letter-spacing: -.043em !important; font-weight: 900 !important; text-shadow: 0 2px 18px rgba(0,0,0,.20) !important; } .md-hero h1 .cs-gradient { color: #fff !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: #fff !important; } .md-hero p { max-width: 650px !important; margin: 17px 0 0 !important; color: rgba(255,255,255,.88) !important; font-size: 16px !important; line-height: 1.52 !important; font-weight: 600 !important; text-shadow: 0 2px 14px rgba(0,0,0,.18) !important; } /* The image ends approximately at the middle of the first search card. */ .md-search-stack { margin-top: -82px !important; } .md-smart-search { position: relative !important; z-index: 5 !important; } @media (max-width: 980px) { .md-hero { height: 540px; } .md-hero-image { object-position: center center; } .md-hero-copy { padding-bottom: 118px !important; } .md-search-stack { margin-top: -76px !important; } } @media (max-width: 640px) { .md-hero { height: 540px; } .md-hero-image { object-position: center center; } .md-hero::after { background-image: linear-gradient( 0deg, rgba(4,18,38,.42) 0%, rgba(4,18,38,.16) 18%, rgba(4,18,38,.04) 34%, rgba(4,18,38,0) 52% ), url('/images/home/carselect-hero-grain.png') !important; background-repeat: no-repeat, repeat-x !important; background-position: bottom, bottom !important; background-size: 100% 100%, 512px 256px !important; } .md-hero-copy { justify-content: flex-end !important; padding-top: 0 !important; padding-bottom: 105px !important; } .md-hero h1 { max-width: 335px !important; font-size: 41px !important; line-height: 1.00 !important; } .md-hero p { max-width: 330px !important; margin-top: 13px !important; font-size: 14px !important; } .md-search-stack { margin-top: -68px !important; } } /* ========================================================= CARSELECT V15 — HEADER + HERO TYPO POLISH Homepage-only overrides. ========================================================= */ @media (min-width: 1024px) { /* Header V16 polish — keep the shell width, refine only spacing and typography. */ body > header > div > div { max-width: 1048px !important; padding-left: 8px !important; padding-right: 8px !important; } body > header a[aria-label="CarSelect.sk"] { margin-left: 0 !important; } body > header nav { margin-left: 94px !important; gap: 10px !important; } body > header nav a { height: 40px !important; padding: 0 4px !important; border-radius: 0 !important; background: transparent !important; color: #E7EDF6 !important; font-size: 13.5px !important; font-weight: 650 !important; letter-spacing: -.01em !important; line-height: 1 !important; } body > header nav a:hover { background: transparent !important; color: #FFFFFF !important; } body > header nav a span { bottom: 3px !important; } body > header > div > div > div.ml-auto { gap: 4px !important; } body > header [data-notification-trigger] { margin-right: -4px !important; } .cs-home-header-plain { height: 40px !important; min-height: 40px !important; padding: 0 6px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #E7EDF6 !important; font-size: 13.5px !important; font-weight: 650 !important; letter-spacing: -.01em !important; } .cs-home-header-plain:hover { color: #FFFFFF !important; background: transparent !important; } .cs-home-header-plain svg { display: none !important; } } /* Hero headline: keep the weight, give the two lines more breathing room. */ .md-hero h1 { line-height: 1.09 !important; letter-spacing: -.022em !important; } /* V17 — mobile.de inspired desktop mega navigation for homepage only */ @media (min-width: 1024px) { body > header nav { margin-left: 166px !important; gap: 22px !important; flex: 0 0 auto !important; } .cs-home-mega-nav { display: flex; align-items: center; gap: 24px; } .cs-home-mega-item { position: relative; } .cs-home-mega-trigger { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0; background: transparent; border: 0; color: #F4F7FB; font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1; cursor: pointer; transition: opacity .18s ease, color .18s ease; } .cs-home-mega-trigger:hover, .cs-home-mega-item.is-open .cs-home-mega-trigger { color: #FFFFFF; opacity: 1; } .cs-home-mega-trigger svg { width: 13px; height: 13px; opacity: .88; transition: transform .18s ease; } .cs-home-mega-item.is-open .cs-home-mega-trigger svg { transform: rotate(180deg); } .cs-home-mega-panel { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 640px; padding: 14px; border-radius: 18px; border: 1px solid rgba(58, 77, 108, .78); background: rgba(15, 18, 29, .98); box-shadow: 0 28px 80px rgba(0, 0, 0, .48); display: none; z-index: 120; backdrop-filter: blur(10px); } .cs-home-mega-item.is-open .cs-home-mega-panel { display: block; } .cs-home-mega-panel--wide { width: 706px; } .cs-home-mega-grid { display: grid; grid-template-columns: 174px 1fr 1fr; gap: 22px; } .cs-home-mega-card img { width: 100%; height: 112px; object-fit: cover; border-radius: 12px; display: block; } .cs-home-mega-kicker { margin-bottom: 10px; color: #97A4B7; font-size: 11px; line-height: 1.2; } .cs-home-mega-card-title, .cs-home-mega-col-title { color: #F4F7FB; font-size: 11px; font-weight: 500; line-height: 1.2; } .cs-home-mega-card-link { display: inline-block; margin-top: 10px; color: #F1F5F9; font-size: 13px; font-weight: 600; text-decoration: none; } .cs-home-mega-links { display: grid; gap: 6px; } .cs-home-mega-links a { color: #F8FAFC !important; text-decoration: none; font-size: 13px !important; font-weight: 500 !important; letter-spacing: -.01em !important; line-height: 1.35 !important; min-height: auto !important; height: auto !important; padding: 2px 0 !important; white-space: normal !important; } .cs-home-mega-links a:hover { color: #FFFFFF !important; text-decoration: underline; text-underline-offset: 3px; } } /* V18 — more premium Carselect header tone + custom mega nav styling */ @media (min-width: 1024px) { body > header { background: linear-gradient(90deg, rgba(4,20,40,.985) 0%, rgba(6,30,58,.975) 100%) !important; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; backdrop-filter: blur(14px); } /* Kill the original layout's blue bottom divider on the homepage header. */ body > header > div { border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; } body > header > div > div { max-width: 1040px !important; padding-left: 20px !important; padding-right: 20px !important; } body > header nav { margin-left: 190px !important; gap: 34px !important; } .cs-home-mega-nav { gap: 34px !important; } .cs-home-mega-trigger { font-size: 15.5px !important; font-weight: 750 !important; color: #F3F7FC !important; letter-spacing: -.015em !important; } .cs-home-mega-trigger:hover, .cs-home-mega-item.is-open .cs-home-mega-trigger { color: #FFFFFF !important; } .cs-home-mega-panel { top: calc(100% + 12px) !important; border-radius: 20px !important; border: 1px solid rgba(67, 96, 136, .72) !important; background: linear-gradient(180deg, rgba(7,16,32,.985) 0%, rgba(8,18,38,.985) 100%) !important; box-shadow: 0 30px 90px rgba(0, 0, 0, .44) !important; } .cs-home-mega-kicker { color: #8FB9D5 !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .04em; } .cs-home-mega-col-title { color: #B4C1D4 !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 7px; } .cs-home-mega-card img { border: 1px solid rgba(78, 106, 144, .38); box-shadow: 0 12px 34px rgba(0, 0, 0, .28); } .cs-home-mega-card-link { color: #DDF5FF !important; font-size: 14px !important; } .cs-home-mega-card-link:hover { color: #7FDCFF !important; } .cs-home-mega-links a { font-size: 14px !important; font-weight: 650 !important; color: #F4F7FB !important; } .cs-home-mega-links a:hover { color: #8EDBFF !important; text-decoration: none !important; } body > header > div > div > div.ml-auto { gap: 8px !important; margin-right: 30px !important; } body > header [data-notification-trigger] { margin-right: -1px !important; } .cs-home-header-plain { font-size: 15px !important; font-weight: 750 !important; color: #F3F7FC !important; padding: 0 2px !important; margin-left: 6px !important; } .cs-home-header-plain:hover { color: #FFFFFF !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; } .cs-home-header-icon-link, .cs-home-header-icon-link:hover, .cs-home-header-icon-link:focus, .cs-home-header-icon-link:focus-visible, body > header [data-notification-trigger], body > header [data-notification-trigger]:hover, body > header [data-notification-trigger]:focus, body > header [data-notification-trigger]:focus-visible { background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; border-color: transparent !important; ring: 0 !important; } .cs-home-header-icon-link, body > header [data-notification-trigger] { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; padding: 0 !important; border-radius: 0 !important; } .cs-home-header-icon-link::before, .cs-home-header-icon-link::after, body > header [data-notification-trigger]::before, body > header [data-notification-trigger]::after { display: none !important; content: none !important; box-shadow: none !important; border: 0 !important; } .cs-home-header-icon-link:hover, body > header [data-notification-trigger]:hover { color: #FFFFFF !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; outline: none !important; } .cs-home-header-icon-link:hover svg, body > header [data-notification-trigger]:hover svg { color: #FFFFFF !important; opacity: 1 !important; } body > header::after, body > header > div::after { display: none !important; content: none !important; } /* Bell: deliberately class-reset in JS, so no Tailwind hover/focus frame can survive. */ .cs-home-bell-clean, .cs-home-bell-clean:hover, .cs-home-bell-clean:active, .cs-home-bell-clean:focus, .cs-home-bell-clean:focus-visible { -webkit-appearance: none !important; appearance: none !important; position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; border: 0 !important; border-width: 0 !important; border-color: transparent !important; border-radius: 0 !important; outline: 0 !important; outline-offset: 0 !important; box-shadow: none !important; color: #DCE4EE !important; cursor: pointer !important; } .cs-home-bell-clean:hover, .cs-home-bell-clean:focus-visible { color: #FFFFFF !important; } .cs-home-bell-clean::before, .cs-home-bell-clean::after { content: none !important; display: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; } .cs-home-bell-clean svg { width: 19px !important; height: 19px !important; color: currentColor !important; } } /* V23 — final compact alignment + bell cleanup */ @media (min-width: 1024px) { body > header > div, body > header > div > div { border: 0 !important; box-shadow: none !important; } body > header > div > div, .md-shell { width: min(1100px, calc(100% - 56px)) !important; max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } body > header nav { margin-left: 175px !important; gap: 38px !important; } body > header > div > div > div.ml-auto { margin-right: 0 !important; margin-left: auto !important; gap: 12px !important; } body > header nav a, body > header nav button, .cs-home-mega-trigger, .cs-home-header-plain, .cs-home-header-icon-link, .cs-home-bell-clean, .cs-home-bell-clean:hover, .cs-home-bell-clean:focus, .cs-home-bell-clean:focus-visible, body > header [data-notification-trigger], body > header [data-notification-trigger]:hover, body > header [data-notification-trigger]:focus, body > header [data-notification-trigger]:focus-visible { border: 0 !important; outline: 0 !important; box-shadow: none !important; text-decoration: none !important; background: transparent !important; background-color: transparent !important; } body > header nav a::before, body > header nav a::after, body > header nav button::before, body > header nav button::after, .cs-home-mega-trigger::before, .cs-home-mega-trigger::after, .cs-home-header-icon-link::before, .cs-home-header-icon-link::after, .cs-home-bell-clean::before, .cs-home-bell-clean::after, body > header [data-notification-trigger]::before, body > header [data-notification-trigger]::after { display: none !important; content: none !important; border: 0 !important; box-shadow: none !important; } .cs-home-mega-trigger:hover, .cs-home-header-plain:hover, .cs-home-header-icon-link:hover, .cs-home-bell-clean:hover, body > header [data-notification-trigger]:hover { color: #FFFFFF !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; } .cs-home-bell-clean, body > header [data-notification-trigger] { width: auto !important; min-width: 19px !important; height: auto !important; min-height: 19px !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; } .cs-home-bell-clean > *, body > header [data-notification-trigger] > * { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; } } /* ===== extracted from cs-md-mobilede-exact-20260831 ===== */ /* |-------------------------------------------------------------------------- | CARSELECT HOMEPAGE — MOBILE ONLY |-------------------------------------------------------------------------- | | Layout target: mobile.de mobile first viewport. | Desktop/tablet > 640px is untouched. | */ @media (max-width:640px) { /* ====================================================== HEADER LOGO — just move it away from the left edge ====================================================== */ /* ====================================================== HERO — HORIZONTAL MOBILE.DE PROPORTIONS ====================================================== */ html body #carselect-marketplace-home .md-hero { position:relative !important; width:100% !important; /* * Real horizontal hero. * ~16:9 at normal iPhone widths. */ height:56.25vw !important; min-height:205px !important; max-height:225px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; background:#061225 !important; } /* * Kill the old pseudo background. */ html body #carselect-marketplace-home .md-hero::before { display:none !important; content:none !important; } /* * REAL IMAGE. * * Desktop has width:61%. * Mobile becomes full width. * * NO SCALE. * NO fake zoom. */ html body #carselect-marketplace-home .md-hero-image { position:absolute !important; inset:0 !important; width:100% !important; min-width:100% !important; max-width:100% !important; height:100% !important; min-height:100% !important; max-height:100% !important; margin:0 !important; object-fit:cover !important; object-position:center center !important; transform:none !important; scale:none !important; z-index:0 !important; filter:none !important; -webkit-mask-image:none !important; mask-image:none !important; } /* * Much lighter overlay than current Carselect mobile. * Photo remains visible like mobile.de. */ html body #carselect-marketplace-home .md-hero::after { content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important; background: linear-gradient( 90deg, rgba(4,11,19,.52) 0%, rgba(4,11,19,.31) 44%, rgba(4,11,19,.09) 76%, rgba(4,11,19,.02) 100% ), linear-gradient( 180deg, rgba(4,11,19,.02) 55%, rgba(4,11,19,.16) 100% ) !important; pointer-events:none !important; } /* ====================================================== HERO COPY ====================================================== */ html body #carselect-marketplace-home .md-hero-copy { position:relative !important; z-index:2 !important; height:100% !important; margin-left:auto !important; margin-right:auto !important; padding-top:0 !important; padding-bottom:0 !important; display:flex !important; flex-direction:column !important; justify-content:center !important; align-items:flex-start !important; } html body #carselect-marketplace-home .md-hero-copy h1 { /* * These override the CSS variables used by * the inline desktop fallback. */ --md-hero-title-size:26px; --md-hero-title-max:285px; --md-hero-title-line:1.06; margin:0 !important; letter-spacing:-.037em !important; font-weight:720 !important; color:#fff !important; text-shadow: 0 2px 12px rgba(0,0,0,.42) !important; } /* ====================================================== SEARCH STACK No floating card over the photo. ====================================================== */ html body #carselect-marketplace-home .md-search-stack { position:relative !important; z-index:5 !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; } /* ====================================================== SMART SEARCH SECTION ====================================================== */ html body #carselect-marketplace-home .md-smart-search { width:100% !important; margin:0 !important; padding: 23px 16px 22px !important; border-left:0 !important; border-right:0 !important; border-top:0 !important; border-radius:0 !important; background:#18191f !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } html body #carselect-marketplace-home .md-smart-search h2 { max-width:330px !important; margin: 0 auto 17px !important; padding:0 !important; font-size:21px !important; line-height:1.14 !important; font-weight:750 !important; letter-spacing:-.025em !important; text-align:center !important; color:#fff !important; } /* ====================================================== SEARCH BAR ====================================================== */ html body #carselect-marketplace-home .md-smart-form { display:grid !important; grid-template-columns: minmax(0,1fr) 50px !important; width:100% !important; max-width:none !important; margin:0 !important; gap:0 !important; } html body #carselect-marketplace-home .md-smart-input-wrap { position:relative !important; min-width:0 !important; } html body #carselect-marketplace-home .md-smart-input-wrap > svg { left:15px !important; width:19px !important; height:19px !important; color:#8b929e !important; } html body #carselect-marketplace-home .md-smart-input { display:block !important; width:100% !important; height:52px !important; min-height:52px !important; padding: 0 12px 0 44px !important; border: 1px solid #777b84 !important; border-right:0 !important; border-radius: 10px 0 0 10px !important; background:#1c1d23 !important; color:#fff !important; font-size:14px !important; line-height:52px !important; box-shadow:none !important; } html body #carselect-marketplace-home .md-smart-input::placeholder { color:#9a9da6 !important; opacity:1 !important; } html body #carselect-marketplace-home .md-smart-go { width:50px !important; height:52px !important; min-height:52px !important; padding:0 !important; border: 1px solid #777b84 !important; border-left:0 !important; border-radius: 0 10px 10px 0 !important; background:#1c1d23 !important; box-shadow:none !important; } html body #carselect-marketplace-home .md-smart-go span { width:40px !important; height:40px !important; border-radius:8px !important; display:grid !important; place-items:center !important; background:#33adfa !important; color:#fff !important; font-size:23px !important; box-shadow:none !important; transform:none !important; } /* ====================================================== FILTER PANEL Immediately after search like mobile.de. ====================================================== */ html body #carselect-marketplace-home .md-filter-panel { display:grid !important; grid-template-columns:1fr !important; width:100% !important; margin:0 !important; padding:0 !important; border-left:0 !important; border-right:0 !important; border-radius:0 !important; background:#18191f !important; box-shadow:none !important; overflow:hidden !important; } /* ====================================================== VEHICLE TABS ====================================================== */ html body #carselect-marketplace-home .md-vehicle-tabs { display:grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; width:100% !important; margin:0 !important; padding:0 !important; border-right:0 !important; border-top: 1px solid #292b31 !important; border-bottom: 1px solid #292b31 !important; background:#15161b !important; } html body #carselect-marketplace-home .md-vehicle-tab { width:100% !important; height:56px !important; min-height:56px !important; margin:0 !important; padding:0 !important; border-top:0 !important; border-bottom:0 !important; border-right: 1px solid #292b31 !important; background:transparent !important; color:#a4a8b0 !important; box-shadow:none !important; } html body #carselect-marketplace-home .md-vehicle-tab:last-child { border-right:0 !important; } html body #carselect-marketplace-home .md-vehicle-tab svg { width:24px !important; height:24px !important; } html body #carselect-marketplace-home .md-vehicle-tab.active { color:#33adfa !important; background:#18191f !important; box-shadow: inset 0 -3px 0 #33adfa !important; } /* ====================================================== FILTER CONTENT ====================================================== */ html body #carselect-marketplace-home .md-filter-body { width:100% !important; margin:0 !important; padding: 15px 16px 18px !important; background:#18191f !important; } html body #carselect-marketplace-home .md-filter-grid { display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px 12px !important; } html body #carselect-marketplace-home .md-field label { margin-bottom:6px !important; font-size:12px !important; font-weight:750 !important; color:#e3e5e9 !important; } html body #carselect-marketplace-home .md-control { width:100% !important; height:46px !important; min-height:46px !important; padding: 0 11px !important; border: 1px solid #5d616a !important; border-radius:8px !important; background:#1d1e24 !important; color:#f3f4f6 !important; font-size:14px !important; box-shadow:none !important; } html body #carselect-marketplace-home .md-control:disabled { opacity:.52 !important; } /* ====================================================== BOTTOM FILTER ACTIONS ====================================================== */ html body #carselect-marketplace-home .md-filter-bottom { margin-top:14px !important; gap:12px !important; } } /* ===== extracted from cs-md-tab-icons-only-20260831 ===== */ /* * HOMEPAGE VEHICLE CATEGORY TABS * Desktop + mobile: ICON ONLY. */ #carselect-marketplace-home .md-vehicle-tab { font-size:0 !important; line-height:0 !important; } #carselect-marketplace-home .md-vehicle-tab::before, #carselect-marketplace-home .md-vehicle-tab::after { content:none !important; display:none !important; } #carselect-marketplace-home .md-vehicle-tab svg { display:block !important; width:26px !important; height:26px !important; margin:0 auto !important; } /* ===== extracted from cs-layout-compact-final ===== */ :root { --cs-page-width: 940px; --cs-page-gutter: 24px; } /* ========================================================== HEADER Logo + középső nav + jobb oldal egy kompaktabb shellben ========================================================== */ @media (min-width: 1024px) { .cs-header-inner-compact { width: min(940px, calc(100% - 48px)) !important; max-width: var(--cs-page-width) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } } /* ========================================================== TELJES HOMEPAGE ugyanarra a vonalra kerül, mint a header ========================================================== */ @media (min-width: 1024px) { #carselect-marketplace-home .md-shell { width: min(940px, calc(100% - 48px)) !important; max-width: var(--cs-page-width) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } } /* ========================================================== HERO TEXT kisebb + feljebb + levegősebb ========================================================== */ @media (min-width: 768px) { #carselect-marketplace-home .md-hero-copy { /* * Az egész headline blokk feljebb. * Így nem ül rá a BMW-re. */ transform: translateY(-145px) !important; text-align: left !important; } #carselect-marketplace-home .md-hero-copy h1 { width: 570px !important; max-width: 570px !important; margin: 0 !important; padding: 0 !important; font-size: 43px !important; font-weight: 700 !important; line-height: 1.10 !important; /* * Eddig túl össze volt préselve. */ letter-spacing: -0.005em !important; text-align: left !important; } } /* MOBILE marad biztonságos */ @media (max-width: 767px) { #carselect-marketplace-home .md-hero-copy { transform: translateY(-35px) !important; } #carselect-marketplace-home .md-hero-copy h1 { font-size: 34px !important; line-height: 1.08 !important; letter-spacing: -0.005em !important; } } /* ===== extracted from cs-hero-rescue-position ===== */ #carselect-marketplace-home .md-hero { position: relative !important; } /* ===== extracted from axel-home-feature-final ===== */ /* ========================================================= AXEL HOMEPAGE FEATURE ========================================================= */ .cs-axel-feature { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 25px; width: 100%; padding: 25px 28px; border-radius: 20px; background: linear-gradient( 120deg, #0D141C 0%, #0D151E 100% ); border: 1px solid rgba(255,255,255,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.018); } /* ========================================================= AXEL FACE ========================================================= */ .cs-axel-feature-avatar { width: 94px; height: 94px; overflow: hidden; border-radius: 50%; background: #080D12; flex-shrink: 0; box-shadow: 0 8px 24px rgba(0,0,0,.22); } .cs-axel-feature-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; } /* ========================================================= CONTENT ========================================================= */ .cs-axel-feature-content { min-width: 0; } .cs-axel-feature-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .cs-axel-feature-heading h2 { margin: 0; color: #FFFFFF; font-size: 27px; line-height: 1; font-weight: 900; letter-spacing: -.035em; } .cs-axel-feature-beta { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.055); color: #91A0AF; font-size: 9px; line-height: 1; font-weight: 800; letter-spacing: .09em; } .cs-axel-feature-content h3 { margin: 0 0 6px; color: #EEF2F6; font-size: 16px; line-height: 1.35; font-weight: 750; } .cs-axel-feature-description { margin: 0; color: #909CAA; font-size: 13px; line-height: 1.5; } /* ========================================================= EXAMPLE ========================================================= */ .cs-axel-feature-example { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; margin-top: 12px; padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,.025); color: #9AA6B3; font-size: 11px; line-height: 1.4; } .cs-axel-feature-example span { flex-shrink: 0; color: #64BDEB; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } /* ========================================================= CTA ========================================================= */ .cs-axel-feature-action { display: flex; align-items: center; justify-content: flex-end; } .cs-axel-feature-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 190px; min-height: 52px; padding: 0 20px; border-radius: 13px; background: #2E9FE5; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-decoration: none !important; font-size: 13px; font-weight: 850; border: 0; outline: 0; box-shadow: none; transition: background .16s ease, transform .16s ease; } .cs-axel-feature-button:hover, .cs-axel-feature-button:focus, .cs-axel-feature-button:active, .cs-axel-feature-button:visited { background: #43ADEB; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-decoration: none !important; outline: 0; transform: translateY(-1px); } .cs-axel-feature-button span { color: inherit; font-size: 17px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .cs-axel-feature { grid-template-columns: 82px minmax(0, 1fr); gap: 18px; padding: 22px; } .cs-axel-feature-avatar { width: 78px; height: 78px; } .cs-axel-feature-action { grid-column: 1 / -1; } .cs-axel-feature-button { width: 100%; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .cs-axel-feature { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: 17px; } .cs-axel-feature-avatar { width: 58px; height: 58px; } .cs-axel-feature-heading h2 { font-size: 23px; } .cs-axel-feature-content h3 { font-size: 14px; } .cs-axel-feature-description { font-size: 12px; } .cs-axel-feature-example { grid-column: 1 / -1; display: block; margin-top: 11px; } .cs-axel-feature-example span { display: block; margin-bottom: 4px; } .cs-axel-feature-action { grid-column: 1 / -1; } } /* ===== extracted from home-unified-panel-tone ===== */ /* ========================================================= HOMEPAGE PANEL COLOR UNIFY Minden fő blokk ugyanazt a tónust kapja, mint az Obľúbené značky / SEO blokk. ========================================================= */ #carselect-marketplace-home { --cs-home-panel-bg: linear-gradient(180deg, #0D141B 0%, #0A1118 100%); --cs-home-panel-border: rgba(44, 78, 108, .28); --cs-home-panel-topline: rgba(255,255,255,.02); } /* fő home blokkok */ #carselect-marketplace-home .md-panel, #carselect-marketplace-home .cs-axel-feature, #carselect-marketplace-home [class*="seo"], #carselect-marketplace-home [class*="popular-categories"], #carselect-marketplace-home [class*="vehicle-types"], #carselect-marketplace-home [class*="car-value-banner"] { background: var(--cs-home-panel-bg) !important; border-color: var(--cs-home-panel-border) !important; box-shadow: inset 0 1px 0 var(--cs-home-panel-topline) !important; } /* AXEL blokk finomhangolás */ #carselect-marketplace-home .cs-axel-feature { outline: none !important; } #carselect-marketplace-home .cs-axel-feature .cs-axel-feature-example { background: rgba(255,255,255,.028) !important; } #carselect-marketplace-home .cs-axel-feature .cs-axel-feature-beta { background: rgba(255,255,255,.055) !important; color: #9EADBA !important; border: 1px solid rgba(255,255,255,.06) !important; box-shadow: none !important; } /* ha valamelyik belső wrapper saját hátteret adna */ #carselect-marketplace-home .md-section, #carselect-marketplace-home .md-filter-panel, #carselect-marketplace-home .md-smart-search { border-color: var(--cs-home-panel-border) !important; } /* hover-ek maradjanak kulturáltak */ #carselect-marketplace-home .md-panel:hover, #carselect-marketplace-home .cs-axel-feature:hover { border-color: rgba(61, 99, 131, .34) !important; } /* ===== extracted from seo-flat-final ===== */ /* ========================================================= BRAND + SEO BLOKK — FLAT CONTENT Nincs belső bubble/card háttér. ========================================================= */ .cs-brand-seo-content, .cs-brand-seo-content .cs-seo-flat-intro, .cs-brand-seo-content .cs-seo-flat-actions, .cs-brand-seo-content .cs-seo-flat-action, .cs-brand-seo-content .cs-seo-flat-action:hover, .cs-brand-seo-content .cs-seo-flat-action:focus, .cs-brand-seo-content .cs-seo-flat-action:active { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; outline: none !important; } /* Intro szöveg mögött semmi */ .cs-brand-seo-content .cs-seo-flat-intro { border: 0 !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* 4 link/card: nincs saját doboz */ .cs-brand-seo-content .cs-seo-flat-action { border: 0 !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; text-decoration: none !important; } /* pseudo-elemek se tudjanak hátteret rajzolni */ .cs-brand-seo-content .cs-seo-flat-intro::before, .cs-brand-seo-content .cs-seo-flat-intro::after, .cs-brand-seo-content .cs-seo-flat-action::before, .cs-brand-seo-content .cs-seo-flat-action::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; } /* belső heading / paragraph is teljesen flat */ .cs-brand-seo-content .cs-seo-flat-action h4, .cs-brand-seo-content .cs-seo-flat-action p { background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* * A 2x2 layout és az elválasztás maradjon, * csak ne legyenek kártyák. */ .cs-brand-seo-content .cs-seo-flat-actions { overflow: visible !important; } /* Hover: csak a cím színe változik, nincs kártya-effekt */ .cs-brand-seo-content .cs-seo-flat-action:hover h4 { color: #FFFFFF !important; } /* ===== extracted from axel-home-clean-final ===== */ /* ========================================================= AXEL HOMEPAGE — CLEAN / BORDERLESS FINAL ========================================================= */ /* AXEL blokk: semmilyen keret / outline / hover effect */ #carselect-marketplace-home .cs-axel-feature, #carselect-marketplace-home .cs-axel-feature:hover, #carselect-marketplace-home .cs-axel-feature:focus, #carselect-marketplace-home .cs-axel-feature:focus-within, #carselect-marketplace-home .cs-axel-feature:active { border: 0 !important; outline: 0 !important; box-shadow: none !important; transform: none !important; transition: none !important; } /* pseudo-elemek se rajzoljanak körvonalat */ #carselect-marketplace-home .cs-axel-feature::before, #carselect-marketplace-home .cs-axel-feature::after { border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* AXEL portré körül se legyen kék keret */ #carselect-marketplace-home .cs-axel-feature-avatar, #carselect-marketplace-home .cs-axel-feature-avatar:hover, #carselect-marketplace-home .cs-axel-feature-avatar img { border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* BETA marad minimal */ #carselect-marketplace-home .cs-axel-feature-beta { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: rgba(255,255,255,.055) !important; } /* ========================================================= TÁVOLSÁG A FELSŐ BLOKKTÓL ========================================================= */ /* AXEL kapjon rendes levegőt a Čo ponúka Carselect blokk után */ #carselect-marketplace-home .cs-axel-feature { margin-top: 16px !important; } /* ha közvetlenül előtte panel van, ne lógjon rá AXEL-re */ #carselect-marketplace-home .md-panel:has(+ .cs-axel-feature) { margin-bottom: 0 !important; position: relative !important; z-index: 1 !important; } /* AXEL külön rétegen */ #carselect-marketplace-home .cs-axel-feature { position: relative !important; z-index: 1 !important; } /* ===== extracted from cs-only-garage-final ===== */ #carselect-marketplace-home .cs-only-garage-icon { position: absolute !important; top: 10px !important; right: 10px !important; z-index: 20 !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 50% !important; background: rgba(8,13,19,.84) !important; color: #E7ECF2 !important; box-shadow: none !important; font-size: 0 !important; line-height: 0 !important; } #carselect-marketplace-home .cs-only-garage-icon svg { display: block !important; width: 19px !important; height: 16px !important; min-width: 19px !important; overflow: visible !important; color: #E7ECF2 !important; } /* SEMMILYEN PSEUDO-ELEM NEM RAJZOLHAT SZÍVET */ #carselect-marketplace-home .cs-only-garage-icon::before, #carselect-marketplace-home .cs-only-garage-icon::after { content: none !important; display: none !important; } /* ===== extracted from cs-feed-no-blue-outline ===== */ /* Nedávno pridané + Zlacnené autá: semmilyen kék körvonal / border ne legyen */ #carselect-marketplace-home .cs-recent-final-panel .md-car-card, #carselect-marketplace-home .cs-discount-final-panel .md-car-card, #carselect-marketplace-home .cs-recent-final-panel .md-car-photo, #carselect-marketplace-home .cs-discount-final-panel .md-car-photo, #carselect-marketplace-home .cs-recent-final-panel .md-car-photo img, #carselect-marketplace-home .cs-discount-final-panel .md-car-photo img { border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* hover/focus alatt se jelenjen meg */ #carselect-marketplace-home .cs-recent-final-panel .md-car-card:hover, #carselect-marketplace-home .cs-discount-final-panel .md-car-card:hover, #carselect-marketplace-home .cs-recent-final-panel .md-car-card:focus, #carselect-marketplace-home .cs-discount-final-panel .md-car-card:focus, #carselect-marketplace-home .cs-recent-final-panel .md-car-card:focus-visible, #carselect-marketplace-home .cs-discount-final-panel .md-car-card:focus-visible { border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* ===== extracted from cs-carousel-arrow-state ===== */ /* bal nyíl: pontosan ugyanaz a design, mint a jobb */ #carselect-marketplace-home .cs-scroll-arrow-left { left: 14px !important; right: auto !important; } /* jobb nyíl */ #carselect-marketplace-home .cs-scroll-arrow-right { right: 14px !important; left: auto !important; } /* eltűnés finoman */ #carselect-marketplace-home .cs-scroll-arrow-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* megjelenés */ #carselect-marketplace-home .md-scroll-arrow, #carselect-marketplace-home .cs-scroll-arrow-left { transition: opacity .18s ease, visibility .18s ease, background .18s ease !important; } #carselect-marketplace-home .cs-scroll-arrow-left svg { width: 18px !important; height: 18px !important; display: block !important; fill: none !important; stroke: #FFFFFF !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; opacity: 1 !important; visibility: visible !important; } /* ===== extracted from cs-feed-last-polish ===== */ /* ========================================================== NEDÁVNO PRIDANÉ + ZLACNENÉ KÜLSŐ KERET TELJESEN KI ========================================================== */ #carselect-marketplace-home .cs-recent-final-panel, #carselect-marketplace-home .cs-discount-final-panel { background: #0D1218 !important; background-image: none !important; border: none !important; outline: none !important; box-shadow: none !important; } /* biztos ami biztos: hover/focus se hozzon vissza keretet */ #carselect-marketplace-home .cs-recent-final-panel:hover, #carselect-marketplace-home .cs-discount-final-panel:hover, #carselect-marketplace-home .cs-recent-final-panel:focus, #carselect-marketplace-home .cs-discount-final-panel:focus { border: none !important; outline: none !important; box-shadow: none !important; } /* ========================================================== ZOBRAZIŤ VŠETKY = UGYANOLYAN FINOM, MINT A "VŠETKY AUTÁ" ========================================================== */ #carselect-marketplace-home .cs-recent-final-panel .md-show-all, #carselect-marketplace-home .cs-discount-final-panel .md-show-all { color: #8B949E !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 400 !important; text-decoration: none !important; text-underline-offset: 4px !important; border: none !important; background: none !important; padding: 0 !important; margin: 0 !important; transition: color .15s ease !important; } /* hover = aláhúzás */ #carselect-marketplace-home .cs-recent-final-panel .md-show-all:hover, #carselect-marketplace-home .cs-discount-final-panel .md-show-all:hover { color: #C9D0D6 !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; } /* focusnál se legyen kék outline */ #carselect-marketplace-home .cs-recent-final-panel .md-show-all:focus, #carselect-marketplace-home .cs-discount-final-panel .md-show-all:focus { outline: none !important; box-shadow: none !important; } /* ===== extracted from cs-home-search-filter-final-v3 ===== */ /* ========================================================== SEARCH BAR — VISSZA A JÓ SÖTÉT VERZIÓRA ========================================================== */ #carselect-marketplace-home .md-smart-search { background:#0D1218 !important; border:0 !important; outline:0 !important; box-shadow:none !important; } #carselect-marketplace-home .md-smart-input-wrap { position:relative !important; } #carselect-marketplace-home .md-smart-input { width:100% !important; height:58px !important; padding: 0 70px 0 52px !important; background:#0D1218 !important; border: 1px solid #343B43 !important; border-radius: 11px !important; color:#F1F3F5 !important; outline:0 !important; box-shadow:none !important; } #carselect-marketplace-home .md-smart-input:focus { background:#0D1218 !important; border-color:#505861 !important; box-shadow:none !important; } #carselect-marketplace-home .md-smart-go { position:absolute !important; top:7px !important; right:7px !important; width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; padding:0 !important; margin:0 !important; border:0 !important; outline:0 !important; border-radius:10px !important; background:transparent !important; box-shadow:none !important; } #carselect-marketplace-home .md-smart-go span { width:44px !important; height:44px !important; display:grid !important; place-items:center !important; padding:0 !important; border-radius:10px !important; background:#35A9E8 !important; color:white !important; box-shadow:none !important; } /* ========================================================== FILTER ========================================================== */ #carselect-marketplace-home .md-filter-panel { background:#0D1218 !important; border:0 !important; box-shadow:none !important; } /* BAL IKONOK */ #carselect-marketplace-home .md-vehicle-tabs { width:80px !important; min-width:80px !important; padding:0 !important; display:grid !important; grid-template-rows:repeat(4,1fr) !important; background:#0D1218 !important; } #carselect-marketplace-home .md-vehicle-tab { width:100% !important; padding:0 !important; margin:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; border:0 !important; background:transparent !important; color:#AAB1B8 !important; box-shadow:none !important; } #carselect-marketplace-home .md-vehicle-tab.active { background:#191D23 !important; color:#F2F0E9 !important; } #carselect-marketplace-home .md-vehicle-tab svg { display:block !important; width:27px !important; height:23px !important; margin:auto !important; transform:none !important; } /* MEZŐK */ #carselect-marketplace-home .md-field label { color:#E0E4E8 !important; font-size:13px !important; font-weight:750 !important; margin-bottom:7px !important; } #carselect-marketplace-home .md-control { height:44px !important; padding-left:13px !important; padding-right:39px !important; background-color:#171B21 !important; border: 1px solid #2E353D !important; border-radius:9px !important; color:#EEF0F2 !important; font-size:14px !important; font-weight:600 !important; outline:0 !important; box-shadow:none !important; } /* LENYÍLÓ NYÍL */ #carselect-marketplace-home select.md-control, .cs-prod-field select { appearance:none !important; -webkit-appearance:none !important; padding-right:40px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23CED3D8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5 5 5-5'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position: right 13px center !important; background-size: 14px 14px !important; } /* ========================================================== ELECTRIC — PRODUCTION SWITCH ========================================================== */ .cs-prod-ev-toggle { display:inline-flex !important; align-items:center !important; gap:10px !important; cursor:pointer !important; user-select:none !important; } .cs-prod-ev-toggle input { position:absolute !important; opacity:0 !important; pointer-events:none !important; } .cs-prod-ev-switch { position:relative !important; width:46px !important; height:26px !important; flex:0 0 46px !important; border-radius:999px !important; background:#697482 !important; transition:background .18s ease !important; } .cs-prod-ev-switch > span { position:absolute !important; left:4px !important; top:4px !important; width:18px !important; height:18px !important; border-radius:50% !important; background:#E6E9EC !important; transition:transform .18s ease !important; } .cs-prod-ev-toggle input:checked + .cs-prod-ev-switch { background:#20B86B !important; } .cs-prod-ev-toggle input:checked + .cs-prod-ev-switch > span { transform:translateX(20px) !important; } .cs-prod-ev-text { color:#AEB6BE !important; font-size:12px !important; font-weight:650 !important; } /* ========================================================== RESET + VIAC FILTROV — ÉLES OLDAL STÍLUS ========================================================== */ .md-filter-bottom-right { display:flex !important; align-items:center !important; gap:24px !important; } .cs-prod-text-action { display:inline-flex !important; align-items:center !important; gap:7px !important; padding:0 !important; border:0 !important; background:transparent !important; color:#9BA5AF !important; font-size:12px !important; font-weight:700 !important; cursor:pointer !important; transition:color .15s ease !important; } .cs-prod-text-action svg { width:16px !important; height:16px !important; fill:none !important; stroke:currentColor !important; stroke-width:1.7 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } .cs-prod-text-action:hover { color:#FFFFFF !important; } .cs-prod-text-action:hover span { text-decoration:underline !important; text-underline-offset:4px !important; } /* ========================================================== MAIN ZOBRAZIŤ ========================================================== */ #carselect-marketplace-home .md-search-btn { background:#35A9E8 !important; border:0 !important; box-shadow:none !important; color:#FFFFFF !important; } #carselect-marketplace-home .md-search-btn:hover { background:#48B2EA !important; } /* ========================================================== ADVANCED MODAL ========================================================== */ .cs-prod-modal[hidden] { display:none !important; } .cs-prod-modal { position:fixed !important; inset:0 !important; z-index:999999 !important; display:grid !important; place-items:center !important; padding:24px !important; } .cs-prod-modal-backdrop { position:absolute !important; inset:0 !important; background: rgba(0,0,0,.74) !important; backdrop-filter: blur(7px) !important; } .cs-prod-modal-dialog { position:relative !important; z-index:2 !important; width: min(980px, calc(100vw - 42px)) !important; max-height: min(780px, calc(100vh - 38px)) !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; background:#07162A !important; border:0 !important; border-radius:17px !important; box-shadow: 0 26px 90px rgba(0,0,0,.55) !important; } /* HEADER */ .cs-prod-modal-header { flex:0 0 auto !important; display:flex !important; align-items:center !important; justify-content:space-between !important; padding: 20px 26px !important; border-bottom: 1px solid #243552 !important; } .cs-prod-modal-kicker { margin-bottom:7px !important; color:#D7DEE8 !important; font-size:11px !important; font-weight:850 !important; letter-spacing:.09em !important; } .cs-prod-modal-header h3 { margin:0 !important; color:#FFFFFF !important; font-size:20px !important; font-weight:850 !important; } .cs-prod-modal-close { width:36px !important; height:36px !important; padding:0 !important; display:grid !important; place-items:center !important; border: 1px solid #667386 !important; border-radius:9px !important; background:transparent !important; color:#D7DEE8 !important; font-size:20px !important; cursor:pointer !important; } /* BODY */ .cs-prod-modal-body { flex:1 1 auto !important; overflow-y:auto !important; padding: 28px 26px 32px !important; scrollbar-width:thin !important; scrollbar-color: #41516A transparent !important; } .cs-prod-filter-section h4, .cs-prod-color-drive h4 { margin: 0 0 28px !important; color:#FFFFFF !important; font-size:16px !important; font-weight:900 !important; letter-spacing:.05em !important; } .cs-prod-filter-grid { display:grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; column-gap:18px !important; row-gap:28px !important; } .cs-prod-field { display:block !important; } .cs-prod-field > span { display:block !important; margin-bottom:8px !important; color:#D5DDE8 !important; font-size:11px !important; font-weight:750 !important; } .cs-prod-field input, .cs-prod-field select { width:100% !important; height:47px !important; padding: 0 14px !important; background-color: #091C34 !important; border: 1px solid #425470 !important; border-radius: 9px !important; color: #F1F4F7 !important; font-size: 13px !important; font-weight: 650 !important; outline: 0 !important; box-shadow: none !important; } .cs-prod-field input::placeholder { color:#78879A !important; } .cs-prod-divider { height:1px !important; margin: 38px 0 !important; background: #42516A !important; } /* FARBA + POHON */ .cs-prod-color-drive { display:grid !important; grid-template-columns: 1.15fr .85fr !important; gap:60px !important; } .cs-prod-colors { display:grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; column-gap:24px !important; row-gap:18px !important; } .cs-prod-drive-list { display:grid !important; gap:22px !important; } .cs-prod-check { position:relative !important; display:flex !important; align-items:center !important; gap:10px !important; min-height:24px !important; color:#D6DCE4 !important; font-size:11px !important; font-weight:700 !important; cursor:pointer !important; } .cs-prod-check input { position:absolute !important; opacity:0 !important; pointer-events:none !important; } .cs-prod-checkbox { width:19px !important; height:19px !important; flex:0 0 19px !important; display:grid !important; place-items:center !important; border: 2px solid #7B8CA2 !important; border-radius:5px !important; background:transparent !important; } .cs-prod-check input:checked + .cs-prod-checkbox { background:#35A9E8 !important; border-color:#35A9E8 !important; } .cs-prod-check input:checked + .cs-prod-checkbox::after { content:"✓" !important; color:#FFFFFF !important; font-size:12px !important; line-height:1 !important; } .cs-prod-color-dot { width:20px !important; height:20px !important; flex:0 0 20px !important; border-radius:50% !important; } /* EQUIPMENT */ .cs-prod-equipment-intro { margin: -15px 0 24px !important; color:#A3AFBE !important; font-size:11px !important; } .cs-prod-equipment-grid { display:grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; column-gap:28px !important; row-gap:18px !important; } /* MODAL FOOTER */ .cs-prod-modal-footer { flex:0 0 auto !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:22px !important; padding: 16px 26px !important; background: rgba(7,22,42,.97) !important; border-top: 1px solid #243552 !important; } .cs-prod-modal-reset { border:0 !important; background:transparent !important; color:#E2E8F0 !important; font-size:12px !important; font-weight:750 !important; cursor:pointer !important; } .cs-prod-modal-reset:hover { text-decoration:underline !important; text-underline-offset:4px !important; } .cs-prod-modal-submit { min-width:144px !important; height:46px !important; padding: 0 20px !important; border:0 !important; border-radius:9px !important; background:#35A9E8 !important; color:#FFFFFF !important; font-size:13px !important; font-weight:850 !important; cursor:pointer !important; box-shadow:none !important; } .cs-prod-modal-submit:hover { background:#49B3EB !important; } html.cs-home-filter-open, html.cs-home-filter-open body { overflow:hidden !important; } /* ========================================================== MOBILE ========================================================== */ @media(max-width:760px) { .cs-prod-modal { padding:10px !important; } .cs-prod-modal-dialog { width:100% !important; max-height: calc(100vh - 20px) !important; } .cs-prod-filter-grid, .cs-prod-color-drive, .cs-prod-equipment-grid { grid-template-columns: 1fr !important; } .cs-prod-colors { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } /* ========================================================== CS_STEP1_FILTER_CSS_20260830 Only homepage filter / mobile modal. ========================================================== */ #carselect-marketplace-home .cs-step1-parts-fields[hidden] { display:none !important; } #carselect-marketplace-home .cs-step1-parts-fields:not([hidden]) { display:contents !important; } /* MOBILE CATEGORY BUTTONS */ @media (max-width:760px) { html body #carselect-marketplace-home .md-filter-panel { display:block !important; width:100% !important; overflow:visible !important; } html body #carselect-marketplace-home .md-filter-panel .md-vehicle-tabs { display:grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; grid-template-rows: 64px !important; width:100% !important; min-width:0 !important; height:64px !important; padding:0 !important; margin:0 !important; border-right:0 !important; overflow:hidden !important; } html body #carselect-marketplace-home .md-filter-panel .md-vehicle-tab { display:flex !important; width:100% !important; min-width:0 !important; height:64px !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:3px !important; padding:3px 2px !important; margin:0 !important; border:0 !important; border-right: 1px solid #252C34 !important; background: #0D1218 !important; transform:none !important; } html body #carselect-marketplace-home .md-filter-panel .md-vehicle-tab:last-child { border-right:0 !important; } html body #carselect-marketplace-home .md-filter-panel .md-vehicle-tab.active { background: #191D23 !important; box-shadow: inset 0 -3px 0 #35A9E8 !important; } html body #carselect-marketplace-home .md-filter-panel .md-vehicle-tab svg { display:block !important; width:23px !important; height:21px !important; flex:0 0 auto !important; margin:0 auto !important; transform:none !important; } html body #carselect-marketplace-home .md-filter-panel .md-vehicle-tab::after { content:attr(title); display:block; width:100%; overflow:hidden; color:#AAB3BD; font-size:8px; font-weight:750; line-height:1.05; text-align:center; white-space:nowrap; text-overflow:ellipsis; } html body #carselect-marketplace-home .md-filter-panel .md-vehicle-tab.active::after { color:#FFFFFF; } /* VIAC FILTROV: real viewport modal + real internal scroll */ html body #carselect-marketplace-home .cs-prod-modal { position:fixed !important; inset:0 !important; z-index:999999 !important; display:flex !important; align-items:stretch !important; justify-content:center !important; padding:6px !important; overflow:hidden !important; overscroll-behavior:none !important; } html body #carselect-marketplace-home .cs-prod-modal[hidden] { display:none !important; } html body #carselect-marketplace-home .cs-prod-modal-dialog { width:100% !important; height: calc(100dvh - 12px) !important; max-height: calc(100dvh - 12px) !important; min-height:0 !important; margin:0 !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; border-radius:12px !important; } html body #carselect-marketplace-home .cs-prod-modal-header, html body #carselect-marketplace-home .cs-prod-modal-footer { flex:0 0 auto !important; } html body #carselect-marketplace-home .cs-prod-modal-body { flex:1 1 auto !important; min-height:0 !important; overflow-x:hidden !important; overflow-y:auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } html.cs-home-filter-open, html.cs-home-filter-open body { overflow:hidden !important; overscroll-behavior:none !important; } } /* ========================================================== CS_DIELY_GROUPED_FILTER_CSS_20260830 ========================================================== */ #carselect-marketplace-home .cs-step1-parts-fields[hidden] { display:none !important; } #carselect-marketplace-home .cs-step1-parts-fields:not([hidden]) { display:contents !important; } /* Category gets the wider area, like the newer Carselect filter */ #carselect-marketplace-home .cs-parts-category-field { grid-column:span 2 !important; } /* Absolutely no number arrows / spinner UI */ #carselect-marketplace-home .cs-parts-price-input { appearance:none !important; -webkit-appearance:none !important; -moz-appearance:textfield !important; } /* Mobile */ @media (max-width:760px) { #carselect-marketplace-home .cs-parts-category-field { grid-column:1 / -1 !important; } } /* ===== extracted from cs-home-final-polish-v4 ===== */ /* ========================================================== CARSELECT HOMEPAGE — FINAL POLISH V4 csak vizuális finomhangolás ========================================================== */ /* ========================================================== 1. SEARCH BOX ========================================================== */ .md-smart-search { background:#0F151B !important; border:0 !important; outline:0 !important; box-shadow:none !important; } .md-smart-form { position:relative !important; display:block !important; width:100% !important; } .md-smart-input-wrap { position:relative !important; width:100% !important; } .md-smart-input { width:100% !important; height:62px !important; padding: 0 72px 0 52px !important; background:#0F151B !important; border: 1px solid #343B43 !important; border-radius: 11px !important; color:#F2F4F5 !important; outline:0 !important; box-shadow:none !important; } .md-smart-input:focus { background:#0F151B !important; border-color:#555D65 !important; box-shadow:none !important; } .md-smart-input-wrap > svg { color:#89939D !important; } /* KÉK NYÍL GOMB — AZ INPUTON BELÜL */ .md-smart-go { position:absolute !important; top:50% !important; right:7px !important; transform: translateY(-50%) !important; z-index:5 !important; width:48px !important; height:48px !important; min-width:48px !important; min-height:48px !important; padding:0 !important; margin:0 !important; display:grid !important; place-items:center !important; border:0 !important; border-radius:10px !important; background:transparent !important; box-shadow:none !important; } .md-smart-go span { width:48px !important; height:48px !important; display:grid !important; place-items:center !important; margin:0 !important; padding:0 !important; border-radius:10px !important; background:#35A9E8 !important; color:#FFFFFF !important; font-size:23px !important; box-shadow:none !important; transform:none !important; } .md-smart-go:hover span { transform:none !important; background:#49B3EA !important; filter:none !important; } /* ========================================================== 2. FILTER BLOKK ========================================================== */ .md-filter-panel { background:#0F151B !important; border:0 !important; outline:0 !important; box-shadow:none !important; } .md-filter-body { background:#0F151B !important; } /* MEZŐK */ .md-control { background-color:#181D23 !important; border: 1px solid #30363D !important; color:#EEF1F3 !important; box-shadow:none !important; } .md-control:focus { border-color:#515860 !important; box-shadow:none !important; } /* ========================================================== 3. KÚPA / LEASING TELJESEN NEUTRÁL — SE LILA, SE KÉK ========================================================== */ .md-toggle-group { background:#181D23 !important; border-radius:9px !important; overflow:hidden !important; } .md-toggle-btn, .md-toggle-group button, .md-toggle-group a { background:#181D23 !important; border: 1px solid #30363D !important; color:#AEB6BE !important; outline:0 !important; box-shadow:none !important; text-decoration:none !important; } .md-toggle-btn:first-child, .md-toggle-group button:first-child, .md-toggle-group a:first-child { border-radius: 9px 0 0 9px !important; } .md-toggle-btn:last-child, .md-toggle-group button:last-child, .md-toggle-group a:last-child { border-radius: 0 9px 9px 0 !important; } .md-toggle-btn.active, .md-toggle-group .active { background:#272D34 !important; border-color:#555D65 !important; color:#FFFFFF !important; box-shadow:none !important; } .md-toggle-btn:hover, .md-toggle-group button:hover, .md-toggle-group a:hover { background:#22282E !important; color:#FFFFFF !important; } /* ========================================================== 4. ELECTRIC SWITCH ========================================================== */ .cs-prod-ev-switch { background:#59616A !important; box-shadow:none !important; } .cs-prod-ev-toggle input:checked + .cs-prod-ev-switch { background:#24C875 !important; } .cs-prod-ev-text { color:#AAB2BA !important; } /* ========================================================== 5. RESET + VIAC FILTROV MINDKETTŐ UGYANOLYAN SZÜRKE ========================================================== */ .cs-prod-text-action, .md-filter-bottom-right button, .md-filter-bottom-right a { color:#9DA6AF !important; background:transparent !important; border:0 !important; box-shadow:none !important; } .cs-prod-text-action svg { color:#9DA6AF !important; } .cs-prod-text-action:hover, .md-filter-bottom-right button:hover, .md-filter-bottom-right a:hover { color:#FFFFFF !important; background:transparent !important; } .cs-prod-text-action:hover span { text-decoration:underline !important; text-underline-offset:4px !important; } /* ========================================================== 6. VIAC FILTROV MODAL KÉK/NAVY HELYETT UGYANAZ A SZÜRKE VILÁG ========================================================== */ .cs-prod-modal-dialog { background:#0F151B !important; border:0 !important; outline:0 !important; box-shadow: 0 28px 85px rgba(0,0,0,.52) !important; } .cs-prod-modal-header { background:#0F151B !important; border-bottom: 1px solid #2B3138 !important; } .cs-prod-modal-header > div { background:transparent !important; box-shadow:none !important; } .cs-prod-modal-kicker { background:transparent !important; color:#AAB2BA !important; } .cs-prod-modal-header h3 { background:transparent !important; color:#F2F3F4 !important; } .cs-prod-modal-body { background:#0F151B !important; } .cs-prod-modal-footer { background: rgba(15,21,27,.98) !important; border-top: 1px solid #2B3138 !important; } .cs-prod-divider { background:#30363D !important; } /* MODAL MEZŐK */ .cs-prod-field input, .cs-prod-field select { background-color:#181D23 !important; border: 1px solid #343B43 !important; color:#F0F2F4 !important; box-shadow:none !important; } .cs-prod-field input:focus, .cs-prod-field select:focus { border-color:#555D65 !important; outline:0 !important; box-shadow:none !important; } .cs-prod-field input::placeholder { color:#818B95 !important; } /* CLOSE */ .cs-prod-modal-close { background:#181D23 !important; border: 1px solid #3A424A !important; color:#C8CED4 !important; } /* FOOTER BUTTON */ .cs-prod-modal-submit { background:#35A9E8 !important; color:#FFFFFF !important; box-shadow:none !important; } .cs-prod-modal-submit:hover { background:#49B3EA !important; } /* ========================================================== 7. DESKTOP NOTIFICATION DROPDOWN NAVY -> SZÜRKE ========================================================== */ @media(min-width:1024px) { body > header [x-show="notificationsOpen"] { background:#11171D !important; border-color:#30373E !important; overflow:visible !important; box-shadow: 0 24px 60px rgba(0,0,0,.45) !important; } /* kis "pöcök" a harang felé */ body > header [x-show="notificationsOpen"]::before { content:"" !important; position:absolute !important; top:-7px !important; right:18px !important; width:14px !important; height:14px !important; background:#11171D !important; border-left: 1px solid #30373E !important; border-top: 1px solid #30373E !important; transform: rotate(45deg) !important; z-index:2 !important; } body > header [x-show="notificationsOpen"] > div { position:relative !important; z-index:3 !important; } body > header [x-show="notificationsOpen"] .border-b { border-color:#2B3138 !important; } body > header [x-show="notificationsOpen"] .border-t { border-color:#2B3138 !important; } body > header [x-show="notificationsOpen"] [class*="hover:bg"]:hover { background:#1A2026 !important; } body > header [x-show="notificationsOpen"] a { border-color:#343B43 !important; background:#161C22 !important; } } /* ========================================================== 8. HERO SZIMMETRIA search/filter szélességéhez igazítva ========================================================== */ @media(min-width:900px) { .md-hero-copy { width: min( 1004px, calc(100% - 32px) ) !important; max-width:1004px !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; /* csak picit feljebb */ transform: translateY(-12px) !important; } /* ne lógjon túl balra */ .md-hero-copy h1 { margin-left:0 !important; max-width:700px !important; } .md-hero-copy p { margin-left:0 !important; } /* ====================================================== HEADER LOGO / NAV SHELL ugyanarra a függőleges vonalra mint a search blokk ====================================================== */ body > header > div { width: min( 1004px, calc(100% - 32px) ) !important; max-width:1004px !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; } } /* ========================================================== MOBILON ne erőltessük a desktop pozicionálást ========================================================== */ @media(max-width:899px) { .md-hero-copy { transform:none !important; } } /* ===== extracted from cs-home-final-rescue-v2 ===== */ /* ========================================================= 1. HERO ========================================================= */ #carselect-marketplace-home .md-hero-copy { display:flex !important; opacity:1 !important; visibility:visible !important; justify-content:flex-end !important; padding-top:0 !important; padding-bottom:126px !important; transform:translateY(-158px) !important; } #carselect-marketplace-home .md-hero-copy h1 { width:auto !important; max-width:620px !important; margin:0 !important; padding:0 !important; font-size:43px !important; font-weight:700 !important; line-height:1.10 !important; letter-spacing:-0.01em !important; color:#F5F5F3 !important; text-align:left !important; } /* ========================================================= 2. SMART SEARCH gomb fizikailag A MEZŐBEN ========================================================= */ #carselect-marketplace-home #smart-search { background:#0D141B !important; background-image:none !important; border:0 !important; outline:0 !important; box-shadow:none !important; } #carselect-marketplace-home #smart-search .md-smart-form { position:relative !important; display:block !important; grid-template-columns:none !important; width:100% !important; } #carselect-marketplace-home #smart-search .md-smart-input-wrap { position:relative !important; width:100% !important; } #carselect-marketplace-home #smart-search .md-smart-input { display:block !important; width:100% !important; height:62px !important; box-sizing:border-box !important; padding-left:54px !important; padding-right:72px !important; background:#11171D !important; background-image:none !important; border:1px solid #343C45 !important; border-radius:12px !important; color:#F3F4F6 !important; outline:0 !important; box-shadow:none !important; } #carselect-marketplace-home #smart-search .md-smart-input:focus { border-color:#46515C !important; outline:0 !important; box-shadow:none !important; } #carselect-marketplace-home #smart-search .md-smart-go { position:absolute !important; right:6px !important; top:50% !important; transform:translateY(-50%) !important; width:50px !important; height:50px !important; min-width:50px !important; margin:0 !important; padding:0 !important; border:0 !important; outline:0 !important; background:transparent !important; box-shadow:none !important; z-index:10 !important; display:grid !important; place-items:center !important; } #carselect-marketplace-home #smart-search .md-smart-go span { display:grid !important; place-items:center !important; width:46px !important; height:46px !important; border-radius:10px !important; background:#39A9EA !important; background-image:none !important; color:white !important; font-size:23px !important; font-weight:800 !important; box-shadow:none !important; transform:none !important; } /* ========================================================= 3. FILTER — SZÜRKE, NEM KÉK/LILA ========================================================= */ #carselect-marketplace-home .md-filter-panel { background:#0D141B !important; background-image:none !important; border:0 !important; outline:0 !important; box-shadow:none !important; } #carselect-marketplace-home .md-filter-body, #carselect-marketplace-home .md-vehicle-tabs { background:#0D141B !important; background-image:none !important; } #carselect-marketplace-home .md-control { background:#181E25 !important; background-color:#181E25 !important; background-image:none; border:1px solid #343C45 !important; color:#F1F3F5 !important; box-shadow:none !important; } #carselect-marketplace-home .md-control:focus, #carselect-marketplace-home .md-control:focus-visible { border-color:#4B5662 !important; outline:0 !important; box-shadow:none !important; } /* Kúpa / Leasing */ #carselect-marketplace-home .md-toggle-group { background:transparent !important; } #carselect-marketplace-home .md-toggle-btn { background:#181E25 !important; background-image:none !important; border-color:#343C45 !important; color:#AEB7C2 !important; box-shadow:none !important; } #carselect-marketplace-home .md-toggle-btn.active { background:#282F37 !important; background-image:none !important; border-color:#555F69 !important; color:#FFFFFF !important; outline:0 !important; box-shadow:none !important; } /* fő Zobraziť gomb marad Carselect kék */ #carselect-marketplace-home .md-search-btn { background:#39A9EA !important; background-image:none !important; border:0 !important; color:white !important; box-shadow:none !important; } /* alsó akciók */ #carselect-marketplace-home .md-text-action { color:#98A2AD !important; background:transparent !important; border:0 !important; box-shadow:none !important; } #carselect-marketplace-home .md-text-action:hover { color:#F1F3F5 !important; } /* ========================================================= 4. VIAC FILTROV MODAL ========================================================= */ .home-advanced-modal, .cs-advanced-modal-final { background:#111820 !important; background-color:#111820 !important; background-image:none !important; border:0 !important; outline:0 !important; box-shadow:0 26px 80px rgba(0,0,0,.58) !important; } .home-advanced-modal header, .home-advanced-modal h1, .home-advanced-modal h2, .home-advanced-modal h3, .cs-advanced-modal-final header, .cs-advanced-modal-final h1, .cs-advanced-modal-final h2, .cs-advanced-modal-final h3 { background:transparent !important; background-color:transparent !important; background-image:none !important; box-shadow:none !important; } /* modal mezők */ .home-advanced-modal .home-filter-control, .cs-advanced-modal-final .home-filter-control { height:50px !important; background-color:#181E25 !important; border:1px solid #343C45 !important; border-radius:10px !important; color:#F3F4F6 !important; outline:0 !important; box-shadow:none !important; } /* SELECT NYILAK — saját, középre igazított */ .home-advanced-modal select.home-filter-control, .cs-advanced-modal-final select.home-filter-control { appearance:none !important; -webkit-appearance:none !important; padding-right:42px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23AAB3BD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position: right 16px center !important; background-size: 12px 8px !important; } /* ========================================================= 5. NOTIFICATION DROPDOWN ========================================================= */ .cs-notification-popover-final { position:absolute !important; background:#121920 !important; background-color:#121920 !important; background-image:none !important; border:1px solid #303943 !important; box-shadow:0 20px 50px rgba(0,0,0,.48) !important; } /* kis csatlakozó pöcök a harang felé */ .cs-notification-popover-final::before { content:"" !important; position:absolute !important; top:-7px !important; right:43px !important; width:13px !important; height:13px !important; background:#121920 !important; border-left:1px solid #303943 !important; border-top:1px solid #303943 !important; transform:rotate(45deg) !important; z-index:2 !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { #carselect-marketplace-home .md-hero-copy { transform:none !important; margin-left:auto !important; margin-right:auto !important; width:calc(100% - 20px) !important; } #carselect-marketplace-home .md-hero-copy h1 { max-width:340px !important; font-size:34px !important; } } /* ===== extracted from cs-home-left-align-fix ===== */ @media (min-width: 1024px) { /* Ugyanaz a shell mint a keresőé */ #carselect-marketplace-home .md-hero-copy, header .cs-header-inner-compact { width: min(940px, calc(100% - 48px)) !important; max-width: 940px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* HERO blokk: balra igazítás a search bar bal széléhez */ #carselect-marketplace-home .md-hero-copy { display: flex !important; justify-content: flex-start !important; align-items: flex-start !important; transform: translateY(-148px) !important; } #carselect-marketplace-home .md-hero-copy h1 { width: 560px !important; max-width: 560px !important; margin: 0 !important; padding: 0 !important; text-align: left !important; font-size: 43px !important; line-height: 1.08 !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: #F5F5F3 !important; } /* Felső header/logó: ugyanoda essen a bal széle */ header .cs-header-inner-compact { left: auto !important; transform: none !important; } header a[aria-label="CarSelect.sk"] { margin-left: 0 !important; padding-left: 0 !important; left: 0 !important; transform: none !important; position: relative !important; } } /* ===== extracted from cs-home-exact-align-v6 ===== */ /* ======================================================== HERO + LOGO — csak a JS által kiszámolt transform számít ======================================================== */ @media (min-width:1024px) { #carselect-marketplace-home .md-hero-copy h1 { margin-left:0 !important; left:auto !important; } body > header a[aria-label="CarSelect.sk"] { left:auto !important; } } /* ======================================================== VIAC FILTROV — FEKETE CÍM TÉGLALAP VÉGLEG KI ======================================================== */ .home-advanced-modal .cs-modal-heading-wrap, .home-advanced-modal .cs-modal-heading-wrap *, .cs-advanced-modal-final .cs-modal-heading-wrap, .cs-advanced-modal-final .cs-modal-heading-wrap * { background:transparent !important; background-color:transparent !important; background-image:none !important; box-shadow:none !important; text-shadow:none !important; filter:none !important; backdrop-filter:none !important; } .home-advanced-modal .cs-modal-heading-wrap::before, .home-advanced-modal .cs-modal-heading-wrap::after, .cs-advanced-modal-final .cs-modal-heading-wrap::before, .cs-advanced-modal-final .cs-modal-heading-wrap::after { content:none !important; display:none !important; background:none !important; box-shadow:none !important; } /* modal felső teljes sáv ugyanaz a szín legyen */ .home-advanced-modal .cs-modal-header-final { background:#111820 !important; background-color:#111820 !important; background-image:none !important; box-shadow:none !important; } /* ===== extracted from cs-home-active-modal-fix-v1 ===== */ /* ========================================================= TÉNYLEGES HOMEPAGE VIAC FILTROV MODAL ========================================================= */ body:has(#carselect-marketplace-home) .cs-prod-modal-header{ background:#11171D !important; background-color:#11171D !important; background-image:none !important; border-color:rgba(255,255,255,.07) !important; box-shadow:none !important; } body:has(#carselect-marketplace-home) .cs-prod-modal-header > div:first-child, body:has(#carselect-marketplace-home) .cs-prod-modal-kicker, body:has(#carselect-marketplace-home) .cs-prod-modal-header h3{ background:transparent !important; background-color:transparent !important; background-image:none !important; border:0 !important; outline:0 !important; box-shadow:none !important; filter:none !important; } body:has(#carselect-marketplace-home) .cs-prod-modal-kicker{ color:#AAB3BE !important; } body:has(#carselect-marketplace-home) .cs-prod-modal-header h3{ color:#F2F1ED !important; } body:has(#carselect-marketplace-home) .cs-prod-modal-close{ background:#171D24 !important; background-image:none !important; border-color:rgba(255,255,255,.08) !important; color:#DDE3EA !important; box-shadow:none !important; outline:none !important; } /* * A garage ikonok NEM overlay elemek. * Nem kell nekik magas z-index. */ #carselect-marketplace-home .cs-only-garage-icon{ z-index:2 !important; } /* * A modal panel közvetlen szülője a garage cardok fölött. */ body:has(#carselect-marketplace-home) div:has(> .cs-prod-modal-header){ position:relative !important; z-index:1000001 !important; background:#11171D !important; background-color:#11171D !important; background-image:none !important; } /* ===== extracted from cs-home-modal-stack-final-v2 ===== */ /* ========================================================= VIAC FILTROV — STACKING FIX ========================================================= */ /* garage icon normál oldalszint */ #carselect-marketplace-home .cs-only-garage-icon{ position:relative !important; z-index:1 !important; } /* maga a modal panel */ div:has(> .cs-prod-modal-header){ position:relative !important; z-index:2147483646 !important; } /* modal overlay / shell */ div:has(> div > .cs-prod-modal-header){ z-index:2147483645 !important; } /* modal grafit */ .cs-prod-modal-header{ background:#11171D !important; background-image:none !important; border-color:rgba(255,255,255,.07) !important; } .cs-prod-modal-header > div, .cs-prod-modal-kicker, .cs-prod-modal-header h3{ background:transparent !important; background-image:none !important; box-shadow:none !important; } .cs-prod-modal-close{ background:#171D24 !important; background-image:none !important; border-color:rgba(255,255,255,.08) !important; box-shadow:none !important; } /* ===== extracted from cs-home-feed-real-final-20260831 ===== */ #carselect-marketplace-home .cs-recent-final-panel .md-car-price, #carselect-marketplace-home .cs-discount-final-panel .md-car-price { font-size: 17px !important; font-weight: 620 !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; } #carselect-marketplace-home .cs-recent-final-panel .cs-home-added-time { position: absolute !important; top: 10px !important; left: 10px !important; right: auto !important; bottom: auto !important; display: inline-flex !important; align-items: center !important; padding: 5px 8px !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; border-radius: 7px !important; background: rgba(31, 37, 44, .90) !important; color: #D5DCE5 !important; font-size: 10px !important; font-weight: 650 !important; line-height: 1 !important; z-index: 8 !important; } #carselect-marketplace-home .cs-discount-final-panel .cs-home-discount-photo-badge { position: absolute !important; top: 10px !important; left: 10px !important; display: inline-flex !important; align-items: center !important; padding: 6px 9px !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; border-radius: 7px !important; background: rgba(17, 105, 66, .94) !important; color: #B6F5D1 !important; font-size: 11px !important; font-weight: 750 !important; line-height: 1 !important; z-index: 8 !important; } #carselect-marketplace-home .cs-discount-final-panel .cs-home-sale-badge, #carselect-marketplace-home .cs-discount-final-panel .cs-home-sale-amount { display: none !important; } #carselect-marketplace-home .cs-discount-final-panel .cs-home-old-price { font-size: 11px !important; font-weight: 500 !important; color: #7E8996 !important; } #carselect-marketplace-home .cs-home-discount-switch { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding: 3px; border: 0; border-radius: 9px; background: #0B1117; } #carselect-marketplace-home .cs-home-discount-switch-btn { height: 30px; padding: 0 10px; border: 0; outline: 0; border-radius: 7px; background: transparent; color: #8995A2; font-size: 11px; font-weight: 650; cursor: pointer; } #carselect-marketplace-home .cs-home-discount-switch-btn:hover { color: #FFFFFF; } #carselect-marketplace-home .cs-home-discount-switch-btn.is-active { background: #18212A; color: #FFFFFF; } @media (max-width:700px) { #carselect-marketplace-home .cs-home-discount-switch { width: 100%; margin-left: 0; margin-top: 8px; } #carselect-marketplace-home .cs-home-discount-switch-btn { flex: 1; } } /* ===== extracted from cs-home-feed-unify-final-20260831 ===== */ /* Old price = unmistakably old */ #carselect-marketplace-home .cs-discount-final-panel .cs-home-old-price { color: #75818F !important; font-size: 11px !important; font-weight: 500 !important; text-decoration-line: line-through !important; text-decoration-thickness: 1px !important; text-decoration-color: #7D8895 !important; opacity: .90 !important; } /* One clean information line on both feeds */ #carselect-marketplace-home .cs-recent-final-panel .cs-home-inline-meta, #carselect-marketplace-home .cs-discount-final-panel .cs-home-inline-meta { display: block !important; margin-top: 5px !important; color: #8D9AAA !important; font-size: 11.5px !important; font-weight: 450 !important; line-height: 1.35 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Locations identical */ #carselect-marketplace-home .cs-recent-final-panel .md-location, #carselect-marketplace-home .cs-discount-final-panel .md-location { margin-top: 8px !important; color: #738295 !important; font-size: 10px !important; font-weight: 450 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Same show-all link on both blocks */ #carselect-marketplace-home .cs-recent-final-panel .md-show-all, #carselect-marketplace-home .cs-discount-final-panel .md-show-all { color: #8E99A7 !important; font-size: 12px !important; font-weight: 500 !important; text-decoration: none !important; } #carselect-marketplace-home .cs-recent-final-panel .md-show-all:hover, #carselect-marketplace-home .cs-discount-final-panel .md-show-all:hover { color: #FFFFFF !important; } /* ===== extracted from cs-discount-switch-title-position-20260831 ===== */ /* Zľavy + prepínač spolu vľavo */ #carselect-marketplace-home .cs-discount-final-panel .cs-home-discount-switch { margin-left: 10px !important; margin-right: 0 !important; } /* Zobraziť všetky ostáva úplne vpravo */ #carselect-marketplace-home .cs-discount-final-panel .md-show-all { margin-left: auto !important; } /* header row */ #carselect-marketplace-home .cs-discount-final-panel .md-section-title-row { display: flex !important; align-items: center !important; } /* mobilon nech sa to nerozbije */ @media (max-width: 700px) { #carselect-marketplace-home .cs-discount-final-panel .cs-home-discount-switch { width: auto !important; margin-left: 8px !important; margin-top: 0 !important; } #carselect-marketplace-home .cs-discount-final-panel .cs-home-discount-switch-btn { flex: none !important; } } /* ===== extracted from cs-home-modal-overlay-clean-20260831 ===== */ /* * Viac filtrov is open: * homepage feed overlays must never bleed above the modal. */ html.cs-home-filter-open #carselect-marketplace-home .cs-home-added-time, html.cs-home-filter-open #carselect-marketplace-home .cs-home-discount-photo-badge, html.cs-home-filter-open #carselect-marketplace-home .md-scroll-arrow { visibility: hidden !important; pointer-events: none !important; } /* Keep the advanced filter itself firmly above homepage content. */ html.cs-home-filter-open #cs-home-more-filters { z-index: 2147483000 !important; } html.cs-home-filter-open #cs-home-more-filters .cs-prod-modal-dialog { z-index: 2 !important; } /* ===== extracted from cs-home-dealers-location-stable-style-20260831 ===== */ #carselect-marketplace-home .cs-home-dealers-head { display: flex; align-items: center; gap: 14px; } #carselect-marketplace-home .cs-dealer-location-button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 4px 6px; color: #8d9aad; font-size: 12px; font-weight: 550; cursor: pointer; transition: color .18s ease, opacity .18s ease; } #carselect-marketplace-home .cs-dealer-location-button:hover { color: #d8e2ef; } #carselect-marketplace-home .cs-dealer-location-button.cs-location-success { color: #8492a5; cursor: default; } #carselect-marketplace-home .cs-dealer-location-button.cs-location-error { color: #aab4c2; } @media (max-width: 767px) { #carselect-marketplace-home .cs-home-dealers-head { flex-wrap: wrap; gap: 5px 10px; } #carselect-marketplace-home .cs-dealer-location-button { order: 3; width: 100%; padding-left: 0; } } /* ===== extracted from cs-home-dealer-location-compact-final-20260831 ===== */ /* * Dealer heading: * * Autobazáre vo vašom okolí ⌖ Poloha Všetky autobazáre */ #carselect-marketplace-home .cs-home-dealers-head { display: flex !important; align-items: center !important; gap: 9px !important; flex-wrap: nowrap !important; } /* Compact location action directly next to title */ #carselect-marketplace-home .cs-dealer-location-button { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 3px 5px !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: #7F8B9C !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 550 !important; white-space: nowrap !important; opacity: .9 !important; } #carselect-marketplace-home .cs-dealer-location-button span { font-size: 11px !important; } #carselect-marketplace-home .cs-dealer-location-button:hover { color: #B8C2CE !important; } /* * "Všetky autobazáre" stays on far right. */ #carselect-marketplace-home .cs-home-dealers-head .cs-home-dealers-all { margin-left: auto !important; } /* Success remains subtle */ #carselect-marketplace-home .cs-dealer-location-button.cs-location-success { color: #8290A1 !important; } /* * Error must NOT become visually loud. */ #carselect-marketplace-home .cs-dealer-location-button.cs-location-error { color: #7F8B9C !important; } /* Mobile */ @media (max-width: 767px) { #carselect-marketplace-home .cs-home-dealers-head { flex-wrap: wrap !important; gap: 5px 8px !important; } #carselect-marketplace-home .cs-dealer-location-button { order: 0 !important; width: auto !important; padding: 2px 4px !important; font-size: 10.5px !important; } #carselect-marketplace-home .cs-home-dealers-head .cs-home-dealers-all { margin-left: auto !important; } } /* ===== extracted from cs-brand-seo-combined-final ===== */ /* ========================================================== EGYETLEN KÖZÖS PANEL ========================================================== */ #carselect-marketplace-home .cs-brand-seo-combined{ margin-top:38px !important; padding:0 !important; background:#0D1218 !important; background-color:#0D1218 !important; background-image:none !important; border:0 !important; outline:0 !important; box-shadow:none !important; border-radius:18px !important; overflow:hidden !important; } /* ========================================================== BRANDS FELSŐ RÉSZ ========================================================== */ #carselect-marketplace-home .cs-brand-seo-brands{ padding:28px 26px 24px !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } /* ========================================================== MINDKÉT NAGY CÍM PONT UGYANAZ ========================================================== */ #carselect-marketplace-home .cs-brand-seo-combined .md-section-title, #carselect-marketplace-home .cs-brand-seo-content > h2{ margin:0 !important; font-family:inherit !important; font-size:24px !important; font-weight:800 !important; line-height:1.16 !important; letter-spacing:-.025em !important; color:#F2F1ED !important; } /* brands cím alatt tér */ #carselect-marketplace-home .cs-brand-seo-combined .md-section-title-row{ margin-bottom:22px !important; } /* ========================================================== BRAND GRID 6 × 2 ========================================================== */ #carselect-marketplace-home .md-brand-grid{ display:grid !important; grid-template-columns: repeat(6,minmax(0,1fr)) !important; gap:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; overflow:hidden !important; } /* ========================================================== FINOM FOLYAMATOS RÁCS ========================================================== */ #carselect-marketplace-home .md-brand{ min-height:124px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:10px !important; padding:15px 10px !important; background:transparent !important; text-decoration:none !important; border-top:0 !important; border-left:0 !important; border-right: 1px solid rgba(145,160,175,.075) !important; border-bottom: 1px solid rgba(145,160,175,.075) !important; border-radius:0 !important; box-shadow:none !important; transition:background-color .16s ease !important; } /* jobb szélen nincs vonal */ #carselect-marketplace-home .md-brand:nth-child(6n){ border-right:0 !important; } /* alsó szélen nincs vonal */ #carselect-marketplace-home .md-brand:nth-last-child(-n+6){ border-bottom:0 !important; } /* nagyon finom hover */ #carselect-marketplace-home .md-brand:hover{ background:rgba(255,255,255,.014) !important; } /* ========================================================== NORMÁL LOGÓK ========================================================== */ #carselect-marketplace-home .md-brand-logo{ display:block !important; width:48px !important; height:36px !important; max-width:72px !important; object-fit:contain !important; filter: grayscale(1) brightness(0) invert(1) !important; opacity:.75 !important; transition: opacity .16s ease, transform .16s ease !important; } #carselect-marketplace-home .md-brand:hover .md-brand-logo{ opacity:1 !important; transform:translateY(-1px) !important; } /* ========================================================== FORD FIX FONTOS: nem flatteneljük teljes fehér oválissá ========================================================== */ #carselect-marketplace-home .md-brand-logo-ford{ width:64px !important; height:31px !important; max-width:64px !important; filter: grayscale(1) saturate(0) brightness(1.35) contrast(1.30) !important; opacity:.92 !important; } #carselect-marketplace-home .md-brand:hover .md-brand-logo-ford{ filter: grayscale(1) saturate(0) brightness(1.50) contrast(1.32) !important; opacity:1 !important; } /* ========================================================== PORSCHE — LIVE OLDALHOZ HASONLÓ CREST ========================================================== */ #carselect-marketplace-home .md-brand-logo-porsche{ width:40px !important; height:50px !important; max-width:40px !important; object-fit:contain !important; filter:none !important; opacity:.90 !important; } #carselect-marketplace-home .md-brand:hover .md-brand-logo-porsche{ opacity:1 !important; } /* ========================================================== BRAND NEVEK ========================================================== */ #carselect-marketplace-home .md-brand span{ color:#F2F1ED !important; font-size:14px !important; font-weight:700 !important; line-height:1.2 !important; text-align:center !important; } /* ========================================================== BELSŐ ELVÁLASZTÓ ugyanazon panelen belül ========================================================== */ #carselect-marketplace-home .cs-brand-seo-divider{ height:1px !important; margin:0 26px !important; background:rgba(255,255,255,.065) !important; border:0 !important; } /* ========================================================== SEO / CTA ALSÓ RÉSZ ========================================================== */ #carselect-marketplace-home .cs-brand-seo-content{ margin:0 !important; padding:30px 26px 32px !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } #carselect-marketplace-home .cs-brand-seo-content > h2{ margin-bottom:26px !important; } #carselect-marketplace-home .cs-brand-seo-content .cs-seo-intro{ margin-bottom:30px !important; color:#98A3AD !important; } /* CTA-k maradjanak elegánsak */ #carselect-marketplace-home .cs-brand-seo-content .cs-seo-action{ background:transparent !important; border:0 !important; transform:none !important; box-shadow:none !important; } #carselect-marketplace-home .cs-brand-seo-content .cs-seo-action h4{ color:#D5DADD !important; transition:color .16s ease !important; } /* teljes CTA terület hover = CSAK cím fehéredik */ #carselect-marketplace-home .cs-brand-seo-content .cs-seo-action:hover h4{ color:#FFFFFF !important; } #carselect-marketplace-home .cs-brand-seo-content .cs-seo-action:hover{ background:transparent !important; transform:none !important; } /* ========================================================== TABLET ========================================================== */ @media (max-width:1023px){ #carselect-marketplace-home .md-brand-grid{ grid-template-columns: repeat(4,minmax(0,1fr)) !important; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:640px){ #carselect-marketplace-home .md-brand-grid{ grid-template-columns: repeat(3,minmax(0,1fr)) !important; } #carselect-marketplace-home .cs-brand-seo-brands, #carselect-marketplace-home .cs-brand-seo-content{ padding-left:18px !important; padding-right:18px !important; } #carselect-marketplace-home .cs-brand-seo-divider{ margin-left:18px !important; margin-right:18px !important; } } /* ===== extracted from cs-home-mega-cta-hover-final ===== */ /* * HOMEPAGE MEGA MENU CTA * A header a #carselect-marketplace-home-on KÍVÜL van, * ezért közvetlenül a headerben célozzuk. */ body > header .cs-home-mega-card-link { position: relative !important; color: #F2F1ED !important; transition: color .18s ease !important; } body > header .cs-home-mega-card-link::after { content: "" !important; display: block !important; position: absolute !important; left: 0 !important; bottom: 0 !important; width: 100% !important; height: 1.5px !important; background: #33ADFA !important; transform: scaleX(0) !important; transform-origin: left center !important; transition: transform .20s cubic-bezier(.22,.61,.36,1) !important; } body > header .cs-home-mega-card-link:hover, body > header .cs-home-mega-card-link:focus { color: #33ADFA !important; } body > header .cs-home-mega-card-link:hover::after, body > header .cs-home-mega-card-link:focus::after { transform: scaleX(1) !important; } /* ===== extracted from cs-home-dealers-canonical-final ===== */ /* ========================================================== DEALER BLOKK A HÁTTÉRHEZ NEM NYÚLUNK. ÍGY 1:1 A .md-panel / brands blokk színét használja. ========================================================== */ #carselect-marketplace-home .cs-home-dealers-canonical { border: 0 !important; outline: 0 !important; box-shadow: none !important; padding: 24px 28px 26px !important; } /* ========================================================== HEADER ========================================================== */ #carselect-marketplace-home .cs-home-dealers-head { margin-bottom: 18px !important; } /* Všetky autobazáre */ #carselect-marketplace-home .cs-home-dealers-all { font-size: 13px !important; line-height: 1.2 !important; font-weight: 400 !important; color: #98A3AD !important; opacity: .82 !important; text-decoration: none !important; transition: color .16s ease, opacity .16s ease !important; } #carselect-marketplace-home .cs-home-dealers-all:hover { color: #F2F1ED !important; opacity: 1 !important; text-decoration: underline !important; text-decoration-color: #F2F1ED !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; } /* ========================================================== MAIN LAYOUT ========================================================== */ #carselect-marketplace-home .cs-home-dealers-layout { display: grid !important; grid-template-columns: minmax(300px, 39%) minmax(0, 61%) !important; gap: 30px !important; align-items: center !important; } /* ========================================================== PHOTO ========================================================== */ #carselect-marketplace-home .cs-home-dealers-visual { position: relative !important; height: 290px !important; overflow: hidden !important; border-radius: 17px !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } #carselect-marketplace-home .cs-home-dealers-visual img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } #carselect-marketplace-home .cs-home-dealers-overlay { position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient( 90deg, rgba(8,11,15,.82) 0%, rgba(8,11,15,.55) 58%, rgba(8,11,15,.14) 100% ) !important; } #carselect-marketplace-home .cs-home-dealers-copy { position: absolute !important; z-index: 2 !important; left: 26px !important; right: 22px !important; bottom: 24px !important; max-width: 82% !important; } #carselect-marketplace-home .cs-home-dealers-copy h3 { margin: 0 0 10px !important; font-size: 27px !important; line-height: 1.05 !important; font-weight: 700 !important; letter-spacing: -.025em !important; color: #F2F1ED !important; } #carselect-marketplace-home .cs-home-dealers-copy p { margin: 0 !important; font-size: 12px !important; line-height: 1.55 !important; font-weight: 400 !important; color: #A7B1BA !important; } /* ========================================================== DEALER LIST ========================================================== */ #carselect-marketplace-home .cs-home-dealers-right { min-width: 0 !important; } #carselect-marketplace-home .cs-home-dealers-list { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; column-gap: 58px !important; row-gap: 44px !important; align-content: center !important; padding: 0 4px !important; } /* semmilyen dealer box */ #carselect-marketplace-home .cs-home-dealer { display: flex !important; align-items: center !important; gap: 14px !important; min-height: 68px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; transform: none !important; } /* ========================================================== LOGÓ ========================================================== */ #carselect-marketplace-home .cs-home-dealer-logo { width: 82px !important; min-width: 82px !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } #carselect-marketplace-home .cs-home-dealer-logo img { max-width: 78px !important; max-height: 42px !important; width: auto !important; height: auto !important; object-fit: contain !important; opacity: .88 !important; transition: opacity .16s ease !important; } #carselect-marketplace-home .cs-home-dealer:hover .cs-home-dealer-logo img { opacity: 1 !important; } /* ========================================================== DEALER TEXT ========================================================== */ #carselect-marketplace-home .cs-home-dealer-info { display: flex !important; flex-direction: column !important; gap: 2px !important; } /* bazár neve */ #carselect-marketplace-home .cs-home-dealer-info strong { font-size: 14px !important; line-height: 1.25 !important; font-weight: 600 !important; color: #E9EBEA !important; transition: color .16s ease !important; } /* HOVER = CSAK A NÉV KÉK */ #carselect-marketplace-home .cs-home-dealer:hover .cs-home-dealer-info strong { color: var(--cs-brand, #33ADFA) !important; } /* város */ #carselect-marketplace-home .cs-home-dealer-info > span { font-size: 11px !important; line-height: 1.3 !important; font-weight: 400 !important; color: #98A3AD !important; } /* km */ #carselect-marketplace-home .cs-home-dealer-distance { margin-top: 0 !important; font-size: 10px !important; line-height: 1.3 !important; font-weight: 400 !important; color: #98A3AD !important; } /* fallback logó */ #carselect-marketplace-home .cs-home-dealer-logo-fallback { font-size: 12px !important; font-weight: 500 !important; color: #AAB3BB !important; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 900px) { #carselect-marketplace-home .cs-home-dealers-layout { grid-template-columns: 1fr !important; } #carselect-marketplace-home .cs-home-dealers-visual { height: 280px !important; } } @media (max-width: 620px) { #carselect-marketplace-home .cs-home-dealers-list { grid-template-columns: 1fr !important; } } /* ===== extracted from cs-home-unified-ui-v2 ===== */ /* ======================================== EV PANEL ======================================== */ #carselect-marketplace-home .cs-electric-section{ background:#0D1217 !important; border:0 !important; box-shadow:none !important; } /* ======================================== GARÁZS IKON ======================================== */ #carselect-marketplace-home .cs-electric-section .cs-garage-icon{ width:38px !important; height:38px !important; display:grid !important; place-items:center !important; border:0 !important; outline:0 !important; border-radius:999px !important; background:#1B2229 !important; color:#C8D1DA !important; box-shadow: 0 6px 16px rgba(0,0,0,.32) !important; } #carselect-marketplace-home .cs-electric-section .cs-garage-icon svg{ width:21px !important; height:21px !important; display:block !important; stroke:currentColor !important; } /* ======================================== ZOBRAZIŤ VŠETKY ugyanaz a karakter, mint VŠETKY AUTÁ ======================================== */ #carselect-marketplace-home .cs-electric-section .cs-ev-show-all{ color:#8F99A3 !important; font-size:13px !important; font-weight:400 !important; line-height:1.2 !important; opacity:1 !important; text-decoration:none !important; } #carselect-marketplace-home .cs-electric-section .cs-ev-show-all:hover{ color:#C7CFD6 !important; text-decoration:underline !important; text-underline-offset:3px !important; } /* ======================================== MINDEN HOMEPAGE CAROUSEL NYÍL = 1:1 ======================================== */ #carselect-marketplace-home .md-scroll-arrow, #carselect-marketplace-home .cs-popular-cats-arrow, #carselect-marketplace-home .cs-home-types-arrow{ position:absolute !important; top:50% !important; width:52px !important; height:52px !important; min-width:52px !important; min-height:52px !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; border:0 !important; outline:0 !important; border-radius:999px !important; background:#20262C !important; background-image:none !important; color:#FFFFFF !important; box-shadow: 0 14px 34px rgba(0,0,0,.58), 0 5px 12px rgba(0,0,0,.38) !important; transform:translateY(-50%) !important; cursor:pointer !important; } /* hover */ #carselect-marketplace-home .md-scroll-arrow:hover, #carselect-marketplace-home .cs-popular-cats-arrow:hover, #carselect-marketplace-home .cs-home-types-arrow:hover{ background:#2D343B !important; transform: translateY(-50%) scale(1.03) !important; } /* nyíl ikon MÉRET is ugyanaz */ #carselect-marketplace-home .md-scroll-arrow svg, #carselect-marketplace-home .cs-popular-cats-arrow svg, #carselect-marketplace-home .cs-home-types-arrow svg{ width:23px !important; height:23px !important; display:block !important; stroke:currentColor !important; } /* régi › font teljesen kiiktatva */ #carselect-marketplace-home .md-scroll-arrow{ font-size:0 !important; right:10px !important; } /* jobb oldali nyilak */ #carselect-marketplace-home .cs-popular-cats-next, #carselect-marketplace-home .cs-home-types-arrow-next{ right:10px !important; } /* bal oldali nyilak */ #carselect-marketplace-home .cs-popular-cats-prev, #carselect-marketplace-home .cs-home-types-arrow-prev{ left:10px !important; } /* ===== extracted from cs-electric-remove-blue-borders ===== */ .cs-electric-section, .cs-electric-section .md-card, .cs-electric-section .md-car-card, .cs-electric-section .md-electric-card, .cs-electric-section .md-listing-card, .cs-electric-section .md-media, .cs-electric-section .md-media-wrap, .cs-electric-section .md-car-media, .cs-electric-section .md-thumb, .cs-electric-section .md-thumb-wrap, .cs-electric-section .md-image-wrap, .cs-electric-section .md-card-image, .cs-electric-section .md-card-image-wrap, .cs-electric-section a, .cs-electric-section img { border: 0 !important; outline: 0 !important; box-shadow: none !important; } .cs-electric-section img { display: block !important; } /* ===== extracted from cs-electric-match-panel-bg ===== */ .cs-electric-section{ background: linear-gradient(180deg, #0b1726 0%, #091320 100%) !important; border: 1px solid rgba(93, 132, 184, 0.14) !important; border-radius: 28px !important; box-shadow: none !important; } .cs-electric-section .md-section-shell, .cs-electric-section .md-section-inner, .cs-electric-section .md-electric-shell{ background: transparent !important; } /* ===== extracted from axel-homepage-live-style ===== */ /* ========================================================= AXEL HOMEPAGE BANNER ========================================================= */ .md-assistant { position: relative !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 28px !important; min-height: 120px !important; padding: 24px 28px !important; border-radius: 20px !important; background: linear-gradient( 105deg, #061523 0%, #08243D 28%, #0A3C66 55%, #137DBD 79%, #2E9FE5 100% ) !important; border: 1px solid rgba(77, 170, 230, .35) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 34px rgba(0,0,0,.20) !important; } .md-assistant::after { content: "" !important; position: absolute !important; width: 420px !important; height: 420px !important; border-radius: 50% !important; right: -160px !important; top: -210px !important; background: radial-gradient( circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,.055) 38%, transparent 68% ) !important; pointer-events: none !important; } .md-assistant > * { position: relative !important; z-index: 2 !important; } .md-assistant-logo { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 8px !important; color: #FFFFFF !important; font-size: 31px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: -.035em !important; } .md-assistant-logo b { color: #FFFFFF !important; font-weight: 900 !important; } .md-assistant-logo small { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 25px !important; padding: 0 9px !important; border-radius: 7px !important; background: rgba(255,255,255,.16) !important; border: 1px solid rgba(255,255,255,.32) !important; color: #FFFFFF !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .08em !important; } .md-assistant p { margin: 0 !important; max-width: 680px !important; color: rgba(255,255,255,.78) !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 500 !important; } .md-assistant-btn { flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 54px !important; padding: 0 23px !important; border-radius: 14px !important; background: #FFFFFF !important; border: 1px solid rgba(255,255,255,.75) !important; color: #082642 !important; text-decoration: none !important; font-size: 14px !important; line-height: 1 !important; font-weight: 850 !important; box-shadow: 0 9px 24px rgba(0,0,0,.18) !important; transition: transform .18s ease, box-shadow .18s ease !important; } .md-assistant-btn:hover { transform: translateX(2px) !important; background: #FFFFFF !important; color: #082642 !important; box-shadow: 0 12px 30px rgba(0,0,0,.24) !important; } @media (max-width: 700px) { .md-assistant { flex-direction: column !important; align-items: flex-start !important; min-height: 0 !important; padding: 21px !important; gap: 18px !important; } .md-assistant-logo { font-size: 27px !important; } .md-assistant-btn { width: 100% !important; min-height: 50px !important; } } /* ===== extracted from inline-style-34 ===== */ #carselect-marketplace-home .cs-discount-final-panel .cs-home-sale-badge, #carselect-marketplace-home .cs-discount-final-panel .cs-home-sale-amount, #carselect-marketplace-home .cs-discount-final-panel .cs-home-discount-ribbon { display:none !important; visibility:hidden !important; opacity:0 !important; width:0 !important; height:0 !important; padding:0 !important; margin:0 !important; overflow:hidden !important; pointer-events:none !important; } /* EZ AZ EGYETLEN, AMI MARAD */ #carselect-marketplace-home .cs-discount-final-panel .cs-home-discount-corner-ribbon-final { display:flex !important; visibility:visible !important; opacity:1 !important; } /* ===== extracted from inline-style-35 ===== */ @media (max-width:700px) { /* * Mobilon NINCS 50%-os desktop pozicionálás. * A hero copy a kép BAL széléről indul. */ #carselect-marketplace-home .md-hero-copy { position:absolute !important; left:0 !important; right:0 !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 24px !important; box-sizing:border-box !important; transform:none !important; transition:none !important; text-align:left !important; } #carselect-marketplace-home .md-hero-copy h1 { position:absolute !important; left:24px !important; right:auto !important; top:30px !important; width:275px !important; max-width:calc(100vw - 48px) !important; margin:0 !important; padding:0 !important; transform:none !important; transition:none !important; font-size:27px !important; line-height:1.06 !important; letter-spacing:-0.02em !important; text-align:left !important; } } /* ========================================================== CS HOME SMART SEARCH — CARS.COM STYLE V2 — 2026-09-04 Narrower desktop search + vertical suggestion ticker. ========================================================== */ #carselect-marketplace-home #smart-search .md-smart-form { width: min(100%, 820px) !important; margin-left: auto !important; margin-right: auto !important; } #carselect-marketplace-home #smart-search .md-smart-input-wrap { overflow: hidden !important; } #carselect-marketplace-home #smart-search .cs-smart-search-ticker { position: absolute; left: 54px; right: 72px; top: 0; bottom: 0; display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; pointer-events: none; z-index: 4; opacity: 1; transition: opacity 160ms ease; } #carselect-marketplace-home #smart-search .cs-smart-search-ticker.is-hidden { opacity: 0; } #carselect-marketplace-home #smart-search .cs-smart-search-prefix { flex: 0 0 auto; color: #A7B2C0; font-size: 14px; line-height: 20px; font-weight: 650; font-style: normal; } #carselect-marketplace-home #smart-search .cs-smart-search-window { position: relative; display: block; flex: 1 1 auto; min-width: 0; height: 20px; line-height: 20px; overflow: hidden; } #carselect-marketplace-home #smart-search .cs-smart-search-track { display: block; width: 100%; transform: translate3d(0, 0, 0); transition: transform 420ms cubic-bezier(.22,.72,.22,1); will-change: transform; } #carselect-marketplace-home #smart-search .cs-smart-search-track.is-sliding { transform: translate3d(0, -20px, 0); } #carselect-marketplace-home #smart-search .cs-smart-search-track.is-resetting { transition: none !important; } #carselect-marketplace-home #smart-search .cs-smart-search-line { display: block; width: 100%; height: 20px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8F9CAE; font-size: 14px; font-weight: 520; font-style: italic; } @media (max-width: 767px) { #carselect-marketplace-home #smart-search .md-smart-form { width: 100% !important; } #carselect-marketplace-home #smart-search .cs-smart-search-ticker { left: 48px; right: 64px; gap: 5px; } #carselect-marketplace-home #smart-search .cs-smart-search-prefix, #carselect-marketplace-home #smart-search .cs-smart-search-line { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { #carselect-marketplace-home #smart-search .cs-smart-search-track { transition: none !important; } }