/* ============================================================================ NayaPurana — np-mobile.css (FINAL v4) Path: public/frontend/css/np-mobile.css ---------------------------------------------------------------------------- Reference this file from your layout AFTER bootstrap.min.css and style.css, e.g. ---------------------------------------------------------------------------- Scopes • Brand tokens & base utilities → always-on • Section components → always-on • Mobile-only refinements → wrapped in @media (max-width: 768px) • Desktop-only refinements → wrapped in @media (min-width: 769px) ============================================================================ */ :root{ --np-red:#e51b23; --np-red-dark:#b3151b; --np-navy:#1a1a3d; --np-navy-light:#2d2d6b; --np-blue:#4a8fd9; --np-blue-dark:#2f6dba; --np-cream:#fdf7f0; --np-line:#e9e9ef; --np-text:#1a1a3d; --np-muted:#6b6b8a; --np-bg:#f7f7fa; } /* === a11y helper === */ .visually-hidden{ position:absolute!important;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* === mobile top offers banner (replaces home_page_banner_slide) === */ .np-mobile-home .home_page_banner_slide, .np-mobile-home .np-hero-banner{display:none!important} .np-mobile-home .np-offers-banners{ padding:8px 10px 4px; max-width:100%; overflow:visible; background:#fff; } .np-mobile-home .np-offers-banners .offer_home_slide.owl-carousel{ width:100%; } .np-mobile-home .np-offers-banners .offer_home_slide.owl-loaded{ display:block!important; } .np-mobile-home .np-offers-banners .owl-stage-outer{ min-height:clamp(100px, 32vw, 220px); } .np-mobile-home .np-offers-banners .owl-carousel .owl-item{ box-shadow:0 2px 8px rgba(0,0,0,.08); border-radius:12px; } .np-mobile-home .np-offers-banners .owl-carousel .owl-stage{ padding:10px 0; } .np-mobile-home .np-offers-banners .item a{ display:block; line-height:0; } .np-mobile-home .np-offers-banners img{ width:100%; height:auto; max-width:100%; object-fit:contain; border-radius:12px; display:block; opacity:1; visibility:visible; } /* === top type buttons === */ .np-type-row{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px; padding:8px 12px 6px;background:#fff; } .np-type-btn{ position:relative; display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:4px; aspect-ratio:1.4/1;padding:9px 10px; border-radius:12px;text-decoration:none;color:#fff;overflow:hidden; box-shadow:0 4px 12px rgba(26,26,61,.16); transition:transform .14s ease,box-shadow .14s ease; } .np-type-btn:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(26,26,61,.18)} .np-type-btn:hover{color:#fff;text-decoration:none} .np-type-btn--new{background:linear-gradient(160deg,var(--np-red) 0%,var(--np-red-dark) 100%)} .np-type-btn--used{background:linear-gradient(160deg,var(--np-navy) 0%,#0d0d24 100%)} .np-type-btn--kit{background:linear-gradient(160deg,var(--np-blue) 0%,var(--np-blue-dark) 100%)} .np-bg-icon{position:absolute;right:-6px;bottom:-8px;font-size:48px;color:rgba(255,255,255,.12);pointer-events:none;line-height:1} .np-type-btn__icon{ width:24px;height:24px;border-radius:7px; background:rgba(255,255,255,.18); display:flex;align-items:center;justify-content:center; font-size:11px;color:#fff;backdrop-filter:blur(4px); } .np-type-btn__label{font-weight:800;font-size:11px;letter-spacing:.2px;line-height:1.15} .np-type-btn__cta{ font-size:7.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;line-height:1.25; background:rgba(0,0,0,.22);padding:2px 6px;border-radius:999px;align-self:flex-start; max-width:100%;white-space:normal; } /* === Search by Vehicle === */ .np-fv-section{padding:12px 12px;background:#fff} .np-fv-card{ background:linear-gradient(135deg,var(--np-navy) 0%,#262657 100%); border-radius:16px;padding:14px 12px; box-shadow:0 10px 24px rgba(26,26,61,.20); position:relative;overflow:hidden;color:#fff; } .np-fv-card::before{ content:"";position:absolute;left:0;top:0;width:100%;height:3px; background:linear-gradient(90deg,var(--np-red) 0%,#ffba08 100%); } .np-fv-card__heading{display:flex;align-items:center;gap:8px;margin-bottom:10px} .np-fv-card__heading .ico{ width:30px;height:30px;border-radius:50%;background:var(--np-red); display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff; } .np-fv-card__heading h2{font-size:15px;font-weight:800;margin:0;color:#fff;line-height:1.2} .np-fv-card__heading p{font-size:10.5px;opacity:.78;margin:2px 0 0;line-height:1.3;color:#fff} .np-fv-line{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px} .np-fv-line select{ width:100%;height:40px;font-size:12px;font-weight:700;color:var(--np-text); background:#fff;border:0;border-radius:10px;padding:0 22px 0 10px; -webkit-appearance:none;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%231a1a3d' d='M5 6 0 0h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 8px center; box-shadow:0 2px 6px rgba(0,0,0,.10); } .np-fv-vehicle{ background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.18); border-radius:12px;padding:10px;margin-bottom:10px; display:flex;align-items:center;gap:12px;min-height:88px; } .np-fv-vehicle--has-image{ min-height:92px; } .np-fv-vehicle__img{ flex:0 0 clamp(92px, 28vw, 108px); width:clamp(92px, 28vw, 108px); height:clamp(64px, 19vw, 76px); border-radius:10px;background:rgba(0,0,0,.22); display:flex;align-items:center;justify-content:center;overflow:hidden; position:relative; } .np-fv-vehicle__img img{ width:100%;height:100%; object-fit:contain;object-position:center; display:block; } .np-fv-vehicle__img i{color:rgba(255,255,255,.4);font-size:28px} .np-fv-vehicle--has-image .np-fv-vehicle__img{ background:rgba(0,0,0,.12); } .np-fv-vehicle__body{flex:1;min-width:0} .np-fv-vehicle__title{font-size:13px;font-weight:800;line-height:1.2;color:#fff} .np-fv-vehicle__meta{font-size:10.5px;opacity:.75;margin-top:3px;color:#fff} .np-fv-vehicle__empty{font-size:10.5px;opacity:.7;font-style:italic;color:#fff} .np-fv-ctas{display:grid;grid-template-columns:1fr 1fr;gap:8px} .np-fv-cta{ height:40px;border:0;border-radius:999px; display:inline-flex;align-items:center;justify-content:center;gap:5px; font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase; color:#fff;cursor:pointer;text-decoration:none; } .np-fv-cta:hover{color:#fff;text-decoration:none} .np-fv-cta--new{background:linear-gradient(135deg,var(--np-red) 0%,var(--np-red-dark) 100%);box-shadow:0 5px 14px rgba(229,27,35,.4)} .np-fv-cta--used{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.30)} .np-fv-cta:active{transform:scale(.97)} /* === Section scaffold === */ .np-section{padding:14px 12px 8px;background:#fff} .np-section--alt{background:var(--np-bg)} .np-section__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px;padding:0 2px} .np-section__head h2{ font-size:14.5px;font-weight:800;color:var(--np-navy); margin:0;letter-spacing:.1px;position:relative;padding-left:10px; } .np-section__head h2::before{ content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px; background:linear-gradient(180deg,var(--np-red),var(--np-red-dark));border-radius:2px; } .np-section__head .more{ font-size:10.5px;font-weight:700;color:var(--np-red);text-decoration:none; display:inline-flex;align-items:center;gap:4px;text-transform:uppercase;letter-spacing:.5px; } /* === Card (used by Categories + Cars for Parts) === */ .np-cat-grid,.np-cars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .np-card{ background:#fff;border:1px solid var(--np-line);border-radius:12px; overflow:hidden;text-decoration:none;color:var(--np-text); transition:transform .12s ease,box-shadow .12s ease;display:block; } .np-card:hover{color:var(--np-text);text-decoration:none} .np-card:active{transform:scale(.97);box-shadow:0 4px 10px rgba(0,0,0,.08)} .np-card__media{aspect-ratio:4/3;background:#f1f1f4;position:relative;overflow:hidden} .np-card__media img{width:100%;height:100%;object-fit:cover;display:block} /* Category icons — fill the tile area, contain to avoid distortion */ .np-card__media--category{ aspect-ratio:4/3; padding:4px;background:#eef0f4; } .np-card__media--category img{ width:100%;height:100%; object-fit:contain;object-position:center; display:block; } /* Vehicle photos — cover is fine */ .np-card__media--photo{ position:relative; overflow:hidden; } .np-card__media--photo img{object-fit:cover} .np-card__tag, .np-card__parts-badge{ position:absolute;top:8px;left:8px;z-index:2; font-size:9px;font-weight:800;letter-spacing:.5px;line-height:1.3; background:var(--np-red);color:#fff;padding:3px 7px;border-radius:5px;text-transform:uppercase; pointer-events:none; box-shadow:0 1px 4px rgba(0,0,0,.22); white-space:nowrap; } .np-card__body{padding:6px 8px 8px;text-align:center} .np-card__title{ font-size:11px;font-weight:800;line-height:1.2;color:var(--np-navy); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .np-card__meta{font-size:9.5px;color:var(--np-muted);font-weight:600;margin-top:2px} /* === Manufacturers === */ .np-makers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .np-makers-grid__item, .np-makers-grid>a{ display:flex;align-items:center;justify-content:center; background:#fff;border:1px solid var(--np-line);border-radius:10px; min-height:68px;height:68px;padding:8px;text-decoration:none; transition:transform .12s ease,border-color .12s ease; } .np-makers-grid__item:active, .np-makers-grid>a:active{transform:scale(.95);border-color:var(--np-red)} .np-makers-grid__logo{ display:flex;align-items:center;justify-content:center; width:100%;height:100%; } .np-makers-grid__logo img, .np-makers-grid>a img{ width:auto;height:auto; max-width:92%;max-height:44px; object-fit:contain;object-position:center; display:block; } /* === Shop by Brand === */ .np-brand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .np-brand-grid__item, .np-brand-grid>a{ display:flex;flex-direction:column;align-items:center;justify-content:flex-start; background:#fff;border:1px solid var(--np-line);border-radius:10px; min-height:84px;padding:8px 4px 6px;text-decoration:none;color:var(--np-navy); transition:transform .12s ease,border-color .12s ease; } .np-brand-grid__item:hover, .np-brand-grid>a:hover{color:var(--np-navy);text-decoration:none} .np-brand-grid__item:active, .np-brand-grid>a:active{transform:scale(.95);border-color:var(--np-red)} .np-brand-grid__logo{ flex:1;display:flex;align-items:center;justify-content:center; width:100%;min-height:40px;padding:2px 0; } .np-brand-grid__logo img, .np-brand-grid>a img{ width:auto;height:auto; max-width:88%;max-height:34px; object-fit:contain;object-position:center; display:block; } .np-brand-grid__name{ font-size:8.5px;font-weight:800;color:var(--np-navy); letter-spacing:.2px;text-transform:uppercase; line-height:1.2;text-align:center; max-width:100%;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;padding:0 2px; } /* === Learn & Explore tabs === */ .np-content-section{padding:16px 12px 12px;background:var(--np-bg)} .np-tabs{ display:flex;gap:6px;padding:4px;background:#fff; border:1px solid var(--np-line);border-radius:999px;margin-bottom:10px; } .np-tab{ flex:1;height:32px;border:0;background:transparent;color:var(--np-muted); font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px; border-radius:999px;cursor:pointer;transition:all .15s ease;font-family:inherit; } .np-tab.is-active{background:var(--np-red);color:#fff;box-shadow:0 4px 10px rgba(229,27,35,.35)} .np-blog-row{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory} .np-blog-row::-webkit-scrollbar{display:none} .np-blog-card{ flex:0 0 210px;scroll-snap-align:start; background:#fff;border:1px solid var(--np-line);border-radius:12px; text-decoration:none;color:var(--np-text);overflow:hidden; } .np-blog-card:hover{color:var(--np-text);text-decoration:none} .np-blog-card__img{height:110px;background:#eee;overflow:hidden} .np-blog-card__img img{width:100%;height:100%;object-fit:cover;display:block} .np-blog-card__body{padding:9px 10px 11px} .np-blog-card__cat{font-size:9px;font-weight:800;color:var(--np-red);text-transform:uppercase;letter-spacing:.8px} .np-blog-card__title{ font-size:12px;font-weight:800;color:var(--np-navy);line-height:1.3;margin:4px 0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .np-blog-card__meta{font-size:9.5px;color:var(--np-muted);font-weight:600} .np-faq{background:#fff;border:1px solid var(--np-line);border-radius:14px;overflow:hidden} .np-faq__item{border-bottom:1px solid var(--np-line)} .np-faq__item:last-child{border-bottom:0} .np-faq__q{ width:100%;background:#fff;border:0;padding:12px 14px; display:flex;align-items:center;justify-content:space-between;gap:10px; font-size:12.5px;font-weight:700;color:var(--np-navy);text-align:left; cursor:pointer;font-family:inherit; } .np-faq__q i{color:var(--np-red);transition:transform .2s ease} .np-faq__item.is-open .np-faq__q i{transform:rotate(45deg)} .np-faq__a{padding:0 14px 12px;font-size:11.5px;color:var(--np-muted);line-height:1.5;display:none} .np-faq__item.is-open .np-faq__a{display:block} /* === SEO content === */ .np-seo{padding:14px 14px;background:var(--np-cream);border-top:1px solid var(--np-line)} .np-seo h2{font-size:13px;font-weight:800;color:var(--np-navy);margin:0 0 8px} .np-seo p{font-size:11px;line-height:1.55;color:#48485a;margin:0 0 8px} .np-seo a{color:var(--np-red);text-decoration:underline} /* === Loading indicator (vehicle parts AJAX) === */ .loading-indicator{ background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff;padding:20px;border-radius:10px;margin:12px; text-align:center;box-shadow:0 4px 15px rgba(0,0,0,.1); } .loading-content{display:flex;flex-direction:column;align-items:center;justify-content:center} .spinner{ width:40px;height:40px;border:4px solid rgba(255,255,255,.3); border-top:4px solid #ffd700;border-radius:50%; animation:np-spin 1s linear infinite;margin-bottom:15px; } .loading-indicator p{margin:0;font-size:16px;font-weight:600;color:#ffd700} @keyframes np-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} /* === Search by vehicle — AJAX parts results === */ #np-fv-result-area{ padding:0 12px 10px; background:#fff; } #np-fv-result-area .loading-indicator{ margin:8px 0; } #partsresult .np-parts-hint{ margin:10px 0 8px; font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--np-muted); } #partsresult .np-parts-empty{ margin:10px 0; padding:14px 12px; text-align:center; font-size:13px; font-weight:600; color:var(--np-muted); background:var(--np-bg); border-radius:10px; } #partsresult .np-parts-grid{ display:flex; flex-wrap:nowrap; gap:10px; overflow-x:auto; overflow-y:hidden; padding:4px 2px 12px; margin:0; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; } #partsresult .np-parts-grid::-webkit-scrollbar{ height:5px; } #partsresult .np-parts-grid::-webkit-scrollbar-thumb{ background:#c6c6d1; border-radius:4px; } #partsresult .np-part-card{ flex:0 0 132px; width:132px; max-width:132px; scroll-snap-align:start; display:flex; flex-direction:column; background:#fff; border:1px solid var(--np-line); border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(26,26,61,.08); } #partsresult .np-part-card.selectable-modification{ cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; } #partsresult .np-part-card.selectable-modification.selected, #partsresult .np-part-card.selectable-modification:active{ border-color:var(--np-navy); box-shadow:0 4px 12px rgba(26,26,61,.16); transform:translateY(-1px); } #partsresult .np-part-card__link{ display:block; line-height:0; } #partsresult .np-part-card__media{ height:72px; display:flex; align-items:center; justify-content:center; background:#f4f4f8; overflow:hidden; } #partsresult .np-part-card__img{ width:100%; height:100%; max-height:72px; object-fit:contain; object-position:center; display:block; } #partsresult .np-part-card__title{ padding:8px 6px 10px; text-align:center; min-height:52px; display:flex; align-items:center; justify-content:center; } #partsresult .np-part-card__title p{ margin:0; font-size:10px; font-weight:700; line-height:1.3; color:var(--np-navy); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } #partsresult .np-part-card.selectable-modification.selected .np-part-card__title p{ color:var(--np-red); } .np-mobile-home #modificationButtons{ display:none!important; } /* === Cookie banner: bottom strip (does not push content) === */ .gdpr-cookie-notice{ position:fixed!important;left:0;right:0;bottom:0;top:auto!important; max-width:100%!important;border-radius:0!important; box-shadow:0 -2px 14px rgba(0,0,0,.15);z-index:9999; } @media (min-width:768px){ .gdpr-cookie-notice{ left:16px;right:auto;bottom:16px; max-width:420px!important;border-radius:12px!important; } } /* === Skip layout cost for below-the-fold sections === */ .np-content-section, .np-seo{content-visibility:auto;contain-intrinsic-size:600px} /* ============================================================================ MOBILE-ONLY OVERRIDES (≤768px) ============================================================================ */ @media (max-width:768px){ /* ── Page shell ── */ .np-mobile-home{ overflow-x:hidden; max-width:100%; -webkit-text-size-adjust:100%; } .np-mobile-home .main-container, .np-mobile-home #main-content{ overflow-x:hidden; max-width:100%; } .np-mobile-home img{ max-width:100%; height:auto; } /* Top offers slider (first in HTML — before New/Used/Kit buttons) */ .np-mobile-home .np-offers-banners{ padding:4px 10px 8px; margin:0; } .np-mobile-home .np-offers-banners .owl-stage-outer{ min-height:clamp(110px, 34vw, 240px); } .np-mobile-home .np-offers-banners .offer_home_slide .item img{ width:100%; height:auto; aspect-ratio:unset; object-fit:contain; } /* ── Category grid: uniform tiles ── */ .np-mobile-home .np-cat-grid{ gap:8px; align-items:stretch; } .np-mobile-home .np-cat-grid .np-card{ display:flex;flex-direction:column;height:100%; } .np-mobile-home .np-card__media--category{ flex:0 0 auto; aspect-ratio:4/3; padding:clamp(2px, 0.8vw, 4px); } .np-mobile-home .np-cat-grid .np-card__media--category img{ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; object-position:center; } .np-mobile-home .np-cat-grid .np-card__body{ flex:1;display:flex;align-items:center;justify-content:center; min-height:32px;padding:6px 4px 8px; } .np-mobile-home .np-cat-grid .np-card__title{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:10px; line-height:1.25; } /* ── Car manufacturer logos ── */ .np-mobile-home .np-makers-grid{ gap:8px; align-items:stretch; } .np-mobile-home .np-makers-grid__item{ min-height:clamp(60px, 18vw, 76px); height:auto; padding:8px 6px; } .np-mobile-home .np-makers-grid__logo img{ max-height:clamp(28px, 8vw, 44px); } /* ── Brand logos ── */ .np-mobile-home .np-brand-grid{ gap:8px; align-items:stretch; } .np-mobile-home .np-brand-grid__item{ min-height:clamp(76px, 22vw, 92px); } .np-mobile-home .np-brand-grid__logo{ min-height:clamp(34px, 10vw, 44px); } .np-mobile-home .np-brand-grid__logo img{ max-height:clamp(26px, 7.5vw, 36px); } .np-mobile-home .np-brand-grid__name{ font-size:clamp(7.5px, 2.2vw, 9px); } /* ── Cars for parts ── */ .np-mobile-home .np-cars-grid .np-card__media--photo{ aspect-ratio:4/3; } .np-mobile-home .np-cars-grid .np-card__parts-badge, .np-mobile-home .np-cars-grid .np-card__tag{ top:8px;left:8px; font-size:9px;padding:3px 7px;border-radius:5px; } /* category 3×3 matches Cars-for-Parts size */ .np-cat-grid{gap:8px} /* hide legacy duplicate sections if present */ .popular_car_makers.mobile_find_vehicle, .type_banner, .mobile_category_section, .desktop_category_section, .why_choose_naya, .why_choose_naya2, .find_by_vehicle_kits, .out_home_banner{display:none!important} /* streamline homepage layout on mobile */ .pattern_design:before, .pattern_design:after{display:none} .main-container{padding-top:0} #content.pattern_design{padding:0} } /* Tablet — Cars for Parts badge */ @media (min-width:481px) and (max-width:768px){ .np-mobile-home .np-cars-grid .np-card__parts-badge, .np-mobile-home .np-cars-grid .np-card__tag{ top:10px;left:10px; font-size:10px;padding:4px 9px;border-radius:6px; } } /* Very small phones (320px–360px) */ @media (max-width:360px){ .np-mobile-home .np-type-row{gap:6px;padding:6px 8px} .np-mobile-home .np-type-btn{padding:8px 7px} .np-mobile-home .np-type-btn__label{font-size:10px} .np-mobile-home .np-cat-grid, .np-mobile-home .np-cars-grid, .np-mobile-home .np-makers-grid, .np-mobile-home .np-brand-grid{gap:6px} .np-mobile-home .np-section{padding:12px 8px 6px} .np-mobile-home .np-fv-section{padding:10px 8px} .np-mobile-home .np-fv-vehicle{ gap:10px; padding:10px 8px; min-height:84px; } .np-mobile-home .np-fv-vehicle--has-image{ min-height:88px; } #np-fv-result-area{padding:0 8px 8px} #partsresult .np-part-card{ flex:0 0 128px; width:128px; max-width:128px; } .np-mobile-home .np-offers-banners{padding:4px 8px 8px} .np-mobile-home .np-makers-grid__item{padding:6px 4px} .np-mobile-home .np-brand-grid__item{padding:6px 3px 5px} .np-mobile-home .np-cars-grid .np-card__parts-badge, .np-mobile-home .np-cars-grid .np-card__tag{ top:6px;left:6px; font-size:8px;padding:2px 6px;border-radius:4px; } } /* Desktop homepage uses the original theme — np-* styles are mobile-only above */