/* ===================================================== EASYDEKHO — PROFESSIONAL REDESIGN ENHANCEMENTS v3.0 Add to: public_html/css/easydekho_pro.css Include in easydekho_view.php after other CSS ===================================================== */ /* ── Base ─────────────────────────────────────────── */ :root { --p:#800080; --p2:#5c005c; --p3:#a040a0; --pg:#f5f0ff; --card-r:14px; --card-sh:0 2px 12px rgba(0,0,0,.08); --card-sh-h:0 8px 28px rgba(128,0,128,.18); } *,*::before,*::after{box-sizing:border-box} body { background:#F4F2F8 !important; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important; } /* ── Section wrapper: white card look ──────────────── */ .section { background:#fff !important; border-radius:0 !important; margin:0 0 8px 0 !important; box-shadow:0 1px 0 rgba(0,0,0,.05) !important; overflow:visible !important; } /* ── Section header ────────────────────────────────── */ .section-header { display:flex !important; align-items:center !important; justify-content:space-between !important; padding:14px 14px 10px !important; border-bottom:none !important; } .section-header h2 { font-size:15.5px !important; font-weight:800 !important; color:#1a1a2e !important; letter-spacing:-.2px !important; display:flex !important; align-items:center !important; gap:7px !important; position:relative !important; padding-left:11px !important; } .section-header h2::before { content:''; position:absolute; left:0;top:2px;bottom:2px; width:3.5px; background:linear-gradient(180deg,var(--p),var(--p3)); border-radius:4px; } .section-header a { display:inline-flex !important; align-items:center !important; gap:5px !important; background:var(--p) !important; color:#fff !important; font-size:12px !important; font-weight:700 !important; padding:6px 14px !important; border-radius:50px !important; text-decoration:none !important; box-shadow:0 2px 8px rgba(128,0,128,.28) !important; transition:transform .15s,box-shadow .15s !important; white-space:nowrap !important; } .section-header a::after { content:' \203A'; font-size:15px; } .section-header a:hover { transform:translateY(-1px) !important; box-shadow:0 4px 14px rgba(128,0,128,.36) !important; } /* ── Horizontal deals slider ────────────────────────── */ .deals-slider { display:flex !important; gap:10px !important; overflow-x:auto !important; scrollbar-width:none !important; padding:2px 14px 18px !important; -webkit-overflow-scrolling:touch !important; } .deals-slider::-webkit-scrollbar { display:none !important; } /* ── Deal card (horizontal scroll) ─────────────────── */ .deal-card { flex:0 0 148px !important; min-width:148px !important; background:#fff !important; border-radius:var(--card-r) !important; border:1px solid #EDE8F8 !important; box-shadow:var(--card-sh) !important; overflow:hidden !important; transition:box-shadow .22s,transform .22s !important; cursor:pointer !important; } .deal-card:active { transform:scale(.97) !important; } .deal-card:hover { box-shadow:var(--card-sh-h) !important; transform:translateY(-3px) !important; } .deal-card a { display:flex !important; flex-direction:column !important; text-decoration:none !important; height:100% !important; } .deal-card img { width:100% !important; aspect-ratio:1/1 !important; height:auto !important; object-fit:cover !important; display:block !important; } .deal-info { padding:9px 10px !important; background:#fff !important; display:flex !important; align-items:center !important; justify-content:center !important; } .deal-info p { display:inline-flex !important; align-items:center !important; gap:4px !important; background:linear-gradient(90deg,var(--p),var(--p3)) !important; color:#fff !important; font-size:11.5px !important; font-weight:800 !important; padding:5px 12px !important; border-radius:50px !important; margin:0 !important; white-space:nowrap !important; box-shadow:0 2px 8px rgba(128,0,128,.32) !important; text-align:center !important; } .deal-info p::before { content:'\1F4B8'; font-size:12px; } /* ── 2-col grid (Top Deals, Fashion, etc.) ──────────── */ .grid-2-section { display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; padding:4px 10px 16px !important; } .grid-2-section > a, .grid-2-section > div { background:#fff !important; border-radius:var(--card-r) !important; border:1px solid #EDE8F8 !important; box-shadow:var(--card-sh) !important; overflow:hidden !important; transition:box-shadow .2s,transform .2s !important; cursor:pointer !important; text-decoration:none !important; } .grid-2-section > a:hover, .grid-2-section > div:hover { box-shadow:var(--card-sh-h) !important; transform:translateY(-2px) !important; } /* ── Brand/Store 3-col grid ─────────────────────────── */ .brand-grid { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:8px !important; padding:4px 10px 16px !important; } @media(min-width:540px) { .brand-grid { grid-template-columns:repeat(4,1fr) !important; } } @media(min-width:768px) { .brand-grid { grid-template-columns:repeat(5,1fr) !important; gap:10px !important; } } @media(min-width:1024px){ .brand-grid { grid-template-columns:repeat(6,1fr) !important; } } .brand-card { background:#FAFAFA !important; border:1px solid #EDE8F8 !important; border-radius:12px !important; aspect-ratio:1 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; box-shadow:0 1px 5px rgba(0,0,0,.06) !important; transition:all .2s !important; padding:6px !important; cursor:pointer !important; } .brand-card:hover { box-shadow:0 6px 18px rgba(128,0,128,.15) !important; transform:translateY(-2px) !important; } .brand-card img { width:100% !important; height:100% !important; object-fit:contain !important; border-radius:7px !important; } /* Cashback pill inside brand-with-cashback cards */ .brand-with-cashback { background:#fff !important; border:1px solid #EDE8F8 !important; border-radius:var(--card-r) !important; overflow:hidden !important; box-shadow:var(--card-sh) !important; transition:all .2s !important; } .brand-with-cashback:hover { transform:translateY(-2px) !important; box-shadow:var(--card-sh-h) !important; } /* ── Category icon row ──────────────────────────────── */ #contentwrap_home_offer_mobi_all_scroll { background:#fff !important; padding:14px 0 16px !important; border-bottom:1px solid #EDE8F8 !important; } .home_offer_mobi_all_image { width:60px !important; height:60px !important; border-radius:50% !important; box-shadow:0 3px 10px rgba(0,0,0,.12) !important; border:2px solid rgba(255,255,255,.9) !important; transition:transform .18s,box-shadow .18s !important; } .home_offer_mobi_all:active .home_offer_mobi_all_image { transform:scale(.92) !important; } .home_offer_mobi_all_text { font-size:11px !important; font-weight:600 !important; color:#374151 !important; } /* ── Hero / Category 3-card scroll ──────────────────── */ .home_offer2 { flex:0 0 150px !important; background:#fff !important; border-radius:14px !important; border:1px solid #EDE8F8 !important; box-shadow:var(--card-sh) !important; overflow:hidden !important; transition:all .2s !important; } .home_offer2:hover { box-shadow:var(--card-sh-h) !important; transform:translateY(-2px) !important; } .home_offer2_image { height:115px !important; } .home_offer2_text { font-size:12px !important; font-weight:600 !important; color:#1a1a2e !important; padding:8px 10px !important; } /* ── Header section title (non .section-header) ──────── */ #contentwrap_home_text p, #contentwrap_home_text_1 p { font-size:15.5px !important; font-weight:800 !important; color:#1a1a2e !important; padding-left:11px !important; position:relative !important; } #contentwrap_home_text p::before, #contentwrap_home_text_1 p::before { content:''; position:absolute; left:0;top:3px;bottom:3px; width:3.5px; background:linear-gradient(180deg,var(--p),var(--p3)); border-radius:4px; } /* ── "All" link button in non-section-header ─────────── */ #contentwrap_home_text a { background:var(--p) !important; color:#fff !important; border-radius:50px !important; padding:5px 13px !important; font-size:12px !important; font-weight:700 !important; box-shadow:0 2px 8px rgba(128,0,128,.25) !important; } /* ── Bottom navigation ───────────────────────────────── */ .eh-bnav { height:58px !important; background:#fff !important; border-top:1px solid #EDE8F8 !important; box-shadow:0 -4px 20px rgba(0,0,0,.09) !important; } .eh-ni { color:#9ca3af !important; font-size:10px !important; font-weight:600 !important; letter-spacing:.1px !important; padding-bottom:2px !important; } .eh-ni i { font-size:20px !important; line-height:1 !important; } .eh-ni span { font-size:10.5px !important; margin-top:1px !important; } .eh-ni.active { color:var(--p) !important; } .eh-ni.active i { color:var(--p) !important; transform:scale(1.08); } .eh-ni.active::before { content:'' !important; position:absolute !important; top:0 !important; left:50% !important; transform:translateX(-50%) !important; width:28px !important; height:3px !important; background:var(--p) !important; border-radius:0 0 4px 4px !important; } /* ── Earn steps banner ───────────────────────────────── */ #contentwrap_home_offer_earn_steps { background:#fff !important; gap:10px !important; padding:10px 14px 14px !important; } #contentwrap_home_offer_earn_step { flex:0 0 200px !important; border-radius:12px !important; overflow:hidden !important; box-shadow:var(--card-sh) !important; } /* ── Spacer between sections ─────────────────────────── */ #wrap_home_offer2 { background:#F4F2F8 !important; padding:8px 0 !important; margin:0 !important; } /* ── Responsive tweaks ───────────────────────────────── */ @media(min-width:768px) { .section { margin:0 0 12px 0 !important; } .deal-card { flex:0 0 170px !important; min-width:170px !important; } .section-header { padding:16px 20px 12px !important; } .section-header h2 { font-size:17px !important; } .deals-slider { padding:2px 20px 20px !important; gap:12px !important; } .brand-grid { gap:12px !important; padding:4px 20px 20px !important; } .grid-2-section { gap:12px !important; padding:4px 20px 18px !important; } .grid-2-section { grid-template-columns:repeat(3,1fr) !important; } .home_offer2 { flex:0 0 175px !important; } .home_offer2_image { height:135px !important; } } @media(min-width:1024px) { .grid-2-section { grid-template-columns:repeat(4,1fr) !important; } .section { max-width:1200px !important; margin:0 auto 12px !important; } } /* ── Page wrapper max-width on large screens ─────────── */ @media(min-width:1200px) { #contentwrap { max-width:1200px !important; margin:0 auto !important; } } /* ── Cashback "%" text emphasis in cards ─────────────── */ .deal-info p strong, .cashback-text, [class*="cashback"] { background:linear-gradient(90deg,var(--p),var(--p3)) !important; -webkit-background-clip:text !important; background-clip:text !important; } /* ── No background on body content ─────────────────── */ .section + .section { border-top:1px solid #F0EBF9; } /* ── Smooth scroll ──────────────────────────────────── */ html { scroll-behavior:smooth; } /* ── Focus states ────────────────────────────────────── */ a:focus-visible, button:focus-visible { outline:2px solid var(--p) !important; outline-offset:2px !important; }