/* ============================================================ AutoCub — main.css Design system extras EXACT din AutoCUB.dc.html (designul oficial). Fontul Plus Jakarta Sans + JetBrains Mono se încarcă din (layout). ============================================================ */ :root{ --bg:#f4f5f3; --ink:#11233f; --card:#ffffff; --primary:#1856d6; --primary-hover:#1448b8; --primary-2:#2a6fe0; --navy:#11233f; --navy-hover:#1a3358; --border:#e7e7e3; --border-2:#ececea; --border-3:#e0e0dc; --line-soft:#f1f1ef; --muted:#6e7177; --muted-2:#9aa0a6; --soft:#3a4252; --sub-bg:#e6f4ee; --sub-fg:#0f7a52; --avg-bg:#eef2fb; --avg-fg:#1856d6; --over-bg:#fdebe4; --over-fg:#c2410c; --orange-bg:#fff4e6; --orange-fg:#c2410c; --danger:#e0263f; --mono:'JetBrains Mono',ui-monospace,monospace; --container:1280px; --shadow-card:0 14px 34px -16px rgba(17,35,63,0.4); --shadow-pop:0 18px 44px -14px rgba(17,35,63,0.34); } *{box-sizing:border-box} /* Atributul HTML `hidden` trebuie să ascundă MEREU (altfel un display:flex/grid din CSS îl bate — bug care a făcut ca modale/meniuri să rămână deschise). */ [hidden]{display:none!important} html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%} body{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; background:var(--bg);color:var(--ink); -webkit-font-smoothing:antialiased;line-height:1.5; } img,svg,video{max-width:100%} ::selection{background:var(--primary);color:#fff} img{max-width:100%;display:block} a{color:var(--primary);text-decoration:none} a:hover{text-decoration:none} input,select,button,textarea{font-family:inherit} h1,h2,h3,h4{margin:0;letter-spacing:-0.02em} .mono{font-family:var(--mono)} .muted{color:var(--muted)} @keyframes acFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .wrap{max-width:var(--container);margin:0 auto;padding:0 24px} .wrap-narrow{max-width:1080px;margin:0 auto;padding:0 24px} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none; border-radius:9px;padding:9px 16px;font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s;white-space:nowrap} .btn:hover{text-decoration:none} .btn-primary{background:var(--primary);color:#fff} .btn-primary:hover{background:var(--primary-hover)} .btn-navy{background:var(--navy);color:#fff} .btn-navy:hover{background:var(--navy-hover)} .btn-outline{background:#fff;color:var(--primary);border:1.5px solid var(--primary)} .btn-lg{padding:13px 24px;font-size:14.5px;border-radius:10px} .btn-block{width:100%} /* ---------- Header ---------- */ .site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border)} .site-header .bar{max-width:var(--container);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:24px} .logo{display:flex;align-items:center;gap:9px;cursor:pointer;flex:none} .logo:hover{text-decoration:none} .logo .mark{width:30px;height:30px;border-radius:8px;background:var(--primary);display:flex;align-items:center;justify-content:center} .logo .txt{font-weight:800;font-size:19px;letter-spacing:-0.02em;color:var(--ink)} .logo .txt b{color:var(--primary)} .main-nav{display:flex;align-items:center;gap:2px;flex:none} .main-nav a{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;font-size:13.5px;font-weight:600;color:var(--ink);border-radius:8px;white-space:nowrap} .main-nav a svg{flex:none;color:var(--muted-2);transition:color .15s} .main-nav a:hover{background:#f1f2ef} .main-nav a:hover svg{color:var(--primary)} /* Pe ecrane ≤1440 ascundem textul nav, rămân icoanele (anti-overflow; dealer-ul are multe acțiuni + 2 butoane) */ @media(max-width:1440px) and (min-width:981px){ .main-nav a{font-size:0;padding:9px} .main-nav a svg{width:20px;height:20px} } .header-search{flex:1;max-width:300px;position:relative} .header-search .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted-2);font-size:15px} .header-search input{width:100%;border:1px solid var(--border);background:#f7f7f5;border-radius:9px;padding:9px 12px 9px 34px;font-size:13.5px;color:var(--ink)} .header-search input:focus{outline:none;background:#fff;border-color:var(--primary)} .header-actions{display:flex;align-items:center;gap:10px;flex:none} .h-icon{position:relative;display:flex;align-items:center;gap:6px;padding:8px 10px;cursor:pointer;border-radius:8px;font-size:14px;font-weight:600;color:var(--ink);background:none;border:none} .h-icon:hover{background:#f1f2ef;text-decoration:none} .h-icon .dot{position:absolute;top:4px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:1.5px solid #fff} .h-icon .cnt{position:absolute;top:2px;right:2px;background:var(--primary);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px} .hamburger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink);padding:6px 8px;line-height:1} /* Meniu mobil (ascuns pe desktop) */ .mobile-menu{display:none;border-top:1px solid var(--border);padding:14px 16px;background:#fff} .mobile-menu[hidden]{display:none} .mobile-menu.open{display:block;animation:acFade .15s ease} .mm-search{position:relative;margin-bottom:12px} .mm-search .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted-2)} .mm-search input{width:100%;border:1px solid var(--border);background:#f7f7f5;border-radius:9px;padding:11px 12px 11px 34px;font-size:15px} .mm-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px} .mm-nav a{display:flex;align-items:center;gap:10px;padding:14px 12px;font-size:14px;font-weight:600;color:var(--ink);background:#f7f7f5;border:1px solid var(--border);border-radius:12px} .mm-nav a:hover{background:#eef2fb;border-color:var(--primary);color:var(--primary);text-decoration:none} .mm-nav a:hover svg{color:var(--primary)} .mm-nav a svg{flex:none;color:var(--muted)} .mm-nav a .cnt{margin-left:auto;background:var(--primary);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px} .mm-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px} .mm-actions .btn{padding:13px;font-size:15px} .mm-logout{background:#fff;border:1px solid var(--border);color:var(--danger)} .mm-logout:hover{background:#fdebe4;text-decoration:none} /* Scurtături vizibile doar pe mobil (ascunse pe desktop) */ .only-mobile{display:none} @media(max-width:980px){ .only-mobile{display:flex} } /* ---------- Hero ---------- */ .hero{background:linear-gradient(180deg,#11233f 0%,#16294a 100%);padding:54px 24px 130px;text-align:center} .hero .inner{max-width:1080px;margin:0 auto} .hero .pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16); color:#cdd8ee;padding:6px 14px;border-radius:30px;font-size:13px;font-weight:600;margin-bottom:22px} .hero .pill .g{width:7px;height:7px;border-radius:50%;background:#5ee0a0} .hero h1{font-size:46px;line-height:1.05;font-weight:800;color:#fff;letter-spacing:-0.03em;margin:0 0 14px} .hero .sub{font-size:17px;color:#aebbd4;margin:0 auto;max-width:560px} /* ---------- Search card ---------- */ .search-wrap{max-width:1080px;margin:-86px auto 0;padding:0 24px;position:relative;z-index:2} .search-card{background:#fff;border-radius:16px;box-shadow:0 18px 50px -18px rgba(17,35,63,.35);border:1px solid var(--border-2);padding:10px} .search-tabs{display:flex;gap:4px;padding:4px 8px 12px} .search-tabs span{padding:8px 16px;color:var(--muted);border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer} .search-tabs span.active{background:var(--navy);color:#fff;font-weight:700} .search-tabs span:not(.active):hover{background:#f1f2ef} .search-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:10px;padding:0 4px 4px} .search-grid .fld{display:flex;flex-direction:column;gap:5px} .search-grid label{font-size:11px;font-weight:700;color:var(--muted-2);text-transform:uppercase;letter-spacing:.04em;padding-left:2px} .search-grid select,.search-grid input{border:1px solid var(--border-3);border-radius:9px;padding:11px 12px;font-size:14px;font-weight:600;color:var(--ink);background:#fff;cursor:pointer} .search-grid select:focus{outline:none;border-color:var(--primary)} .search-grid .btn{align-self:flex-end;height:43px} /* Layout compact: Marcă+Model rând, Preț+An rând, buton */ .search-grid.compact{grid-template-columns:1fr 1fr;gap:10px 12px} .search-grid.compact .search-go{grid-column:1 / -1;width:100%;align-self:auto;height:46px;margin-top:2px} .search-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 10px 6px;border-top:1px solid var(--line-soft);margin-top:6px} .search-foot a{font-size:13px;font-weight:600;color:var(--primary)} .search-foot .stats{display:flex;gap:22px} .search-foot .stats span{font-size:13px;color:var(--muted)} .search-foot .stats b{color:var(--ink);font-family:var(--mono)} /* ---------- Section heads ---------- */ .sec{max-width:var(--container);margin:48px auto 0;padding:0 24px} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px} .sec h2{font-size:26px;font-weight:800} .sec .h2sm{font-size:20px} .sec .more{font-size:14px;font-weight:700;color:var(--primary);cursor:pointer} .eyebrow{display:inline-flex;align-items:center;gap:7px;background:var(--orange-bg);color:var(--orange-fg);padding:4px 11px;border-radius:20px;font-size:12px;font-weight:700;margin-bottom:8px} /* ---------- Footer ---------- */ .site-footer{background:var(--navy);color:#9fb0cc;margin-top:64px;padding:46px 0 26px} .site-footer .wrap{display:block} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:30px} .footer-grid h4{color:#fff;font-size:14px;margin-bottom:13px} .footer-grid ul{list-style:none;margin:0;padding:0;line-height:2} .footer-grid a{color:#c2cde0;font-size:14px} .footer-grid a:hover{color:#fff} .footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;font-size:13.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#8294b2} /* SEO internal linking — orașe + mărci */ .footer-seo{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:30px;padding-bottom:30px;border-top:1px solid rgba(255,255,255,.1);padding-top:28px} .footer-seo h4{color:#fff;font-size:14px;margin-bottom:13px} .footer-seo .foot-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px} .footer-seo .foot-links a{color:#c2cde0;font-size:13.5px} .footer-seo .foot-links a:hover{color:#fff} /* ---------- Responsive ---------- */ @media(max-width:980px){ .main-nav,.header-search,.hide-mobile{display:none !important} .hamburger{display:block} .site-header .bar{gap:12px} .header-actions{gap:4px;margin-left:auto} .hero{padding:40px 20px 110px} .hero h1{font-size:32px} .hero .sub{font-size:15px} .search-wrap{margin-top:-78px} .search-grid{grid-template-columns:1fr 1fr} .search-tabs{flex-wrap:wrap} .footer-grid{grid-template-columns:1fr 1fr} .sec h2{font-size:22px} } @media(max-width:560px){ /* Footer rămâne pe 2 coloane pe mobil (cerință UX) */ .footer-grid{grid-template-columns:1fr 1fr} .footer-seo{grid-template-columns:1fr 1fr} .footer-seo .foot-links{grid-template-columns:1fr} .hero h1{font-size:27px} /* Bara de căutare rămâne compactă, 2 col, lizibilă */ .search-grid.compact{grid-template-columns:1fr 1fr} .search-grid:not(.compact){grid-template-columns:1fr} .search-tabs span{padding:7px 12px;font-size:12.5px} .search-foot{flex-direction:column;gap:8px;align-items:flex-start} .search-foot .stats{gap:14px} .sec{margin-top:34px} } @media(max-width:380px){ .footer-seo{grid-template-columns:1fr} } @media(max-width:680px){ .dealer-cta{padding:28px 22px} .dealer-cta h2{font-size:22px} .dealer-cta > div:first-child > div{flex-direction:column} .dealer-cta .btn{width:100%} .dealer-cta .nums{margin-top:18px} .panel{padding:24px 18px} .crumb .in{flex-wrap:wrap} }