/* ============================================================================= VFincu Storefront Design System ============================================================================= Loaded LAST in resources/views/frontend/layouts/style.blade.php so it wins the cascade without editing the three legacy stylesheets it sits on top of: public/syaanah/css/minimal.css public/asoug/css/minimal.css public/asoug/css/style.css public/asoug/css/footer.css Two rules keep this file from breaking the ~110 pages it did not redesign: 1. Every token is prefixed --vf-. The legacy :root in public/asoug/css/style.css declares --primary, --secondary, --surface and ~25 more, and legacy CSS reads them. Redefining those names here would restyle the entire storefront by accident. We never touch them; we shadow nothing. 2. Component classes are new names (.vf-*) or names this project already owns (.product-card, .price). We do not restyle bare Bootstrap element selectors. Brand colours are taken from the existing palette, not invented: --primary #14003F (public/asoug/css/style.css:21) --secondary #FFEB3B (public/asoug/css/style.css:25) RTL: the storefront ships an Arabic-first layout ( is driven by session('lang_dir')). Every rule below uses logical properties — inline-start / inline-end — never left / right. See the LOGICAL PROPERTIES note before adding anything. ========================================================================== */ /* ----------------------------------------------------------------------------- 1. TOKENS ----------------------------------------------------------------------------- Moved to public/assets/global/css/vf-tokens.css so the admin panel can share one palette rather than keeping a second copy of it that would drift. That file also carries the dark-mode ramp ([data-bs-theme="dark"]) and the self-hosted Roboto / IBM Plex Sans Arabic stacks. THIS FILE DEPENDS ON IT. vf-tokens.css must be linked BEFORE design-system.css — resources/views/frontend/layouts/style.blade.php does that. Every --vf-* name read below is defined there, and nothing here redefines one. -------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- 2. LOGICAL PROPERTIES / RTL ----------------------------------------------------------------------------- Everything below this line uses margin-inline-*, padding-inline-*, inset-inline-* and border-inline-*. Do not add left/right rules to this file. If you need a direction-specific override, use [dir="rtl"] explicitly and say why. -------------------------------------------------------------------------- */ [dir="rtl"] body, [dir="rtl"] .vf-font-brand { font-family: var(--vf-font-arabic); } /* Direction-implying icons must mirror. Bootstrap Icons and FontAwesome both render chevrons as glyphs, so a transform is the only way to flip them. */ [dir="rtl"] .vf-flip-rtl, [dir="rtl"] .vf-icon-next, [dir="rtl"] .vf-icon-prev { transform: scaleX(-1); } /* ----------------------------------------------------------------------------- 3. BASE / TYPOGRAPHY ----------------------------------------------------------------------------- Scoped to .vf-* wrappers and to elements inside redesigned pages rather than applied to bare `body`, so untouched legacy pages keep their current type. -------------------------------------------------------------------------- */ /* Both syaanah/css/minimal.css and asoug/css/minimal.css declare these two families, and asoug's copy points at ../fonts/amber/ -- a directory that does not exist under public/asoug/. Being the later of the two, the broken declaration was the one that won, so 'Ember RG' and 'Ember Bold' resolved to nothing site-wide while the .ttf files sat unreferenced in public/syaanah/. Restated here because /public/asoug is in .gitignore: a correction made in that folder lives on one machine and never reaches a deploy. This file loads last, so re-declaring the families is enough to take the working paths -- the same source-order mechanism that caused the bug, pointed the other way. */ @font-face { font-family: 'Ember RG'; src: url('../../../syaanah/fonts/amber/AmazonEmber_Regular.ttf'); font-display: swap; } @font-face { font-family: 'Ember Bold'; src: url('../../../syaanah/fonts/amber/AmazonEmber_Bold.ttf'); font-display: swap; } .vf-scope { font-family: var(--vf-font-sans); font-size: var(--vf-text-base); line-height: var(--vf-leading-normal); color: var(--vf-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [dir="rtl"] .vf-scope { font-family: var(--vf-font-arabic); } /* asoug/css/style.css:75-81 sets `h1,h2,...,h6 { font-family: var(--poppins) }`. A rule that targets the heading directly beats a font-family *inherited* from .vf-scope no matter how specific the ancestor selector is, so every heading on the storefront was asking for Poppins -- a Latin-only face with no Arabic glyphs. Arabic headings fell through to whatever the browser picked per glyph, which is why they never matched the body copy next to them. Restated here as a direct rule of our own so inheritance is no longer what decides it. RTL only: under LTR, Poppins has the glyphs it needs and swapping the storefront's heading face is a design change, not a bug fix. */ [dir="rtl"] .vf-scope :is(h1, h2, h3, h4, h5, h6) { font-family: var(--vf-font-arabic); } .vf-scope h1, .vf-scope h2, .vf-scope h3, .vf-scope h4, .vf-scope h5, .vf-scope h6 { color: var(--vf-ink); line-height: var(--vf-leading-tight); font-weight: var(--vf-weight-bold); margin-block-end: var(--vf-space-3); } .vf-scope h1 { font-size: var(--vf-text-4xl); } .vf-scope h2 { font-size: var(--vf-text-3xl); } .vf-scope h3 { font-size: var(--vf-text-2xl); } .vf-scope h4 { font-size: var(--vf-text-xl); } .vf-scope h5 { font-size: var(--vf-text-lg); } .vf-scope h6 { font-size: var(--vf-text-base); } @media (max-width: 767.98px) { .vf-scope h1 { font-size: var(--vf-text-3xl); } .vf-scope h2 { font-size: var(--vf-text-2xl); } .vf-scope h3 { font-size: var(--vf-text-xl); } } .vf-scope a { color: var(--vf-accent); text-decoration: none; transition: color var(--vf-duration-fast) var(--vf-ease); } .vf-scope a:hover { color: var(--vf-primary-600); text-decoration: underline; } .vf-muted { color: var(--vf-muted) !important; } .vf-ink { color: var(--vf-ink) !important; } .vf-text-2xs { font-size: var(--vf-text-2xs); } .vf-text-xs { font-size: var(--vf-text-xs); } .vf-text-sm { font-size: var(--vf-text-sm); } .vf-text-lg { font-size: var(--vf-text-lg); } /* Line clamping — used by product titles and section blurbs. */ .vf-clamp-1, .vf-clamp-2, .vf-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .vf-clamp-1 { -webkit-line-clamp: 1; } .vf-clamp-2 { -webkit-line-clamp: 2; } .vf-clamp-3 { -webkit-line-clamp: 3; } /* Visible to screen readers only — used for form hints and icon-only buttons. */ .vf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----------------------------------------------------------------------------- 4. FOCUS ----------------------------------------------------------------------------- A visible focus ring on every interactive element. :focus-visible keeps it off mouse clicks. This is deliberately near the top of the file so later component rules can override the colour but not remove the ring. -------------------------------------------------------------------------- */ .vf-scope a:focus-visible, .vf-scope button:focus-visible, .vf-scope input:focus-visible, .vf-scope select:focus-visible, .vf-scope textarea:focus-visible, .vf-scope [tabindex]:focus-visible, .vf-btn:focus-visible, .vf-product-card__link:focus-visible { outline: 2px solid var(--vf-primary-500); outline-offset: 2px; border-radius: var(--vf-radius-sm); } @media (prefers-reduced-motion: reduce) { .vf-scope *, .vf-scope *::before, .vf-scope *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ----------------------------------------------------------------------------- 5. BUTTONS -------------------------------------------------------------------------- */ .vf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--vf-space-2); min-height: var(--vf-tap); padding: var(--vf-space-3) var(--vf-space-5); font-family: inherit; font-size: var(--vf-text-sm); font-weight: var(--vf-weight-semibold); line-height: 1.2; text-align: center; text-decoration: none; border: 1px solid transparent; border-radius: var(--vf-radius-md); cursor: pointer; transition: background-color var(--vf-duration-fast) var(--vf-ease), border-color var(--vf-duration-fast) var(--vf-ease), color var(--vf-duration-fast) var(--vf-ease), box-shadow var(--vf-duration-fast) var(--vf-ease); } .vf-btn:disabled, .vf-btn[aria-disabled="true"], .vf-btn.is-loading { opacity: 0.6; cursor: not-allowed; pointer-events: none; } .vf-btn--block { width: 100%; } .vf-btn--sm { min-height: 36px; padding: var(--vf-space-2) var(--vf-space-4); font-size: var(--vf-text-xs); } .vf-btn--lg { min-height: 52px; padding: var(--vf-space-4) var(--vf-space-6); font-size: var(--vf-text-base); } .vf-btn--primary { background-color: var(--vf-primary); border-color: var(--vf-primary); color: var(--vf-on-primary, #ffffff); /* follows the brand: BrandPalette picks black or white by contrast */ } .vf-btn--primary:hover, .vf-btn--primary:focus { background-color: var(--vf-primary-600); border-color: var(--vf-primary-600); color: var(--vf-on-primary, #ffffff); } .vf-btn--secondary { background-color: var(--vf-secondary); border-color: var(--vf-secondary); color: var(--vf-on-secondary); /* 15.61:1 — white here would be 1.22:1 */ } .vf-btn--secondary:hover, .vf-btn--secondary:focus { background-color: var(--vf-secondary-600); border-color: var(--vf-secondary-600); color: var(--vf-on-secondary); } .vf-btn--outline { background-color: transparent; border-color: var(--vf-border-strong); color: var(--vf-ink); } .vf-btn--outline:hover, .vf-btn--outline:focus { background-color: var(--vf-n-50); border-color: var(--vf-primary-500); color: var(--vf-primary-600); } .vf-btn--ghost { background-color: transparent; border-color: transparent; color: var(--vf-accent); } .vf-btn--ghost:hover { background-color: var(--vf-primary-50); } .vf-btn--danger { background-color: var(--vf-danger); border-color: var(--vf-danger); color: #ffffff; /* 5.62:1 */ } /* Icon-only action, e.g. wishlist heart on a product card. Square, and never smaller than the tap floor even though the icon inside is 16px. */ .vf-btn--icon { min-width: var(--vf-tap); padding: 0; border-radius: var(--vf-radius-pill); } /* --- Social sign-in --------------------------------------------------------- Deliberately outline-styled so they read as secondary to the email/password submit. Brand colour lives on the mark, not the button fill — a wall of solid blue/red buttons out-shouts the primary action. Used by the auth pages in Workstream 3/4. */ .vf-btn-social { display: inline-flex; align-items: center; justify-content: center; gap: var(--vf-space-3); width: 100%; min-height: var(--vf-tap); padding: var(--vf-space-3) var(--vf-space-4); font-size: var(--vf-text-sm); font-weight: var(--vf-weight-semibold); color: var(--vf-ink); background-color: var(--vf-surface); border: 1px solid var(--vf-border-strong); border-radius: var(--vf-radius-md); text-decoration: none; transition: background-color var(--vf-duration-fast) var(--vf-ease), border-color var(--vf-duration-fast) var(--vf-ease), box-shadow var(--vf-duration-fast) var(--vf-ease); } .vf-btn-social:hover, .vf-btn-social:focus { background-color: var(--vf-n-50); border-color: var(--vf-n-400); color: var(--vf-ink); text-decoration: none; box-shadow: var(--vf-shadow-xs); } .vf-btn-social:focus-visible { outline: 2px solid var(--vf-primary-500); outline-offset: 2px; } .vf-btn-social__icon { display: inline-flex; flex: 0 0 auto; width: 20px; height: 20px; } .vf-btn-social__icon svg { width: 100%; height: 100%; } .vf-btn-social--facebook .vf-btn-social__icon { color: #1877f2; } /* "or" divider between the password form and the social buttons. Renders only when at least one provider is enabled — the Blade guards that, not the CSS. */ .vf-divider { display: flex; align-items: center; gap: var(--vf-space-3); margin-block: var(--vf-space-5); color: var(--vf-muted); font-size: var(--vf-text-xs); text-transform: uppercase; letter-spacing: 0.06em; } .vf-divider::before, .vf-divider::after { content: ""; flex: 1 1 auto; height: 1px; background-color: var(--vf-border); } /* ----------------------------------------------------------------------------- 6. FORM CONTROLS -------------------------------------------------------------------------- */ .vf-field { margin-block-end: var(--vf-space-5); } .vf-label { display: block; margin-block-end: var(--vf-space-2); font-size: var(--vf-text-sm); font-weight: var(--vf-weight-medium); color: var(--vf-ink); } /* The project already marks mandatory fields with class="required" on the label. */ .vf-label.required::after, .vf-scope label.required::after { content: " *"; color: var(--vf-danger); } .vf-input, .vf-select, .vf-textarea { display: block; width: 100%; min-height: var(--vf-tap); padding: var(--vf-space-3) var(--vf-space-4); font-family: inherit; font-size: var(--vf-text-base); /* 16px stops iOS Safari zooming on focus */ line-height: var(--vf-leading-snug); color: var(--vf-ink); background-color: var(--vf-surface); border: 1px solid var(--vf-border-strong); border-radius: var(--vf-radius-md); transition: border-color var(--vf-duration-fast) var(--vf-ease), box-shadow var(--vf-duration-fast) var(--vf-ease); } .vf-input::placeholder, .vf-textarea::placeholder { color: var(--vf-n-400); } .vf-input:focus, .vf-select:focus, .vf-textarea:focus { outline: none; border-color: var(--vf-primary-500); box-shadow: var(--vf-shadow-focus); } .vf-input[aria-invalid="true"], .vf-select[aria-invalid="true"], .vf-textarea[aria-invalid="true"], .vf-input.is-invalid { border-color: var(--vf-danger); } .vf-input[aria-invalid="true"]:focus, .vf-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(198, 35, 72, 0.25); } .vf-input:disabled, .vf-select:disabled, .vf-textarea:disabled { background-color: var(--vf-n-50); color: var(--vf-n-400); cursor: not-allowed; } .vf-help { display: block; margin-block-start: var(--vf-space-2); font-size: var(--vf-text-xs); color: var(--vf-muted); } .vf-error { display: block; margin-block-start: var(--vf-space-2); font-size: var(--vf-text-xs); color: var(--vf-danger); } .vf-error:empty { display: none; } /* Password reveal toggle. Positioned with inset-inline-end so it lands on the correct side under RTL without a second rule. */ .vf-input-group { position: relative; } .vf-input-group .vf-input { padding-inline-end: calc(var(--vf-tap) + var(--vf-space-1)); } .vf-input-affix { position: absolute; inset-inline-end: 0; inset-block-start: 0; display: inline-flex; align-items: center; justify-content: center; width: var(--vf-tap); height: 100%; padding: 0; background: none; border: 0; color: var(--vf-muted); cursor: pointer; } .vf-input-affix:hover { color: var(--vf-ink); } /* ----------------------------------------------------------------------------- 7. SURFACES / SECTION HEADINGS -------------------------------------------------------------------------- */ .vf-card { background-color: var(--vf-surface-raised); border: 1px solid var(--vf-border); border-radius: var(--vf-radius-lg); box-shadow: var(--vf-shadow-sm); } .vf-card__body { padding: var(--vf-space-5); } .vf-section { padding-block: var(--vf-space-6); } @media (min-width: 992px) { .vf-section { padding-block: var(--vf-space-7); } } .vf-section--sunken { background-color: var(--vf-surface-sunken); } .vf-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--vf-space-4); margin-block-end: var(--vf-space-5); } .vf-section-head__title { margin: 0; font-size: var(--vf-text-2xl); font-weight: var(--vf-weight-bold); color: var(--vf-ink); line-height: var(--vf-leading-tight); } .vf-section-head__sub { margin: var(--vf-space-1) 0 0; font-size: var(--vf-text-sm); color: var(--vf-muted); } .vf-section-head__link { flex: 0 0 auto; font-size: var(--vf-text-sm); font-weight: var(--vf-weight-semibold); color: var(--vf-accent); white-space: nowrap; } @media (max-width: 575.98px) { .vf-section-head__title { font-size: var(--vf-text-xl); } } /* ----------------------------------------------------------------------------- 8. PRODUCT CARD ----------------------------------------------------------------------------- Replaces the one-off .product-card-ex / .promotion-card-ex / .sale-badge-ex rules that lived in a