/* KharidExpress custom-order calculator. Layers 1-5 are the approved design system v1.0, unmodified. Plugin-specific rules are appended at the end and use tokens only. */ /* ===== tokens.primitives.css ===== */ /* ============================================================================ KharidExpress DS - LAYER 1: PRIMITIVES The ONLY file in this system permitted to contain a raw colour literal. Nothing outside tokens.semantic.css may reference these directly. Approved at Gate 1: warm-paper ground (from direction 2) with the brand orange retained at full strength (from direction 1). Ramps are generated by mixing each anchor toward white and toward its own deep shade, so the steps are even rather than hand-picked. Hex rather than oklch on purpose: these values get pasted into Avada colour pickers and WooCommerce option fields. ========================================================================== */ :root { /* --- orange: the brand mark. 500 is the logo colour, unchanged. --------- */ --kx-orange-50: #feeada; --kx-orange-100: #fed4b5; --kx-orange-200: #fdbe90; --kx-orange-300: #fca96a; --kx-orange-400: #fc9445; --kx-orange-500: #fb7e20; /* brand. Survivor of #fb7e20/#fb7d1f/#fc9e3a/#ff7a00 */ --kx-orange-600: #cf6819; /* the text/border-safe orange (>=3:1 on every ground) */ --kx-orange-700: #a25112; --kx-orange-800: #763a0c; --kx-orange-900: #4a2405; /* --- navy: one navy. Replaces #0d244c/#0d144c/#17385e/#0a2047. --------- */ --kx-navy-50: #e5e7e9; --kx-navy-100: #cbced4; --kx-navy-200: #b1b6be; --kx-navy-300: #979da9; --kx-navy-400: #7e8593; --kx-navy-500: #646c7e; --kx-navy-600: #4a5468; --kx-navy-700: #303b53; --kx-navy-800: #16233d; /* headings, CTA fill, hero text */ --kx-navy-900: #0a0f1b; /* --- sand: the warm ground and its neutrals. --------------------------- */ --kx-sand-50: #f3f0eb; --kx-sand-100: #e7e1d6; --kx-sand-200: #dbd2c2; --kx-sand-300: #cfc3ae; --kx-sand-400: #b6ab98; --kx-sand-500: #9e9381; --kx-sand-600: #857c6b; /* strong border (3.60:1 on the raised surface) */ --kx-sand-700: #6c6455; /* muted text (5.11:1 worst case) */ --kx-sand-800: #544c3e; --kx-sand-900: #3b3428; /* --- ink: body copy. Warm-leaning grey, not pure black. ---------------- */ --kx-ink-700: #4a5160; --kx-ink-900: #14181f; /* --- status. Rate up/down doubles as success/danger. ------------------- */ --kx-green-50: #dfece5; --kx-green-600: #1c7c4a; /* Teal, for the "talk to a human" card. Deep enough to carry white text (contrast checked against the same worst-case grounds as everything else) and clearly distinct from the rate-up green, which means something specific in this system. */ --kx-teal-50: #dff0ee; --kx-teal-600: #0f7d72; --kx-teal-700: #0a5f57; --kx-green-800: #11492c; --kx-red-50: #f4dfdf; --kx-red-600: #b32020; --kx-red-800: #641212; --kx-amber-50: #fdf1dd; --kx-amber-600: #9b5f09; /* --- paper surfaces ---------------------------------------------------- */ --kx-paper-0: #ffffff; --kx-paper-1: #faf7f2; /* page canvas */ --kx-paper-2: #f4efe6; /* raised / inset band */ /* --- warm shadow tint, carried over from the site's own good instinct --- */ --kx-shadow-tint: 91 45 0; } /* ===== tokens.semantic.css ===== */ /* ============================================================================ KharidExpress DS - LAYER 2: SEMANTIC References primitives ONLY. Never a hex. This is the single layer a future dark mode or a direction change would touch. Every foreground/background pair below was solved against the WORST-CASE ground it can land on (surface #ffffff, canvas #faf7f2, sunken #f4efe6) - not against white alone. Checking against white alone under-reports by ~0.4 and produced a real miss during Gate 1 review. ========================================================================== */ :root { /* --- surfaces ---------------------------------------------------------- */ --kx-color-canvas: var(--kx-paper-1); --kx-color-surface: var(--kx-paper-0); --kx-color-surface-sunken: var(--kx-paper-2); --kx-color-surface-ink: var(--kx-navy-800); /* --- lines ------------------------------------------------------------- */ --kx-color-border: var(--kx-sand-200); /* decorative separation */ --kx-color-border-strong: var(--kx-sand-600); /* 3.60:1 - real UI boundaries */ /* --- text: worst-case 6.95 / 5.11 / 13.66 ------------------------------ */ --kx-color-text: var(--kx-ink-700); --kx-color-text-muted: var(--kx-sand-700); --kx-color-text-strong: var(--kx-navy-800); --kx-color-text-inverse: var(--kx-paper-0); /* --- accent (orange) has FOUR roles, not one. Gate 2 review found that a single "accent text" colour is not sufficient: at >=3:1 it is legal for large text and borders but fails on a 14px label, where AA needs 4.5:1. Picking the wrong one is now a contrast bug you can name. -accent FILL only. Large areas. Never text. -accent-2 gradient end for the brand hero. -accent-on what sits ON the fill. Navy, 6.04:1. White is 2.59:1 and fails - this is the live homepage's current bug. -accent-line borders, rules, icons, text >=24px (or >=18.7px bold). 3.25:1 worst case. -accent-ink any text below that size. 4.93:1 worst case. */ --kx-color-accent: var(--kx-orange-500); --kx-color-accent-2: var(--kx-orange-400); --kx-color-accent-on: var(--kx-navy-800); --kx-color-accent-line: var(--kx-orange-600); --kx-color-accent-ink: var(--kx-orange-700); --kx-color-accent-wash: var(--kx-orange-50); /* legacy alias - points at the small-text-safe value so existing use is correct by default rather than silently failing */ --kx-color-accent-text: var(--kx-orange-700); /* --- support / "reach a human". Its own role, not the CTA's: the CTA is "buy", this is "ask". ------------------------------------------- */ --kx-color-support: var(--kx-teal-600); --kx-color-support-hover: var(--kx-teal-700); --kx-color-support-wash: var(--kx-teal-50); --kx-color-support-on: var(--kx-paper-0); /* --- call to action ---------------------------------------------------- */ --kx-color-cta: var(--kx-navy-800); --kx-color-cta-hover: var(--kx-navy-900); --kx-color-cta-on: var(--kx-paper-0); /* 15.65:1 */ /* --- FX rate semantics. Deliberate: for an importer a RISING lira is bad news, so "up" is a direction, not a celebration. Colour is never the only signal - an arrow and a sign ship with it. -------------------- */ --kx-color-rate-up: var(--kx-green-600); --kx-color-rate-down: var(--kx-red-600); --kx-color-rate-flat: var(--kx-sand-700); --kx-color-rate-stale: var(--kx-amber-600); /* --- notices ----------------------------------------------------------- */ --kx-color-success-bg: var(--kx-green-50); --kx-color-success-fg: var(--kx-green-600); --kx-color-danger-bg: var(--kx-red-50); --kx-color-danger-fg: var(--kx-red-600); --kx-color-warn-bg: var(--kx-amber-50); --kx-color-warn-fg: var(--kx-amber-600); --kx-color-info-bg: var(--kx-navy-50); --kx-color-info-fg: var(--kx-navy-800); /* --- focus: 13.78:1 worst case ---------------------------------------- */ --kx-color-focus: var(--kx-navy-800); --kx-focus-ring: 3px; --kx-focus-ring-offset: 2px; /* --- type --------------------------------------------------------------- Persian sits larger than Latin at the same nominal size, so body is 17px. The weight ladder is the single biggest win: the current site is weight-400 everywhere and has no hierarchy at all. */ --kx-font-ui: Vazirmatn, system-ui, -apple-system, "Segoe UI", sans-serif; --kx-fs-100: 12px; --kx-fs-200: 14px; --kx-fs-300: 15px; --kx-fs-400: 17px; --kx-fs-500: 20px; --kx-fs-600: 24px; --kx-fs-700: 30px; --kx-fs-800: 38px; --kx-fs-900: 48px; --kx-fw-body: 400; --kx-fw-medium: 500; --kx-fw-strong: 600; --kx-fw-display: 700; --kx-lh-body: 1.9; --kx-lh-tight: 1.45; --kx-lh-display: 1.3; --kx-tracking-fa: 0; /* letter-spacing breaks Persian joining. Never change. */ /* --- geometry ----------------------------------------------------------- 20px was the site's most recognisable geometric trait after the orange; direction 2 wanted 12. 16 keeps the softness without the bubbliness. */ --kx-radius-sm: 8px; --kx-radius-md: 10px; --kx-radius-lg: 16px; --kx-radius-pill: 999px; --kx-radius-circle: 50%; /* --- space: 4px base --------------------------------------------------- */ --kx-space-1: 4px; --kx-space-2: 8px; --kx-space-3: 12px; --kx-space-4: 16px; --kx-space-5: 20px; --kx-space-6: 24px; --kx-space-7: 32px; --kx-space-8: 40px; --kx-space-9: 48px; --kx-space-10: 64px; --kx-space-11: 80px; --kx-space-12: 96px; --kx-gutter: clamp(16px, 4vw, 80px); /* replaces the ad-hoc 2.5/4/6/8/18vw */ /* --- elevation: the site is almost shadowless and that reads as calm. Kept, with the warm tint the owner's own CSS already used. --------- */ --kx-shadow-0: none; --kx-shadow-1: 0 1px 2px rgb(var(--kx-shadow-tint) / .05); --kx-shadow-2: 0 3px 12px rgb(var(--kx-shadow-tint) / .06); --kx-shadow-3: 0 10px 30px rgb(var(--kx-shadow-tint) / .08); /* --- motion ------------------------------------------------------------ */ --kx-ease: cubic-bezier(.2, .6, .3, 1); --kx-dur-1: 120ms; --kx-dur-2: 200ms; --kx-dur-3: 320ms; /* --- WCAG 2.2 AA (2.5.8) is 24px; 44 is the design default for a thumb. - */ --kx-target-min: 44px; } /* ===== base.css ===== */ /* ============================================================================ KharidExpress DS - BASE: reset, typography, RTL, accessibility. No colour or size literals - tokens only. Logical properties only. ========================================================================== */ @font-face{font-family:Vazirmatn;src:url('fonts/vazirmatn-fa.woff2') format('woff2'); font-weight:400 700;font-display:swap;unicode-range:U+0600-06FF,U+200C-200D} @font-face{font-family:Vazirmatn;src:url('fonts/vazirmatn-num.woff2') format('woff2'); font-weight:400 700;font-display:swap;unicode-range:U+0020,U+0025,U+0028-002F,U+0030-0039,U+003A,U+00D7,U+2013,U+2212} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--kx-color-canvas); color:var(--kx-color-text); font-family:var(--kx-font-ui); font-size:var(--kx-fs-400); font-weight:var(--kx-fw-body); line-height:var(--kx-lh-body); letter-spacing:var(--kx-tracking-fa); text-wrap:pretty; } h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0} img,svg{max-inline-size:100%;block-size:auto} button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit} table{border-collapse:collapse;inline-size:100%} /* Links must be defined even before the system has links, or they render browser-default blue the moment someone adds one in the editor. */ a{color:var(--kx-color-cta);text-underline-offset:3px} a:hover{color:var(--kx-color-accent-ink)} /* --- typography scale ------------------------------------------------------ Persian headings need tighter leading than Persian body copy, or a two-line title drifts apart. */ .kx-h1,.kx-h2,.kx-h3,.kx-h4{color:var(--kx-color-text-strong);line-height:var(--kx-lh-display); font-weight:var(--kx-fw-display)} .kx-h1{font-size:var(--kx-fs-800)} .kx-h2{font-size:var(--kx-fs-700)} .kx-h3{font-size:var(--kx-fs-600)} .kx-h4{font-size:var(--kx-fs-500);font-weight:var(--kx-fw-strong);line-height:var(--kx-lh-tight)} .kx-lead{font-size:var(--kx-fs-500);line-height:var(--kx-lh-body)} .kx-body{font-size:var(--kx-fs-400)} .kx-small{font-size:var(--kx-fs-300)} .kx-caption{font-size:var(--kx-fs-200);color:var(--kx-color-text-muted)} .kx-muted{color:var(--kx-color-text-muted)} .kx-strong{font-weight:var(--kx-fw-strong)} /* --- RTL -------------------------------------------------------------------- Root hook is .rtl on , matching Avada's own convention, so the same selectors keep working once this lands in the theme. LTR islands use unicode-bidi:isolate, never a bare direction:ltr. A bare direction change is what breaks the current site's read-more links: it reorders surrounding content instead of isolating the run. And it must never go on a LAYOUT CONTAINER - on a grid or flex parent it reverses the order the tracks are placed in, which silently mirrored the colour-ramp labels during Gate 2 review. Isolate the run, never the box. */ .kx-ltr{direction:ltr;unicode-bidi:isolate;text-align:start} .kx-num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums} /* User-pasted foreign product titles: is the correct primitive. */ bdi{unicode-bidi:isolate} /* Icon mirroring is a two-set rule, not a blanket flip. MIRROR: chevrons, arrows, back/forward, timeline progress. NEVER: clock, check, cross, magnifier, external-link, logos, product art. */ .rtl .kx-i-flip{transform:scaleX(-1)} /* --- accessibility --------------------------------------------------------- */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:var(--kx-focus-ring) solid var(--kx-color-focus); outline-offset:var(--kx-focus-ring-offset); border-radius:var(--kx-radius-sm); } .kx-sr{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .kx-sr-focus:not(:focus):not(:focus-within){position:absolute;inline-size:1px; block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* Visibility is never driven by the `hidden` attribute in this system: the Claude Design dc runtime strips valueless boolean attributes when it compiles a template, so `hidden` in the source is absent from the rendered DOM. Components default to hidden in CSS and are revealed by a state class. */ .kx-is-hidden{display:none} /* Visible end-state is the BASE style; animation only ever plays FROM hidden, so print, PDF export and reduced-motion show content, never a stuck opacity:0. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important} } /* ===== components.css ===== */ /* ============================================================================ KharidExpress DS - COMPONENTS (v1 primitives) Tokens only. Logical properties only. Every interactive element clears the 44px target default and carries a visible :focus-visible ring from base.css. ========================================================================== */ /* --- surface ---------------------------------------------------------------*/ .kx-card{background:var(--kx-color-surface);border:1px solid var(--kx-color-border); border-radius:var(--kx-radius-lg);box-shadow:var(--kx-shadow-1); padding-block:var(--kx-space-6);padding-inline:var(--kx-space-6)} .kx-card--flat{box-shadow:var(--kx-shadow-0)} .kx-card--sunken{background:var(--kx-color-surface-sunken);border-color:transparent} /* --- button ----------------------------------------------------------------*/ .kx-btn{display:inline-flex;align-items:center;justify-content:center; gap:var(--kx-space-2);min-block-size:var(--kx-target-min); padding-block:var(--kx-space-3);padding-inline:var(--kx-space-6); border:1px solid transparent;border-radius:var(--kx-radius-pill); font-weight:var(--kx-fw-strong);cursor:pointer;text-decoration:none; transition:background-color var(--kx-dur-2) var(--kx-ease), border-color var(--kx-dur-2) var(--kx-ease)} /* Every hover/focus rule below repeats its OWN colour, even where it looks unchanged from the base rule. Reason: a generic `a:hover{color:accent-ink}` rule (below, meant for plain body-copy links) has higher specificity (0,1,1) than a single class like `.kx-btn--cta` (0,1,0) for the COLOR property specifically. Background correctly came from this file's own hover rule; text colour silently fell through to that generic rule instead - white button text turned orange-on-navy and orange-on-orange, both unreadable, on the plugin's own primary action buttons. `!important` is used here (and nowhere else in this file) because these are the checkout path's core conversion controls: they must never be silently reskinned by this file's own cascade or by a surrounding theme's anchor styles. */ .kx-btn--cta{background:var(--kx-color-cta) !important;color:var(--kx-color-cta-on) !important} .kx-btn--cta:hover,.kx-btn--cta:focus-visible{background:var(--kx-color-cta-hover) !important;color:var(--kx-color-cta-on) !important} /* accent fill takes NAVY text, never white: white on #fb7e20 is 2.59:1 */ .kx-btn--accent{background:var(--kx-color-accent) !important;color:var(--kx-color-accent-on) !important} .kx-btn--accent:hover,.kx-btn--accent:focus-visible{background:var(--kx-color-accent-2) !important;color:var(--kx-color-accent-on) !important} .kx-btn--ghost{background:transparent !important;color:var(--kx-color-text-strong) !important; border-color:var(--kx-color-border-strong)} .kx-btn--ghost:hover,.kx-btn--ghost:focus-visible{background:var(--kx-color-surface-sunken) !important;color:var(--kx-color-text-strong) !important} .kx-btn--link{background:transparent;color:var(--kx-color-accent-ink); padding-inline:var(--kx-space-2);border-radius:var(--kx-radius-sm); text-decoration:underline} .kx-btn[disabled],.kx-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed} /* Loading state announces itself; the spinner is decorative only. */ .kx-btn[data-kx-loading] .kx-btn__label{opacity:.7} .kx-btn__icon{display:flex;flex:0 0 auto} /* The submit button sets aria-busy while its request is in flight; the icon steps aside for the spinner rather than the two competing for attention. */ .kx-btn[aria-busy="true"] .kx-btn__icon{display:none} .kx-spin{inline-size:1em;block-size:1em;border:2px solid currentColor; border-block-start-color:transparent;border-radius:var(--kx-radius-circle); animation:kx-spin 700ms linear infinite} @keyframes kx-spin{to{transform:rotate(360deg)}} /* --- fields ----------------------------------------------------------------*/ .kx-field{display:block;margin-block-end:var(--kx-space-5)} .kx-label{display:block;font-size:var(--kx-fs-300);font-weight:var(--kx-fw-medium); color:var(--kx-color-text-strong);margin-block-end:var(--kx-space-2)} .kx-req{color:var(--kx-color-danger-fg);margin-inline-start:var(--kx-space-1)} .kx-input,.kx-select,.kx-textarea{display:block;inline-size:100%; min-block-size:var(--kx-target-min);background:var(--kx-color-surface); color:var(--kx-color-text);border:1px solid var(--kx-color-border-strong); border-radius:var(--kx-radius-md); padding-block:var(--kx-space-3);padding-inline:var(--kx-space-4)} .kx-textarea{min-block-size:calc(var(--kx-target-min) * 2)} .kx-input::placeholder,.kx-textarea::placeholder{color:var(--kx-color-text-muted)} .kx-input:hover,.kx-select:hover{border-color:var(--kx-color-text-muted)} /* Native select kept for accessibility + select2/WooCommerce compatibility; only the arrow is ours, positioned with a logical inset so RTL is free. */ .kx-select{appearance:none;padding-inline-end:var(--kx-space-9); background-image:linear-gradient(45deg,transparent 50%,currentColor 50%), linear-gradient(135deg,currentColor 50%,transparent 50%); background-size:6px 6px,6px 6px;background-repeat:no-repeat; background-position:right var(--kx-space-4) center, right calc(var(--kx-space-4) + 6px) center} .rtl .kx-select{background-position:left var(--kx-space-4) center, left calc(var(--kx-space-4) + 6px) center} .kx-help{display:block;font-size:var(--kx-fs-200);color:var(--kx-color-text-muted); margin-block-start:var(--kx-space-2)} .kx-input[aria-invalid="true"],.kx-select[aria-invalid="true"],.kx-textarea[aria-invalid="true"]{ border-color:var(--kx-color-danger-fg);border-width:2px} /* Error defaults to HIDDEN and is revealed by a state class. The dc runtime strips valueless boolean attributes, so `hidden` written in a template never reaches the DOM and cannot drive visibility. A state class behaves the same under the runtime, in the exported static HTML, and in WordPress. Error is never colour alone: icon + text + aria-describedby. */ .kx-error{display:none;align-items:center;gap:var(--kx-space-2); font-size:var(--kx-fs-200);color:var(--kx-color-danger-fg); font-weight:var(--kx-fw-medium);margin-block-start:var(--kx-space-2)} .kx-error.kx-error--on{display:flex} .kx-row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--kx-space-5)} @media (max-width:520px){.kx-row2{grid-template-columns:1fr}} /* Checkbox is 24px: WCAG 2.2 AA (2.5.8) minimum target, not 20. */ .kx-check{display:flex;align-items:flex-start;gap:var(--kx-space-3); min-block-size:var(--kx-target-min);cursor:pointer} .kx-check input{inline-size:24px;block-size:24px;margin-block-start:2px;flex:0 0 auto; accent-color:var(--kx-color-cta)} /* --- price + figures -------------------------------------------------------*/ .kx-price{display:inline-flex;align-items:baseline;gap:var(--kx-space-2); direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums; color:var(--kx-color-text-strong);font-weight:var(--kx-fw-display); font-size:var(--kx-fs-700);line-height:var(--kx-lh-tight)} .kx-price__unit{font-size:var(--kx-fs-300);font-weight:var(--kx-fw-medium); color:var(--kx-color-text-muted)} /* a large price qualifies as large text, so the -line orange is legal here */ .kx-price--accent{color:var(--kx-color-accent-line)} .kx-price--sm{font-size:var(--kx-fs-500);color:var(--kx-color-text-strong)} /* --- badge / chip ----------------------------------------------------------*/ .kx-chip{display:inline-flex;align-items:center;gap:var(--kx-space-2); padding-block:var(--kx-space-2);padding-inline:var(--kx-space-3); border:1px solid var(--kx-color-border);border-radius:var(--kx-radius-pill); background:var(--kx-color-surface);color:var(--kx-color-text-strong); font-size:var(--kx-fs-200);font-weight:var(--kx-fw-medium)} .kx-chip--sale{background:var(--kx-color-accent);color:var(--kx-color-accent-on); border-color:transparent;font-weight:var(--kx-fw-strong)} .kx-chip--ink{background:var(--kx-color-surface-ink);color:var(--kx-color-text-inverse); border-color:transparent} /* Rate delta. The arrow carries the meaning; colour only reinforces it. */ .kx-delta{display:inline-flex;align-items:center;gap:var(--kx-space-1); direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums; font-weight:var(--kx-fw-medium)} .kx-delta--up{color:var(--kx-color-rate-up)} .kx-delta--down{color:var(--kx-color-rate-down)} .kx-delta--flat{color:var(--kx-color-rate-flat)} .kx-delta--stale{color:var(--kx-color-rate-stale)} /* --- alert -----------------------------------------------------------------*/ .kx-alert{display:flex;gap:var(--kx-space-3); padding-block:var(--kx-space-4);padding-inline:var(--kx-space-5); border-radius:var(--kx-radius-md);border-inline-start:4px solid currentColor; font-size:var(--kx-fs-300)} .kx-alert__body{color:var(--kx-color-text)} .kx-alert__title{display:block;font-weight:var(--kx-fw-strong); color:inherit;margin-block-end:var(--kx-space-1)} .kx-alert--info{background:var(--kx-color-info-bg);color:var(--kx-color-info-fg)} .kx-alert--success{background:var(--kx-color-success-bg);color:var(--kx-color-success-fg)} .kx-alert--warn{background:var(--kx-color-warn-bg);color:var(--kx-color-warn-fg)} .kx-alert--danger{background:var(--kx-color-danger-bg);color:var(--kx-color-danger-fg)} /* --- table -----------------------------------------------------------------*/ .kx-table{font-size:var(--kx-fs-300)} .kx-table th,.kx-table td{text-align:start;padding-block:var(--kx-space-3); padding-inline:var(--kx-space-4);border-block-end:1px solid var(--kx-color-border)} .kx-table th{font-weight:var(--kx-fw-strong);color:var(--kx-color-text-strong); font-size:var(--kx-fs-200)} .kx-table td.kx-n{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums} .kx-table tbody tr:hover{background:var(--kx-color-surface-sunken)} /* --- skeleton (rate widget is async) ---------------------------------------*/ .kx-skel{background:var(--kx-color-surface-sunken);border-radius:var(--kx-radius-sm); color:transparent;position:relative;overflow:hidden} @media (prefers-reduced-motion: no-preference){ .kx-skel::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgb(255 255 255 / .55),transparent); animation:kx-shim 1.4s infinite} @keyframes kx-shim{to{transform:translateX(100%)}} } .rtl .kx-skel::after{animation-direction:reverse} /* --- hero ------------------------------------------------------------------ The orange hero is reserved for the homepage and the brand landing pages. Everywhere else uses --quiet. Approved at Gate 1. */ .kx-hero{padding-block:var(--kx-space-9);padding-inline:var(--kx-space-7); border-radius:var(--kx-radius-lg)} .kx-hero--brand{background:linear-gradient(135deg,var(--kx-color-accent),var(--kx-color-accent-2)); color:var(--kx-color-accent-on)} .kx-hero--quiet{background:var(--kx-color-surface-sunken);color:var(--kx-color-text-strong)} .kx-hero--ink{background:var(--kx-color-surface-ink);color:var(--kx-color-text-inverse)} .kx-hero .kx-h1,.kx-hero .kx-h2{color:inherit} .kx-hero__actions{display:flex;flex-wrap:wrap;gap:var(--kx-space-3); margin-block-start:var(--kx-space-6)} .kx-hero--brand .kx-btn--ghost,.kx-hero--ink .kx-btn--ghost{color:inherit;border-color:currentColor} /* --- layout helpers --------------------------------------------------------*/ .kx-stack > * + *{margin-block-start:var(--kx-space-4)} .kx-cluster{display:flex;flex-wrap:wrap;gap:var(--kx-space-3);align-items:center} .kx-split{display:flex;justify-content:space-between;align-items:baseline;gap:var(--kx-space-4)} /* ===== business.css ===== */ /* ============================================================================ KharidExpress DS - business surfaces. The components that only exist because of THIS business: buying abroad in a foreign currency, billing freight by weight, and quoting against a rate that moves. Tokens only, logical properties only. ========================================================================== */ /* --- live FX rate ---------------------------------------------------------- Three states matter, not one: fresh, stale, and unavailable. A quote built on a stale rate is the single most expensive failure in this business, so staleness is a first-class visual state rather than a footnote. */ .kx-rate{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--kx-space-3); padding-block:var(--kx-space-4);padding-inline:var(--kx-space-5); background:var(--kx-color-surface);border:1px solid var(--kx-color-border); border-radius:var(--kx-radius-md)} .kx-rate__label{font-size:var(--kx-fs-200);color:var(--kx-color-text-muted)} .kx-rate__value{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums; font-size:var(--kx-fs-600);font-weight:var(--kx-fw-display); color:var(--kx-color-text-strong);line-height:1.2} .kx-rate__unit{font-size:var(--kx-fs-200);color:var(--kx-color-text-muted)} .kx-rate__meta{margin-inline-start:auto;font-size:var(--kx-fs-200); color:var(--kx-color-text-muted)} .kx-rate--stale{border-color:var(--kx-color-rate-stale); background:var(--kx-color-warn-bg)} .kx-rate--stale .kx-rate__meta{color:var(--kx-color-rate-stale); font-weight:var(--kx-fw-strong)} /* --- calculator ------------------------------------------------------------ The result panel is a sunken surface so it reads as an output, not another input. It is also a live region: the total changes as you type. */ .kx-calc__out{margin-block-start:var(--kx-space-6); background:var(--kx-color-surface-sunken);border-radius:var(--kx-radius-md); padding-block:var(--kx-space-5);padding-inline:var(--kx-space-5)} .kx-calc__total{display:flex;justify-content:space-between;align-items:baseline; gap:var(--kx-space-4);margin-block-start:var(--kx-space-4); padding-block-start:var(--kx-space-4); border-block-start:1px solid var(--kx-color-border-strong)} .kx-calc__total .kx-price{font-size:var(--kx-fs-800)} /* --- cost breakdown --------------------------------------------------------*/ .kx-break{display:grid;gap:var(--kx-space-2)} .kx-break__row{display:grid;grid-template-columns:1fr auto;gap:var(--kx-space-4); align-items:baseline;font-size:var(--kx-fs-300)} .kx-break__row dt{color:var(--kx-color-text);margin:0} .kx-break__row dd{margin:0;direction:ltr;unicode-bidi:isolate; font-variant-numeric:tabular-nums;color:var(--kx-color-text-strong); font-weight:var(--kx-fw-medium)} .kx-break__note{font-size:var(--kx-fs-200);color:var(--kx-color-text-muted)} /* --- rate-change comparison ------------------------------------------------ Shown when the rate on the proforma no longer matches today's. Two figures side by side, because "the price changed" is not actionable but "1,450 then, 1,505 now" is. */ .kx-ratediff{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--kx-space-4); align-items:center;margin-block-start:var(--kx-space-4); padding-block:var(--kx-space-4);padding-inline:var(--kx-space-4); background:var(--kx-color-surface);border-radius:var(--kx-radius-sm)} .kx-ratediff__cell{text-align:center} .kx-ratediff__k{display:block;font-size:var(--kx-fs-200); color:var(--kx-color-text-muted);margin-block-end:var(--kx-space-1)} .kx-ratediff__v{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums; font-size:var(--kx-fs-500);font-weight:var(--kx-fw-display); color:var(--kx-color-text-strong)} .kx-ratediff__arrow{color:var(--kx-color-text-muted);font-size:var(--kx-fs-500)} /* --- process timeline ------------------------------------------------------ Numbered steps threaded on ONE continuous connector: a ::before track plus a ::after fill whose length is --kx-progress (0..1), set live by kx-order.js as the reader scrolls - forward fills it, scrolling back rewinds it. The default is 1, so with no JS (or reduced motion, where the script never arms) the timeline simply renders finished. Steps the fill has passed carry .is-done; until then, .kx-steps--live (JS-armed only) dims them. Vertical below 900px, horizontal from 900px up. Horizontal track geometry assumes gap:0 with the breathing room as per-item padding: the end offsets are 100%/(2n) - a column-centre - and a real gap would break that math. All logical properties, so RTL runs the line right-to-left for free. The vertical tail below the LAST circle is painted over by that li's ::after in the band's own background - the section sits in a PLAIN band (the marquee above it is the sunken one; the alternation is what separates them), so the eraser must be --kx-color-surface. */ .kx-steps{--kx-progress:1;--kx-steps-n:6; list-style:none;margin:0;padding:0;display:grid;gap:var(--kx-space-6); position:relative} .kx-steps::before{content:"";position:absolute;inset-block-start:20px; inset-block-end:0;inset-inline-start:19px;inline-size:2px; background:var(--kx-color-border)} .kx-steps::after{content:"";position:absolute;inset-block-start:20px; inset-inline-start:19px;inline-size:2px; block-size:calc((100% - 20px) * var(--kx-progress, 1)); background:var(--kx-color-support); transition:block-size .2s ease-out,inline-size .2s ease-out} .kx-step{display:grid;grid-template-columns:auto 1fr;gap:var(--kx-space-4); align-items:start;position:relative} /* z-index lifts the eraser above the ol's ::after fill, which as a later sibling in paint order would otherwise draw its tail over it. */ .kx-step:last-child::after{content:"";position:absolute; inset-block-start:40px;inset-block-end:0; inset-inline-start:19px;inline-size:2px;z-index:1; background:var(--kx-color-surface)} .kx-step__n{inline-size:40px;block-size:40px;border-radius:var(--kx-radius-circle); background:var(--kx-color-support);color:var(--kx-color-support-on); display:grid;place-items:center;font-weight:var(--kx-fw-display); font-variant-numeric:tabular-nums;flex:0 0 auto;z-index:1; transition:background-color .35s ease-out,color .35s ease-out, box-shadow .35s ease-out} /* Not-yet-reached steps, only once the script is driving the fill. */ .kx-steps--live .kx-step:not(.is-done) .kx-step__n{ background:var(--kx-color-surface-sunken);color:var(--kx-color-text-muted); box-shadow:inset 0 0 0 2px var(--kx-color-border)} /* font-size is stated, not inherited: these titles are

for the document outline, and a UA h3 size would blow up a step label. */ .kx-step__t{font-size:var(--kx-fs-400);font-weight:var(--kx-fw-strong); color:var(--kx-color-text-strong);margin-block-end:var(--kx-space-1)} .kx-step__d{font-size:var(--kx-fs-300);color:var(--kx-color-text)} @media (max-width: 520px){ .kx-steps{gap:var(--kx-space-4)} .kx-step{gap:var(--kx-space-3)} } @media (min-width: 900px){ .kx-steps{grid-template-columns:none;grid-auto-flow:column; grid-auto-columns:1fr;gap:0} .kx-step{grid-template-columns:1fr;justify-items:center;text-align:center; gap:var(--kx-space-3);padding-inline:var(--kx-space-2)} .kx-steps::before{inset-block-start:20px;inset-block-end:auto; block-size:2px;inline-size:auto; inset-inline-start:calc(100% / (var(--kx-steps-n, 6) * 2)); inset-inline-end:calc(100% / (var(--kx-steps-n, 6) * 2))} .kx-steps::after{inset-block-start:20px;block-size:2px; inset-inline-start:calc(100% / (var(--kx-steps-n, 6) * 2)); inline-size:calc((100% - 100% / var(--kx-steps-n, 6)) * var(--kx-progress, 1))} .kx-step:last-child::after{content:none} } /* --- trust strip -----------------------------------------------------------*/ .kx-trust{display:flex;flex-wrap:wrap;gap:var(--kx-space-4);align-items:center; padding-block:var(--kx-space-5);padding-inline:var(--kx-space-5); background:var(--kx-color-surface-sunken);border-radius:var(--kx-radius-md)} .kx-trust__item{display:flex;align-items:center;gap:var(--kx-space-2); font-size:var(--kx-fs-200);color:var(--kx-color-text-strong); font-weight:var(--kx-fw-medium)} .kx-trust__mark{inline-size:36px;block-size:36px;border-radius:var(--kx-radius-sm); background:var(--kx-color-surface);border:1px solid var(--kx-color-border); display:grid;place-items:center;font-size:var(--kx-fs-100); color:var(--kx-color-text-muted)} /* --- FAQ ------------------------------------------------------------------- Native
/: keyboard and screen-reader behaviour for free, and it still works with JavaScript disabled. */ .kx-faq{display:grid;gap:var(--kx-space-2)} .kx-faq details{border:1px solid var(--kx-color-border); border-radius:var(--kx-radius-md);background:var(--kx-color-surface)} .kx-faq summary{cursor:pointer;list-style:none; min-block-size:var(--kx-target-min);display:flex;align-items:center; justify-content:space-between;gap:var(--kx-space-4); padding-block:var(--kx-space-4);padding-inline:var(--kx-space-5); font-weight:var(--kx-fw-strong);color:var(--kx-color-text-strong)} .kx-faq summary::-webkit-details-marker{display:none} .kx-faq summary::after{content:"+";font-size:var(--kx-fs-500); color:var(--kx-color-accent-ink);line-height:1} .kx-faq details[open] summary::after{content:"\2212"} .kx-faq__a{padding-block:0 var(--kx-space-5);padding-inline:var(--kx-space-5); font-size:var(--kx-fs-300)} /* --- size table ------------------------------------------------------------*/ .kx-sizes{overflow-x:auto} .kx-sizes table{min-inline-size:520px} .kx-sizes th[scope="row"]{font-weight:var(--kx-fw-strong); background:var(--kx-color-surface-sunken)} /* ===== commerce.css ===== */ /* ============================================================================ KharidExpress DS - commerce + ordering surfaces. Tokens only, logical properties only. ========================================================================== */ /* --- product card ---------------------------------------------------------- The current shop puts product art on a peach tint. Kept, because it reads as deliberate rather than as a missing background. */ .kx-prod{display:flex;flex-direction:column;background:var(--kx-color-surface); border:1px solid var(--kx-color-border);border-radius:var(--kx-radius-lg); overflow:hidden;block-size:100%} .kx-prod__media{position:relative;aspect-ratio:1/1; background:var(--kx-color-accent-wash);display:grid;place-items:center; color:var(--kx-color-text-muted);font-size:var(--kx-fs-200)} .kx-prod__flag{position:absolute;inset-block-start:var(--kx-space-3); inset-inline-start:var(--kx-space-3)} .kx-prod__body{padding-block:var(--kx-space-4) var(--kx-space-5); padding-inline:var(--kx-space-5);display:flex;flex-direction:column; gap:var(--kx-space-2);flex:1} .kx-prod__t{font-weight:var(--kx-fw-strong);color:var(--kx-color-text-strong); font-size:var(--kx-fs-300);line-height:var(--kx-lh-tight)} .kx-prod__src{font-size:var(--kx-fs-200);color:var(--kx-color-text-muted)} .kx-prod__foot{margin-block-start:auto;padding-block-start:var(--kx-space-3); display:flex;align-items:baseline;justify-content:space-between; gap:var(--kx-space-3)} .kx-grid{display:grid;gap:var(--kx-space-5); grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} /* --- Iranian address ------------------------------------------------------- Persian WooCommerce turns city into a dependent is a full-bleed, fully OPAQUE-TO-INTERACTION overlay on the chip (position:absolute; inset:0), not a decorative dropdown some JS drives. It keeps the native popup, full keyboard support (typeahead, arrow keys) and the chip's entire area as its hit target. kx-order.js only mirrors the select's OWN state (symbol, flag) after the fact - the select is never disabled, never hidden, never a fake. With JS off, this degrades to "a select glued to the left of an input", which still works completely. ------------------------------------------------------------------------ */ .kx-cfield { display: flex; align-items: stretch; min-block-size: var(--kx-target-min); background: var(--kx-color-surface); border: 1px solid var(--kx-color-border-strong); border-radius: var(--kx-radius-md); } .kx-cfield:hover { border-color: var(--kx-color-text-muted); } .kx-cfield__cur { position: relative; display: flex; align-items: center; /* flex-shrink:0 is the fix, not the padding: as a default flex item the chip was shrinking BELOW its own content width to give room to the price input beside it, so the contents overflowed their padding box and the chevron ended up flush against the chip's edge with the padding still nominally "applied". It now holds its natural width and the input takes the rest. The chevron also carries an end margin, because a triangle drawn in borders has no optical side bearing the way a glyph does. */ flex: 0 0 auto; gap: var(--kx-space-2); padding-inline: var(--kx-space-3); background: var(--kx-color-surface-sunken); border-inline-end: 1px solid var(--kx-color-border); border-start-start-radius: calc(var(--kx-radius-md) - 1px); border-end-start-radius: calc(var(--kx-radius-md) - 1px); color: var(--kx-color-text-strong); font-size: var(--kx-fs-300); font-weight: var(--kx-fw-medium); } /* The focus ring belongs on the CHIP, because the select itself is invisible - a ring on an opacity:0 element would never be seen. :focus-within fires the instant native keyboard focus lands on the select underneath. */ .kx-cfield__cur:focus-within { outline: var(--kx-focus-ring) solid var(--kx-color-focus); outline-offset: 2px; } .kx-cfield__flag { display: inline-flex; flex: 0 0 auto; } .kx-cfield__flag svg { display: block; inline-size: 20px; block-size: 14px; border-radius: 3px; /* A flag with square corners against a rounded chip reads as a mistake; 3px is enough to soften it without looking like a coin. */ } /* The currency NAME (لیر / درهم), not the symbol - matches the approved reference design exactly: 14px, so the price number stays the visually dominant figure and the chip reads as a label beside it, not competing text. */ .kx-cfield__name { font-size: var(--kx-fs-200); white-space: nowrap; } /* A CSS-only triangle, not an SVG or webfont glyph - one less request for a mark this small, and currentColor keeps it in step with the text beside it with no separate color rule to maintain. */ .kx-cfield__chev { inline-size: 0; block-size: 0; border-inline-start: 5px solid transparent; border-inline-end: 5px solid transparent; border-block-start: 6px solid currentColor; opacity: .7; flex: 0 0 auto; margin-inline-end: 2px; } .kx-cfield__select { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; /* The element is invisible, but its NATIVE POPUP is not, and the browser renders that list at the select's own font-size. Inheriting the chip's 15px produced a cramped little menu; the popup is a reading surface, so it gets a reading size. This cannot affect the chip - nothing about an opacity:0 box is painted. Width stays pinned to the chip via inset:0, so the invisible hit area never creeps over the price input beside it; the popup sizes itself to its longest option regardless. */ font-size: var(--kx-fs-400); line-height: 1.8; /* No appearance/border/background rules: this element is never seen, only interacted with. Nothing here should ever need to match .kx-select. */ } .kx-cfield__num { flex: 1 1 auto; min-inline-size: 0; border: 0; border-radius: 0; background: transparent; /* .kx-input already supplies padding-block/font/line-height; only the chrome that would visually double the field's border is removed here. */ } /* --- "اختیاری" chip on the weight label -------------------------------------- Tells the customer up front that leaving weight blank is a legitimate answer, not a field they forgot - the same fact the باربری row now repeats in context once they reach the breakdown. ------------------------------------------------------------------------ */ .kx-optchip { display: inline-block; font-size: var(--kx-fs-100); font-weight: var(--kx-fw-medium); color: var(--kx-color-support); background: var(--kx-color-support-wash); border-radius: var(--kx-radius-pill); padding: 1px 8px; margin-inline-start: var(--kx-space-2); vertical-align: middle; } /* --- quantity stepper ------------------------------------------------------ No `direction` declaration anywhere in this block, deliberately. The RTL section of this stylesheet forbids a bare direction change on a LAYOUT CONTAINER - on a flex or grid parent it reorders the children rather than isolating a text run, and that rule exists because it already caused a real bug here once. .kx-stepper is a flex container, so it simply mirrors with the page: minus on the physical right in RTL, on the left in LTR, from one set of rules with no .rtl override. That matches how iOS and Material mirror steppers, and it means the plugin does not break if it is ever put on an LTR site. The DIGITS are already isolated by .kx-num on the input itself - a leaf, which is the correct granularity for an isolate. Every side-specific property below is therefore logical, and the corner keywords (border-start-start-radius et al) are direction-aware. Height is derived, not typed in. The inner input carries .kx-input's own padding and line-height, so the control computes to exactly the height of the fields beside it - measured 58.3px against the price input's 58.3px, bottoms aligned to 0.0px. The buttons stretch to 44 x 56.3, well clear of the 24px WCAG 2.2 SC 2.5.8 minimum. Do not replace this with a fixed block-size: the whole point is that it stays right if the type scale moves. ------------------------------------------------------------------------ */ .kx-stepper { display: flex; align-items: stretch; inline-size: 100%; max-inline-size: 176px; /* narrowed further beside the CTA by .kx-co__actions .kx-stepper, below */ min-block-size: var(--kx-target-min); background: var(--kx-color-surface); border: 1px solid var(--kx-color-border-strong); border-radius: var(--kx-radius-md); } /* Matches .kx-input:hover, so the control reacts as one field, not three parts. */ .kx-stepper:hover, .kx-stepper:focus-within { border-color: var(--kx-color-text-muted); } /* background is STATED, not inherited-transparent: a host theme that styles bare