/* ============================================================================= * Rahkar — Global base (Phase 1.2 / 1.3) * ----------------------------------------------------------------------------- * The root + element baseline translated from theme.json "styles" (what WP * emits as global-styles-inline-css), plus the small set of truly global * helpers ported from the WP theme's style.css. Keyed entirely off the tokens * in tokens.css so it stays in lockstep with the design contract. * * Component-specific rules do NOT belong here — they ship per-page from each * phase's own stylesheet (see config/theme.yml assets map). * ========================================================================== */ /* ---- @font-face: IRANYekanX Variable (the site font) --------------------- font-display:swap so first paint shows a fallback, then swaps in the real glyphs once the (preloaded) woff2 arrives. ONE file covers weights 100–1000. Drive weight with the normal `font-weight` property only — the RANGE below maps it onto the wght axis. Do NOT set `font-variation-settings: "wght" …` as the vendor help file suggests: that pins the axis and every `font-weight` in the theme would be ignored. Optional OpenType features (off by default): font-feature-settings: "ss02" → Latin digits rendered as Persian digits font-feature-settings: "ss03" → tabular (equal-width) digits for tables */ @font-face { font-family: 'IRANYekanX'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('../fonts/IRANYekanX-Variable.woff2') format('woff2'), url('../fonts/IRANYekanX-Variable.woff') format('woff'); } /* Kept so the fallback in the token stack is a real face, not just a name. */ @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/Vazirmatn-Variable.woff2') format('woff2'); } /* ---- Root / body (theme.json styles.color + .typography + .spacing) ------ */ html { direction: rtl; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body { margin: 0; background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--text); font-family: var(--wp--preset--font-family--iranyekanx); font-size: var(--wp--preset--font-size--base); font-weight: var(--rh-fw-base); line-height: 1.7; } /* RTL + Vazirmatn MUST beat the classic base `assets/css/theme.css`, which core still auto-loads AFTER this file and ships `body{direction:ltr;font-family:Manrope}` (classic expects a rtlcss-generated theme_rtl.css we deliberately don't use — our component CSS is RTL-native via logical properties). A plain `body` rule here would lose on source order, so we out-SPECIFY classic's plain `body` with the `lang-rtl` body class PrestaShop sets for the Persian (is_rtl) language. Do NOT "Generate RTL stylesheets" in BO: rtlcss would invert our intentional direction:rtl / logical properties the wrong way. */ body.lang-rtl { direction: rtl; font-family: var(--wp--preset--font-family--iranyekanx), Tahoma, sans-serif; } /* ---- Headings (theme.json styles.elements.heading + h1..h6) -------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--wp--preset--font-family--iranyekanx); font-weight: var(--rh-fw-heading); line-height: 1.3; color: var(--wp--preset--color--contrast); } h1 { font-size: var(--wp--preset--font-size--4xl); line-height: 1.2; } h2 { font-size: var(--wp--preset--font-size--3xl); line-height: 1.25; } h3 { font-size: var(--wp--preset--font-size--2xl); } h4 { font-size: var(--wp--preset--font-size--xl); } h5 { font-size: var(--wp--preset--font-size--lg); } h6 { font-size: var(--wp--preset--font-size--md); } /* ---- Links (theme.json styles.elements.link) ---------------------------- */ a { color: var(--wp--preset--color--primary); text-decoration: none; } a:hover { color: var(--wp--preset--color--primary-dark); text-decoration: none; } /* ---- Media defaults ----------------------------------------------------- */ img, svg, video { max-width: 100%; height: auto; } /* ---- Thin line icons (Zara-style) --------------------------------------- * * Every UI icon in the theme is an inline on a * 24-unit viewBox, with its weight baked in as an inline `stroke-width` attr * (a mix of 2 / 1.8 / 2.5). A CSS `stroke-width` *property* always beats that * presentation attribute, so this one rule thins ALL of them uniformly without * touching any template. Scoped to stroke="currentColor" so it never reaches * fill-based logos or coloured/decorative SVGs. Tune via --rh-icon-stroke. */ svg[stroke="currentColor"] { stroke-width: var(--rh-icon-stroke); } /* ---- Focus ring --------------------------------------------------------- * * Keyboard users get a clean solid ring. Pointer (mouse/touch) interaction * must NOT show a ring: the classic base theme.css ships `button:focus * {outline:1px dotted}` / `a:focus{outline:...}` (normalize + Bootstrap), which * flashed a dotted box on every tap/click across the theme. `:focus-visible` * only matches keyboard focus, so neutralising `:focus:not(:focus-visible)` * kills the dotted ring on click everywhere while keeping accessible keyboard * focus. `!important` beats the classic `.btn:active:focus` rules regardless of * load order. */ :focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none !important; } /* ---- Mobile: never zoom into a form field on focus ---------------------- * * iOS Safari auto-zooms the viewport when a focused text field's font-size is * below 16px. Pin every text-entry control to 16px on small screens so tapping * an input/select/textarea never zooms (the field's visual size is driven by * height/padding per component, so this only affects the typed text size). */ @media (max-width: 900px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea { font-size: 16px; } } /* ---- Page content width ------------------------------------------------- * * FLUID container: full width with a side gutter, capped at the site wide-size * (1676px) on big screens — matching the header / footer / home inner exactly. * Above 1676px it centres at 1676; below it the content fills the viewport with * the --rh-gutter padding so it never touches the edges (Digikala-style). * * This overrides Bootstrap's fixed-width `.container` steps (540/720/960/1140) * at ALL breakpoints — otherwise mid-size screens render a narrow fixed box with * big empty side margins instead of full-width-with-gutter. `#wrapper > .container` * (1,1,0) outranks Bootstrap's `.container` rules (0,1,0) on width/max-width, but * classic-overrides.css also zeroes `.container`'s padding with `!important` (needed * there for the notifications/admin-alert banners, which are a DIFFERENT `.container` * nested one level deeper — see #notifications and product-activation.tpl). `!important` * beats specificity outright, so without matching `!important` here that rule was * silently stripping this container's side gutter too — same max-width as the header's * `.rh-row__inner`, but 0 padding instead of the header's ~12–28px, so page content * edges sat outside the header's edges and nothing above visually lined up. Covers * every page (all layouts extend `#wrapper > .container`). */ #wrapper > .container { width: 100%; max-width: var(--wp--style--global--wide-size, 1676px); margin-inline: auto; padding-inline: var(--rh-gutter, clamp(12px, 3vw, 28px)) !important; } /* `#content-wrapper` (layout-both-columns.tpl's `.col-xs-12`, direct child of * `.container` above) still carries Bootstrap's classic column padding * (15px) — normally cancelled by a `.row`'s matching negative margin, but * this theme forces a single full-width column with no `.row` wrapper to * cancel it (product-list.tpl etc. blank out `left_column`/`right_column`). * Left unzeroed, it STACKED on top of `--rh-gutter` above (12px + 15px = * 27px total on a phone, vs. the intended 12px) — content sat noticeably * further from the edge than the header/hero above it, most visible on * mobile where every extra pixel of an already-narrow gutter shows. */ #content-wrapper { padding-inline: 0 !important; } /* ---- blockwishlist heart on product cards ------------------------------- * * blockwishlist injects
into each card's * .thumbnail-container (aliased onto .rpc-card__media). Pin it to the free * top corner — badges sit top-inline-start, swatches bottom-inline-end, so * the heart takes top-inline-end. */ .rpc-card .wishlist-button { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 3; margin: 0; } /* ============================================================================= * Globals ported from the WP theme's style.css (apply theme-wide). * ========================================================================== */ /* iOS Safari zooms in when an input's computed font-size < 16px. Floor every form control at 16px on touch viewports. */ @media (max-width: 900px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), textarea, select { font-size: max(1em, 16px); } } /* Shared bottom-sheet backdrop (created by bottom-sheet.js — Phase 2+). Mirrors .rh-atc__backdrop so every bottom sheet looks identical. */ .rh-sheet-backdrop { position: fixed; inset: 0; z-index: 999; background: rgba(15, 17, 21, 0.45); opacity: 0; transition: opacity 200ms ease-out; -webkit-tap-highlight-color: transparent; } .rh-sheet-backdrop.is-visible { opacity: 1; } .rh-sheet-backdrop[hidden] { display: none; } html.rh-sheet-lock, html.rh-sheet-lock body { overflow: hidden; touch-action: none; } /* Dialog bottom sheets opened via show() need explicit z-index. */ @media (max-width: 900px) { .rh-rev-modal[open], .rh-var-modal[open], .rh-desc-modal[open], .rh-list-modal[open], .rh-voice-modal[open] { z-index: 1000; } } /* Kill focus ring on buttons for touch-primary devices. Prevents blue outline flash on hamburger/close after tap. */ @media (pointer: coarse) { button:focus-visible, [role="button"]:focus-visible { outline: none; } } /* ============================================================================= * Phase 2 — PrestaShop chrome glue * ----------------------------------------------------------------------------- * header.css drops in verbatim, but the WP source makes the FSE template-part * WRAPPER (header.wp-block-template-part) sticky, not the inner .rahkar-site-header. * In PrestaShop the equivalent wrapper is the layout's