/* ============================================================================= premium-frontend.css — Enterprise Storefront Override Layer Active eCommerce CMS · shared frontend layout (covers all 6 themes) ----------------------------------------------------------------------------- SCOPE: Typography · brand color system · buttons · inputs/search · product cards · header links · footer · pagination · breadcrumb. SAFE BY DESIGN: • সব rule `body.premium-front`-এ scoped → admin অপরিবর্তিত। • Visual-only (color/type/radius/shadow/spacing/hover)। কোনো cart/checkout JS hook (`.cart-btn`, lazyload, hover-icon position) behavior ছোঁয়া হয়নি, শুধু চেহারা polish। DOM/class/structure অপরিবর্তিত। • premium-tokens.css আগে লোড হতে হবে; এই ফাইল theme css-এর পরে লোড হয়। INSTALL (frontend/layouts/app.blade.php, theme css block-এর পরে — auto-edited): এবং body: ============================================================================= */ /* ---------- 0. Canvas + typography ---------- */ body.premium-front { font-family: var(--font-en); color: var(--text); background: var(--surface); } body.premium-front h1, body.premium-front h2, body.premium-front h3, body.premium-front h4, body.premium-front h5 { color: var(--ink); font-weight: var(--fw-bold); letter-spacing: -.01em; } body.premium-front a { transition: color var(--dur) var(--ease); } body.premium-front a:hover { color: var(--brand); } /* ---------- 1. Brand color system ---------- */ body.premium-front .text-primary { color: var(--brand) !important; } body.premium-front .bg-primary { background-color: var(--brand) !important; } body.premium-front .border-primary { border-color: var(--brand) !important; } body.premium-front .btn-primary { background-color: var(--brand); border-color: var(--brand); color: var(--on-brand); } body.premium-front .btn-primary:hover, body.premium-front .btn-primary:focus { background-color: var(--brand-hover); border-color: var(--brand-hover); box-shadow: var(--ring); } /* ---------- 2. Buttons ---------- */ body.premium-front .btn { border-radius: var(--radius-sm); font-weight: var(--fw-semibold); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease); } body.premium-front .btn:active { transform: translateY(1px); } body.premium-front .btn-lg { border-radius: var(--radius); } /* ---------- 3. Inputs / search ---------- */ body.premium-front .form-control, body.premium-front .aiz-selectpicker .dropdown-toggle { border-radius: var(--radius-sm); border-color: var(--line); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } body.premium-front .form-control:focus { border-color: var(--brand-400); box-shadow: var(--ring); } /* top search bar */ body.premium-front .aiz-search input, body.premium-front .nav-search-box .form-control { border-radius: var(--radius-full); } body.premium-front .input-group-text { background: var(--surface-3); border-color: var(--line); color: var(--muted); } /* ---------- 4. Product card ---------- */ body.premium-front .aiz-card-box { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); overflow: hidden; } body.premium-front .aiz-card-box:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--brand-100); } /* product image radius (cosmetic only) */ body.premium-front .aiz-card-box .rounded-2 { border-radius: var(--radius) !important; } /* price */ body.premium-front .product-price, body.premium-front .text-primary.fw-700 { color: var(--brand) !important; } /* discount / badge pills */ body.premium-front .aiz-card-box .rounded-4 { border-radius: var(--radius-full) !important; } /* add-to-cart hover bar — recolor only, behavior untouched */ body.premium-front .cart-btn { background: var(--brand); transition: background var(--dur) var(--ease); } body.premium-front .cart-btn:hover, body.premium-front .cart-btn.active { background: var(--brand-hover); } /* rating stars keep their color; just spacing */ body.premium-front .rating { letter-spacing: 1px; } /* ---------- 5. Header ---------- */ body.premium-front .top-navbar, body.premium-front .header-top { border-bottom: 1px solid var(--line); } body.premium-front .aiz-category-menu .dropdown-menu, body.premium-front .header .dropdown-menu { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-2); } body.premium-front .dropdown-menu .dropdown-item { border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } body.premium-front .dropdown-menu .dropdown-item:hover { background: var(--brand-soft); color: var(--brand); } /* ---------- 6. Section headings ---------- */ body.premium-front .section-title, body.premium-front .aiz-section-title h2, body.premium-front .h4.fw-700 { letter-spacing: -.01em; } /* ---------- 7. Pagination + breadcrumb ---------- */ body.premium-front .pagination .page-link { color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm) !important; margin: 0 3px; min-width: 38px; text-align: center; } body.premium-front .pagination .page-link:hover { background: var(--brand-soft); border-color: var(--brand-200); color: var(--brand); } body.premium-front .pagination .page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } body.premium-front .breadcrumb { background: transparent; } body.premium-front .breadcrumb-item.active { color: var(--brand); } /* ---------- 8. Cards / panels (cart, checkout visuals only) ---------- */ body.premium-front .card { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); } body.premium-front .card .card-header { background: transparent; border-bottom: 1px solid var(--line); font-weight: var(--fw-semibold); color: var(--ink); } /* ---------- 9. Footer ---------- */ body.premium-front footer, body.premium-front .aiz-footer { background: var(--brand-900); } body.premium-front footer a { color: rgba(255, 255, 255, .72); } body.premium-front footer a:hover { color: #ffffff; } /* ============================================================================= CSS দিয়ে করা যায় না (লাগলে আলাদা ধাপে প্রতি theme-এর blade-এ markup যোগ): নতুন testimonials block, FAQ accordion, sticky add-to-cart bar, নতুন trust-badge section. এগুলো structural — তাই এখানে রাখা হয়নি। ============================================================================= */ /* ============================================================================= PREMIUM BACKGROUND (depth) — storefront canvas white/.bg-white sections crisp হয়ে tinted bg-এর উপর pop করবে ============================================================================= */ body.premium-front { background: var(--front-glow), var(--front-bg); } /* keep theme white sections clean & elevated so they stand out */ body.premium-front .bg-white, body.premium-front .aiz-card-box, body.premium-front .card { box-shadow: var(--shadow-xs); } body.premium-front .aiz-card-box:hover { box-shadow: var(--shadow); }