/** * components.css — reusable, theme-owned UI components for Jouman. * * Buttons, badges, cards, tags, quantity stepper, drawer, accordion, notices, * and the coverage-spec block. WooCommerce-specific styling lives in * woocommerce.css and homepage sections in home.css — neither belongs here. * * OPEN-STATE CONVENTION (JS agent, please match): * Every stateful component in this file is toggled with the class `.is-open` * on the component root. NOT a `[data-open]` attribute. * - Drawer: `.jm-drawer.is-open` (also set `aria-hidden` / `inert` in JS) * - Overlay: `.jm-drawer__overlay.is-open` * - When any drawer is open, JS should add `.jm-scroll-lock` to . * Native

keeps its own `open` attribute — the accordion * styles handle both `[open]` and `.is-open`. * * RTL: logical properties only, no `left`/`right`. The drawer slides in from * the INLINE-START edge, which is the visual right in Arabic. * * Selectors are kept flat and single-class so woocommerce.css can override * without specificity wars. */ /* =========================================================================== * 1. Button — .jm-btn * ======================================================================== */ .jm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--jm-space-2); min-block-size: 44px; padding-block: var(--jm-space-2); padding-inline: var(--jm-space-5); font-family: var(--jm-font-body); font-size: var(--jm-fs-base); font-weight: var(--jm-fw-semi); line-height: var(--jm-lh-head); text-align: center; text-decoration: none; border: 1px solid transparent; border-radius: var(--jm-radius); background-color: transparent; color: var(--jm-color-ink); cursor: pointer; transition: background-color var(--jm-transition), border-color var(--jm-transition), color var(--jm-transition); } .jm-btn:hover { text-decoration: none; } /* --- variants --- */ .jm-btn--primary { background-color: var(--jm-color-accent); border-color: var(--jm-color-accent); color: var(--jm-color-on-accent); } .jm-btn--primary:hover { background-color: var(--jm-color-accent-hover); border-color: var(--jm-color-accent-hover); color: var(--jm-color-on-accent); } .jm-btn--secondary { background-color: transparent; border-color: var(--jm-color-accent); color: var(--jm-color-accent); } .jm-btn--secondary:hover { background-color: var(--jm-color-accent-hover); border-color: var(--jm-color-accent-hover); color: var(--jm-color-on-accent); } .jm-btn--ghost { background-color: transparent; border-color: transparent; color: var(--jm-color-ink-2); padding-inline: var(--jm-space-3); } .jm-btn--ghost:hover { background-color: var(--jm-color-surface-2); color: var(--jm-color-accent-hover); } /* --- sizes --- */ .jm-btn--sm { min-block-size: 44px; /* touch target floor is kept even at small size */ padding-block: var(--jm-space-1); padding-inline: var(--jm-space-4); font-size: var(--jm-fs-sm); } .jm-btn--lg { min-block-size: 52px; padding-block: var(--jm-space-3); padding-inline: var(--jm-space-6); font-size: var(--jm-fs-md); } .jm-btn--block { display: flex; inline-size: 100%; } /* --- disabled --- */ .jm-btn:disabled, .jm-btn[aria-disabled="true"], .jm-btn.is-disabled { background-color: var(--jm-color-surface-2); border-color: var(--jm-color-line); color: var(--jm-color-oos); cursor: not-allowed; pointer-events: none; } /* =========================================================================== * 2. Badge — .jm-badge * Small status marker. Text always carries the meaning; colour is secondary. * ======================================================================== */ .jm-badge { display: inline-flex; align-items: center; gap: var(--jm-space-1); padding-block: var(--jm-space-1); padding-inline: var(--jm-space-2); font-size: var(--jm-fs-xs); font-weight: var(--jm-fw-semi); line-height: var(--jm-lh-tight); border-radius: var(--jm-radius); border: 1px solid transparent; background-color: var(--jm-color-surface-2); color: var(--jm-color-ink-2); white-space: nowrap; } .jm-badge--sale { background-color: var(--jm-color-sale); color: var(--jm-color-on-accent); border-color: var(--jm-color-sale); } .jm-badge--new { background-color: var(--jm-color-olive-soft); color: var(--jm-color-olive); border-color: var(--jm-color-olive); } .jm-badge--instock { background-color: transparent; color: var(--jm-color-instock); border-color: var(--jm-color-instock); } .jm-badge--oos { background-color: var(--jm-color-surface-2); color: var(--jm-color-oos); border-color: var(--jm-color-oos); } /* Badge pinned inside a positioned media box (e.g. a product tile). */ .jm-badge--pinned { position: absolute; inset-block-start: var(--jm-space-3); inset-inline-start: var(--jm-space-3); z-index: 2; } /* =========================================================================== * 3. Card — .jm-card * ======================================================================== */ .jm-card { display: flex; flex-direction: column; background-color: var(--jm-color-surface); border: 1px solid var(--jm-color-line-soft); border-radius: var(--jm-radius); overflow: hidden; } .jm-card--flat { border-color: transparent; background-color: transparent; } .jm-card--raised { box-shadow: var(--jm-shadow-sm); } .jm-card__media { position: relative; background-color: var(--jm-color-surface-2); } .jm-card__body { display: flex; flex-direction: column; gap: var(--jm-space-2); padding: var(--jm-space-4); } .jm-card__title { font-size: var(--jm-fs-md); font-weight: var(--jm-fw-semi); line-height: var(--jm-lh-head); margin: 0; } .jm-card__meta { font-size: var(--jm-fs-sm); color: var(--jm-color-muted); } .jm-card__footer { margin-block-start: auto; padding: var(--jm-space-4); border-block-start: 1px solid var(--jm-color-line-soft); } /* =========================================================================== * 4. Tag / pill — .jm-tag * ======================================================================== */ .jm-tag { display: inline-flex; align-items: center; gap: var(--jm-space-2); padding-block: var(--jm-space-1); padding-inline: var(--jm-space-3); font-size: var(--jm-fs-sm); line-height: var(--jm-lh-head); color: var(--jm-color-ink-2); background-color: var(--jm-color-surface); border: 1px solid var(--jm-color-line); border-radius: var(--jm-radius-pill); text-decoration: none; transition: border-color var(--jm-transition), background-color var(--jm-transition), color var(--jm-transition); } .jm-tag:hover { border-color: var(--jm-color-accent); color: var(--jm-color-accent); text-decoration: none; } .jm-tag.is-active, .jm-tag[aria-pressed="true"] { background-color: var(--jm-color-accent-soft); border-color: var(--jm-color-accent); color: var(--jm-color-accent-hover); } /* Remove control inside a filter pill. */ .jm-tag__remove { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.25rem; block-size: 1.25rem; min-block-size: 0; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; line-height: 1; } /* =========================================================================== * 5. Quantity stepper — .jm-quantity * Markup: .jm-quantity > button.jm-quantity__btn + input.jm-quantity__input + * button.jm-quantity__btn * ======================================================================== */ .jm-quantity { display: inline-flex; align-items: stretch; border: 1px solid var(--jm-color-line); border-radius: var(--jm-radius); background-color: var(--jm-color-surface); overflow: hidden; } .jm-quantity__btn { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; min-block-size: 44px; padding: 0; background-color: transparent; border: 0; color: var(--jm-color-ink-2); font-size: var(--jm-fs-md); font-weight: var(--jm-fw-semi); line-height: 1; cursor: pointer; transition: background-color var(--jm-transition), color var(--jm-transition); } .jm-quantity__btn:hover { background-color: var(--jm-color-surface-2); color: var(--jm-color-accent-hover); } .jm-quantity__btn:disabled { color: var(--jm-color-oos); cursor: not-allowed; } .jm-quantity__input { inline-size: 3.25rem; min-block-size: 44px; padding-block: 0; padding-inline: var(--jm-space-1); text-align: center; font-variant-numeric: tabular-nums; background-color: transparent; border: 0; border-inline: 1px solid var(--jm-color-line-soft); border-radius: 0; color: var(--jm-color-ink); -moz-appearance: textfield; appearance: textfield; } .jm-quantity__input::-webkit-outer-spin-button, .jm-quantity__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* =========================================================================== * 6. Drawer — .jm-drawer (off-canvas, slides from the INLINE-START edge) * State: `.is-open` on both the panel and the overlay. See file header. * ======================================================================== */ .jm-drawer__overlay { position: fixed; inset: 0; z-index: 90; background-color: var(--jm-color-overlay); opacity: 0; visibility: hidden; transition: opacity var(--jm-transition), visibility var(--jm-transition); } .jm-drawer__overlay.is-open { opacity: 1; visibility: visible; } /** * Positioning is fully logical (inset-inline-start), so the panel is anchored to * the correct edge in both directions with no flipped stylesheet. * * The one thing CSS has no logical equivalent for is the off-screen transform: * `translateX` is physical and is NOT mirrored under dir="rtl". Rather than * writing a second stylesheet, the sign lives in a single custom property that * `:where([dir="rtl"])` flips — one declaration, not a direction-specific * ruleset, and nothing here sets `direction` itself. */ .jm-drawer { --jm-drawer-hidden-x: -100%; position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 100; display: flex; flex-direction: column; inline-size: min(88vw, 22rem); max-inline-size: 100%; background-color: var(--jm-color-surface); border-inline-end: 1px solid var(--jm-color-line); box-shadow: var(--jm-shadow-md); transform: translateX(var(--jm-drawer-hidden-x)); visibility: hidden; transition: transform var(--jm-transition), visibility var(--jm-transition); overflow: hidden; } :where([dir="rtl"]) .jm-drawer { --jm-drawer-hidden-x: 100%; } .jm-drawer.is-open { transform: translateX(0); visibility: visible; } /* Optional modifier: slide from the inline-END edge instead (e.g. mini-cart). */ .jm-drawer--end { --jm-drawer-hidden-x: 100%; inset-inline-start: auto; inset-inline-end: 0; border-inline-end: 0; border-inline-start: 1px solid var(--jm-color-line); } :where([dir="rtl"]) .jm-drawer--end { --jm-drawer-hidden-x: -100%; } .jm-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--jm-space-3); padding: var(--jm-space-4); border-block-end: 1px solid var(--jm-color-line-soft); } .jm-drawer__title { margin: 0; font-size: var(--jm-fs-md); font-weight: var(--jm-fw-semi); } .jm-drawer__close { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; min-block-size: 44px; padding: 0; background: transparent; border: 0; color: var(--jm-color-ink-2); cursor: pointer; } .jm-drawer__close:hover { background: transparent; color: var(--jm-color-accent-hover); } .jm-drawer__body { flex: 1 1 auto; padding: var(--jm-space-4); overflow-y: auto; overscroll-behavior: contain; } .jm-drawer__footer { padding: var(--jm-space-4); border-block-start: 1px solid var(--jm-color-line-soft); } /* Applied to by JS while a drawer is open. */ .jm-scroll-lock { overflow: hidden; } /* =========================================================================== * 7. Accordion — .jm-accordion (built for

) * ======================================================================== */ .jm-accordion { border-block-end: 1px solid var(--jm-color-line-soft); } .jm-accordion__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--jm-space-3); min-block-size: 44px; padding-block: var(--jm-space-3); font-size: var(--jm-fs-base); font-weight: var(--jm-fw-semi); color: var(--jm-color-ink); cursor: pointer; list-style: none; text-align: start; } .jm-accordion__summary::-webkit-details-marker { display: none; } .jm-accordion__summary:hover { color: var(--jm-color-accent-hover); } /* Chevron drawn in CSS so it needs no icon font. */ .jm-accordion__summary::after { content: ""; flex: 0 0 auto; inline-size: 0.5rem; block-size: 0.5rem; border-block-end: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor; transform: rotate(45deg); transform-origin: center; transition: transform var(--jm-transition); } .jm-accordion[open] > .jm-accordion__summary::after, .jm-accordion.is-open > .jm-accordion__summary::after { transform: rotate(-135deg); } .jm-accordion__panel { padding-block-end: var(--jm-space-4); color: var(--jm-color-ink-2); } /* =========================================================================== * 8. Notice — .jm-notice * Meaning is carried by the icon slot + text, never by colour alone. * ======================================================================== */ .jm-notice { display: flex; align-items: flex-start; gap: var(--jm-space-3); padding: var(--jm-space-4); background-color: var(--jm-color-surface); border: 1px solid var(--jm-color-line); border-inline-start: 3px solid var(--jm-color-muted); border-radius: var(--jm-radius); color: var(--jm-color-ink-2); font-size: var(--jm-fs-sm); line-height: var(--jm-lh-body); text-align: start; } .jm-notice__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.25rem; color: var(--jm-color-muted); } .jm-notice__icon svg { inline-size: 100%; block-size: 100%; } .jm-notice__body { flex: 1 1 auto; } .jm-notice__title { display: block; margin: 0 0 var(--jm-space-1); font-size: var(--jm-fs-base); font-weight: var(--jm-fw-semi); color: var(--jm-color-ink); } .jm-notice--info { background-color: var(--jm-color-olive-soft); border-color: var(--jm-color-line-soft); border-inline-start-color: var(--jm-color-olive); } .jm-notice--info .jm-notice__icon { color: var(--jm-color-olive); } .jm-notice--success { background-color: var(--jm-color-olive-soft); border-color: var(--jm-color-line-soft); border-inline-start-color: var(--jm-color-instock); } .jm-notice--success .jm-notice__icon { color: var(--jm-color-instock); } .jm-notice--warning { background-color: var(--jm-color-accent-soft); border-color: var(--jm-color-line-soft); border-inline-start-color: var(--jm-color-sale); } .jm-notice--warning .jm-notice__icon { color: var(--jm-color-sale); } /* =========================================================================== * 9. Coverage spec — .jm-coverage-spec (the theme's signature block) * * A titled block of label/value rows separated by hairlines, plus a 4-segment * opacity bar. Rendered by jouman_render_coverage_spec(). Calm and precise: * no shadows, no fills, no colour beyond the olive spec bar. * * Markup shape: *

…

…: …
…: * * * *

* ======================================================================== */ .jm-coverage-spec { border-block-start: 1px solid var(--jm-color-line); padding-block-start: var(--jm-space-5); text-align: start; } .jm-coverage-spec__title { margin: 0 0 var(--jm-space-3); font-size: var(--jm-fs-base); font-weight: var(--jm-fw-semi); line-height: var(--jm-lh-head); color: var(--jm-color-ink); } .jm-coverage-spec__list { margin: 0; } .jm-coverage-spec__row { display: grid; grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr); gap: var(--jm-space-3); align-items: baseline; padding-block: var(--jm-space-3); border-block-start: 1px solid var(--jm-color-line-soft); } .jm-coverage-spec__row:first-child { border-block-start: 0; } .jm-coverage-spec__label { margin: 0; font-size: var(--jm-fs-sm); font-weight: var(--jm-fw-regular); color: var(--jm-color-muted); line-height: var(--jm-lh-head); } .jm-coverage-spec__value { margin: 0; font-size: var(--jm-fs-sm); font-weight: var(--jm-fw-semi); color: var(--jm-color-ink); line-height: var(--jm-lh-head); font-variant-numeric: tabular-nums; } /* --- 4-segment opacity bar --- */ .jm-coverage-spec__opacity { display: inline-flex; align-items: center; gap: var(--jm-space-1); vertical-align: middle; } .jm-coverage-spec__opacity i { display: block; inline-size: 1.5rem; block-size: 0.375rem; background-color: var(--jm-color-surface-2); border: 1px solid var(--jm-color-line); border-radius: var(--jm-radius); } .jm-coverage-spec__opacity i.is-on { background-color: var(--jm-color-olive); border-color: var(--jm-color-olive); } /* Optional plain-text restatement of the level, so the bar is never the only * carrier of meaning for sighted users either. */ .jm-coverage-spec__opacity-text { margin-inline-start: var(--jm-space-2); font-size: var(--jm-fs-xs); font-weight: var(--jm-fw-regular); color: var(--jm-color-muted); } @media (min-width: 768px) { .jm-coverage-spec__row { grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr); } }