/* ============================================================================ BENIS SHOES — BASE ---------------------------------------------------------------------------- Reset, document defaults, Persian typography and global RTL behaviour. Element selectors only. No component lives here, and no class defined here is page-specific. RTL note: this theme is Persian-first, not an LTR theme flipped with a plugin. Everything below uses logical properties (inline-start/end, margin- inline, padding-block) so direction is a property of the document, not something each rule has to re-litigate with left/right pairs. ========================================================================== */ /* ── Webfont ───────────────────────────────────────────────────────────── Estedad is a variable font covering 100-900 in a single file, so the whole weight scale costs one request. This declaration previously lived in benis-v2.css. It is carried here because that layer is removed during consolidation, and the @font-face was the only thing in it the theme still genuinely needed — losing it would silently drop the site to a Tahoma fallback. */ @font-face { font-family: "Estedad"; src: url("../fonts/Estedad-Variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ── Reset ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { direction: rtl; font-size: 100%; /* respect the user's browser setting */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* Sticky headers must not cover the target of an in-page anchor. */ scroll-padding-block-start: calc(var(--header-height-lg) + var(--space-4)); } /* `overflow-x: hidden` was on here to mop up horizontal overflow. It has been removed, because it causes more scrolling trouble than it prevents: setting an overflow on the root turns into a scroll container, which on iOS breaks momentum scrolling, interferes with position:sticky descendants, and stops the browser chrome hiding on scroll. The result reads exactly as "scrolling feels buggy". Nothing actually needs clipping at the root any more — the one wide element on the page is the hero's oversized image, and the hero clips that itself. If something overflows in future, the fix is to clip THAT element, not to make the whole document a scroller. ...and the same rule must not sit on either, which is where it had been moved to. `overflow-x: hidden` on body computes to `overflow: hidden auto`, and a body with a non-visible overflow becomes THE SCROLL CONTAINER for the document instead of the viewport. Every symptom above comes back, plus two that are easy to misread as something else: - window.scrollY stays pinned near 0 no matter how far the page is scrolled, because the document itself never moves. Anything scroll-linked reads zero. - scroll-padding-block-start, set on just above so a sticky header cannot cover an anchor target, silently stops applying — it has to be on the element that actually scrolls. This was previously diagnosed as "the preview pane doesn't scroll". It was not the pane: the document genuinely had ~8px of scroll range and everything below it was moving inside body. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--text); background-color: var(--surface-page); min-height: 100svh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Persian numerals where the design calls for them; price formatting is handled in PHP so this only affects incidental figures. */ font-variant-numeric: proportional-nums; } /* ── Typography ──────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--text); text-wrap: balance; /* stops a lone orphan word on Persian headings */ } /* Tracking is applied only where type is large enough to need it. Applying it to h5/h6 (as the previous system did) made small Persian headings cramped. */ h1, h2 { letter-spacing: var(--tracking-heading); } h1 { font-size: var(--text-h1); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); } h4 { font-size: var(--text-body-lg); } h5 { font-size: var(--text-body); } h6 { font-size: var(--text-label); } p { text-wrap: pretty; } p, ul, ol, dl, blockquote, figure, table, pre { margin-block-end: var(--space-4); } :is(p, ul, ol, dl, blockquote, figure, table, pre):last-child { margin-block-end: 0; } small { font-size: var(--text-small); } strong, b { font-weight: var(--weight-semibold); } a { color: inherit; text-decoration: none; transition: color var(--duration-fast) var(--ease); } /* Links inside running copy keep an underline — removing it from prose is a readability loss, not a style choice. Navigation and buttons opt out. */ .entry-content a:not([class]) { color: var(--text-link); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } .entry-content a:not([class]):hover { text-decoration-thickness: 2px; } ul, ol { list-style: none; } /* Lists inside prose need their markers back. */ .entry-content :is(ul, ol) { list-style: revert; padding-inline-start: var(--space-6); } blockquote { border-inline-start: 3px solid var(--brand); padding-inline-start: var(--space-4); color: var(--text-muted); } hr { border: 0; border-block-start: 1px solid var(--border); margin-block: var(--space-8); } /* ── Media ───────────────────────────────────────────────────────────────── */ img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } /* There was an `img[width][height] { height: auto }` rule here. It looked harmless but its specificity (0,2,1) beat every component rule that sizes an image by class (0,1,1) — and WordPress emits width/height on essentially every image it renders. The result was that .header__logo img, the product card, the gallery and the mini-cart all lost their sizing and fell back to the file's intrinsic dimensions (the 120x40 logo rendered at 360px). The `img, video` rule above already provides the aspect-ratio behaviour it was meant to add, at a specificity components can override. */ /* `:not([fill="none"])` matters more than it looks. A CSS declaration beats an SVG presentation attribute, so a bare `svg { fill: currentColor }` silently overrode the `fill="none"` that every icon in marsi_icon() sets. Each one is a stroked outline, so they were all being flood-filled: the wishlist heart rendered permanently "saved", and the trust, shipping and search icons rendered as solid blobs. Icons that do not declare a fill still inherit the colour. */ svg:not([fill="none"]) { fill: currentColor; } svg { flex-shrink: 0; /* Icons are the overwhelming majority of SVG in this theme, and an SVG with no intrinsic size stretches to fill its container — which is how legacy markup ended up rendering 390px-wide icons. Components that need a different size set one; this is only a floor to stop the blowout. */ inline-size: 1.25em; block-size: 1.25em; } /* Opt-out for genuinely full-size artwork. */ svg.svg--full, .ratio > svg { inline-size: 100%; block-size: 100%; } /* ── Forms ───────────────────────────────────────────────────────────────── */ input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } textarea { resize: vertical; min-height: 7rem; } button { background: none; border: none; cursor: pointer; color: inherit; } button[disabled], input[disabled], select[disabled], textarea[disabled] { cursor: not-allowed; } :is(input, textarea)::placeholder { color: var(--text-muted); opacity: 1; /* Firefox dims placeholders below their computed colour */ } /* Persian text inputs read right-to-left, but these four types are always Latin/numeric and become unreadable when forced RTL. */ input[type="tel"], input[type="url"], input[type="email"], input[type="number"] { direction: ltr; text-align: end; } /* iOS zooms the viewport when a focused input is under 16px. Non-negotiable floor, regardless of what a component would prefer visually. */ @media (max-width: 767px) { input, select, textarea { font-size: max(16px, var(--text-body)); } } /* ── Tables ──────────────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; text-align: start; } th { text-align: start; font-weight: var(--weight-semibold); } /* ── Focus ───────────────────────────────────────────────────────────────── */ /* Focus is visible for keyboard users and suppressed for pointer users. Never `outline: none` without a replacement anywhere in this theme. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-xs); } /* On dark grounds the focus ring needs to invert to stay visible. */ .is-inverse :focus-visible, .footer :focus-visible { outline-color: var(--neutral-0); } /* ── Selection ───────────────────────────────────────────────────────────── */ ::selection { background-color: var(--blue-200); color: var(--neutral-900); } /* ── Scroll locking ──────────────────────────────────────────────────────── */ /* One class, set by JS whenever any overlay opens. The previous theme had three (.menu-open, .cart-open, .modal-open) that could disagree. */ body.is-scroll-locked { overflow: hidden; /* Preserves scroll position on iOS, which otherwise jumps to the top. */ position: fixed; inset-inline: 0; width: 100%; } /* ── Accessibility helpers ───────────────────────────────────────────────── */ .visually-hidden { position: absolute !important; /* must beat any layout rule on the node */ width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Visible again when focused — used by the skip link. */ .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: var(--z-toast); background-color: var(--surface); color: var(--text); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-weight: var(--weight-medium); } /* ── Print ───────────────────────────────────────────────────────────────── */ @media print { .site-header, .site-footer, .mobile-nav, .no-print { display: none !important; /* overrides the component's own display */ } body { color: #000; background: #fff; } }