/* ========================================================================== store-figma.css — FIGMA PIXEL-MATCH OVERRIDE LAYER Loaded LAST in base.html (after design-tokens → store-styles → store-polish → store-refresh) so it wins by source order without rewriting the mature CSS. Source of truth: Figma file i0jjYyGnT6d2RlqpmoJrES ("Xrubiks"). Strategy: foundation here (fonts + token-exact nudges), then per-screen matching blocks appended below as each phase lands. SECTIONS 0. Self-hosted SF Pro / SF Arabic (the Figma's real typeface) 1. Foundation token nudges 2. Per-screen match layers (added per phase — see headers) ========================================================================== */ /* ========================================================================== 0. FONTS — SF Pro / SF Arabic (the Figma typeface) -------------------------------------------------------------------------- We do NOT self-host SF Pro / SF Arabic: the binaries are Apple-licensed and may not be served to the web, and shipping them caused 14 broken /static/ fonts/*.woff2 requests (404 on every page load) since they were never added. The typeface is still delivered correctly WITHOUT @font-face: • Apple devices → `-apple-system` / `BlinkMacSystemFont` render real SF Pro / SF Arabic natively (first in --xr-font-sans below). • Everyone else → graceful fallback to the loaded Cairo / Noto Sans Arabic webfonts, then the system sans stack. The 'SF Pro Display' / 'SF Pro Text' / 'SF Arabic' / 'Mechfire' names are kept in the font stacks below so a locally-installed face still resolves; with no @font-face they simply fall through instead of firing a 404. If a properly-licensed self-hosted build is ever added to static/fonts/, reinstate the @font-face blocks here (see static/fonts/README.md). ========================================================================== */ /* ========================================================================== 1. FOUNDATION TOKEN NUDGES (Figma-exact) ========================================================================== */ :root{ /* Lead with SF Pro / SF Arabic (Apple-native), Cairo/Noto as cross-platform fallback */ --xr-font-sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','SF Arabic', 'Cairo','Noto Sans Arabic','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --xr-font-brand:'Mechfire',-apple-system,'SF Pro Display','Cairo',sans-serif; /* Figma's dominant card/control radius is 19px (between the 16/20 steps) */ --xr-radius-card:19px; /* Figma-exact reds (sale / wrong-input) */ --xr-color-sale:#e60012; --xr-color-danger:#e30000; } /* store-styles.css:95 sets a literal Cairo-first stack on ; this layer loads later, so re-point body (and inheritors) to the SF Pro stack. */ body{font-family:var(--xr-font-sans);} /* ========================================================================== 2. PER-SCREEN MATCH LAYERS ========================================================================== */ /* -------------------------------------------------------------------------- PHASE 1 · BROWSE — token alignment + product card The storefront components use the --radius / --success / --danger / --text-* token set (defined in store-styles.css), NOT the --xr-* set. So we align THOSE to the verified Figma values here (this layer loads last → wins). -------------------------------------------------------------------------- */ :root{ --store-bg:#f6f7f9; /* Figma "Gray BG" page surface — white cards lift off it */ --text-primary:#1d1d1f; /* Figma "Black" — near-black ink (was #1a1a2e navy) */ --text-secondary:#3c3c43; /* iOS secondary label (was rgba navy) */ --success:#038e44; /* Figma success green (was #16a34a) */ --danger:#e60012; /* Figma sale / error red (was #dc2626) */ } body.dark-home{ --store-bg:#0a0a0c; /* Figma darkest app bg */ --surface-solid:#1d1d1f; /* Figma "Black" — Apple-black card (was #141420) */ --text-primary:#f2f4fc; /* iOS primary label on dark */ } /* Product card — Figma uses a SQUARE product image on off-white, 19px radius. */ .product-card{ border-radius:19px; } .product-image-wrap{ aspect-ratio:1/1; background:#f6f6f6; border-bottom:0; } body.dark-home .product-image-wrap{ background:#161618; } .product-image-wrap img{ padding:8%; } /* product floats on the tile, Figma-style */ /* Badges — Figma: solid royal "New", red sale, deep-green stock */ .badge-new{ background:#0051ff; color:#fff; border-color:transparent; } .badge-sale{ background:rgba(230,0,18,.10); color:#e60012; border-color:rgba(230,0,18,.18); } .product-discount-badge{ background:#e60012; } .product-stock-badge{ color:#038e44; background:rgba(3,142,68,.10); }