/* ============================================================ Minimal store theme — token override (issue #28, P3.1) Clean, editorial, lots of white space. This sheet is loaded LAST in by storefront-minimal/partials/head.php, on top of omnimart.css, the design-system files and color.php. Rules: - Every rule is scoped to [data-store-theme="minimal"] so nothing leaks to the default or Modern theme. - It NEVER sets --accent. The per-store color (color.php) drives --accent, so the store color still applies (buttons, links, active states, price sale color, filled stars). - RTL safe: it uses logical properties only, no hard left/right. ============================================================ */ /* ------------------------------------------------------------ 1. Token set — editorial neutrals, hairline borders, flat corners, a serif display face for headings. Overrides both the new design-system tokens and the old --c-* tokens. ------------------------------------------------------------ */ [data-store-theme="minimal"]{ /* design-system tokens */ --bg:#ffffff; --surface:#ffffff; --surface-2:#fafafa; --text:#1a1a1a; --text-muted:#6b6b6b; --text-subtle:#9a9a9a; /* Warm editorial hairline border (issue #72), not the old cool grey. */ --border:#EDEBE7; --border-strong:#DCD8D2; /* Flat, square corners — the editorial look. */ --r-sm:0px; --r-md:0px; --r-lg:0px; --r-xl:2px; /* Tajawal (loaded in head). The old display serif was never loaded and fell back to Georgia, which is wrong for Arabic. */ --font-display:'Tajawal', 'Segoe UI', Arial, sans-serif; /* legacy --c-* tokens (header, footer, omnimart) */ --c-bg:#ffffff; --c-card:#ffffff; --c-text:#4a4a4a; --c-title:#1a1a1a; --c-entity:#1a1a1a; --c-link:#4a4a4a; --c-border:#EDEBE7; --c-border-l:#F4F1ED; --c-muted:#9a9a9a; } /* ------------------------------------------------------------ 2. Page — white canvas, calm base type. ------------------------------------------------------------ */ [data-store-theme="minimal"] body{ background:#ffffff; color:var(--c-text); } /* ------------------------------------------------------------ 3. Editorial headings — serif, airy, light weight. ------------------------------------------------------------ */ [data-store-theme="minimal"] h1, [data-store-theme="minimal"] h2, [data-store-theme="minimal"] h3, [data-store-theme="minimal"] .sf-hero-title, [data-store-theme="minimal"] .sf-section-title, [data-store-theme="minimal"] .section-title, [data-store-theme="minimal"] .widget-title, [data-store-theme="minimal"] .product-card-title, [data-store-theme="minimal"] .product-title{ font-family:'Tajawal', 'Segoe UI', Arial, sans-serif; font-weight:500; letter-spacing:.2px; } /* ------------------------------------------------------------ 4. Top bar — slim editorial black strip. The bar's links are inline white, so a dark background keeps them readable while giving the minimal look a crisp header edge. ------------------------------------------------------------ */ [data-store-theme="minimal"] .menu-top-area{ background:#111111; border-block-end:none; } /* ------------------------------------------------------------ 5. Header + nav — white, hairline borders, no heavy shadow. ------------------------------------------------------------ */ [data-store-theme="minimal"] .site-header{ box-shadow:none; border-block-end:1px solid var(--c-border); } [data-store-theme="minimal"] .topbar{ background:#ffffff; border-block-end:1px solid var(--c-border-l); } [data-store-theme="minimal"] .navbar{ background:#ffffff; border-block-end:1px solid var(--c-border); } /* Force the nav links dark (they carry inline color:#fff for the colored default nav). The store color stays as the accent. */ [data-store-theme="minimal"] .navbar .category-header, [data-store-theme="minimal"] .navbar .site-menu a{ color:var(--c-title) !important; } [data-store-theme="minimal"] .navbar .site-menu li.active a{ color:var(--accent) !important; } [data-store-theme="minimal"] .navbar .category-header svg{ color:var(--c-title) !important; } /* ------------------------------------------------------------ 6. Product cards — flat, hairline border, square, generous. ------------------------------------------------------------ */ [data-store-theme="minimal"] .product-card{ background:#ffffff; border:1px solid var(--c-border); border-radius:0; box-shadow:none; } [data-store-theme="minimal"] .product-card:hover{ box-shadow:none; border-color:var(--border-strong); transform:none; } /* ------------------------------------------------------------ 6b. Buttons — editorial text/underline, no fill (issue #72). The store color still shows as the text + underline. We use !important to beat the filled accent pill from color.php. ------------------------------------------------------------ */ [data-store-theme="minimal"] .btn-primary{ background:transparent !important; color:var(--accent) !important; border:0; border-radius:0; box-shadow:none; padding-inline:0; font-weight:600; text-decoration:underline; text-underline-offset:4px; } [data-store-theme="minimal"] .btn-primary:hover{ background:transparent !important; color:var(--accent-deep) !important; box-shadow:none; text-decoration:underline; } [data-store-theme="minimal"] .product-card-media{ background:#fafafa; } [data-store-theme="minimal"] .product-card-title{ font-size:1rem; line-height:1.4; } /* ------------------------------------------------------------ 7. White space — more room around sections and the page body. ------------------------------------------------------------ */ [data-store-theme="minimal"] .sf-section, [data-store-theme="minimal"] .home-section, [data-store-theme="minimal"] section{ padding-block:56px; } [data-store-theme="minimal"] .sf-hero{ margin-block-start:40px; } /* ------------------------------------------------------------ 8. Footer — light editorial, hairline top rule. ------------------------------------------------------------ */ [data-store-theme="minimal"] .site-footer{ background:#ffffff; color:var(--c-text); border-block-start:1px solid var(--c-border); } [data-store-theme="minimal"] .site-footer .widget-title{ color:var(--c-title); } /* ------------------------------------------------------------ 9. Home layout (issue #129) — the Minimal home has its own view (storefront-minimal/home.php): a split hero, a centered label, and price-only cards. These rules add the editorial polish on top of the layout that ships inline in that view. All scoped. ------------------------------------------------------------ */ /* Split hero — a thin hairline frame around the image, calm and flat. */ [data-store-theme="minimal"] .sf-min-hero-media{ border:1px solid var(--c-border); } /* Price-only cards — flat, hairline, quiet price (store color still shows on sale prices via the shared .price.is-sale rule). */ [data-store-theme="minimal"] .sf-min-card .price-now{ font-weight:500; } /* The centered label uses the store color as a thin accent underline. */ [data-store-theme="minimal"] .sf-min-label h2{ color:var(--c-title); } /* ------------------------------------------------------------ 10. Mobile — keep the editorial rhythm tighter but still airy. ------------------------------------------------------------ */ @media(max-width:768px){ [data-store-theme="minimal"] .sf-section, [data-store-theme="minimal"] .home-section, [data-store-theme="minimal"] section{ padding-block:36px; } } /* ============================================================ SHELL-START — store shell (issue #156, FIX-3) Minimal keeps the shared header, top nav and footer markup, so search, cart and every nav link keep working. This block turns them into the Minimal look: a centered, wide-spaced logo, a thin centered nav row with a hairline underline on the active item, and a thin centered footer. The scoped selectors (0,2,0) beat the shared shell rules (0,1,0) that sit in a