/* =========================================================== MojaDuka theme Palette: deep market-green + marigold accent (Kenyan trading texture, not the generic cream/terracotta AI-default combo). Display type: Space Grotesk (geometric, fintech-legible). Body type: Inter (reads well on low-end Android screens). Signature: product cards styled like a till/receipt stub — this is a business built on M-Pesa tills, so the storefront itself should feel like one. =========================================================== */ :root { --moja-green: #0E4F43; --moja-green-dark: #0A3830; --moja-marigold: #E8A93B; --moja-marigold-dark: #C98B22; --moja-paper: #F5F7F2; --moja-ink: #1B2420; --moja-ink-soft: #4B564F; --moja-alert: #C1502E; --moja-border: #D8DED3; --moja-radius: 10px; --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; } /* =========================================================== Theme presets. Each swaps the same CSS variables above onto a , so the till-receipt card structure, layout, and behavior stay identical everywhere — only the palette and display typeface change per store category. Variable names keep the "moja-green/marigold" labels for backward compatibility even where a theme's actual hue isn't green or marigold — think of them as "primary/accent" slots. =========================================================== */ /* Boutique & Fashion — deep wine + soft gold, a touch of elegance */ body.theme-boutique { --moja-green: #5B2333; --moja-green-dark: #421A26; --moja-marigold: #C9A227; --moja-marigold-dark: #A8871E; --moja-paper: #FAF5F6; --moja-ink: #2B1A1F; --moja-ink-soft: #6B4F58; --moja-border: #E8D9DC; --font-display: 'Fraunces', Georgia, serif; } /* Hardware & Trade — steel charcoal + safety amber, sturdy and legible */ body.theme-hardware { --moja-green: #33414D; --moja-green-dark: #232D35; --moja-marigold: #E08A2E; --moja-marigold-dark: #BD701B; --moja-paper: #F3F4F2; --moja-ink: #1E2529; --moja-ink-soft: #566269; --moja-border: #DADFE0; /* font-display stays Space Grotesk — already fits an industrial feel */ } /* Food & Snacks — warm terracotta + appetizing yellow */ body.theme-food { --moja-green: #A63A2C; --moja-green-dark: #7E2B20; --moja-marigold: #F0B429; --moja-marigold-dark: #CC9418; --moja-paper: #FBF4EC; --moja-ink: #2E1D16; --moja-ink-soft: #6E5548; --moja-border: #EDDFC9; --font-display: 'Poppins', system-ui, -apple-system, sans-serif; } /* Salon & Beauty — dusty mauve + rose gold, calm and soft */ body.theme-salon { --moja-green: #7A5468; --moja-green-dark: #5C3F4E; --moja-marigold: #B8778A; --moja-marigold-dark: #96586A; --moja-paper: #FBF6F7; --moja-ink: #2C1F26; --moja-ink-soft: #6E5561; --moja-border: #EBDEE2; --font-display: 'Fraunces', Georgia, serif; } body { font-family: var(--font-body); background: var(--moja-paper); color: var(--moja-ink); } h1, h2, h3, h4, .brand-font { font-family: var(--font-display); letter-spacing: -0.01em; } a { color: var(--moja-green); } a:hover { color: var(--moja-green-dark); } /* ---------- Storefront header (shop signboard feel) ---------- */ .store-header { background: var(--moja-green); color: #fff; padding: 2rem 1rem 4.5rem; position: relative; text-align: center; } .store-header.has-cover { background-size: cover; background-position: center; } .store-header-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,16,0.45) 0%, rgba(10,20,16,0.68) 100%); } .store-header-content { position: relative; z-index: 1; } .store-header .store-name { font-family: var(--font-display); font-weight: 700; font-size: 2rem; margin: 0.5rem 0 0.25rem; } .store-header .store-category { color: var(--moja-marigold); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; } .store-logo { width: 76px; height: 76px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--moja-green); border: 3px solid var(--moja-marigold); } .store-logo-img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; margin: 0 auto; display: block; background: #fff; border: 3px solid var(--moja-marigold); box-shadow: 0 2px 10px rgba(0,0,0,0.2); } /* ---------- Signature element: the receipt-stub product card ---------- */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.75rem; margin-top: -3rem; padding: 0 1rem 2rem; max-width: 1100px; margin-left: auto; margin-right: auto; } .receipt-card { background: #fff; border-radius: 4px; box-shadow: 0 6px 18px rgba(14, 79, 67, 0.12); position: relative; padding-bottom: 22px; /* torn receipt edge at the bottom via a repeating zigzag mask */ -webkit-mask-image: linear-gradient(#000, #000), repeating-linear-gradient(-45deg, transparent 0 6px, #000 6px 12px); -webkit-mask-size: 100% calc(100% - 14px), 20px 20px; -webkit-mask-position: top left, bottom left; -webkit-mask-repeat: no-repeat, repeat-x; -webkit-mask-composite: source-over; mask-image: linear-gradient(#000, #000), repeating-linear-gradient(-45deg, transparent 0 6px, #000 6px 12px); mask-size: 100% calc(100% - 14px), 20px 20px; mask-position: top left, bottom left; mask-repeat: no-repeat, repeat-x; mask-composite: add; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.15s ease; } .receipt-card:hover { transform: translateY(-3px); color: inherit; } .receipt-card .product-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--moja-border); } .receipt-card .product-photo-placeholder { width: 100%; aspect-ratio: 4 / 3; background: repeating-linear-gradient(45deg, #EEF2EA, #EEF2EA 10px, #E6EBE1 10px, #E6EBE1 20px); display: flex; align-items: center; justify-content: center; color: var(--moja-ink-soft); font-size: 0.8rem; } .receipt-card .product-body { padding: 0.9rem 1rem 0.4rem; flex-grow: 1; border-bottom: 1px dashed var(--moja-border); } .receipt-card .product-name { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; margin-bottom: 0.15rem; } .receipt-card .product-desc { font-size: 0.85rem; color: var(--moja-ink-soft); margin-bottom: 0.5rem; } .receipt-card .product-price-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.55rem 1rem 0; font-family: var(--font-display); } .receipt-card .product-price { font-weight: 700; font-size: 1.15rem; color: var(--moja-green); } .receipt-card .order-stamp { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--moja-marigold-dark); border: 1.5px solid var(--moja-marigold-dark); border-radius: 999px; padding: 3px 10px; transform: rotate(-4deg); } /* ---------- Buttons ---------- */ .btn-moja-primary { background: var(--moja-green); border: none; color: #fff; font-family: var(--font-display); font-weight: 600; border-radius: var(--moja-radius); padding: 0.65rem 1.25rem; } .btn-moja-primary:hover { background: var(--moja-green-dark); color: #fff; } .btn-whatsapp { background: #25D366; border: none; color: #073B2C; font-weight: 700; border-radius: var(--moja-radius); padding: 0.65rem 1.25rem; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-whatsapp:hover { background: #1EBE5B; color: #073B2C; } .coupon-banner { background: var(--moja-marigold); color: var(--moja-green-dark); text-align: center; padding: 0.5rem; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; } /* ---------- Directory (main site) ---------- */ .directory-hero { background: var(--moja-green); color: #fff; padding: 3rem 1rem; text-align: center; } .directory-hero h1 { font-size: 2.1rem; } .directory-hero p { color: #DCEAE5; max-width: 560px; margin: 0.5rem auto 0; } .listing-card { border: 1px solid var(--moja-border); border-radius: var(--moja-radius); overflow: hidden; height: 100%; background: #fff; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: box-shadow 0.15s ease, transform 0.15s ease; } .listing-card:hover { box-shadow: 0 10px 24px rgba(14,79,67,0.14); color: inherit; transform: translateY(-2px); } .listing-card .listing-cover { width: 100%; max-width: 100%; aspect-ratio: 16 / 7; max-height: 160px; object-fit: cover; background: linear-gradient(135deg, var(--moja-green) 0%, var(--moja-green-dark) 100%); display: block; } .listing-card .listing-cover-placeholder { width: 100%; aspect-ratio: 16 / 7; max-height: 160px; background: linear-gradient(135deg, var(--moja-green) 0%, var(--moja-green-dark) 100%); } .listing-card .listing-body { padding: 1rem 1.1rem 1.1rem; position: relative; flex-grow: 1; display: flex; flex-direction: column; } .listing-card .listing-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #fff; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.18); margin-top: -38px; margin-bottom: 0.5rem; } .listing-card .listing-logo-placeholder { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.18); margin-top: -38px; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--moja-green); } .listing-card .cat-tag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--moja-marigold-dark); font-weight: 700; } .listing-card .listing-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-top: 0.1rem; } .listing-card .listing-desc { font-size: 0.85rem; color: var(--moja-ink-soft); margin-top: 0.3rem; flex-grow: 1; } .listing-card .listing-product-count { font-size: 0.75rem; color: var(--moja-ink-soft); margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--moja-border); } footer.moja-footer { background: var(--moja-ink); color: #C9D2C7; padding: 2rem 1rem; font-size: 0.85rem; text-align: center; } footer.moja-footer a { color: #fff; text-decoration: underline; } /* ---------- Legal pages ---------- */ .legal-page { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; } .legal-page h1 { margin-bottom: 0.25rem; } .legal-page .legal-updated { color: var(--moja-ink-soft); font-size: 0.85rem; margin-bottom: 2rem; } .legal-page h2 { font-size: 1.15rem; margin-top: 2rem; font-family: var(--font-display); } .legal-page p, .legal-page li { color: #2E3832; line-height: 1.65; } @media (prefers-reduced-motion: reduce) { .receipt-card { transition: none; } }