/** * header-footer.css — site chrome for the Jouman theme. * * The announcement bar, header, primary navigation and its submenus, the drawer * extras, the search panel and the whole footer. Everything here consumes the * tokens from tokens.css; nothing here hardcodes a colour, size or breakpoint. * * Conventions inherited from components.css and honoured throughout: * - Open state is the class `.is-open` on the component root. Never a data * attribute, never :hover alone. * - The drawer/search overlays are siblings of their panel and also take * `.is-open`; takes `.jm-scroll-lock`. * - Closed panels use `visibility: hidden` so they leave the tab order. * * RTL: logical properties only. There is no `left` or `right` in this file and * no `direction` declaration. The two unavoidably physical values — the * off-canvas translate sign and the mirroring of directional icons — are each * handled by a single `:where([dir="rtl"])` declaration. * * Mobile-first, `min-width` only. Breakpoints: sm 480 / md 768 / lg 1024 / xl 1280. */ /* =========================================================================== * 0. Shared chrome primitives * ======================================================================== */ /* The page shell opened in header.php and closed in footer.php. Column flex so * the footer is pushed to the viewport bottom on short pages. */ .jm-page { display: flex; flex-direction: column; min-block-size: 100vh; } .jm-page > main { flex: 1 0 auto; } /** * Inline SVG icons emitted by jouman_nav_icon(). They ship width/height="24" * attributes, so they need an explicit size here or they never scale with type. * Sized in rem rather than em so an icon beside small text stays optically equal * to one beside body text. */ .jm-icon { flex: 0 0 auto; inline-size: 1.5rem; block-size: 1.5rem; } .jm-icon--sm { inline-size: 1.25rem; block-size: 1.25rem; } /** * Directional icons only. `transform: scaleX()` is physical and is NOT mirrored * by dir="rtl", so the flip is declared once, here. Icons without this class * (cart, user, search, social marks) must never be mirrored. */ :where([dir="rtl"]) .jm-icon--dir { transform: scaleX(-1); } /* Shared inner-width shell for the header, announce bar, search sheet and * footer. Mirrors .jm-container's padding scale without depending on the class * being present in the markup (these templates don't use it). */ .jm-header__inner, .jm-announce__inner, .jm-search__inner, .jm-footer__inner { inline-size: 100%; max-inline-size: var(--jm-container); margin-inline: auto; padding-inline: var(--jm-space-4); } @media (min-width: 768px) { .jm-header__inner, .jm-announce__inner, .jm-search__inner, .jm-footer__inner { padding-inline: var(--jm-space-6); } } @media (min-width: 1280px) { .jm-header__inner, .jm-announce__inner, .jm-search__inner, .jm-footer__inner { padding-inline: var(--jm-space-7); } } /* =========================================================================== * 1. Announcement bar — .jm-announce * * JS dismisses the bar by setting the `hidden` attribute AND adding * `.is-dismissed`. The display rule below must therefore not out-specify * [hidden]; both selectors are single-class so it never can. * ======================================================================== */ .jm-announce { background-color: var(--jm-color-olive-soft); color: var(--jm-color-ink-2); border-block-end: 1px solid var(--jm-color-line-soft); font-size: var(--jm-fs-xs); line-height: var(--jm-lh-head); } .jm-announce[hidden], .jm-announce.is-dismissed { display: none; } .jm-announce__inner { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--jm-space-3); min-block-size: 2.25rem; /* Reserve the dismiss button's width on both sides so the message stays * optically centred rather than being nudged by the button. */ padding-inline: calc(var(--jm-space-4) + 2.25rem); padding-block: var(--jm-space-1); } .jm-announce__text { margin: 0; text-align: center; text-wrap: balance; } .jm-announce__link { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color var(--jm-transition); } .jm-announce__link:hover { color: var(--jm-color-accent-hover); } .jm-announce__dismiss { position: absolute; inset-inline-end: var(--jm-space-2); inset-block: 0; display: inline-flex; align-items: center; justify-content: center; inline-size: 2.25rem; padding: 0; background: none; border: 0; color: var(--jm-color-muted); cursor: pointer; transition: color var(--jm-transition); } .jm-announce__dismiss:hover { color: var(--jm-color-ink); } .jm-announce__dismiss .jm-icon { inline-size: 1rem; block-size: 1rem; } .jm-announce__dismiss:focus-visible { outline: var(--jm-focus-width) solid var(--jm-color-focus); outline-offset: calc(var(--jm-focus-offset) * -1); } /* =========================================================================== * 2. Header — .jm-header * * Deliberately compact: a 3.5rem row on mobile, 4rem from lg. The brief is * explicit that an oversized header is wrong for this boutique. * * Grid shape: * below lg [ __start (burger + centred logo) ][ __end (search, cart) ] * lg and up [ __start (logo) ][ __center (nav) ][ __end (search, account, cart) ] * * Placement is by grid column with logical `justify-self`, so RTL is correct by * construction — no flipped rules anywhere. * ======================================================================== */ .jm-header { position: relative; z-index: 50; background-color: var(--jm-color-ground); border-block-end: 1px solid var(--jm-color-line-soft); } .jm-header__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--jm-space-3); min-block-size: 3.5rem; } .jm-header__start { display: flex; align-items: center; gap: var(--jm-space-1); min-inline-size: 0; } .jm-header__end { display: flex; align-items: center; justify-self: end; gap: var(--jm-space-1); } /* The nav column: no column exists for it below lg. */ .jm-header__center { display: none; } /* --- action buttons and links (burger / search / account / cart) --- */ .jm-header__action { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; background: none; border: 0; border-radius: var(--jm-radius); color: var(--jm-color-ink-2); text-decoration: none; cursor: pointer; transition: color var(--jm-transition), background-color var(--jm-transition); } .jm-header__action:hover { color: var(--jm-color-accent-hover); text-decoration: none; } /* Set by navigation.js on the trigger while its panel is open. */ .jm-header__action.is-active, .jm-header__action[aria-expanded="true"] { background-color: var(--jm-color-surface-2); color: var(--jm-color-accent); } .jm-header__action:focus-visible { outline: var(--jm-focus-width) solid var(--jm-color-focus); outline-offset: calc(var(--jm-focus-offset) * -1); } /* Account is a desktop convenience; the drawer carries it on small screens. */ .jm-header__action--account { display: none; } /* --- cart --- */ .jm-cart-link { position: relative; } .jm-cart-count { position: absolute; inset-block-start: 0.375rem; inset-inline-end: 0.25rem; display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.125rem; block-size: 1.125rem; padding-inline: 0.25rem; background-color: var(--jm-color-accent); color: var(--jm-color-on-accent); border-radius: var(--jm-radius-pill); font-size: var(--jm-fs-xs); font-weight: var(--jm-fw-semi); line-height: 1; font-variant-numeric: tabular-nums; } /* An empty cart shows no bubble. The count still reaches assistive tech through * the link's aria-label, which jouman_cart_link() keeps in sync. */ .jm-cart-count.is-empty { display: none; } /* --- branding --- * Below lg the logo is visually centred in the header row while remaining a DOM * child of __start (so the burger still reads first). Centring is done with * inset-inline: 0 + margin-inline: auto on a fit-content box — fully logical, * unlike the usual inset-inline-start: 50% translate. */ .jm-branding { display: flex; align-items: center; min-inline-size: 0; } .jm-header .jm-branding { position: absolute; inset-block: 0; inset-inline: 0; justify-content: center; inline-size: -moz-fit-content; inline-size: fit-content; max-inline-size: 55%; margin-inline: auto; } .jm-branding__logo { display: flex; align-items: center; } .jm-branding__logo img, .jm-branding__logo .custom-logo { display: block; inline-size: auto; block-size: auto; max-block-size: 2.25rem; max-inline-size: 100%; } .jm-branding__title { margin: 0; font-family: var(--jm-font-head); font-size: var(--jm-fs-md); font-weight: var(--jm-fw-semi); line-height: var(--jm-lh-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jm-branding__link { color: var(--jm-color-ink); text-decoration: none; transition: color var(--jm-transition); } .jm-branding__link:hover { color: var(--jm-color-accent); text-decoration: none; } /* --- lg and up: three real columns --- */ @media (min-width: 1024px) { .jm-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--jm-space-5); min-block-size: 4rem; } .jm-header__start { justify-self: start; } /* Burger is drawer-only; from lg the primary nav is visible. */ .jm-header__action--menu { display: none; } .jm-header .jm-branding { position: static; justify-content: flex-start; inline-size: auto; max-inline-size: none; margin-inline: 0; } .jm-branding__logo img, .jm-branding__logo .custom-logo { max-block-size: 2.75rem; } .jm-branding__title { font-size: var(--jm-fs-lg); } .jm-header__center { display: flex; justify-content: center; justify-self: center; min-inline-size: 0; } .jm-header__action--account { display: inline-flex; } } /* =========================================================================== * 3. Menus — .jm-menu * * One list component, four contexts. Submenus are driven by `.is-open` on * `.jm-menu__item`, set by navigation.js from click, Enter/Space and Escape. * Hover is an ENHANCEMENT only (section 3.4) and never the sole mechanism. * ======================================================================== */ .jm-menu, .jm-menu__submenu { margin: 0; padding: 0; list-style: none; } .jm-menu__item { position: relative; margin: 0; } .jm-menu__link { display: inline-flex; align-items: center; gap: var(--jm-space-2); color: var(--jm-color-ink); font-size: var(--jm-fs-base); font-weight: var(--jm-fw-medium); line-height: var(--jm-lh-head); text-align: start; text-decoration: none; transition: color var(--jm-transition); } .jm-menu__link:hover { color: var(--jm-color-accent); text-decoration: none; } .jm-menu__link:focus-visible { outline: var(--jm-focus-width) solid var(--jm-color-focus); outline-offset: var(--jm-focus-offset); } .jm-menu__link.is-current, .jm-menu__link[aria-current="page"] { color: var(--jm-color-accent); } .jm-menu__label { display: inline-block; } /* --- submenu toggle button (printed by the walker beside the link) --- */ .jm-menu__toggle { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; background: none; border: 0; border-radius: var(--jm-radius); color: var(--jm-color-muted); cursor: pointer; transition: color var(--jm-transition); } .jm-menu__toggle:hover { color: var(--jm-color-accent); } .jm-menu__toggle:focus-visible { outline: var(--jm-focus-width) solid var(--jm-color-focus); outline-offset: calc(var(--jm-focus-offset) * -1); } .jm-menu__toggle-icon { display: inline-flex; transition: transform var(--jm-transition); } .jm-menu__toggle-icon .jm-icon { inline-size: 1.125rem; block-size: 1.125rem; } .jm-menu__item.is-open > .jm-menu__toggle .jm-menu__toggle-icon, .jm-menu__toggle[aria-expanded="true"] .jm-menu__toggle-icon { transform: rotate(180deg); } /* --- submenu visibility: the single source of truth --- */ .jm-menu__submenu { display: none; } .jm-menu__item.is-open > .jm-menu__submenu { display: block; } /* --------------------------------------------------------------------------- * 3.1 Primary (desktop) menu * ------------------------------------------------------------------------- */ .jm-primary-nav { min-inline-size: 0; } .jm-menu--primary { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--jm-space-2); } .jm-menu--primary > .jm-menu__item { display: flex; align-items: center; } .jm-menu--primary > .jm-menu__item > .jm-menu__link { position: relative; min-block-size: 2.75rem; padding-inline: var(--jm-space-2); font-size: var(--jm-fs-sm); white-space: nowrap; } /* Quiet hairline underline, drawn only on hover/current. scaleX is symmetric * about the centre, so it behaves identically in both directions. */ .jm-menu--primary > .jm-menu__item > .jm-menu__link::after { content: ""; position: absolute; inset-inline: var(--jm-space-2); inset-block-end: 0.75rem; block-size: 1px; background-color: currentColor; transform: scaleX(0); transition: transform var(--jm-transition); } .jm-menu--primary > .jm-menu__item > .jm-menu__link:hover::after, .jm-menu--primary > .jm-menu__item > .jm-menu__link.is-current::after, .jm-menu--primary > .jm-menu__item.is-open > .jm-menu__link::after { transform: scaleX(1); } /* The toggle sits tight against its link at desktop size. */ .jm-menu--primary .jm-menu__toggle { inline-size: 1.75rem; block-size: 2.75rem; margin-inline-start: calc(var(--jm-space-2) * -1); } /* --- floating submenu panel: sharp, hairline, one soft shadow --- */ .jm-menu--primary .jm-menu__submenu { position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 60; min-inline-size: 13rem; max-inline-size: 20rem; padding-block: var(--jm-space-2); background-color: var(--jm-color-surface); border: 1px solid var(--jm-color-line-soft); border-radius: var(--jm-radius); box-shadow: var(--jm-shadow-md); } .jm-menu--primary .jm-menu__submenu .jm-menu__item { display: flex; align-items: center; justify-content: space-between; } .jm-menu--primary .jm-menu__submenu .jm-menu__link { flex: 1 1 auto; min-block-size: 2.5rem; padding-block: var(--jm-space-2); padding-inline: var(--jm-space-4); font-size: var(--jm-fs-sm); font-weight: var(--jm-fw-regular); color: var(--jm-color-ink-2); } .jm-menu--primary .jm-menu__submenu .jm-menu__link:hover, .jm-menu--primary .jm-menu__submenu .jm-menu__link.is-current { color: var(--jm-color-accent); } /* Third level flies out to the inline side rather than stacking downward. */ .jm-menu--primary .jm-menu__submenu--depth-2 { inset-block-start: calc(var(--jm-space-2) * -1); inset-inline-start: 100%; } /* Nested toggles point along the inline axis, so they are mirrored under RTL * by the .jm-icon--dir rule the walker already emits. */ .jm-menu--primary .jm-menu__submenu .jm-menu__toggle-icon { transform: rotate(-90deg); } .jm-menu--primary .jm-menu__submenu .jm-menu__item.is-open > .jm-menu__toggle .jm-menu__toggle-icon { transform: rotate(90deg); } /* --------------------------------------------------------------------------- * 3.2 Drawer menu * ------------------------------------------------------------------------- */ .jm-menu--drawer { display: flex; flex-direction: column; } .jm-menu--drawer > .jm-menu__item { display: flex; flex-wrap: wrap; align-items: center; border-block-end: 1px solid var(--jm-color-line-soft); } .jm-menu--drawer .jm-menu__link { flex: 1 1 auto; min-block-size: 3rem; padding-block: var(--jm-space-2); font-size: var(--jm-fs-base); } .jm-menu--drawer .jm-menu__submenu { flex: 1 0 100%; padding-block-end: var(--jm-space-2); padding-inline-start: var(--jm-space-4); border-inline-start: 1px solid var(--jm-color-line-soft); margin-block-end: var(--jm-space-2); } .jm-menu--drawer .jm-menu__submenu .jm-menu__item { display: flex; flex-wrap: wrap; align-items: center; } .jm-menu--drawer .jm-menu__submenu .jm-menu__link { min-block-size: 2.5rem; font-size: var(--jm-fs-sm); font-weight: var(--jm-fw-regular); color: var(--jm-color-ink-2); } /* --------------------------------------------------------------------------- * 3.3 Footer + legal menus (both capped at depth 1 by the templates) * ------------------------------------------------------------------------- */ .jm-menu--footer { display: flex; flex-direction: column; gap: var(--jm-space-1); } .jm-menu--footer .jm-menu__link { min-block-size: 2rem; font-size: var(--jm-fs-sm); font-weight: var(--jm-fw-regular); color: var(--jm-color-ink-2); } .jm-menu--legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jm-space-2) var(--jm-space-5); } .jm-menu--legal .jm-menu__link { font-size: var(--jm-fs-xs); font-weight: var(--jm-fw-regular); color: var(--jm-color-muted); } .jm-menu--legal .jm-menu__link:hover { color: var(--jm-color-accent); } /* --------------------------------------------------------------------------- * 3.4 Hover ENHANCEMENT — pointer devices only. * * `.is-open` above remains the real mechanism (touch, keyboard, JS). This block * only spares a mouse user the extra click. :focus-within is included so that * tabbing through a hover-opened panel cannot close it underfoot. * ------------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .jm-menu--primary .jm-menu__item--has-children:hover > .jm-menu__submenu, .jm-menu--primary .jm-menu__item--has-children:focus-within > .jm-menu__submenu { display: block; } } /* =========================================================================== * 4. Drawer extras * The panel, overlay, header, body and footer are already styled in * components.css. Only the navigation and the utility link list are new. * ======================================================================== */ .jm-drawer__nav { display: block; } .jm-drawer__links { display: flex; flex-direction: column; gap: var(--jm-space-1); margin: 0; padding: 0; list-style: none; } .jm-drawer__links-item { margin: 0; } .jm-drawer__link { display: flex; align-items: center; gap: var(--jm-space-3); min-block-size: 2.75rem; padding-inline: var(--jm-space-2); border-radius: var(--jm-radius); color: var(--jm-color-ink-2); font-size: var(--jm-fs-sm); font-weight: var(--jm-fw-medium); text-align: start; text-decoration: none; transition: color var(--jm-transition), background-color var(--jm-transition); } .jm-drawer__link:hover { background-color: var(--jm-color-surface-2); color: var(--jm-color-accent-hover); text-decoration: none; } .jm-drawer__link:focus-visible { outline: var(--jm-focus-width) solid var(--jm-color-focus); outline-offset: calc(var(--jm-focus-offset) * -1); } .jm-drawer__link .jm-icon { inline-size: 1.25rem; block-size: 1.25rem; color: var(--jm-color-muted); } .jm-drawer__link--whatsapp .jm-icon { color: var(--jm-color-olive); } .jm-drawer__link--whatsapp:hover .jm-icon { color: var(--jm-color-accent-hover); } /* =========================================================================== * 5. Search panel — .jm-search * * A sheet that drops from the block-start edge. Mirrors the drawer exactly: * `.is-open` on both panel and overlay, `visibility: hidden` when closed so the * form leaves the tab order. translateY is block-axis, so it needs no RTL sign * flip the way the drawer's translateX does. * ======================================================================== */ .jm-search__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-search__overlay.is-open { opacity: 1; visibility: visible; } .jm-search { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; background-color: var(--jm-color-surface); border-block-end: 1px solid var(--jm-color-line); box-shadow: var(--jm-shadow-md); transform: translateY(-100%); visibility: hidden; transition: transform var(--jm-transition), visibility var(--jm-transition); } .jm-search.is-open { transform: translateY(0); visibility: visible; } .jm-search__inner { display: flex; align-items: center; gap: var(--jm-space-3); padding-block: var(--jm-space-4); } .jm-search__form { flex: 1 1 auto; min-inline-size: 0; } .jm-search__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; background: none; border: 0; border-radius: var(--jm-radius); color: var(--jm-color-ink-2); cursor: pointer; transition: color var(--jm-transition), background-color var(--jm-transition); } .jm-search__close:hover { background-color: var(--jm-color-surface-2); color: var(--jm-color-accent-hover); } .jm-search__close:focus-visible { outline: var(--jm-focus-width) solid var(--jm-color-focus); outline-offset: calc(var(--jm-focus-offset) * -1); } /** * Minimal layout for searchform.php INSIDE this panel only. The .jm-search-form * component itself is not owned by this file, so these rules are scoped to the * panel and touch layout only — no colours beyond a muted label. */ .jm-search__form .jm-search-form__label { display: block; margin-block-end: var(--jm-space-1); font-size: var(--jm-fs-xs); color: var(--jm-color-muted); } .jm-search__form .jm-search-form__field { display: flex; align-items: stretch; gap: var(--jm-space-2); } .jm-search__form .jm-search-form__input { flex: 1 1 auto; min-inline-size: 0; } @media (min-width: 768px) { .jm-search__inner { padding-block: var(--jm-space-5); } } /* =========================================================================== * 6. Footer — .jm-footer * ======================================================================== */ .jm-footer { flex: 0 0 auto; background-color: var(--jm-color-surface-2); border-block-start: 1px solid var(--jm-color-line); color: var(--jm-color-ink-2); font-size: var(--jm-fs-sm); line-height: var(--jm-lh-body); text-align: start; } .jm-footer__inner { padding-block: var(--jm-space-7); } @media (min-width: 1024px) { .jm-footer__inner { padding-block: var(--jm-space-8) var(--jm-space-6); } } /* --- column grid: 1 / 2 / 4 --- */ .jm-footer__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--jm-space-6); } @media (min-width: 768px) { .jm-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jm-space-6) var(--jm-space-5); } } @media (min-width: 1024px) { .jm-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jm-space-6); } } .jm-footer__col { display: flex; flex-direction: column; gap: var(--jm-space-4); min-inline-size: 0; } /* The brand column carries a little more air than the link columns. */ .jm-footer__col--brand { gap: var(--jm-space-5); } @media (min-width: 768px) { /* Brand spans the full width of the 2-up arrangement so the tagline breathes. */ .jm-footer__col--brand { grid-column: 1 / -1; } } @media (min-width: 1024px) { .jm-footer__col--brand { grid-column: auto; } } /* --- brand block --- */ .jm-footer__brand { display: flex; flex-direction: column; gap: var(--jm-space-2); } .jm-footer__logo img, .jm-footer__logo .custom-logo { display: block; inline-size: auto; block-size: auto; max-block-size: 2.75rem; max-inline-size: 100%; } .jm-footer__site-title { margin: 0; font-family: var(--jm-font-head); font-size: var(--jm-fs-md); font-weight: var(--jm-fw-semi); line-height: var(--jm-lh-head); } .jm-footer__site-title a { color: var(--jm-color-ink); text-decoration: none; } .jm-footer__site-title a:hover { color: var(--jm-color-accent); } .jm-footer__tagline { margin: 0; max-inline-size: 34ch; font-size: var(--jm-fs-sm); color: var(--jm-color-muted); } /* --- social --- */ .jm-footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jm-space-2); margin: 0; padding: 0; list-style: none; } .jm-footer__social-item { margin: 0; } .jm-footer__social-link { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--jm-color-line); border-radius: var(--jm-radius); background-color: transparent; color: var(--jm-color-ink-2); text-decoration: none; transition: color var(--jm-transition), border-color var(--jm-transition), background-color var(--jm-transition); } .jm-footer__social-link:hover { border-color: var(--jm-color-accent); background-color: var(--jm-color-surface); color: var(--jm-color-accent); text-decoration: none; } .jm-footer__social-link:focus-visible { outline: var(--jm-focus-width) solid var(--jm-color-focus); outline-offset: var(--jm-focus-offset); } .jm-footer__social-link .jm-icon { inline-size: 1.25rem; block-size: 1.25rem; } /* The three network modifiers are hooks the brand can tune later; today they * stay deliberately uniform so the row reads as one quiet set of marks. */ .jm-footer__social-link--instagram, .jm-footer__social-link--tiktok, .jm-footer__social-link--facebook { color: var(--jm-color-ink-2); } /* --- column headings --- */ .jm-footer__heading { margin: 0; font-family: var(--jm-font-head); font-size: var(--jm-fs-sm); font-weight: var(--jm-fw-semi); line-height: var(--jm-lh-head); color: var(--jm-color-ink); } /* --- contact --- */ .jm-footer__contact { display: flex; flex-direction: column; gap: var(--jm-space-3); margin: 0; padding: 0; list-style: none; } .jm-footer__contact-item { display: flex; align-items: flex-start; gap: var(--jm-space-3); margin: 0; } .jm-footer__contact-item > .jm-icon { margin-block-start: 0.125rem; inline-size: 1.25rem; block-size: 1.25rem; color: var(--jm-color-muted); } .jm-footer__contact-link { display: flex; align-items: flex-start; gap: var(--jm-space-3); color: inherit; text-decoration: none; transition: color var(--jm-transition); } .jm-footer__contact-link .jm-icon { margin-block-start: 0.125rem; inline-size: 1.25rem; block-size: 1.25rem; color: var(--jm-color-muted); transition: color var(--jm-transition); } .jm-footer__contact-link:hover { color: var(--jm-color-accent); text-decoration: none; } .jm-footer__contact-link:hover .jm-icon { color: var(--jm-color-accent); } .jm-footer__contact-link:focus-visible { outline: var(--jm-focus-width) solid var(--jm-color-focus); outline-offset: var(--jm-focus-offset); } .jm-footer__contact-text { display: flex; flex-direction: column; min-inline-size: 0; } .jm-footer__contact-label { font-size: var(--jm-fs-xs); line-height: var(--jm-lh-head); color: var(--jm-color-muted); } /* dir="ltr" is set in the markup on phone/WhatsApp/email values; text-align: * start then resolves to the left of that inline box, which is what a Latin * number or address wants inside an RTL page. */ .jm-footer__contact-value { font-size: var(--jm-fs-sm); line-height: var(--jm-lh-head); color: var(--jm-color-ink); font-variant-numeric: tabular-nums; text-align: start; overflow-wrap: anywhere; } /* --- trust row --- */ .jm-footer__trust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jm-space-4); margin-block-start: var(--jm-space-6); padding-block-start: var(--jm-space-5); border-block-start: 1px solid var(--jm-color-line); } .jm-footer__trust-item { display: inline-flex; align-items: center; gap: var(--jm-space-2); margin: 0; font-size: var(--jm-fs-xs); font-weight: var(--jm-fw-medium); line-height: var(--jm-lh-head); color: var(--jm-color-ink-2); } .jm-footer__trust-item .jm-icon { inline-size: 1.25rem; block-size: 1.25rem; color: var(--jm-color-olive); } /* --- legal bar --- */ .jm-footer__legal { display: flex; flex-direction: column; align-items: flex-start; gap: var(--jm-space-2); margin-block-start: var(--jm-space-5); padding-block-start: var(--jm-space-4); border-block-start: 1px solid var(--jm-color-line-soft); } .jm-footer__copyright { margin: 0; font-size: var(--jm-fs-xs); line-height: var(--jm-lh-head); color: var(--jm-color-muted); } .jm-footer__legal-nav { min-inline-size: 0; } @media (min-width: 768px) { .jm-footer__legal { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--jm-space-5); } } /* =========================================================================== * 7. Reduced motion * * base.css already flattens every transition globally. Repeated here because * the chrome is the one place where a leftover transform would be felt, and * because this file must stand on its own if base.css is ever reordered. * ======================================================================== */ @media (prefers-reduced-motion: reduce) { .jm-drawer, .jm-drawer__overlay, .jm-search, .jm-search__overlay, .jm-menu__toggle-icon, .jm-menu--primary > .jm-menu__item > .jm-menu__link::after { transition: none; } .jm-menu--primary > .jm-menu__item > .jm-menu__link::after { transform: scaleX(1); opacity: 0; } .jm-menu--primary > .jm-menu__item > .jm-menu__link:hover::after, .jm-menu--primary > .jm-menu__item > .jm-menu__link.is-current::after, .jm-menu--primary > .jm-menu__item.is-open > .jm-menu__link::after { opacity: 1; } }