/* ========================================================================== Public Slim Theme — BuyUSAFirst A clean, modern, premium storefront CSS for the public-facing pages. Google Font: Inter (loaded in layout , with @import fallback below) SECTIONS: 1. Font Import & Design Tokens 2. Global Reset & Base 3. Top Bar (authenticated users) 4. Navbar 5. Search Bar 6. Beta Notice 7. Main Content Area 8. Home Page — Product Grid 9. Product Cards 10. Hero v2 11. Featured Categories 12. Why Shop USA Made 13. Become a Seller CTA 14. Footer 15. Pagination 16. Dashboard / My-Account Components 17. Responsive Breakpoints ========================================================================== */ /* ========================================================================== 1. Font Import & Design Tokens ========================================================================== */ /* Fallback import if Google Fonts link tag fails to load in */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); :root { /* Brand palette (shared with pro-admin-ui-kit.css) */ --pa-primary: #0075B2; --pa-primary-dark: #005A8B; --pa-danger: #C94A4A; --pa-success: #2ECC71; --pa-warning: #F1C40F; --pa-bg: #EEF2F6; --pa-card: #FFFFFF; --pa-border: #DCE1E7; --pa-text: #4B5563; --pa-muted: #7B8794; /* Shorthand aliases for public theme */ --bu-blue: #0075B2; --bu-blue-dark: #005A8B; --bu-red: #C94A4A; --bu-bg: var(--pa-bg); --bu-text: var(--pa-text); --bu-muted: var(--pa-muted); --bu-border: var(--pa-border); /* Elevation shadows — layered for depth */ --bu-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); --bu-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04); --bu-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06); /* Radii */ --bu-radius: 8px; --bu-radius-lg: 14px; /* Transition timing */ --bu-transition: 200ms ease; --bu-transition-slow: 350ms ease; } /* ========================================================================== 2. Global Reset & Base ========================================================================== */ /* Smooth scrolling for anchor links */ html { scroll-behavior: smooth; } html, body { height: 100%; } body { background: var(--bu-bg); color: var(--bu-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; } /* Accessible focus ring — visible blue outline on keyboard navigation */ *:focus-visible { outline: 2px solid var(--bu-blue); outline-offset: 2px; border-radius: 2px; } /* Legacy wrapper helpers (from old templates — do not remove) */ .body { background: transparent; } .main { padding-top: 0; } /* Loading overlay — shown during page transitions */ .loading-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(255, 255, 255, 0.92); display: flex; align-items: center; justify-content: center; transition: opacity 400ms ease; } .bounce-loader { display: flex; gap: 6px; } .bounce1, .bounce2, .bounce3 { width: 12px; height: 12px; border-radius: 50%; background: var(--bu-blue); animation: bounce-pulse 1.4s infinite ease-in-out both; } .bounce1 { animation-delay: -0.32s; } .bounce2 { animation-delay: -0.16s; } @keyframes bounce-pulse { 0%, 80%, 100% { transform: scale(0); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } /* ========================================================================== 3. Top Bar (authenticated users — dark strip above navbar) ========================================================================== */ .bu-topbar { background: var(--bu-blue-dark); color: rgba(255, 255, 255, 0.92); font-size: 0.76rem; letter-spacing: 0.01em; } .bu-topbar-inner { min-height: 30px; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; } .bu-topbar-sep { opacity: 0.5; } /* ========================================================================== 4. Navbar — white bg, refined shadow, smooth link transitions ========================================================================== */ .bu-navbar { background: #ffffff; border-bottom: none; /* Multi-layer shadow for depth without heaviness */ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.02); padding-top: 0.6rem; padding-bottom: 0.6rem; z-index: 1030; position: relative; } /* Logo / brand mark — inline flex for image + text alignment */ .bu-brand { display: inline-flex; align-items: center; gap: 0.65rem; font-weight: 800; letter-spacing: 0.02em; color: var(--bu-blue-dark); text-decoration: none; transition: opacity var(--bu-transition); } .bu-brand:hover { opacity: 0.85; text-decoration: none; color: var(--bu-blue-dark); } .bu-brand img { height: 40px; width: auto; } /* Nav links — subtle rounded background on hover */ .bu-nav-link { color: rgba(31, 41, 55, 0.72) !important; font-weight: 600; font-size: 0.92rem; border-radius: 8px; padding: 0.45rem 0.85rem !important; transition: color var(--bu-transition), background var(--bu-transition); position: relative; } .bu-nav-link:hover, .bu-nav-link.active { color: var(--bu-blue-dark) !important; background: rgba(0, 117, 178, 0.07); } /* Pill buttons (Cart, Login, Sign Up) — refined border + blue glow on hover */ .bu-pill { border: 1px solid var(--bu-border); background: #fff; border-radius: 999px; padding: 0.38rem 0.85rem; font-weight: 700; font-size: 0.88rem; color: var(--bu-blue-dark); transition: all var(--bu-transition); text-decoration: none; } .bu-pill:hover { text-decoration: none; border-color: var(--bu-blue); background: rgba(0, 117, 178, 0.04); color: var(--bu-blue-dark); box-shadow: 0 2px 12px rgba(0, 117, 178, 0.12); } /* Cart item count badge — small red circle */ .badge-cart-items { background: var(--bu-red); color: #fff; border-radius: 999px; padding: 0.15rem 0.45rem; font-size: 0.72rem; font-weight: 800; margin-left: 0.3rem; } /* ========================================================================== 5. Search Bar — slim pill-style, solid background ========================================================================== */ /* Flat solid background for the search strip */ .primary-background-color { background-color: #005A8B; } /* Slim padding for elegance */ .bu-searchbar { padding: 0.5rem 0; border-bottom: none; } .bu-searchbar-form { margin: 0; } /* Pill-shaped search row: keyword | category | button */ .bu-searchbar-row { display: flex; align-items: center; gap: 0; background: rgba(255, 255, 255, 0.10); border-radius: 999px; padding: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.15); backdrop-filter: blur(4px); } /* Keyword input — left-rounded pill */ .bu-searchbar-input { flex: 1; height: 36px; border: none !important; border-radius: 999px 0 0 999px !important; background: rgba(255, 255, 255, 0.97) !important; font-size: 0.86rem; padding-left: 1rem !important; box-shadow: none !important; color: var(--bu-text); } .bu-searchbar-input::placeholder { color: var(--bu-muted); font-weight: 500; } /* Category dropdown — flush between input and button */ .bu-searchbar-select { width: 180px; height: 36px; border: none !important; border-left: 1px solid var(--bu-border) !important; border-radius: 0 !important; background: rgba(255, 255, 255, 0.97) !important; font-size: 0.82rem; box-shadow: none !important; color: var(--bu-text); padding-left: 0.65rem; } /* Search submit button — right-rounded pill with icon */ .bu-searchbar-btn { height: 36px; border-radius: 0 999px 999px 0 !important; background: var(--bu-red); color: #fff; font-weight: 700; font-size: 0.86rem; border: none; padding: 0 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; transition: background var(--bu-transition), box-shadow var(--bu-transition); white-space: nowrap; } .bu-searchbar-btn:hover { background: #c91a20; color: #fff; box-shadow: 0 2px 8px rgba(227, 32, 39, 0.35); } /* --- Legacy search helpers (still used by some templates) --- */ .search-with-select { display: flex; align-items: center; gap: 0.75rem; } .search-form-wrapper { width: 100%; background: rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 0.5rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .search-form-wrapper .form-control { border: none; box-shadow: none !important; border-radius: 999px; height: 42px; } .rounded-search-borders { border-radius: 999px !important; } .search-form-select-wrapper { display: flex; align-items: center; gap: 0.5rem; } .search-form-select-wrapper .form-select, .search-form-select-wrapper select { height: 42px; border-radius: 999px; border: none; } .search-form-select-wrapper .btn { height: 42px; border-radius: 999px; padding: 0 1.25rem; background: var(--bu-red); color: #fff; font-weight: 900; border: none; } .search-form-select-wrapper .btn:hover { background: #c51b20; } /* ========================================================================== 6. Beta Notice — slim, subtle, low-profile ========================================================================== */ .bu-beta { background: #fffcf2; border-top: 1px solid #ffe8b8; border-bottom: 1px solid #ffe8b8; color: #8a5a00; } .bu-beta-inner { padding: 0.18rem 0; font-size: 0.68rem; text-align: center; letter-spacing: 0.01em; } .bu-beta-inner strong { font-weight: 800; } /* Beta alert variant (used on some pages) */ .alert.alert-warning { border-radius: 0; border-left: 0; border-right: 0; margin-bottom: 0; background: #fffbf0; border-color: #ffe8b8; color: #8a5a00; } /* Search strip — inline search panel on subpages */ .bu-search-strip { background-color: rgba(0, 117, 178, 0.04); /* flat — no gradient */ border: 1px solid rgba(0, 117, 178, 0.12); border-radius: var(--bu-radius-lg); padding: 1rem; } .bu-search-strip .form-control, .bu-search-strip .form-select, .bu-search-strip select { border-radius: 10px; } .bu-search-strip .btn { border-radius: 10px; font-weight: 800; } /* ========================================================================== 7. Main Content Area ========================================================================== */ .bu-main { padding: 1.25rem 0 2.5rem; } /* ========================================================================== 8. Home Page — Product Grid Section Header & Grid ========================================================================== */ .bu-home-section { margin-top: 1.25rem; } /* Toolbar above grid (sort controls) */ .bu-home-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.5rem 0 0.75rem; } .bu-home-kicker { color: var(--bu-muted); font-size: 0.82rem; } .bu-sort-form { margin: 0; } .bu-select { min-width: 165px; height: 34px; border: 1px solid var(--pa-border); border-radius: 6px; font-size: 0.82rem; padding: 0.25rem 0.5rem; } /* Section header — title + subtitle above product grid */ .bu-home-header { margin-bottom: 1rem; padding-bottom: 0.65rem; border-bottom: 2px solid rgba(0, 117, 178, 0.08); } .bu-home-title { margin: 0 0 0.35rem; color: var(--bu-blue-dark); font-size: 2.25rem; letter-spacing: -0.03em; font-weight: 900; line-height: 1.15; } .bu-home-subtitle { margin: 0; color: var(--bu-muted); font-size: 1rem; line-height: 1.55; } /* Product grid — small top gap after header */ .bu-product-grid { margin-top: 0.5rem; } /* ========================================================================== 9. Product Cards — clean, minimal, taller images, refined hover ========================================================================== */ .bu-product-card { position: relative; background: var(--pa-card); border: 1px solid var(--pa-border); border-radius: 10px; overflow: hidden; box-shadow: var(--bu-shadow); height: 100%; /* Smooth hover: lift + glow + border shift */ transition: transform var(--bu-transition), box-shadow var(--bu-transition), border-color var(--bu-transition); } .bu-product-card:hover { transform: translateY(-5px); border-color: rgba(0, 117, 178, 0.25); box-shadow: 0 8px 24px rgba(0, 90, 139, 0.10), 0 16px 48px rgba(17, 24, 39, 0.08); } /* Image area — taller 240px with subtle zoom on hover */ .bu-product-image-link { display: block; background: #f7f8fa; position: relative; overflow: hidden; } .bu-product-image { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform 400ms ease; } .bu-product-card:hover .bu-product-image { transform: scale(1.04); } /* Out of stock dim effect */ .bu-product-card.is-out .bu-product-image { opacity: 0.4; filter: grayscale(30%); } /* Out of stock overlay badge — centered pill */ .bu-product-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; } .bu-out-badge { background: rgba(17, 24, 39, 0.80); color: #fff; border-radius: 999px; padding: 0.45rem 1rem; font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; backdrop-filter: blur(4px); } /* "USA Made" badge — top-right corner of image */ .bu-usa-badge { position: absolute; top: 10px; right: 10px; background-color: #E21F26; /* flat — no gradient */ color: #fff; font-size: 0.60rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.2rem 0.5rem; border-radius: 4px; z-index: 3; display: flex; align-items: center; gap: 0.2rem; } /* Card body area — generous whitespace */ .bu-product-body { padding: 1rem 1.15rem 1.15rem; } /* Product title */ .bu-product-title { margin: 0 0 0.45rem; font-size: 1rem; line-height: 1.35; font-weight: 700; } .bu-product-title a { color: var(--bu-text); text-decoration: none; transition: color var(--bu-transition); } .bu-product-title a:hover { color: var(--bu-blue-dark); } /* Seller + category meta lines */ .bu-product-meta { color: var(--bu-muted); font-size: 0.82rem; line-height: 1.4; } /* Subtle divider line between meta info and price */ .bu-product-divider { border: none; border-top: 1px solid rgba(0, 0, 0, 0.06); margin: 0.5rem 0; } /* Price — bold blue, prominent */ .bu-product-price { font-size: 1.1rem; font-weight: 800; color: var(--bu-blue-dark); } .bu-product-price a { color: inherit; text-decoration: none; } .bu-product-price a:hover { text-decoration: underline; } /* ========================================================================== 10. Hero v2 — full-width with flat solid background ========================================================================== */ .bu-hero-v2-wrap { margin-top: 0; } .bu-hero-v2 { border: none; border-radius: 0; overflow: hidden; box-shadow: none; } /* Both panels get a generous minimum height */ .bu-hero-v2 > .col-md-6 { min-height: 340px; } /* Left panel — flat solid blue */ .bu-hero-v2-left { background-color: #0075B2; position: relative; overflow: hidden; } /* Decorative dot pattern on left panel (CSS-only stars/dots) */ .bu-hero-v2-left::before { content: ''; position: absolute; top: -50px; right: -50px; width: 280px; height: 280px; background: none; /* flat design — no decorative pattern */ border-radius: 50%; pointer-events: none; } /* Second decorative element — bottom-left glow */ .bu-hero-v2-left::after { content: ''; position: absolute; bottom: -60px; left: -30px; width: 200px; height: 200px; background: none; /* flat design — no decorative glow */ pointer-events: none; } /* Right panel — flat white */ .bu-hero-v2-right { background-color: #FFFFFF; } /* Kicker label above heading (e.g. "BUYUSAFIRST") */ .bu-hero-kicker { color: rgba(255, 255, 255, 0.55); font-weight: 800; letter-spacing: 0.18em; font-size: 0.70rem; text-transform: uppercase; } /* Hero heading — large, bold, impactful */ .bu-hero-v2 h1 { letter-spacing: -0.03em; font-size: 2.5rem; line-height: 1.10; margin-bottom: 1rem !important; font-weight: 900; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.10); } /* Right panel title — "Why Choose BuyUSAFirst?" */ .bu-hero-title { color: var(--bu-blue-dark); font-size: 1.85rem; font-weight: 900; margin-bottom: 0.4rem; line-height: 1.15; letter-spacing: -0.02em; } /* Feature point card headings */ .bu-hero-point-title { color: var(--bu-blue-dark); font-weight: 800; margin: 0 0 0.15rem; font-size: 1.1rem; } /* Red accent icon next to feature points */ .bu-hero-icon { color: var(--bu-red); font-size: 1.15rem; flex-shrink: 0; } /* Feature point card — decorative wrapper with subtle tint */ .bu-hero-feature-card { background: rgba(0, 117, 178, 0.03); border: 1px solid rgba(0, 117, 178, 0.08); border-radius: 10px; padding: 0.85rem 1rem; transition: background var(--bu-transition), border-color var(--bu-transition), box-shadow var(--bu-transition); } .bu-hero-feature-card:hover { background: rgba(0, 117, 178, 0.06); border-color: rgba(0, 117, 178, 0.15); box-shadow: 0 2px 8px rgba(0, 117, 178, 0.06); } /* Stats row — social proof numbers below CTA buttons */ .bu-hero-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.12); } .bu-hero-stat { display: flex; align-items: center; gap: 0.35rem; color: rgba(255, 255, 255, 0.75); font-size: 0.85rem; font-weight: 600; } .bu-hero-stat strong { color: #fff; font-weight: 900; font-size: 1.05rem; } /* Vertical divider between stats */ .bu-hero-stat-divider { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.20); } /* --- CTA Buttons (used throughout site) --- */ /* Red CTA — flat solid, minimal shadow */ .bu-btn-red { background-color: var(--bu-red); color: #fff !important; border-radius: 999px; font-weight: 800; border: none; transition: all var(--bu-transition); } .bu-btn-red:hover { background-color: #B64343; color: #fff !important; } /* Blue CTA — flat brand color */ .bu-btn-blue { background-color: #0075B2; color: #fff !important; border-radius: 999px; font-weight: 800; border: none; transition: all var(--bu-transition); } .bu-btn-blue:hover { background-color: #005A8B; color: #fff !important; } /* Hero-specific button overrides */ .bu-hero-v2 .btn.btn-lg { border-radius: 999px; font-weight: 800; padding: 0.65rem 1.5rem; font-size: 1rem; } .bu-hero-v2 .btn-outline-light { border-width: 2px; transition: all var(--bu-transition); } .bu-hero-v2 .btn-outline-light:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(255, 255, 255, 0.15); } /* Mailing list button — full-width on right panel */ .bu-mailing-btn { width: 100%; max-width: 100%; } /* Modal styling inside hero */ .bu-hero-v2 .modal-content { border-radius: 14px; border: 1px solid var(--bu-border); box-shadow: var(--bu-shadow-lg); } /* ========================================================================== 11. Featured Categories Section ========================================================================== */ .bu-categories-section { padding: 2.75rem 0 2rem; } /* Section header — centered title + subtitle (reusable) */ .bu-section-header { text-align: center; margin-bottom: 1.75rem; } .bu-section-title { font-size: 1.85rem; font-weight: 900; color: var(--bu-blue-dark); letter-spacing: -0.02em; margin-bottom: 0.35rem; } .bu-section-subtitle { color: var(--bu-muted); font-size: 1rem; margin: 0; } /* Category card — icon + label, vertical layout */ .bu-category-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.75rem 1rem; background: var(--pa-card); border: 1px solid var(--pa-border); border-radius: var(--bu-radius-lg); text-decoration: none !important; color: var(--bu-text) !important; transition: all var(--bu-transition); height: 100%; box-shadow: var(--bu-shadow); } .bu-category-card:hover { transform: translateY(-5px); border-color: var(--bu-blue); box-shadow: 0 8px 24px rgba(0, 117, 178, 0.10), 0 16px 48px rgba(0, 117, 178, 0.06); color: var(--bu-blue-dark) !important; } /* Category icon circle */ .bu-category-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(0, 117, 178, 0.07); color: var(--bu-blue); font-size: 1.6rem; margin-bottom: 0.85rem; transition: all var(--bu-transition); } .bu-category-card:hover .bu-category-icon { background: rgba(0, 117, 178, 0.12); transform: scale(1.05); } .bu-category-label { font-weight: 700; font-size: 0.95rem; } /* ========================================================================== 12. "Why Shop USA Made?" Section ========================================================================== */ .bu-why-section { padding: 3rem 0; background-color: var(--pa-bg); /* flat — no gradient */ } /* Value proposition card */ .bu-why-card { text-align: center; padding: 1.75rem 1.25rem; background: var(--pa-card); border-radius: var(--bu-radius-lg); border: 1px solid rgba(0, 0, 0, 0.04); box-shadow: var(--bu-shadow); height: 100%; transition: all var(--bu-transition-slow); } .bu-why-card:hover { transform: translateY(-3px); box-shadow: var(--bu-shadow-md); } /* Icon circles — color-coded per column */ .bu-why-icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.75rem; transition: transform var(--bu-transition); } .bu-why-card:hover .bu-why-icon { transform: scale(1.08); } .bu-why-icon-blue { background: rgba(0, 117, 178, 0.10); color: var(--bu-blue); } .bu-why-icon-red { background: rgba(226, 31, 38, 0.08); color: var(--bu-red); } .bu-why-icon-green { background: rgba(46, 204, 113, 0.10); color: #22a75d; } .bu-why-title { font-weight: 800; font-size: 1.15rem; margin-bottom: 0.5rem; color: var(--bu-text); } .bu-why-desc { color: var(--bu-muted); font-size: 0.92rem; line-height: 1.6; margin: 0; } /* ========================================================================== 13. "Become a Seller" CTA Banner ========================================================================== */ .bu-seller-cta { background-color: #0075B2; /* flat — no gradient */ padding: 3.5rem 0; text-align: center; position: relative; overflow: hidden; } /* Decorative overlay — disabled for flat design */ .bu-seller-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: none; pointer-events: none; } .bu-seller-cta-title { font-size: 2.1rem; font-weight: 900; color: #fff; margin-bottom: 0.6rem; letter-spacing: -0.02em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.10); } .bu-seller-cta-desc { color: rgba(255, 255, 255, 0.72); font-size: 1.05rem; margin-bottom: 1.5rem; max-width: 540px; margin-left: auto; margin-right: auto; line-height: 1.6; } /* ========================================================================== 14. Footer — dark (#0F172A), spacious, refined typography ========================================================================== */ .bu-footer { background: #0F172A; border-top: none; padding: 3rem 0 1.5rem; } /* Column headings with small accent underline */ .bu-footer h4 { font-size: 0.85rem; font-weight: 800; color: rgba(255, 255, 255, 0.95); text-transform: uppercase; letter-spacing: 0.10em; margin-bottom: 1.15rem; padding-bottom: 0.6rem; position: relative; } /* Blue accent line under each footer heading */ .bu-footer h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 28px; height: 2px; background: var(--bu-blue); border-radius: 1px; } /* Footer links — subtle slide-right animation on hover */ .bu-footer a { color: rgba(255, 255, 255, 0.55); transition: color var(--bu-transition), padding-left var(--bu-transition); font-size: 0.88rem; } .bu-footer a:hover { color: #ffffff; text-decoration: none; padding-left: 4px; } .bu-footer .small-muted { color: rgba(255, 255, 255, 0.35); font-size: 0.80rem; line-height: 1.5; } .bu-footer .bu-brand { color: rgba(255, 255, 255, 0.92); } .bu-footer .bu-brand span { color: rgba(255, 255, 255, 0.92); } .bu-footer .bu-brand:hover { opacity: 0.8; } .bu-footer hr { border-color: rgba(255, 255, 255, 0.07); } /* Social media icons — circular with hover glow */ .bu-footer-social { display: flex; gap: 0.65rem; margin-top: 1rem; } .bu-footer-social a { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.55); font-size: 0.95rem; transition: all var(--bu-transition); /* Override the padding-left slide from parent .bu-footer a */ padding-left: 0 !important; } .bu-footer-social a:hover { background: var(--bu-blue); color: #fff; padding-left: 0 !important; box-shadow: 0 2px 10px rgba(0, 117, 178, 0.40); } /* "Made with pride" tagline */ .bu-footer-tagline { color: rgba(255, 255, 255, 0.45); font-size: 0.80rem; display: flex; align-items: center; gap: 0.4rem; font-weight: 500; } .bu-footer-tagline .flag-icon { font-size: 1rem; color: rgba(255, 255, 255, 0.60); } /* ========================================================================== 15. Pagination — clean, modern pill-style ========================================================================== */ .bu-pagination-wrap { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--pa-border); } .pagination-modern { gap: 0.3rem; } .pagination-modern .page-link { border-radius: 999px; min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pa-border); color: var(--pa-text); font-size: 0.85rem; font-weight: 600; transition: all var(--bu-transition); } .pagination-modern .page-link:hover { background: rgba(0, 117, 178, 0.06); border-color: var(--bu-blue); color: var(--bu-blue-dark); } /* Active page — solid blue pill */ .pagination-modern .page-item.active .page-link { background: var(--pa-primary); border-color: var(--pa-primary); color: #fff; box-shadow: 0 2px 8px rgba(0, 117, 178, 0.30); } .bu-pagination-counter { color: var(--bu-muted) !important; font-size: 0.85rem; } /* ========================================================================== 16. Dashboard / My-Account Components These classes are used by /my, dashboard, and account pages. Do NOT remove even though they are not used on the public storefront. ========================================================================== */ /* Content panel (generic card wrapper) */ .bu-panel { background: var(--pa-card); border: 1px solid var(--bu-border); border-radius: var(--bu-radius); box-shadow: var(--bu-shadow); padding: 1.25rem; } /* Page bar (colored header strip on dashboard pages) */ .bu-pagebar { background: var(--bu-blue); color: #fff; margin: 0 -15px 0.75rem; } .bu-pagebar-inner { padding: 0.85rem 0; } .bu-pagebar-title { font-weight: 900; letter-spacing: 0.01em; } /* Dashboard layout */ .bu-dashboard { padding: 1.5rem; } .bu-dashboard-head { padding: 0.75rem 0 1.25rem; border-bottom: 1px solid rgba(17, 24, 39, 0.08); margin-bottom: 1.25rem; } /* Heading hierarchy */ .bu-h1 { font-size: 1.6rem; font-weight: 900; color: var(--bu-blue-dark); letter-spacing: -0.02em; margin: 0 0 0.4rem; } .bu-h2 { font-size: 1.15rem; font-weight: 900; color: var(--bu-text); letter-spacing: -0.01em; } .bu-h3 { font-size: 1.1rem; font-weight: 900; margin: 0.25rem 0 0.5rem; } .bu-sub { color: var(--bu-muted); margin: 0; } /* Banner messages (success, warning, etc.) */ .bu-banner { border-radius: var(--bu-radius); border: 1px solid rgba(17, 24, 39, 0.08); padding: 0.85rem 1rem; display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1rem; } .bu-banner i { margin-top: 0.15rem; font-size: 1.05rem; } .bu-banner-success { background: rgba(43, 202, 110, 0.12); border-color: rgba(43, 202, 110, 0.28); color: #1a7e4b; } /* KPI stat cards on dashboards */ .bu-kpi { background: var(--pa-card); border: 1px solid var(--pa-border); border-radius: var(--bu-radius); padding: 1rem 1rem 0.9rem; height: 100%; box-shadow: var(--bu-shadow); } .bu-kpi-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(31, 41, 55, 0.65); font-weight: 800; } .bu-kpi-value { font-size: 1.55rem; font-weight: 900; color: var(--bu-blue-dark); margin-top: 0.2rem; } .bu-kpi-sub { color: var(--bu-muted); font-size: 0.9rem; } .bu-kpi-link { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(17, 24, 39, 0.08); } .bu-kpi-link a { font-weight: 800; color: var(--bu-blue-dark); text-decoration: none; } .bu-kpi-link a:hover { text-decoration: underline; } .bu-section { margin-top: 1.25rem; } /* Action cards (quick-link tiles on dashboard) */ .bu-action-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.65rem; text-decoration: none !important; color: var(--bu-text) !important; background: var(--pa-card); border: 1px solid var(--pa-border); border-radius: var(--bu-radius); padding: 1.1rem 0.85rem; height: 100%; box-shadow: var(--bu-shadow); transition: transform var(--bu-transition), box-shadow var(--bu-transition), border-color var(--bu-transition); } .bu-action-card:hover { transform: translateY(-2px); border-color: rgba(0, 117, 178, 0.35); box-shadow: 0 10px 22px rgba(17, 24, 39, 0.10); } .bu-action-icon { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(0, 117, 178, 0.10); color: var(--bu-blue-dark); font-size: 1.5rem; } .bu-action-label { font-weight: 900; font-size: 0.95rem; text-align: center; } /* Generic card component */ .bu-card { background: var(--pa-card); border: 1px solid var(--pa-border); border-radius: var(--bu-radius); box-shadow: var(--bu-shadow); padding: 1rem; margin-top: 1.25rem; } .bu-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(17, 24, 39, 0.08); padding-bottom: 0.75rem; margin-bottom: 0.75rem; } /* Row items (list entries in cards) */ .bu-rowitem { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid rgba(17, 24, 39, 0.08); } .bu-rowitem:last-child { border-bottom: none; } .bu-rowitem-title { font-weight: 900; } .bu-rowitem-sub { color: var(--bu-muted); font-size: 0.9rem; } .bu-rowitem-status { display: flex; align-items: center; justify-content: flex-end; } /* Status badges — pill-shaped with color variants */ .bu-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem 0.6rem; border-radius: 999px; font-weight: 900; font-size: 0.78rem; border: 1px solid rgba(17, 24, 39, 0.10); background: rgba(17, 24, 39, 0.04); color: rgba(31, 41, 55, 0.85); } .status-success { background: rgba(43, 202, 110, 0.14); border-color: rgba(43, 202, 110, 0.30); color: #1a7e4b; } .status-warning { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.30); color: #7a4b00; } .status-danger { background: rgba(226, 31, 38, 0.12); border-color: rgba(226, 31, 38, 0.30); color: #8f0d11; } .status-info { background: rgba(33, 156, 210, 0.14); border-color: rgba(33, 156, 210, 0.30); color: #0b5e80; } /* Empty state placeholder */ .bu-empty { text-align: center; padding: 1.25rem; color: var(--bu-muted); } .bu-empty i { font-size: 3rem; margin-bottom: 0.75rem; opacity: 0.25; color: var(--bu-blue-dark); } .bu-empty-lg { padding: 1.75rem 1.25rem 1.5rem; } /* Step indicators (onboarding, etc.) */ .bu-steps { display: grid; gap: 0.75rem; padding: 1rem 0 0; margin-top: 0.25rem; border-top: 1px solid rgba(17, 24, 39, 0.08); } .bu-step { display: grid; grid-template-columns: 1fr; gap: 0.2rem; padding: 0.85rem 0.95rem; border: 1px solid rgba(17, 24, 39, 0.08); border-radius: var(--bu-radius); background: rgba(0, 117, 178, 0.04); } .bu-step a { font-weight: 900; color: var(--bu-blue-dark); text-decoration: none; } .bu-step a:hover { text-decoration: underline; } .bu-mt { margin-top: 1.5rem; } /* ========================================================================== 17. Responsive Breakpoints ========================================================================== */ /* --- Tablet and below (991px) --- */ @media (max-width: 991.98px) { /* Hide authenticated user top bar on tablet */ .bu-topbar { display: none; } .bu-brand img { height: 34px; } /* Stack search bar fields vertically */ .bu-searchbar-row { flex-direction: column; border-radius: 14px; gap: 0; } .bu-searchbar-input { border-radius: 14px 14px 0 0 !important; } .bu-searchbar-select { width: 100%; border-left: none !important; border-top: 1px solid var(--bu-border) !important; } .bu-searchbar-btn { width: 100%; border-radius: 0 0 14px 14px !important; } .bu-home-toolbar { flex-direction: column; align-items: flex-start; } .bu-home-toolbar-right, .bu-sort-form, .bu-select { width: 100%; } /* Scale down hero heading on tablet */ .bu-hero-v2 h1 { font-size: 1.85rem; } .bu-hero-title { font-size: 1.55rem; } .search-with-select { flex-direction: column; align-items: stretch; } .search-form-wrapper { border-radius: 18px; } .search-form-wrapper .form-control, .search-form-select-wrapper .form-select, .search-form-select-wrapper select, .search-form-select-wrapper .btn { border-radius: 12px; } /* Slightly shorter product images on tablet */ .bu-product-image { height: 200px; } .paginator { flex-direction: column; gap: 0.75rem; align-items: flex-start !important; } .bu-seller-cta-title { font-size: 1.55rem; } /* Why cards stack better with reduced padding */ .bu-why-card { padding: 1.25rem 1rem; } } /* --- Small phone (767px) --- */ @media (max-width: 767.98px) { .bu-pagebar { margin-left: -15px; margin-right: -15px; } .bu-dashboard { padding: 1.1rem; } .bu-h1 { font-size: 1.35rem; } .bu-rowitem { grid-template-columns: 1fr; } .bu-rowitem-status { justify-content: flex-start; } .bu-home-title { font-size: 1.75rem; } .bu-product-image { height: 180px; } /* Auto-height for hero panels so they stack naturally */ .bu-hero-v2 > .col-md-6 { min-height: auto; } /* Tighter stats row on phone */ .bu-hero-stats { gap: 0.5rem; font-size: 0.78rem; } .bu-why-card { padding: 1rem 0.75rem; } /* Footer columns stack — center the tagline */ .bu-footer-tagline { justify-content: center; margin-top: 0.5rem; } } /* --- Extra small phone (575px) --- */ @media (max-width: 575.98px) { .bu-hero-v2 h1 { font-size: 1.45rem; } .bu-section-title { font-size: 1.45rem; } .bu-seller-cta-title { font-size: 1.3rem; } /* Single-column category cards */ .bu-category-card { padding: 1.25rem 0.75rem; } }