/* ───────────────────────────────────────────────────────────────────────── Meisharim skin — opt-in per tenant via site.json ("theme": "meisharim"). EVERY rule is scoped under `body.theme-meisharim`, so loading this sheet on any other site is a no-op: nothing here applies unless the is tagged. The login page (.auth-meisharim) is the focus; a few shared surfaces (top bar, buttons, links) are re-tinted so the rest of the app matches the brand. Colours are lifted from the public מישרים site: indigo primary, a green from the logo swoosh, and the pastel category palette used on the home cards. ───────────────────────────────────────────────────────────────────────── */ body.theme-meisharim { /* Re-tint the shared design tokens the base sheet already consumes, so buttons, links, focus rings and accents inherit the brand automatically. */ --accent: #3f4fa8; --accent-strong: #313f8c; --accent-soft: #e9ecfb; --ink: #22264c; --ink-2: #363b66; --surface-2: #f4f6fd; /* Brand-specific tokens (only this sheet reads these). */ --m-green: #7cb342; --m-navy: #22264c; --m-c1: #4c6ef5; /* blue */ --m-c2: #e75a9e; /* pink */ --m-c3: #f39c2d; /* orange */ --m-c4: #34a853; /* green */ --m-c5: #17a8c9; /* cyan */ background: radial-gradient(1200px 480px at 85% -10%, #eef1fd 0%, rgba(238, 241, 253, 0) 60%), radial-gradient(900px 420px at 0% 0%, #f3f7ee 0%, rgba(243, 247, 238, 0) 55%), var(--surface-2); } /* ── Top bar: swap the generic mark for the real wordmark + ministry emblem ── */ body.theme-meisharim .topbar { padding: 12px 28px; background: #ffffff; border-bottom: 1px solid #eceeffa8; box-shadow: 0 1px 0 rgba(34, 38, 76, 0.04); } body.theme-meisharim .brand { gap: 14px; } body.theme-meisharim .brand-wordmark { height: 40px; width: auto; display: block; } body.theme-meisharim .brand-emblem { height: 38px; width: auto; display: block; padding-inline-start: 12px; border-inline-start: 1px solid #e7e9f5; } /* Base primary-button hover is a hard-coded blue; re-point it to the brand. */ body.theme-meisharim button:hover, body.theme-meisharim .button:hover { background: var(--accent-strong); } /* ─────────────────────────── Login (hero card) ─────────────────────────── */ /* Centre the card in the real viewport without page scroll: the shared .container already contributes vertical padding + the sticky top bar, so drop its padding here and size against dvh (excludes mobile browser chrome). */ body.theme-meisharim .container:has(> .auth-meisharim) { padding: 0; } body.theme-meisharim .auth-wrap.auth-meisharim { min-height: calc(100dvh - 60px); place-items: center; padding: 5vh 16px; } body.theme-meisharim .auth-meisharim .card.auth { position: relative; max-width: 440px; padding: 40px 38px 34px; border: 1px solid #e7eafb; border-radius: 22px; background: #ffffff; box-shadow: 0 18px 48px rgba(34, 38, 76, 0.12), 0 2px 6px rgba(34, 38, 76, 0.06); overflow: hidden; text-align: center; } /* Rainbow accent rail across the top of the card — echoes the site's palette. */ body.theme-meisharim .auth-meisharim .card.auth::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--m-c1) 0%, var(--m-c2) 25%, var(--m-c3) 50%, var(--m-c4) 75%, var(--m-c5) 100%); } /* Verify (OTP) step keeps its lock badge — retint it to the brand indigo. */ body.theme-meisharim .auth-meisharim .card.auth .auth-logo { margin-inline: auto; background: linear-gradient(135deg, #4a5ec0, var(--accent-strong)); } body.theme-meisharim .auth-wordmark { height: 56px; width: auto; display: block; margin: 6px auto 4px; } /* Palette swatches under the logo — a small nod to the home-page category cards. */ body.theme-meisharim .auth-swatches { display: inline-flex; gap: 6px; margin: 12px 0 4px; } body.theme-meisharim .auth-swatches .sw { width: 26px; height: 6px; border-radius: 999px; display: inline-block; } body.theme-meisharim .auth-swatches .sw-1 { background: var(--m-c1); } body.theme-meisharim .auth-swatches .sw-2 { background: var(--m-c2); } body.theme-meisharim .auth-swatches .sw-3 { background: var(--m-c3); } body.theme-meisharim .auth-swatches .sw-4 { background: var(--m-c4); } body.theme-meisharim .auth-swatches .sw-5 { background: var(--m-c5); } body.theme-meisharim .auth-meisharim .card.auth h1 { font-size: 26px; font-weight: 700; color: var(--m-navy); margin: 14px 0 8px; } body.theme-meisharim .auth-meisharim .card.auth > p { color: #5a5f85; font-size: 14.5px; max-width: 34ch; margin-inline: auto; } /* Form: give the fields room and make them feel like the friendly site UI. */ body.theme-meisharim .auth-meisharim .stack { margin-top: 24px; text-align: start; } body.theme-meisharim .auth-meisharim .stack label { font-size: 13px; font-weight: 600; color: var(--ink-2); } body.theme-meisharim .auth-meisharim .stack input { border: 1px solid #d4d8ef; border-radius: 12px; background: #fbfcff; padding: 13px 15px; } body.theme-meisharim .auth-meisharim .stack input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: #fff; } body.theme-meisharim .auth-meisharim .stack button { margin-top: 10px; padding: 13px; font-size: 15px; font-weight: 600; border-radius: 12px; background: linear-gradient(135deg, #4a5ec0, var(--accent-strong)); box-shadow: 0 8px 20px rgba(49, 63, 140, 0.28); } body.theme-meisharim .auth-meisharim .stack button:hover { background: linear-gradient(135deg, #4152ab, #2a3679); } body.theme-meisharim .auth-meisharim .error { background: #fdecef; border: 1px solid #f7c9d5; color: #b3264e; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; } /* ─────────────────────────── Small screens ─────────────────────────── */ @media (max-width: 600px) { body.theme-meisharim .topbar { padding: 10px 16px; } body.theme-meisharim .brand-wordmark { height: 34px; } body.theme-meisharim .brand-emblem { height: 32px; } body.theme-meisharim .auth-meisharim .card.auth { padding: 30px 22px 26px; } body.theme-meisharim .auth-wordmark { height: 46px; } body.theme-meisharim .auth-meisharim .card.auth h1 { font-size: 22px; } }