/* * Storefront theme identity layer — STANDARD storefronts only. * * Linked by components/layouts/storefront.blade.php only when the page is * neither an Advanced storefront (body.advanced-storefront) nor a design-system * storefront (body.ds-v2), and every rule is scoped to body.sf-themed anyway. * * The values come from App\Services\Themes\ThemeSettings::storefrontTheme(), * printed by the layout as `body.sf-themed{--…}`. That method only emits what * it has checked: an accent scale whose 500/600/700 clear 4.5/5/7:1 on white * and on the page, a page colour only when it is light, a primary CTA colour * only when it reaches 3:1 against the page and 4.5:1 with its label. When it * emits nothing, the matching body class is absent and nothing below applies. * * Dark mode is the `.dark` class on (components/theme-boot). */ /* ── 1. Accent scale (body.sf-accent) ───────────────────────────────────── The --color-gold-* declarations themselves live on body.sf-themed. In dark mode text-gold-500 (stars, rating bars, focus borders) sits on ink-950, so 500 swaps to the lightened step (≥4.5:1 on ink-900/950). */ html.dark body.sf-themed.sf-accent { --color-gold-500: var(--sf-gold-dark-500, var(--color-gold-400)); } /* Solid accent surfaces were written for the light brand green with ink text. A theme 500/600 is dark by construction (≥4.5:1 with white), so in light mode the label turns white; in dark mode 500 is light again and keeps ink. The product badges are excluded: storefront-overlays.css paints them, and the «مميّز» badge is themed further down. body.sf-accent-raw: the theme's own accent already carries ink text at ≥4.5:1 (fayy orange, earthy terracotta, neon magenta), so a solid 500 surface with ink text (header cart badge, ink-labelled accent buttons and tiles) keeps the raw brand colour and its ink label instead of the darkened 500 with white. Text and thin graphics (text-gold-*, stars, rings) keep the guarded scale. Hover lightens the surface (contrast with ink only grows). */ html:not(.dark) body.sf-themed.sf-accent:not(.sf-accent-raw) :is(.bg-gold-500, .bg-gold-600).text-ink-900:not(.sf-product-badge), html:not(.dark) body.sf-themed.sf-accent.sf-accent-raw .bg-gold-600.text-ink-900:not(.sf-product-badge) { color: #fff; } html:not(.dark) body.sf-themed.sf-accent.sf-accent-raw .bg-gold-500.text-ink-900:not(.sf-product-badge) { background-color: var(--sf-accent-raw); color: var(--sf-on-accent-raw); } html.dark body.sf-themed.sf-accent .bg-gold-500.text-white:not(.sf-product-badge) { color: var(--color-ink-900); } @media (hover: hover) { html:not(.dark) body.sf-themed.sf-accent:not(.sf-accent-raw) .bg-gold-500.text-ink-900:is(.hover\:bg-gold-300, .hover\:bg-gold-400):hover { background-color: var(--color-gold-700); } html:not(.dark) body.sf-themed.sf-accent.sf-accent-raw .bg-gold-500.text-ink-900:not(.sf-product-badge):is(.hover\:bg-gold-300, .hover\:bg-gold-400, .hover\:bg-gold-600, .hover\:bg-gold-700):hover { background-color: var(--sf-accent-raw-hover); color: var(--sf-on-accent-raw); } /* Dark mode keeps 600/700 dark (light-mode text, rings, solid surfaces). Where a view uses them only as a HOVER colour on a dark surface (cart «متابعة التسوق» and line names; ink-labelled accent buttons such as the order-review submit) the hover takes the light step instead, which clears 7:1 on ink-900/950 and with ink text. */ html.dark body.sf-themed.sf-accent :is(.hover\:text-gold-600, .hover\:text-gold-700):not([class*="dark:hover:text-"]):hover { color: var(--color-gold-300); } html.dark body.sf-themed.sf-accent .text-ink-900:is(.hover\:bg-gold-600, .hover\:bg-gold-700):not([class*="dark:hover:bg-"]):hover { background-color: var(--color-gold-300); } } /* «مميّز» badge: storefront-overlays.css paints it platform mustard (#d7b84c), the one off-palette hue left on themed cards. Under a theme accent it takes the accent: the raw brand colour with its ink label when that clears 4.5:1, otherwise a light accent tint with the 700 step (≥6:1 on 100 for every catalogue theme). «جديد», the discount and sold-out badges stay as they are. Both modes: the badge sits on the product picture, not on the page. */ body.sf-themed.sf-accent .sf-product-badge.sf-product-badge--featured { background: var(--color-gold-100); color: var(--color-gold-700); } body.sf-themed.sf-accent.sf-accent-raw .sf-product-badge.sf-product-badge--featured { background: var(--sf-accent-raw); color: var(--sf-on-accent-raw); } /* Focus ring on dark surfaces in light mode (image zoom dialog, demo banner, video frame). The bundle's ring is gold-600, which a theme makes dark (1.5–2.8:1 on the zoom overlay); gold-300 clears 5.8:1 on that overlay and 7:1 on ink-900 for every catalogue theme. Descendants only, so a dark BUTTON's own ring, which sits on the light page, keeps gold-600. The bundle rule is :where(), so no !important is needed. */ html:not(.dark) body.sf-themed.sf-accent :is(.bg-ink-900, .bg-ink-950, .bg-ink-950\/90) :focus-visible { outline-color: var(--color-gold-300); } /* ── 2. Page background (body.sf-page-bg) — light mode only ─────────────── Editorial #FAF6EE / earthy #F7F2E8 cream instead of bg-ink-50. The views' ink-50 tints (section bands bg-ink-50/60 and /40, picture frames and placeholders bg-ink-50) were written for the grey page, where they were invisible; on cream they read as cool grey patches. They take darker steps of the page colour itself instead (same hue, 3% / 2% toward black in oklab), so every band and frame belongs to the same paper. Without color-mix() support the value is invalid and the band simply shows the page colour. */ html:not(.dark) body.sf-themed.sf-page-bg { background-color: var(--sf-page-bg); --sf-page-tint: color-mix(in oklab, var(--sf-page-bg), #000 3%); --sf-page-tint-soft: color-mix(in oklab, var(--sf-page-bg), #000 2%); } html:not(.dark) body.sf-themed.sf-page-bg :is(.bg-ink-50, .bg-ink-50\/60) { background-color: var(--sf-page-tint); } html:not(.dark) body.sf-themed.sf-page-bg .bg-ink-50\/40 { background-color: var(--sf-page-tint-soft); } /* The tint out-ranks the bundle's hover utility, so a tinted tile that darkens on hover (cart trust links: bg-ink-50 hover:bg-ink-100) takes the next step of the same paper instead of losing its hover. */ @media (hover: hover) { html:not(.dark) body.sf-themed.sf-page-bg .bg-ink-50.hover\:bg-ink-100:hover { background-color: color-mix(in oklab, var(--sf-page-bg), #000 7%); } } /* ── 3. Primary CTA (body.sf-primary) — light mode only ─────────────────── Units tag their primary purchase buttons with .sf-btn-primary (product add-to-cart, sticky bar, dark hero pill, cart/drawer «إتمام الشراء»). Disabled buttons keep their own platform styling. */ html:not(.dark) body.sf-themed.sf-primary .sf-btn-primary:not(:disabled):not([aria-disabled="true"]) { background-color: var(--sf-primary); color: var(--sf-on-primary); } html:not(.dark) body.sf-themed.sf-primary .sf-btn-primary:not(:disabled):not([aria-disabled="true"]) svg { color: inherit; } @media (hover: hover) { html:not(.dark) body.sf-themed.sf-primary .sf-btn-primary:not(:disabled):not([aria-disabled="true"]):hover { background-color: var(--sf-primary-hover); color: var(--sf-on-primary); } } /* ── 4. Theme shadows (body.sf-shadow-card / body.sf-shadow-elevated) ───── The bundle's .shadow-card / .shadow-elevated inline the platform shadow, so the theme tokens (--shadow-card on :root) never reached them. The layout emits a sanitised copy (--sf-shadow-*; 'none' becomes a transparent zero shadow so a ring on the same element survives) only for a theme recipe or a merchant-picked preset: salla-gold's platform-seeded tokens emit nothing, so the default stores keep the bundle shadow exactly. The hover variants live in the bundle's @media (hover:hover) block and must out-rank the base rule. Light mode only: theme recipes are drawn for light surfaces (mono's elevated shadow is a #E5E5E5 hairline, which outlined dark panels in white). Dark mode keeps the platform's own shadow. */ html:not(.dark) body.sf-themed.sf-shadow-card .shadow-card { --tw-shadow: var(--sf-shadow-card); } html:not(.dark) body.sf-themed.sf-shadow-elevated .shadow-elevated { --tw-shadow: var(--sf-shadow-elevated); } @media (hover: hover) { html:not(.dark) body.sf-themed.sf-shadow-card .hover\:shadow-card:hover { --tw-shadow: var(--sf-shadow-card); } html:not(.dark) body.sf-themed.sf-shadow-elevated .hover\:shadow-elevated:hover { --tw-shadow: var(--sf-shadow-elevated); } /* Only one of the two themed: the other hover keeps the bundle value instead of losing to the themed base rule above. */ html:not(.dark) body.sf-themed.sf-shadow-card:not(.sf-shadow-elevated) .hover\:shadow-elevated:hover { --tw-shadow: 0 4px 12px var(--tw-shadow-color, #0b0d1514), 0 24px 48px -16px var(--tw-shadow-color, #0b0d1529); } html:not(.dark) body.sf-themed.sf-shadow-elevated:not(.sf-shadow-card) .hover\:shadow-card:hover { --tw-shadow: 0 1px 2px var(--tw-shadow-color, #0b0d150a), 0 8px 24px -8px var(--tw-shadow-color, #0b0d1514); } } /* ── 5. Header: nav at 1024–1199px, store name on phones ────────────────── The desktop nav starts at lg; with six categories in a wide face (Tajawal) gap-7 is too generous for the first desktop widths. */ @media (min-width: 1024px) and (max-width: 1199px) { body.sf-themed .sf-header-nav { gap: 1.25rem; } } /* Store name on phones (below sm). Without letter-spacing an Arabic name is about 5–8% wider than it was with tracking-tight, so a name that just fitted would now end in an ellipsis. Instead of truncating, a long name wraps to two balanced lines (clamped at two, ellipsis after that); one that fits on one line renders exactly as before (same size, vertically centred). The line height stays text-sm's 20px: the clamp clips at the line box, and a tighter one cut the descenders and marks of Cairo, Tajawal and Plex («باي كارد», «رُحال»); two lines are 40px inside the 56px header. */ @media (max-width: 639px) { body.sf-themed .sf-header-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; } } /* ── 6. No letter-spacing on Arabic ─────────────────────────────────────── Tailwind tracking-* utilities (tracking-tight on card and page titles, tracking-wide/wider on labels, arbitrary tracking-[…]) shift every glyph, which separates or overlaps the joined letters of Arabic words. Arabic storefronts (html[lang=ar…]) reset them; a Latin-locale store keeps them. Codes keep their spacing: monospace and left-to-right fields (WhatsApp OTP input, delivered codes on the order page, checkout card number) are digits and Latin, where the tracking aids reading. */ html[lang|="ar"] body.sf-themed [class*="tracking-"]:not(.font-mono, [dir="ltr"], [dir="ltr"] *) { letter-spacing: normal; } /* ── 7. Showcase «وضع العرض» marker on tablets ──────────────────────────── The product page's sticky add-to-cart bar now also shows at 768–1023px (lg:hidden), so the marker keeps its phone offset above it there. */ @media (min-width: 768px) and (max-width: 1023px) { body.sf-themed .sf-demo-marker { bottom: 5rem; } } /* ── 8. Helpers for standard-storefront views ───────────────────────────── Utilities the prebuilt Tailwind bundle does not have. .sf-balance balanced line breaks for short headings (no orphan word). .sf-hit a touch target 8px larger than the visible control without taking layout width: a transparent ::before 4px outside each edge (the 32px header icons answer a 40px tap). Needs a parent that does not clip; the control becomes position: relative, so absolute children (badges) still anchor to it. .sf-nowrap keeps a short run (a price, a Latin brand) on one line. */ body.sf-themed .sf-balance { text-wrap: balance; } body.sf-themed .sf-hit { position: relative; } body.sf-themed .sf-hit::before { content: ""; position: absolute; inset: -4px; } body.sf-themed .sf-nowrap { white-space: nowrap; }