/* ============================================================ Marketplace store theme — token override (issue #33, P3.6) Dense, deal-first look: a cool neutral canvas, tight spacing, near-sharp corners, small crisp shadows, and the Cairo sans display font for headings. This sheet is loaded LAST in by storefront-marketplace/partials/head.php, on top of omnimart.css, the design-system files and color.php. Rules: - Every rule is scoped to [data-store-theme="marketplace"] so nothing leaks to the default or other themes. The token blocks use :root[data-store-theme="marketplace"] so they out-rank the design-system :root[data-theme="light"] tokens and the tight spacing actually wins. - It NEVER sets --accent. The per-store color (color.php) drives --accent, so the store color still applies. Buttons, prices and the store links keep the store color. - RTL safe: it uses logical properties only, no hard left/right. ============================================================ */ /* ------------------------------------------------------------ 1. Token set — cool neutral canvas, tight spacing, near-sharp corners, small crisp shadows, and the Cairo dense display font for headings. Overrides both the new design-system tokens and the old --c-* tokens. ------------------------------------------------------------ */ :root[data-store-theme="marketplace"]{ /* design-system tokens (cool, utilitarian marketplace canvas) */ --bg:#F1F3F5; --surface:#FFFFFF; --surface-2:#F6F8FA; --text:#1F2933; --text-muted:#5B6773; --text-subtle:#8A97A3; /* Warm neutral border (issue #72), not the old cool blue-grey. */ --border:#E7E1D9; --border-strong:#D8D0C6; /* Tight, near-sharp corners — the utilitarian marketplace look. */ --r-sm:3px; --r-md:4px; --r-lg:6px; --r-xl:8px; --r-pill:999px; /* Dense spacing — pull the whole layout in so more fits per screen. */ --sp-3:10px; --sp-4:12px; --sp-5:16px; --sp-6:18px; --sp-8:24px; --sp-10:30px; --sp-12:36px; --sp-16:48px; /* Cairo dense sans face for the headings and deal labels. */ --font-display:'Cairo', 'Tajawal', 'Segoe UI', sans-serif; --fs-display:1.9rem; --fs-h1:1.5rem; --fs-h2:1.2rem; --fw-display:800; --fw-h1:700; --fw-h2:700; --fw-h3:700; /* Small, crisp shadows — flat and functional, not soft. */ --shadow-xs:0 1px 1px rgba(31,41,51,.05); --shadow-sm:0 1px 2px rgba(31,41,51,.08); --shadow-md:0 2px 6px -1px rgba(31,41,51,.12); --shadow-lg:0 6px 16px -6px rgba(31,41,51,.18); /* Wider content band so the dense grid can show more columns. */ --max-w:1440px; /* legacy --c-* tokens (header, footer, omnimart) */ --c-bg:#F1F3F5; --c-card:#FFFFFF; --c-text:#3A454F; --c-title:#1F2933; --c-entity:#1F2933; --c-link:#3A454F; --c-border:#E7E1D9; --c-border-l:#EFEAE3; --c-muted:#5B6773; } /* ------------------------------------------------------------ 2. Page — cool neutral canvas, dark ink text. ------------------------------------------------------------ */ [data-store-theme="marketplace"] body{ background:var(--bg); color:var(--c-text); } /* ------------------------------------------------------------ 3. Headings — the Cairo dense sans face, tight and heavy. ------------------------------------------------------------ */ [data-store-theme="marketplace"] h1, [data-store-theme="marketplace"] h2, [data-store-theme="marketplace"] h3, [data-store-theme="marketplace"] .sf-hero-title, [data-store-theme="marketplace"] .sf-section-title, [data-store-theme="marketplace"] .section-title, [data-store-theme="marketplace"] .widget-title, [data-store-theme="marketplace"] .product-card-title, [data-store-theme="marketplace"] .product-title{ font-family:'Cairo', 'Tajawal', 'Segoe UI', sans-serif; font-weight:800; color:var(--c-title); letter-spacing:-.01em; } /* ------------------------------------------------------------ 4. Top bar — a compact store-color strip, marketplace style. ------------------------------------------------------------ */ [data-store-theme="marketplace"] .menu-top-area{ background:var(--accent); color:#fff; border-block-end:1px solid var(--accent); padding-block:6px; font-size:.82rem; } /* ------------------------------------------------------------ 5. Header + nav — clean white bar with a thin rule and a small shadow, so the header stays tight and functional. ------------------------------------------------------------ */ [data-store-theme="marketplace"] .site-header{ box-shadow:var(--shadow-xs); border-block-end:1px solid var(--c-border); } [data-store-theme="marketplace"] .topbar{ background:var(--surface); border-block-end:1px solid var(--c-border-l); } [data-store-theme="marketplace"] .navbar{ background:var(--surface); } /* ------------------------------------------------------------ 5b. Search box — bordered in the store color. The design wants a wide search box "bordered in accent", so we give the shared search pill a full accent border (not just on focus) and a tight marketplace corner. --accent stays store-driven. ------------------------------------------------------------ */ [data-store-theme="marketplace"] .sf-search-pill{ background:var(--surface); border-color:var(--accent); border-radius:var(--r-md); } [data-store-theme="marketplace"] .sf-search-pill:focus-within{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); } /* ------------------------------------------------------------ 6. Section titles — a solid store-color side bar, a compact marketplace section header cue. ------------------------------------------------------------ */ [data-store-theme="marketplace"] .sf-section-title, [data-store-theme="marketplace"] .section-title{ padding-inline-start:10px; border-inline-start:4px solid var(--accent); border-radius:var(--r-sm); } /* ------------------------------------------------------------ 7. Product cards — white surface, tight corners, thin border, a small lift on hover. Denser padding so more cards fit. ------------------------------------------------------------ */ [data-store-theme="marketplace"] .product-card{ background:var(--surface); border:1px solid var(--c-border); border-radius:8px; box-shadow:none; transition:border-color var(--dur,200ms) ease, box-shadow var(--dur,200ms) ease; } [data-store-theme="marketplace"] .product-card:hover{ border-color:var(--accent); box-shadow:var(--shadow-md); } [data-store-theme="marketplace"] .product-card-media{ background:var(--surface-2); border-block-end:1px solid var(--c-border-l); } [data-store-theme="marketplace"] .product-card-body{ padding:10px; } [data-store-theme="marketplace"] .product-card-title{ font-size:.9rem; line-height:1.35; } /* Price is the deal cue — heavy and in the store color. */ [data-store-theme="marketplace"] .product-card-price, [data-store-theme="marketplace"] .product-price{ color:var(--accent); font-weight:800; } /* ------------------------------------------------------------ 8. Buttons — tight corners, heavy label. The primary button keeps the store color from --accent; we only reshape it. ------------------------------------------------------------ */ [data-store-theme="marketplace"] .btn, [data-store-theme="marketplace"] .btn-primary{ border-radius:6px; font-weight:700; } [data-store-theme="marketplace"] .btn-primary{ box-shadow:var(--shadow-xs); } [data-store-theme="marketplace"] .btn-primary:hover{ box-shadow:var(--shadow-sm); } /* ------------------------------------------------------------ 9. Footer — dense neutral block with a store-color top rule. ------------------------------------------------------------ */ [data-store-theme="marketplace"] .site-footer{ background:var(--surface); color:var(--c-text); border-block-start:3px solid var(--accent); } [data-store-theme="marketplace"] .site-footer .widget-title{ color:var(--c-title); } [data-store-theme="marketplace"] .site-footer a{ color:var(--c-text); } /* ------------------------------------------------------------ 10. Mobile — scale the display face down and keep the grid readable on small screens. ------------------------------------------------------------ */ @media(max-width:768px){ :root[data-store-theme="marketplace"]{ --fs-display:1.5rem; --fs-h1:1.25rem; --fs-h2:1.1rem; } [data-store-theme="marketplace"] .product-card-body{ padding:8px; } } /* ============================================================ SHELL-START — store shell (issue #157, FIX-4) The Marketplace theme keeps the shared header, top category nav and footer markup, so the search form, the cart AJAX hook and every nav link keep working. This block only repaints them into the dense deal-first look: a white bar, a search box bordered in the store accent with an accent search button, and a tight nav strip. The accent-deep strip above the header ("free shipping…") is part of the Marketplace home template, not this block. Why these rules win: the shared shell styles live in a