/* ========================================================================= Machon Nadav theme styles RTL Hebrew store, translated from the approved comp. Orange (#FD6B03) is the only accent. Navy ink + off-white paper. ========================================================================= */ :root { --brand: #FD6B03; --brand-600: #E85F00; --brand-100: #FFE6D2; --brand-50: #FFF4EC; --ink: #16202E; --ink-700: #24344A; --ink-500: #5B6472; --paper: #FAFAF9; --white: #FFFFFF; --line: rgba(22, 32, 46, 0.10); --line-strong: rgba(22, 32, 46, 0.15); --shadow-soft: 0 10px 30px -12px rgba(22, 32, 46, 0.18); --shadow-card: 0 18px 50px -20px rgba(22, 32, 46, 0.22); --radius-sm: 0.75rem; --radius: 1.1rem; --radius-lg: 1.6rem; --radius-pill: 999px; --container: 80rem; /* matches comp max-w-7xl */ --gutter: 1.25rem; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ---- Base ------------------------------------------------------------- */ html { scroll-behavior: smooth; } body.mn-body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Hebrew store: force RTL on the theme body so the layout is correct even if the WordPress site language is not (yet) set to a right-to-left locale on the staging install. language_attributes() still sets dir on when the locale is RTL; this is the belt-and-suspenders fallback. */ direction: rtl; text-align: right; } .mn-body * { box-sizing: border-box; } .mn-body img { max-width: 100%; height: auto; display: block; } .mn-body a { color: inherit; text-decoration: none; } .mn-body h1, .mn-body h2, .mn-body h3, .mn-body h4, .mn-body p { margin: 0; } .mn-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* Shared icon sizing */ .mn-icon { width: 1.25rem; height: 1.25rem; display: block; } .mn-icon--stroke { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .mn-icon--fill { fill: currentColor; } .mn-icon--brand { fill: var(--brand); } .mn-icon--whatsapp { fill: #25D366; } /* Orange halftone dots motif */ .mn-hero__dots { background-image: radial-gradient(var(--brand) 1.4px, transparent 1.6px); background-size: 16px 16px; } /* ---- Buttons ---------------------------------------------------------- */ .mn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid transparent; font-family: inherit; font-weight: 700; font-size: 0.875rem; line-height: 1; cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.12s var(--ease), box-shadow 0.2s var(--ease); padding: 0.65rem 1.25rem; border-radius: var(--radius-sm); } .mn-btn:active { transform: scale(0.98); } .mn-btn--pill { border-radius: var(--radius-pill); } .mn-btn--sm { padding: 0.5rem 1rem; font-size: 0.85rem; } .mn-btn--lg { padding: 0.95rem 1.75rem; font-size: 1rem; } .mn-btn--primary { background: var(--brand); color: var(--white); box-shadow: var(--shadow-soft); } .mn-btn--primary:hover { background: var(--brand-600); } .mn-btn--ghost { background: var(--white); color: var(--ink); border-color: var(--line-strong); } .mn-btn--ghost:hover { border-color: var(--brand); color: var(--brand); } .mn-btn--arrow .mn-icon { transition: transform 0.2s var(--ease); } .mn-btn--arrow:hover .mn-icon { transform: translateX(0.25rem); /* moves toward start (left in RTL) */ } /* ---- Top contact bar -------------------------------------------------- */ .mn-topbar { background: var(--ink); color: rgba(255, 255, 255, 0.9); font-size: 0.8125rem; } .mn-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; } .mn-topbar__group { display: flex; align-items: center; gap: 1.25rem; } .mn-topbar__link { display: inline-flex; align-items: center; gap: 0.375rem; color: rgba(255, 255, 255, 0.9); transition: color 0.2s var(--ease); } .mn-topbar__link:hover { color: var(--white); } .mn-topbar__link .mn-icon { width: 1rem; height: 1rem; } .mn-topbar__link--muted { color: rgba(255, 255, 255, 0.7); } .mn-topbar__note { color: rgba(255, 255, 255, 0.55); } /* Mobile (<= 640px): the black bar must stay one clean, non-wrapping line. Hide the hours note + the two secondary nav links (they live in the drawer menu anyway); keep just phone (click-to-call) + WhatsApp. */ @media (max-width: 640px) { .mn-hide-mobile { display: none !important; } .mn-topbar { font-size: 0.8125rem; } .mn-topbar__inner { gap: 0.75rem; flex-wrap: nowrap; } .mn-topbar__group { gap: 0.75rem; min-width: 0; } /* Keep each remaining link from wrapping and overflowing the row. */ .mn-topbar__link { white-space: nowrap; } } /* ---- Header ----------------------------------------------------------- */ .mn-header { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--line); background: rgba(250, 250, 249, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease); } /* Once the thin contact bar has scrolled away the header gains a more solid background and a soft shadow so it reads clearly over page content. */ .mn-header.is-stuck { background: rgba(250, 250, 249, 0.96); border-bottom-color: var(--line-strong); box-shadow: var(--shadow-soft); } /* Keep anchor targets clear of the sticky header so #kits, #forum, #contact do not land underneath it. Matches the ~72px header height plus a little. */ .mn-main :target, #kits, #forum, #contact { scroll-margin-top: 88px; } .mn-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 72px; } .mn-logo { display: inline-flex; align-items: center; gap: 0.625rem; flex-shrink: 0; } .mn-logo__mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background: var(--brand); color: var(--white); font-weight: 900; font-size: 1.1rem; } .mn-logo__text { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; } .mn-logo .custom-logo { height: 40px; width: auto; } /* Primary nav */ .mn-nav { display: none; } .mn-nav__list { display: flex; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; font-weight: 500; color: var(--ink-700); } .mn-nav__item { margin: 0; } .mn-nav__list a, .mn-nav__link { position: relative; color: var(--ink-700); transition: color 0.2s var(--ease); } .mn-nav__list a:hover, .mn-nav__link:hover { color: var(--ink); } .mn-nav__list a::after, .mn-nav__link::after { content: ""; position: absolute; inset-inline: 0; bottom: -6px; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: right; transition: transform 0.25s var(--ease); } .mn-nav__list a:hover::after, .mn-nav__link:hover::after { transform: scaleX(1); } /* Current page highlight (comp marks "ראשי" orange) */ .mn-nav__list .is-current > a, .mn-nav__list .current-menu-item > a, .mn-nav__link.is-current { color: var(--brand); } /* Mega-menu trigger: a