/* ============================================================ מערכת ניהול תורמים — מערכת עיצוב ============================================================ */ :root { /* Hagefen palette — olive/forest green with brass gold on ivory */ --brand-50: #eef4ea; --brand-100: #dde9d3; --brand-200: #c1d5ad; --brand-400: #7c9a5c; --brand-500: #4f7238; --brand-600: #3c5a2b; --brand-700: #2a4020; --accent-500: #3f9068; --accent-600: #2f7a55; --gold-500: #b0862f; --gold-600: #916d24; --ink-900: #1c2431; --ink-700: #384657; --ink-500: #667085; --ink-400: #94a0b0; --line: #e5e1d7; --line-soft:#f1eee6; --bg: #f5f3 ec; --bg: #f5f3ec; --surface: #ffffff; --surface-2:#faf8f3; --success-bg:#e7f2ea; --success-fg:#1f6b45; --warn-bg:#faf0dd; --warn-fg:#8a5a13; --danger-bg:#f8e9e6; --danger-fg:#a83a2c; --info-bg:#eaeff6; --info-fg:#26466e; --radius: 10px; --radius-sm: 8px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(20,41,66,.06), 0 1px 3px rgba(20,41,66,.05); --shadow-md: 0 4px 12px rgba(20,41,66,.08), 0 2px 6px rgba(20,41,66,.05); --shadow-lg: 0 18px 44px rgba(20,41,66,.18); --sidebar-w: 268px; --font: 'Source Sans 3', -apple-system, 'Segoe UI', system-ui, sans-serif; --font-serif: 'Lora', Georgia, 'Times New Roman', serif; } /* Dark mode — activated by the theme toggle (data-theme on ) */ :root[data-theme="dark"] { --ink-900: #e9ece0; --ink-700: #c4cdb7; --ink-500: #97a189; --ink-400: #7a846d; --line: #2d3b29; --line-soft:#26311f; --bg: #131c12; --surface: #1b271a; --surface-2:#212f1f; --brand-700:#d0e1bd; --success-bg:#22391e; --success-fg:#a9d493; --warn-bg:#3a3212; --warn-fg:#e0c268; --danger-bg:#3a201c; --danger-fg:#e8a89d; --info-bg:#20302a; --info-fg:#9fdcc0; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.35); --shadow-lg: 0 18px 44px rgba(0,0,0,.5); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--ink-900); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } button, input, select, textarea { font-family: inherit; font-size: inherit; } a { color: inherit; text-decoration: none; cursor: pointer; } /* ============================= פריסה ============================= */ #app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); background: var(--surface); color: var(--ink-700); display: flex; flex-direction: column; position: fixed; inset-inline-start: 0; top: 0; bottom: 0; z-index: 40; padding: 22px 14px; border-inline-end: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px 18px; border-bottom: 1px solid var(--line-soft); margin-bottom: 14px; } .brand-logo { width: 44px; height: 44px; border-radius: 11px; background: var(--brand-50); display: grid; place-items: center; font-size: 22px; box-shadow: inset 0 0 0 1px var(--brand-100); } .brand-text { display: flex; flex-direction: column; line-height: 1.3; } .brand-name { font-family: var(--font-serif); font-weight: 700; font-size: 18px; color: var(--ink-900); letter-spacing: .2px; } .brand-sub { font-size: 10.5px; color: var(--ink-400); text-transform: uppercase; letter-spacing: 1.2px; } .nav { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 9px; color: var(--ink-500); font-weight: 500; transition: background .15s ease, color .15s ease; } .nav-item:hover { background: var(--surface-2); color: var(--ink-900); } .nav-item.active { background: var(--brand-50); color: var(--brand-600); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand-500); } .nav-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; opacity: .68; } .nav-icon .ico-svg { width: 20px; height: 20px; } .nav-item.active .nav-icon, .nav-item:hover .nav-icon { opacity: 1; } /* Shared icon helpers */ .ico-svg { display: inline-block; vertical-align: middle; flex: none; } .btn .ico-svg { vertical-align: middle; margin-inline-end: 6px; margin-top: -2px; } .sec-ic { color: var(--gold-600); display: inline-flex; vertical-align: middle; margin-inline-end: 4px; } .theme-toggle .ico-svg { vertical-align: middle; } .sidebar-footer { margin-top: auto; padding: 12px 6px 2px; display: flex; flex-direction: column; gap: 8px; } .backend-pill { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-500); background: var(--surface-2); padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line); } .backend-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); flex-shrink: 0; } .backend-pill.cloud .dot { background: var(--accent-500); box-shadow: 0 0 0 3px rgba(63,144,104,.18); } .user-box { display: flex; align-items: center; gap: 10px; background: var(--surface-2); padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line); } .user-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--brand-400), var(--accent-500)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; } .user-info { display: flex; flex-direction: column; min-width: 0; } .user-email { font-size: 12px; color: var(--ink-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-signout { font-size: 12px; color: var(--ink-400); cursor: pointer; } .user-signout:hover { color: var(--brand-600); text-decoration: underline; } .org-badge { font-size: 12px; color: var(--ink-400); background: var(--surface-2); padding: 10px 12px; border-radius: 9px; text-align: center; border: 1px solid var(--line); } .main { flex: 1; margin-inline-start: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; } .topbar { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 16px 28px; } .menu-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--ink-700); } .page-title { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--brand-700); } .topbar-actions { margin-inline-start: auto; display: flex; gap: 10px; } .content { padding: 26px 32px 60px; max-width: 1680px; width: 100%; margin: 0 auto; } /* ============================= רכיבים ============================= */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; cursor: pointer; transition: all .15s ease; white-space: nowrap; background: var(--surface); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand-500); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--brand-600); } .btn-ghost { background: var(--surface); color: var(--ink-700); border-color: var(--line); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--ink-400); } .btn-accent { background: var(--accent-600); color: #fff; } .btn-accent:hover { background: var(--accent-500); } .btn-danger { background: var(--danger-bg); color: var(--danger-fg); } .btn-danger:hover { background: #fbdad7; } .btn-sm { padding: 7px 12px; font-size: 13px; } .btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; } .btn-icon .ico-svg { margin: 0; } .btn-sm.btn-icon { width: 32px; height: 32px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card-pad { padding: 20px 22px; } /* Dashboard hero + tiles (home) */ .dash-hero { margin-bottom: 22px; } .dash-hero h1 { font-family: var(--font-serif); font-size: 30px; font-weight: 700; color: var(--brand-700); letter-spacing: .5px; } .dash-sub { color: var(--ink-500); font-size: 14px; margin-top: 4px; } .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; margin-bottom: 24px; } .tile { position: relative; border-radius: var(--radius); padding: 22px; color: #fff; min-height: 148px; display: flex; flex-direction: column; box-shadow: var(--shadow-md); cursor: pointer; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; text-decoration: none; } .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .tile.green { background: linear-gradient(140deg, #3f7050 0%, #223c2b 100%); } .tile.gold { background: linear-gradient(140deg, #bd9440 0%, #886820 100%); } .tile.dark { background: linear-gradient(140deg, #2c4230 0%, #182619 100%); } .tile-icon { margin-bottom: auto; width: 48px; height: 48px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.20); } .tile-icon .ico-svg { width: 25px; height: 25px; } .tile-title { font-family: var(--font-serif); font-size: 20px; font-weight: 600; margin-top: 12px; } .tile-sub { font-size: 13px; opacity: .88; margin-top: 3px; } .tile-arrow { position: absolute; top: 18px; inset-inline-end: 18px; opacity: .55; font-size: 18px; } /* --- Dashboard (clean layout) --- */ .dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .dash-title { font-family: var(--font-serif); font-size: 29px; font-weight: 700; color: var(--brand-700); } .dash-head .dash-sub { color: var(--ink-500); font-size: 14px; margin-top: 4px; } .dash-quick { display: flex; gap: 8px; flex-wrap: wrap; } .dash-cols { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; margin-bottom: 18px; align-items: start; } @media (max-width: 900px) { .dash-cols { grid-template-columns: 1fr; } } .glance { margin-top: 2px; } .glance-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--ink-700); } .glance-row:last-child { border-bottom: none; } .glance-row .glance-strong { font-weight: 700; color: var(--brand-700); font-size: 16px; } .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; margin-bottom: 22px; } .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow-sm); border-inline-start: 3px solid var(--brand-500); } .kpi.gold { border-inline-start-color: var(--gold-500); } .kpi.balance { border-inline-start-color: var(--accent-500); } .kpi.danger { border-inline-start-color: var(--danger-fg); } .kpi.danger .kpi-v { color: var(--danger-fg); } .kpi-k { font-size: 12px; color: var(--ink-500); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; } .kpi-v { font-family: var(--font-serif); font-size: 23px; font-weight: 700; color: var(--brand-700); margin-top: 3px; } /* Global search (topbar) */ .global-search { position: relative; flex: 1; max-width: 380px; margin-inline-start: 8px; } .global-search .gs-box { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; } .global-search input { border: none; outline: none; background: none; flex: 1; color: var(--ink-900); font-size: 14px; } .global-search .ico { color: var(--ink-400); } .gs-results { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; inset-inline-end: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 60vh; overflow-y: auto; z-index: 30; display: none; } .gs-results.open { display: block; } .gs-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--line-soft); } .gs-item:last-child { border-bottom: none; } .gs-item:hover, .gs-item.active { background: var(--surface-2); } .gs-ic { font-size: 16px; width: 22px; text-align: center; } .gs-title { font-weight: 600; font-size: 14px; } .gs-sub { font-size: 12px; color: var(--ink-500); } .gs-empty { padding: 16px; text-align: center; color: var(--ink-400); font-size: 13px; } .gs-group { padding: 7px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-400); background: var(--surface-2); position: sticky; top: 0; } /* Theme toggle */ .theme-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--surface-2); color: var(--ink-700); border: 1px solid var(--line); border-radius: 9px; padding: 9px; cursor: pointer; font-weight: 500; font-size: 13px; } .theme-toggle:hover { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-100); } .yoy { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .yoy-k { font-size: 12px; color: var(--ink-500); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; } .yoy-v { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--brand-700); margin-top: 2px; } .yoy-v.muted { color: var(--ink-500); } .yoy-arrow { font-weight: 700; font-size: 14px; padding: 5px 11px; border-radius: 999px; white-space: nowrap; } .yoy-arrow.up { color: var(--success-fg); background: var(--success-bg); } .yoy-arrow.down { color: var(--danger-fg); background: var(--danger-bg); } .team-notes { list-style: none; display: flex; flex-direction: column; gap: 10px; } .team-notes li { font-size: 13px; color: var(--ink-700); padding-inline-start: 22px; position: relative; line-height: 1.5; } .team-notes li::before { content: "•"; position: absolute; inset-inline-start: 6px; color: var(--gold-500); font-weight: 700; } /* סטטיסטיקות */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 22px; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 15px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .stat::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; background: var(--brand-500); } .stat.accent::before, .stat.accent-green::before { background: var(--accent-500); } .stat.gold::before, .stat.accent-gold::before { background: var(--gold-500); } .stat.danger::before, .stat.accent-danger::before { background: var(--danger-fg); } .stat-icon { color: var(--gold-600); margin-bottom: 8px; line-height: 0; } .stat-icon .ico-svg { width: 20px; height: 20px; } .stat-label { color: var(--ink-500); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; } .stat-value { font-family: var(--font-serif); font-size: 26px; font-weight: 700; margin-top: 4px; color: var(--brand-700); } .stat.danger .stat-value, .stat.accent-danger .stat-value { color: var(--danger-fg); } .stat-sub, .stat-meta { font-size: 12px; color: var(--ink-400); margin-top: 3px; } /* כותרת מקטע */ .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; } .section-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--brand-700); } .section-title small { font-family: var(--font); color: var(--ink-400); font-weight: 500; font-size: 13px; } /* טבלה */ .table-wrap { overflow-x: auto; border-radius: var(--radius); } table { width: 100%; border-collapse: collapse; background: var(--surface); } thead th { text-align: start; font-size: 12px; font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: .4px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; } .th-sort { cursor: pointer; user-select: none; } .th-sort:hover { color: var(--brand-600); } .sort-arrow { font-size: 10px; opacity: .35; margin-inline-start: 2px; } .sort-arrow.on { opacity: 1; color: var(--gold-600); } tbody td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr { transition: background .12s; } tbody tr:hover { background: var(--surface-2); } .t-strong { font-weight: 600; } .t-muted { color: var(--ink-500); font-size: 13px; } .t-amount { font-weight: 700; font-variant-numeric: tabular-nums; } .row-actions { display: flex; gap: 6px; justify-content: flex-end; } /* אווטאר */ .avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; flex-shrink: 0; } .cell-user { display: flex; align-items: center; gap: 12px; } .cell-user .u-name { font-weight: 600; } .cell-user .u-sub { font-size: 12px; color: var(--ink-500); } /* תגיות */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } .badge.success { background: var(--success-bg); color: var(--success-fg); } .badge.warn { background: var(--warn-bg); color: var(--warn-fg); } .badge.info { background: var(--info-bg); color: var(--info-fg); } .badge.neutral { background: var(--line-soft); color: var(--ink-500); } .badge.tag-supplier { background: var(--warn-bg); color: var(--gold-600); } .seg-count { display: inline-block; margin-inline-start: 4px; background: var(--line-soft); color: var(--ink-500); border-radius: 999px; padding: 0 6px; font-size: 11px; font-weight: 700; } .seg-btn.on .seg-count { background: var(--brand-100); color: var(--brand-700); } /* טפסים */ .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .field { display: flex; flex-direction: column; gap: 6px; } .field.full { grid-column: 1 / -1; } .field label { font-size: 13px; font-weight: 600; color: var(--ink-700); } .field .hint { font-size: 12px; color: var(--ink-400); } .input, .select, .textarea { padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-900); transition: all .15s; width: 100%; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-50); } .textarea { resize: vertical; min-height: 80px; } .gmaps-tag { font-size: 11px; font-weight: 600; color: var(--accent-600); background: var(--success-bg); padding: 2px 8px; border-radius: 999px; margin-inline-start: 6px; } /* Google Places dropdown must sit above the modal */ .pac-container { z-index: 9999 !important; border-radius: 10px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); font-family: var(--font); margin-top: 2px; } .pac-item { padding: 6px 12px; cursor: pointer; } .check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 500; color: var(--ink-700); } .check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-500); cursor: pointer; flex-shrink: 0; } .input-prefix { position: relative; } .input-prefix .pfx { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-400); font-weight: 600; pointer-events: none; } .input-prefix .input { padding-inline-start: 30px; } /* חיפוש */ .search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; min-width: 240px; } .search input { border: none; outline: none; flex: 1; background: none; } .search .ico { color: var(--ink-400); } /* מודאל */ .modal-host { position: fixed; inset: 0; z-index: 95; display: none; } .modal-host.open { display: block; } .modal-backdrop { position: absolute; inset: 0; background: rgba(16,24,40,.45); backdrop-filter: blur(2px); animation: fade .2s ease; } .modal { position: relative; margin: 6vh auto; max-width: 620px; width: calc(100% - 32px); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: pop .2s ease; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; } .modal.wide { max-width: 820px; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); } .modal-head h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--brand-700); } .modal-body { padding: 22px 24px; overflow-y: auto; flex: 1 1 auto; min-height: 0; } .modal-foot { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-start; flex: none; } .modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--ink-400); line-height: 1; width: 32px; height: 32px; border-radius: 8px; } .modal-close:hover { background: var(--line-soft); color: var(--ink-700); } /* Drawer (slide-in from start / left) */ .drawer-host { position: fixed; inset: 0; z-index: 90; display: none; } .drawer-host.open { display: block; } .drawer-backdrop { position: absolute; inset: 0; background: rgba(20,41,66,.42); opacity: 0; transition: opacity .25s ease; } .drawer-host.open .drawer-backdrop { opacity: 1; } .drawer { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(480px, 100%); background: var(--surface); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1); } .drawer-host.open .drawer { transform: translateX(0); } .drawer-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); } .drawer-head h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--brand-700); } .drawer-sub { font-size: 13px; color: var(--ink-500); margin-top: 2px; } .drawer-body { padding: 22px 24px; overflow-y: auto; flex: 1; } .drawer-foot { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; gap: 10px; } .drawer-foot .btn { flex: 1; justify-content: center; } /* Tabs */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; } .tab { padding: 10px 18px; font-weight: 600; color: var(--ink-500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .12s; } .tab:hover { color: var(--ink-900); } .tab.on { color: var(--brand-700); border-bottom-color: var(--gold-500); } /* Supplier cards */ .supplier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .supplier-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); cursor: pointer; transition: box-shadow .15s, border-color .15s; } .supplier-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand-200); } .supplier-card .sc-top { display: flex; align-items: center; gap: 12px; } .supplier-card .sc-name { font-weight: 700; color: var(--ink-900); } .supplier-card .sc-cat { font-size: 12px; color: var(--ink-500); } .supplier-card .sc-meta { margin-top: 12px; font-size: 13px; color: var(--ink-500); display: flex; flex-direction: column; gap: 3px; } .supplier-card .sc-spend { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 13px; display: flex; justify-content: space-between; } .supplier-card .sc-spend strong { font-family: var(--font-serif); color: var(--brand-700); } /* Field with inline action (e.g. supplier + add) */ .field-inline { display: flex; gap: 8px; align-items: stretch; } .field-inline .select { flex: 1; } .select-sm { width: auto; padding: 8px 30px 8px 12px; font-size: 13px; } /* מצב ריק */ .empty { text-align: center; padding: 56px 20px; color: var(--ink-500); } .empty-icon { font-size: 46px; margin-bottom: 10px; opacity: .8; line-height: 0; } .empty-icon .ico-svg { width: 46px; height: 46px; color: var(--brand-400); } /* small inline contact icons in tables */ .cell-ico { display: inline-flex; vertical-align: -3px; color: var(--ink-400); margin-inline-end: 5px; } .cell-ico .ico-svg { width: 14px; height: 14px; } .badge-ico { display: inline-flex; vertical-align: -2px; margin-inline-end: 4px; } .badge-ico .ico-svg { width: 12px; height: 12px; } .empty h3 { font-family: var(--font-serif); color: var(--ink-700); font-weight: 600; margin-bottom: 6px; font-size: 18px; } /* toast */ .toast-host { position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 120; display: flex; flex-direction: column; gap: 10px; } .toast { background: var(--ink-900); color: #fff; padding: 12px 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; animation: slideUp .25s ease; font-weight: 500; } .toast.success { background: #0f7a4d; } .toast.error { background: #b02a20; } /* גרף עמודות */ .bars { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: 10px; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; } .bar { width: 100%; max-width: 46px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--brand-400), var(--brand-600)); transition: height .4s ease; min-height: 4px; position: relative; } .bar:hover::after { content: attr(data-val); position: absolute; top: -22px; inset-inline-start: 50%; transform: translateX(50%); background: var(--ink-900); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 6px; white-space: nowrap; } .bar-label { font-size: 11px; color: var(--ink-500); } /* Financial strip */ .fin-strip { display: flex; align-items: center; gap: 8px; } .fin-item { flex: 1; text-align: center; } .fin-k { font-size: 12px; color: var(--ink-500); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; } .fin-v { font-family: var(--font-serif); font-size: 24px; font-weight: 700; margin-top: 4px; } .fin-sep { width: 1px; align-self: stretch; background: var(--line); } @media (max-width: 560px) { .fin-strip { flex-direction: column; gap: 14px; } .fin-sep { width: 60%; height: 1px; } } /* Segmented control */ .seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px; gap: 2px; } .seg-btn { border: none; background: none; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 13px; color: var(--ink-500); cursor: pointer; transition: all .12s; } .seg-btn:hover { color: var(--ink-900); } .seg-btn.on { background: var(--surface); color: var(--brand-700); box-shadow: var(--shadow-sm); } .seg-lg { display: flex; width: 100%; } .seg-lg .seg-btn { flex: 1; padding: 10px; font-size: 14px; text-align: center; } /* Category breakdown bars */ .bd-row { margin-bottom: 12px; } .bd-row:last-child { margin-bottom: 0; } .bd-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; } .bd-head span:first-child { color: var(--ink-700); font-weight: 500; } .bd-amt { font-weight: 700; font-variant-numeric: tabular-nums; } .bd-track { height: 8px; background: var(--line-soft); border-radius: 999px; overflow: hidden; } .bd-fill { height: 100%; border-radius: 999px; } .bd-fill.income { background: linear-gradient(90deg, var(--accent-500), var(--accent-600)); } .bd-fill.expense { background: linear-gradient(90deg, var(--gold-500), var(--gold-600)); } /* דו-טור */ .two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; } /* פרטי תורם */ .donor-header { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; } .donor-header .avatar { width: 56px; height: 56px; font-size: 20px; } .donor-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; margin: 18px 0; } .meta-item .k { font-size: 12px; color: var(--ink-500); } .meta-item .v { font-weight: 600; margin-top: 2px; } .divider { height: 1px; background: var(--line); margin: 18px 0; } /* ============================= Auth gate ============================= */ #authGate, #cloudError { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; overflow: auto; } .auth-bg { position: fixed; inset: 0; z-index: -1; background: linear-gradient(160deg, #1a2f19 0%, #223a24 55%, #35502a 100%); } .auth-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 22%, rgba(176,134,47,.24), transparent 42%), radial-gradient(circle at 85% 82%, rgba(63,144,104,.20), transparent 46%); } .auth-card { width: 100%; max-width: 400px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 30px 30px 22px; animation: pop .25s ease; } .auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .auth-logo { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-50); display: grid; place-items: center; font-size: 24px; overflow: hidden; } .auth-logo img { width: 100%; height: 100%; object-fit: cover; } .auth-name { font-family: var(--font-serif); font-weight: 700; font-size: 18px; color: var(--brand-700); } .auth-sub { font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: 1px; } .auth-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; margin-bottom: 18px; color: var(--brand-700); } .auth-form { display: flex; flex-direction: column; gap: 14px; } .auth-error { background: var(--danger-bg); color: var(--danger-fg); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; } .auth-links { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-500); } .auth-links a { color: var(--brand-600); font-weight: 600; } .auth-links a:hover { text-decoration: underline; } .auth-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-400); text-align: center; } @keyframes fade { from { opacity: 0; } } @keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } } /* ============================= רספונסיבי ============================= */ .scrim { display: none; } @media (max-width: 900px) { .sidebar { transform: translateX(-100%); transition: transform .25s ease; } #app.nav-open .sidebar { transform: translateX(0); } .main { margin-inline-start: 0; } .menu-toggle { display: block; } .scrim { display: none; position: fixed; inset: 0; background: rgba(16,24,40,.4); z-index: 35; } #app.nav-open .scrim { display: block; } .two-col { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .content { padding: 20px 16px 50px; } .topbar { padding: 14px 16px; } } /* ---------------- Mobile comfort (phones) ---------------- */ @media (max-width: 640px) { .content { padding: 16px 12px 46px; } /* Inputs at 16px stop iOS Safari from zooming in on focus. */ .input, .select, .textarea, input, select, textarea { font-size: 16px; } /* Comfortable tap targets on phones. */ .btn { min-height: 42px; } /* Modals use more of the small screen and lighter padding. dvh (dynamic viewport height) keeps the modal — and its footer — inside the actually visible area on iOS, where the browser toolbars shrink the viewport. */ .modal { margin: 2vh auto; margin: 2dvh auto; width: calc(100% - 20px); max-height: 95vh; max-height: 92dvh; } .modal-body { padding: 18px 16px; } .modal-foot { flex-wrap: wrap; background: var(--surface); padding-bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)); } .modal-foot .btn { flex: 1 1 auto; } .topbar { gap: 10px; } .page-title { display: none; } /* each screen has its own heading */ .global-search { max-width: none; margin-inline-start: 0; min-width: 0; flex: 1 1 80px; } .global-search .gs-box { min-width: 0; } .global-search input { min-width: 0; width: 100%; } .topbar-actions { flex-shrink: 0; } .topbar-actions .btn { padding: 9px 12px; font-size: 13px; } .topbar-actions .btn .ico-svg { display: none; } /* keep action buttons compact */ .dash-head { align-items: flex-start; } .dash-quick { width: 100%; } .dash-quick .btn { flex: 1; justify-content: center; } .seg { overflow-x: auto; max-width: 100%; } /* Turn wide tables into stacked cards */ .table-wrap { overflow-x: visible; padding: 8px; } table, tbody, tr, td { display: block; width: 100%; } thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } tbody tr { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; background: var(--surface); box-shadow: var(--shadow-sm); } tbody tr:last-child { margin-bottom: 0; } tbody td { border: none; border-bottom: 1px solid var(--line-soft); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: end; } tbody td:last-child { border-bottom: none; } tbody td::before { content: attr(data-label); font-weight: 600; color: var(--ink-500); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; text-align: start; white-space: nowrap; } /* Accordion: only the header (first cell) shows until the card is tapped open */ tbody td:not(:first-child) { display: none; } tbody tr.tr-open td:not(:first-child) { display: flex; } tbody td:empty { display: none !important; } tbody td:first-child { display: block; text-align: start; padding: 15px 42px 14px 16px; position: relative; cursor: pointer; } tbody td:first-child::before { display: none; } tbody td:first-child::after { content: ''; position: absolute; inset-inline-end: 16px; top: 22px; width: 9px; height: 9px; border-right: 2px solid var(--ink-400); border-bottom: 2px solid var(--ink-400); transform: rotate(45deg); transition: transform .2s ease; } tbody tr.tr-open td:first-child::after { transform: rotate(-135deg); top: 26px; } tbody tr.tr-open td:first-child { border-bottom: 1px solid var(--line-soft); } tbody td.row-actions { flex-wrap: wrap; justify-content: flex-start; gap: 8px; } tbody td.row-actions::before { width: 100%; } /* …but NOT these specific tables — the accordion above would hide their value cells (résumé preview, permissions matrix, campaign admin). */ .pr-tbl, .pm-table, .cmp-table { display: table; width: 100%; } .pr-tbl thead, .pm-table thead, .cmp-table thead { display: table-header-group; position: static; width: auto; height: auto; clip: auto; overflow: visible; } .pr-tbl tbody, .pm-table tbody, .cmp-table tbody { display: table-row-group; } .pr-tbl tr, .pm-table tr, .cmp-table tr { display: table-row; margin: 0; border: none; box-shadow: none; } .pr-tbl td, .pr-tbl th, .pm-table td, .pm-table th, .cmp-table td, .cmp-table th { display: table-cell; width: auto; text-align: start; } .pr-tbl td::before, .pm-table td::before, .cmp-table td::before { content: none; } .pr-tbl td:not(:first-child), .pm-table td:not(:first-child), .cmp-table td:not(:first-child) { display: table-cell; } .pr-tbl td:first-child, .pm-table td:first-child, .cmp-table td:first-child { padding: revert; cursor: auto; } .pr-tbl td:first-child::after, .pm-table td:first-child::after, .cmp-table td:first-child::after { content: none; } tbody td.row-actions .btn { flex: 1; justify-content: center; } } /* ============================= קבלה להדפסה ============================= */ .receipt-doc { background: #fff; color: #1a1a1a; width: 100%; max-width: 780px; margin: 0 auto; padding: 44px 48px; font-size: 14px; line-height: 1.6; position: relative; } .receipt-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 3px double var(--gold-500); padding-bottom: 20px; } .receipt-org { display: flex; align-items: center; gap: 14px; } .receipt-logo { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; background: var(--brand-50); display: grid; place-items: center; font-size: 28px; } .receipt-org h2 { font-family: var(--font-serif); font-size: 21px; color: #2a4020; } .receipt-org .org-line { font-size: 12px; color: #666; margin-top: 2px; } .receipt-tag { text-align: end; } .receipt-tag .title { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: #2a4020; letter-spacing: 1px; } .receipt-tag .num { font-size: 13px; color: #555; margin-top: 4px; } .receipt-parties { display: flex; justify-content: space-between; gap: 20px; margin: 26px 0 8px; } .receipt-block .lbl { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: .5px; } .receipt-block .val { font-weight: 700; font-size: 15px; margin-top: 2px; } .receipt-block .val.sm { font-weight: 500; font-size: 13px; color: #444; } .receipt-amount-box { margin: 24px 0; background: #f7f4ec; border: 1px solid #e3d6b8; border-radius: 12px; padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; } .receipt-amount-box .lbl { font-size: 13px; color: var(--gold-600); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; } .receipt-amount-box .amt { font-family: var(--font-serif); font-size: 32px; font-weight: 700; color: #2a4020; } .receipt-amount-box .words { font-size: 12px; color: #666; margin-top: 4px; font-style: italic; } .receipt-table { width: 100%; margin: 20px 0; border-collapse: collapse; } .receipt-table th { background: #f4f6fb; text-align: start; padding: 10px 14px; font-size: 12px; color: #555; border-bottom: 1px solid #e2e6ee; } .receipt-table td { padding: 12px 14px; border-bottom: 1px solid #eef1f6; } .receipt-note { font-size: 12px; color: #777; margin-top: 8px; background: #fafbfc; border-radius: 10px; padding: 12px 14px; } .receipt-foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 40px; padding-top: 20px; border-top: 1px solid #e6e9f0; } .receipt-sign { text-align: center; } .receipt-sign .line { width: 180px; border-top: 1px solid #999; margin-bottom: 6px; } .receipt-sign .role { font-size: 12px; color: #777; } .receipt-46 { font-size: 11px; color: #888; max-width: 300px; } .receipt-stamp { position: absolute; inset-inline-end: 60px; bottom: 120px; transform: rotate(-12deg); border: 3px double var(--accent-600); color: var(--accent-600); border-radius: 10px; padding: 6px 16px; font-weight: 700; font-size: 16px; opacity: .85; font-family: var(--font-serif); } @media print { body * { visibility: hidden; } #printArea, #printArea * { visibility: visible; } #printArea { position: absolute; inset-inline-start: 0; top: 0; width: 100%; } .receipt-doc { max-width: 100%; padding: 20px; } @page { size: A4; margin: 14mm; } } /* ============================================================ Landing page (public) — Hagefen Northwest ============================================================ */ #landing { position: fixed; inset: 0; overflow-y: auto; z-index: 60; background: #f6f1e6; } .lp { --lp-cream:#f6f1e6; --lp-cream2:#efe7d5; --lp-navy:#4c5a37; --lp-navy2:#5e6d46; --lp-gold:#c49a3f; --lp-gold2:#d9b45f; --lp-sage:#98a37f; --lp-sage-soft:#e7ebda; --lp-ink:#333d29; --lp-muted:#6f7563; --lp-line:#e4ddca; font-family: var(--font); color: var(--lp-ink); line-height: 1.62; background: var(--lp-cream); } .lp .lp-wrap { width:100%; max-width:1160px; margin:0 auto; padding-inline:28px; } .lp .lp-narrow { max-width:760px; } .lp .lp-center { text-align:center; } /* Header */ .lp-header { position:sticky; top:0; z-index:5; background:rgba(246,241,230,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--lp-line); } .lp-header-in { display:flex; align-items:center; justify-content:space-between; height:72px; } .lp-brand { display:flex; align-items:center; gap:12px; } .lp-brand-img { height:44px; width:auto; max-width:210px; display:block; } .lp-login { border:1px solid var(--lp-navy); color:var(--lp-navy); background:transparent; padding:9px 18px; border-radius:999px; font:inherit; font-weight:600; font-size:14px; cursor:pointer; transition:all .18s; white-space:nowrap; } .lp-login:hover { background:var(--lp-navy); color:#fff; } /* Hero — light, split (text + botanical art) */ .lp-hero { position:relative; overflow:hidden; background: radial-gradient(720px 520px at 86% 32%, rgba(152,163,127,.20), transparent 70%), var(--lp-cream); } .lp-hero-grid { display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:24px; min-height:560px; padding:60px 0 70px; } .lp-hero-text { max-width:540px; } .lp-hero .lp-h1 { font-family:var(--font-serif); font-weight:600; color:var(--lp-navy); font-size:clamp(38px,5.2vw,60px); line-height:1.07; letter-spacing:-.01em; margin:0; } .lp-hero .lp-h1 em { font-style:italic; color:var(--lp-gold); } .lp-rule { width:96px; height:2px; background:var(--lp-gold); margin:28px 0 22px; } .lp-hero .lp-lead { font-size:18px; color:var(--lp-muted); max-width:410px; margin:0 0 30px; } .lp-hero .lp-cta-row { justify-content:flex-start; } .lp-cta-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:460px; } .lp-cta-grid .lp-btn { width:100%; } @media (max-width:560px) { .lp-cta-grid { grid-template-columns:1fr; } } .lp-trust { margin-top:22px; color:var(--lp-muted); font-size:12px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; } .lp-shiurim { display:inline-flex; align-items:center; gap:10px; margin-top:22px; padding:11px 20px; border:1px solid var(--lp-navy, #2b3a55); border-radius:999px; color:var(--lp-navy, #2b3a55); text-decoration:none; font-weight:700; font-size:15px; background:rgba(255,255,255,.4); transition:background .15s ease, color .15s ease, transform .15s ease; } .lp-shiurim:hover { background:var(--lp-navy, #2b3a55); color:#fff; transform:translateY(-1px); } .lp-shiurim-ic { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--lp-gold, #b98a2e); color:#fff; font-size:9px; padding-left:1px; } .lp-shiurim-arrow { font-size:16px; } .lp-hero-art { position:relative; min-height:460px; align-self:stretch; } .lp-hero-art svg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:118%; height:auto; } /* Buttons */ .lp-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 26px; border-radius:999px; font-weight:600; font-size:15px; text-decoration:none; cursor:pointer; border:1.5px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .18s ease, filter .15s ease; -webkit-tap-highlight-color:transparent; } .lp-btn:hover { transform:translateY(-2px); } /* Tactile press feedback — clearly responds to a click / tap. */ .lp-btn:active { transform:translateY(1px) scale(.97); transition:transform .08s ease, box-shadow .08s ease; } .lp-btn-lg { padding:16px 34px; font-size:17px; } .lp-btn-navy { background:var(--lp-navy); color:#f2ecdd; box-shadow:0 8px 20px rgba(22,38,63,.22); } .lp-btn-navy:hover { background:var(--lp-navy2); box-shadow:0 13px 28px rgba(22,38,63,.32); } .lp-btn-navy:active { box-shadow:0 4px 10px rgba(22,38,63,.28); filter:brightness(.94); } .lp-btn-gold { background:var(--lp-gold); color:#2c2207; box-shadow:0 8px 20px rgba(196,154,63,.32); } .lp-btn-gold:hover { background:var(--lp-gold2); box-shadow:0 13px 28px rgba(196,154,63,.42); } .lp-btn-gold:active { box-shadow:0 4px 10px rgba(196,154,63,.36); filter:brightness(.95); } .lp-btn-outline { background:transparent; border-color:var(--lp-navy); color:var(--lp-navy); } .lp-btn-outline:hover { background:var(--lp-navy); color:#fff; } .lp-btn-outline:active { filter:brightness(.94); } .lp-btn-light { background:#fff; color:var(--lp-navy); border-color:var(--lp-line); } .lp-btn-light:hover { border-color:var(--lp-navy); } .lp-btn-solid { background:var(--lp-navy); color:#fff; align-self:flex-start; } .lp-btn-solid:hover { background:var(--lp-navy2); } /* Sections */ .lp-section { padding:78px 0; } .lp-tint { background:var(--lp-cream2); border-block:1px solid var(--lp-line); } .lp-sage { background:var(--lp-sage); } .lp-head-c { text-align:center; max-width:720px; margin:0 auto 46px; } .lp-kicker { display:inline-block; letter-spacing:.24em; font-size:12px; font-weight:700; text-transform:uppercase; color:var(--lp-gold); margin-bottom:14px; } .lp-kicker-light { color:var(--lp-gold2); } .lp-h2 { font-family:var(--font-serif); font-weight:600; color:var(--lp-navy); font-size:clamp(26px,3.4vw,38px); line-height:1.2; margin-bottom:16px; } .lp-h2 em { font-style:italic; color:var(--lp-gold); font-weight:600; } .lp-h2-light { color:#fff; } .lp-h2-light em { color:var(--lp-gold2); } .lp-p { font-size:17px; color:var(--lp-muted); margin-bottom:18px; } .lp-quote { font-family:var(--font-serif); font-size:clamp(19px,2.4vw,24px); color:var(--lp-navy); line-height:1.7; margin-top:22px; font-style:italic; } .lp-sage .lp-kicker { color:#3f4b32; } .lp-sage .lp-quote, .lp-sage .lp-p { color:#26331c; } /* Check lists */ .lp-checks { list-style:none; display:grid; gap:14px; margin-top:22px; } .lp-checks li { display:flex; gap:12px; align-items:flex-start; font-size:16.5px; color:var(--lp-ink); } .lp-tick { flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--lp-sage-soft); color:#4a5a37; font-size:14px; font-weight:700; border:1px solid #cdd6bd; } /* Card grids */ .lp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .lp-grid-4 { grid-template-columns:repeat(4,1fr); } .lp-card { background:#fffdf7; border:1px solid var(--lp-line); border-radius:var(--radius-lg); padding:30px 26px; box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s; } .lp-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); } .lp-card-ic { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:26px; background:var(--lp-sage-soft); margin-bottom:18px; color:var(--lp-navy); border:1px solid #cdd6bd; } .lp-card-ic .ico-svg { width:26px; height:26px; } .lp-card h3, .lp-help-card h3, .lp-contact-card h3 { font-family:var(--font-serif); font-weight:600; font-size:21px; color:var(--lp-navy); margin-bottom:10px; } .lp-card p, .lp-help-card p { color:var(--lp-muted); font-size:15px; line-height:1.6; } .lp-help-card { display:flex; flex-direction:column; background:#fffdf7; border:1px solid var(--lp-line); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow-sm); } .lp-help-card p { flex:1; margin-bottom:18px; } /* Impact — navy band */ .lp-impact { background:var(--lp-navy); } .lp-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; } .lp-stat { text-align:center; padding:24px 12px; border:1px solid rgba(217,180,95,.28); border-radius:var(--radius-lg); background:rgba(255,255,255,.03); } .lp-stat-n { font-family:var(--font-serif); font-weight:700; font-size:clamp(28px,4vw,40px); color:var(--lp-gold2); line-height:1; margin-bottom:10px; } .lp-stat-l { color:#c7cfd8; font-size:13.5px; line-height:1.45; } /* FAQ */ .lp-faq { background:#fffdf7; border:1px solid var(--lp-line); border-radius:var(--radius); margin-bottom:12px; overflow:hidden; } .lp-faq summary { cursor:pointer; padding:18px 22px; font-weight:600; font-size:16.5px; color:var(--lp-navy); list-style:none; position:relative; } .lp-faq summary::-webkit-details-marker { display:none; } .lp-faq summary::after { content:'+'; position:absolute; inset-inline-end:22px; top:50%; transform:translateY(-50%); font-size:22px; color:var(--lp-gold); font-weight:400; } .lp-faq[open] summary::after { content:'\2013'; } .lp-faq p { padding:0 22px 20px; color:var(--lp-muted); font-size:15.5px; } /* Contact */ .lp-contact { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .lp-contact-card { display:block; text-align:center; text-decoration:none; background:#fffdf7; border:1px solid var(--lp-line); border-radius:var(--radius-lg); padding:30px 22px; box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s; } .lp-contact-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); } .lp-contact-card .lp-card-ic { margin:0 auto 16px; } .lp-contact-card p { color:var(--lp-ink); font-size:16px; font-weight:600; } /* Final — navy */ .lp-final { padding:88px 0; text-align:center; background:var(--lp-navy); } .lp-final-sub { color:#c7cfd8; font-size:18px; max-width:640px; margin:0 auto 32px; } /* Rabbinical guidance — one box per rav */ .lp-rabbis { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:18px; max-width:1000px; margin:0 auto; } .lp-rabbi-card { background:var(--surface,#fff); border:1px solid var(--line,#e2e0d2); border-radius:16px; padding:26px 18px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; box-shadow:0 2px 10px rgba(20,30,15,.05); transition:transform .15s ease, box-shadow .15s ease; } .lp-rabbi-card:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(20,30,15,.10); } .lp-rabbi-photo, .lp-rabbi-mono { width:104px; height:104px; border-radius:50%; object-fit:cover; } .lp-rabbi-photo { border:3px solid var(--lp-gold2,#c49a3f); background:#eef1e7; } .lp-rabbi-mono { display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:700; color:#3c5a2b; background:linear-gradient(140deg,#eef1e7,#dfe4d3); border:3px solid var(--lp-gold2,#c49a3f); letter-spacing:1px; } .lp-rabbi-name { font-weight:700; color:#26301c; font-size:16px; line-height:1.3; } /* Footer — navy */ .lp-footer { background:#313d22; color:#9fb0c4; padding:24px 0; } .lp-foot-in { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14px; } .lp-foot-sign { text-align:center; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); } .tyh-mark { font-family:'Yellowtail', cursive; font-size:2.4rem; line-height:1; color:#e2e8f0; text-shadow:0 1px 2px rgba(0,0,0,.35); user-select:none; } .tyh-mark sup { font-size:.9rem; vertical-align:super; } .tyh-copy { margin-top:.35rem; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:#c8cdba; } .lp-foot-login { background:none; border:none; color:var(--lp-gold2); font:inherit; cursor:pointer; font-weight:600; } .lp-foot-login:hover { text-decoration:underline; } .lp-foot-legal { display:inline-flex; align-items:center; gap:8px; } .lp-foot-legal a { color:var(--lp-gold2); text-decoration:none; font-weight:600; } .lp-foot-legal a:hover { text-decoration:underline; } .lp-foot-legal span { color:#6b7688; } /* Back-to-site link on the login card */ .auth-back { display: inline-block; margin-bottom: 14px; color: var(--brand-600); font-size: 14px; cursor: pointer; text-decoration: none; font-weight: 600; } .auth-back:hover { text-decoration: underline; } /* Responsive */ @media (max-width: 900px) { .lp-grid, .lp-grid-4 { grid-template-columns: repeat(2, 1fr); } .lp-stats { grid-template-columns: repeat(2, 1fr); } .lp-contact { grid-template-columns: 1fr; } } @media (max-width: 560px) { .lp-grid, .lp-grid-4, .lp-stats { grid-template-columns: 1fr; } .lp-hero-grid { grid-template-columns: 1fr; min-height: 0; padding: 54px 0 60px; gap: 8px; } .lp-hero-art { display: none; } .lp-hero .lp-lead, .lp-hero-text { max-width: none; } .lp-section { padding: 56px 0; } .lp-btn { width: 100%; } .lp-brand-name { font-size: 18px; } } /* ============================================================ Landing — editorial refinements (ornaments, gold italic accents) ============================================================ */ .lp-orn { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px auto 2px; } .lp-orn-line { width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--lp-gold)); } .lp-orn-line:last-child { background: linear-gradient(90deg, var(--lp-gold), transparent); } .lp-orn-gem { width: 9px; height: 9px; background: var(--lp-gold); transform: rotate(45deg); box-shadow: 0 0 0 4px rgba(196,154,63,.14); flex: none; } .lp-orn.dark .lp-orn-line { background: linear-gradient(90deg, transparent, var(--lp-gold2)); } .lp-orn.dark .lp-orn-line:last-child { background: linear-gradient(90deg, var(--lp-gold2), transparent); } .lp-orn.dark .lp-orn-gem { background: var(--lp-gold2); box-shadow: 0 0 0 4px rgba(217,180,95,.2); } /* Gold italic accent inside serif headings */ .lp-h2 em { font-style: italic; color: var(--gold-600); font-weight: 600; } .lp-h2-light em { color: #d8b25f; } /* Slightly larger, more elegant impact numbers */ .lp-stat-n { letter-spacing: -.02em; } /* Boot splash — shown until auth state is known (prevents app flash) */ #boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #f6f1e6; } .boot-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(22,38,63,.15); border-top-color: #c49a3f; animation: bootspin .8s linear infinite; } @keyframes bootspin { to { transform: rotate(360deg); } } /* ============================================================ Installed-app (PWA) polish — iPhone safe areas & native feel ============================================================ */ * { -webkit-tap-highlight-color: transparent; } html { -webkit-text-size-adjust: 100%; } body { overscroll-behavior-y: none; } @supports (padding: max(0px)) { .topbar { padding-top: max(16px, env(safe-area-inset-top)); } .lp-header { padding-top: env(safe-area-inset-top); } .sidebar { padding-top: max(22px, calc(env(safe-area-inset-top) + 14px)); } .content { padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 40px)); } .lp-footer { padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px)); } .lp-final { padding-bottom: max(88px, calc(env(safe-area-inset-bottom) + 70px)); } .drawer-body, .modal-body { padding-bottom: max(22px, calc(env(safe-area-inset-bottom) + 16px)); } } /* ============================================================ Systems hub (post-login chooser) ============================================================ */ #hub { display:none; position:fixed; inset:0; z-index:80; background:var(--bg); color:var(--ink-900); overflow-y:auto; -webkit-overflow-scrolling:touch; } .hub-inner { min-height:100%; display:flex; flex-direction:column; max-width:960px; margin:0 auto; padding:22px clamp(18px,5vw,40px); } .hub-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:max(6px, env(safe-area-inset-top)); } .hub-logo { height:44px; width:auto; object-fit:contain; } .hub-head-right { display:flex; align-items:center; gap:14px; } .hub-user { font-size:13.5px; color:var(--ink-500); } .hub-signout { background:none; border:1px solid var(--line); color:var(--ink-700); padding:7px 14px; border-radius:999px; font:inherit; font-size:13px; cursor:pointer; } .hub-signout:hover { background:var(--surface-2); } .hub-main { flex:1; display:flex; flex-direction:column; justify-content:center; padding:40px 0; } .hub-title { font-family:var(--font-serif); font-size:clamp(28px,5vw,40px); font-weight:600; color:var(--brand-700); margin:0 0 6px; } .hub-lead { color:var(--ink-500); font-size:16px; margin:0 0 30px; } .hub-tiles { display:grid; gap:18px; grid-template-columns:1fr; max-width:640px; } .hub-tile { display:flex; align-items:center; gap:18px; text-align:left; width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px 22px; cursor:pointer; font:inherit; color:inherit; box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s, border-color .15s; } .hub-tile:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--brand-200); } .hub-tile-ic { flex:none; width:64px; height:64px; border-radius:16px; display:grid; place-items:center; background:var(--brand-50); color:var(--brand-600); } .hub-tile-body { flex:1; display:flex; flex-direction:column; gap:4px; } .hub-tile-title { font-family:var(--font-serif); font-size:20px; font-weight:600; color:var(--ink-900); } .hub-badge { font-family:var(--font); font-style:normal; font-size:11px; font-weight:600; color:var(--gold-600); background:var(--warn-bg); padding:2px 8px; border-radius:999px; margin-left:6px; } .hub-tile-sub { color:var(--ink-500); font-size:14px; } .hub-tile-go { flex:none; color:var(--brand-400); } .hub-foot { text-align:center; color:var(--ink-400); font-size:12.5px; padding-bottom:max(10px, env(safe-area-inset-bottom)); } /* ============================================================ Shidduch system shell ============================================================ */ #shapp { display:none; position:fixed; inset:0; z-index:70; background:var(--bg); color:var(--ink-900); } .sh-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; } .sh-loading p { color:var(--ink-500); } .sh-side { width:var(--sidebar-w); flex:none; background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:18px 14px; padding-top:max(18px, env(safe-area-inset-top)); } .sh-brand { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:4px 8px 18px; } .sh-brand-logo { height:42px; width:auto; max-width:100%; object-fit:contain; } :root[data-theme="dark"] .sh-brand-logo { background:#fff; padding:4px 7px; border-radius:9px; } .sh-brand-mark { width:38px; height:38px; object-fit:contain; } .sh-brand-name { font-family:var(--font-serif); font-weight:600; font-size:18px; color:var(--brand-700); } .sh-brand-sub { font-size:12px; color:var(--ink-400); } .sh-nav { display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; } .sh-nav-item { display:flex; align-items:center; gap:8px; padding:11px 14px; border-radius:var(--radius-sm); color:var(--ink-700); font-weight:500; font-size:14.5px; cursor:pointer; text-decoration:none; } .sh-nav-item:hover { background:var(--surface-2); } .sh-nav-item.active { background:var(--brand-50); color:var(--brand-700); font-weight:600; } .sh-soon-tag { font-style:normal; font-size:10px; margin-left:auto; color:var(--ink-400); background:var(--line-soft); padding:1px 7px; border-radius:999px; } .sh-side-foot { flex:none; border-top:1px solid var(--line-soft); padding-top:14px; margin-top:10px; display:flex; flex-direction:column; gap:10px; padding-bottom:env(safe-area-inset-bottom, 0px); } .sh-hubbtn { background:var(--surface-2); border:1px solid var(--line); color:var(--ink-700); padding:10px; border-radius:var(--radius-sm); font:inherit; font-size:13.5px; cursor:pointer; } .sh-hubbtn:hover { background:var(--brand-50); color:var(--brand-700); } .sh-role { font-size:12px; color:var(--ink-400); text-align:center; text-transform:capitalize; } .sh-main { flex:1; display:flex; flex-direction:column; min-width:0; } .sh-top { display:flex; align-items:center; gap:12px; padding:16px clamp(16px,3vw,28px); padding-top:max(16px, env(safe-area-inset-top)); border-bottom:1px solid var(--line); background:var(--surface); } .sh-top h1 { font-family:var(--font-serif); font-size:20px; font-weight:600; margin:0; } .sh-menu { display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink-700); } .sh-content { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:clamp(16px,3vw,26px); padding-bottom:max(40px, calc(env(safe-area-inset-bottom) + 30px)); } .sh-scrim { display:none; } /* Toolbar */ .sh-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:14px; } .sh-search { flex:1 1 240px; min-width:0; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:9px 16px; color:var(--ink-400); } .sh-search input { flex:1; min-width:0; border:none; background:none; font:inherit; font-size:14.5px; color:var(--ink-900); outline:none; } .sh-selects { display:flex; gap:10px; flex-wrap:wrap; } .sh-selects label { display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--ink-400); text-transform:uppercase; letter-spacing:.04em; } .sh-selects select { border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-sm); padding:8px 10px; font:inherit; font-size:14px; color:var(--ink-900); cursor:pointer; } .sh-count { font-size:13px; color:var(--ink-400); margin-bottom:12px; } /* List rows */ .sh-listwrap { } .sh-list { display:flex; flex-direction:column; gap:8px; } .sh-group { margin-bottom:22px; } .sh-group-head { font-family:var(--font-serif); font-size:15px; font-weight:600; color:var(--brand-700); margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:8px; } .sh-group-head em { font-style:normal; font-size:12px; font-weight:500; color:var(--ink-400); background:var(--surface-2); padding:1px 9px; border-radius:999px; } .sh-row { display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 15px; cursor:pointer; font:inherit; color:inherit; transition:border-color .12s, box-shadow .12s; } .sh-row:hover { border-color:var(--brand-200); box-shadow:var(--shadow-sm); } .sh-row-static { cursor:default; } .sh-row-static:hover { border-color:var(--line); box-shadow:none; } .sh-av { flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:600; font-size:14px; } .sh-row-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .sh-row-name { font-weight:600; font-size:15px; color:var(--ink-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sh-row-meta { font-size:13px; color:var(--ink-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sh-row-tags { display:flex; align-items:center; gap:8px; flex:none; } /* Volunteers: list / table view toggle + table */ .sh-vtoggle { display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; } .sh-vtoggle button { border:none; background:var(--surface); color:var(--ink-500); font:inherit; font-size:12.5px; font-weight:600; padding:7px 12px; cursor:pointer; } .sh-vtoggle button + button { border-left:1px solid var(--line); } .sh-vtoggle button.on { background:var(--brand); color:#fff; } .sh-vtable-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px; -webkit-overflow-scrolling:touch; } .sh-vtable { width:100%; border-collapse:collapse; font-size:14px; background:var(--surface); } .sh-vtable th { text-align:left; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-400); font-weight:700; padding:11px 14px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; } .sh-vtable td { padding:11px 14px; border-bottom:1px solid var(--line-soft); color:var(--ink-900); white-space:nowrap; } .sh-vtable tbody tr:last-child td { border-bottom:none; } .sh-vrow { cursor:pointer; } .sh-vrow:hover td { background:var(--surface-2); } .sh-pill-yes { color:#2f6b3a; font-weight:800; } .sh-callcount { font-size:12px; color:var(--ink-400); white-space:nowrap; } .sh-pill { font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap; } .sh-st-green { background:var(--success-bg); color:var(--success-fg); } .sh-st-amber { background:var(--warn-bg); color:var(--warn-fg); } .sh-st-red { background:var(--danger-bg); color:var(--danger-fg); } .sh-st-gold { background:#f6ecd2; color:var(--gold-600); } .sh-st-grey { background:var(--line-soft); color:var(--ink-500); } .sh-st-plain { background:var(--info-bg); color:var(--info-fg); } .sh-empty, .sh-muted { color:var(--ink-400); font-size:14px; padding:16px 2px; } .sh-muted { padding:8px 0; } /* Profile drawer */ .sh-prof-head { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; } .sh-prof-grid { display:grid; grid-template-columns:1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; margin-bottom:22px; } .sh-f { display:flex; justify-content:space-between; gap:16px; padding:11px 14px; background:var(--surface); align-items:flex-start; } .sh-f-l { color:var(--ink-500); font-size:13px; flex:0 0 auto; max-width:45%; } .sh-f-v { color:var(--ink-900); font-size:14px; font-weight:500; text-align:right; flex:1 1 auto; min-width:0; overflow-wrap:anywhere; word-break:break-word; } .sh-link { color:var(--brand-600); text-decoration:none; } .sh-link:hover { text-decoration:underline; } .sh-sec { margin-bottom:22px; } .sh-sec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .sh-sec-head h4 { font-family:var(--font-serif); font-size:16px; font-weight:600; margin:0; } .sh-mini { background:var(--brand-600); color:#fff; border:none; padding:7px 14px; border-radius:var(--radius-sm); font:inherit; font-size:13px; font-weight:600; cursor:pointer; } .sh-mini:hover { background:var(--brand-700); } .sh-call { display:flex; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-soft); } .sh-call:last-child { border-bottom:none; } .sh-call-seq { flex:none; width:26px; height:26px; border-radius:50%; background:var(--brand-50); color:var(--brand-700); display:grid; place-items:center; font-size:12px; font-weight:700; } .sh-call-by { font-weight:600; font-size:14px; } .sh-call-date { font-size:12.5px; color:var(--ink-400); } .sh-note { padding:10px 12px; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--radius-sm); margin-bottom:8px; } .sh-note-text { font-size:14px; color:var(--ink-900); white-space:pre-wrap; } .sh-note-meta { font-size:12px; color:var(--ink-400); margin-top:5px; } .sh-note-add { display:flex; gap:8px; align-items:flex-end; margin-top:10px; } .sh-note-add textarea { flex:1; border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 11px; font:inherit; font-size:14px; resize:vertical; color:var(--ink-900); background:var(--surface); } /* Coming soon */ .sh-soon { text-align:center; max-width:420px; margin:60px auto; color:var(--ink-500); } .sh-soon-ic { width:70px; height:70px; margin:0 auto 16px; border-radius:50%; background:var(--brand-50); color:var(--brand-500); display:grid; place-items:center; } .sh-soon h3 { font-family:var(--font-serif); color:var(--ink-900); margin:0 0 8px; } @media (max-width:820px) { .sh-side { position:fixed; inset:0 auto 0 0; z-index:5; transform:translateX(-100%); transition:transform .25s; box-shadow:var(--shadow-lg); } #shapp.nav-open .sh-side { transform:translateX(0); } #shapp.nav-open .sh-scrim { display:block; position:fixed; inset:0; z-index:4; background:rgba(20,30,15,.4); } .sh-menu { display:block; } /* Narrow screens: stack label above value so long values never clip. */ .sh-f { flex-direction:column; gap:3px; } .sh-f-l { max-width:100%; } .sh-f-v { text-align:left; max-width:100%; } } /* Shidduch — profile edit + richer notes */ .sh-prof-head { display:flex; align-items:center; justify-content:space-between; gap:10px; } .sh-prof-pills { display:flex; gap:8px; flex-wrap:wrap; } .sh-editbtn { display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line); color:var(--brand-700); padding:7px 13px; border-radius:var(--radius-sm); font:inherit; font-size:13px; font-weight:600; cursor:pointer; } .sh-editbtn:hover { background:var(--brand-50); border-color:var(--brand-200); } .sh-mini-ghost { background:var(--surface); color:var(--brand-700); border:1px solid var(--line); } .sh-mini-ghost:hover { background:var(--brand-50); } .sh-mini { display:inline-flex; align-items:center; justify-content:center; gap:6px; } .sh-edit-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; } .sh-edit-grid .field { margin:0; } .sh-check { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:14px; color:var(--ink-700); cursor:pointer; } .sh-check input { width:16px; height:16px; } @media (max-width:560px){ .sh-edit-grid { grid-template-columns:1fr; } } .ed-exrow { display:flex; gap:8px; align-items:flex-start; margin-bottom:8px; } .ed-exlabel { flex:0 0 34%; font-size:12.5px; color:var(--ink-500,#667085); padding-top:9px; word-break:break-word; } .ed-exrow .ed-exval { flex:1; min-width:0; } .ed-exrow .ed-exkey { flex:0 0 34%; min-width:0; } .ed-exdel { flex:none; background:none; border:none; color:var(--ink-400,#9aa1ab); cursor:pointer; font-size:15px; line-height:1; padding:9px 5px; border-radius:6px; } .ed-exdel:hover { color:#c5453a; background:rgba(197,69,58,.09); } @media (max-width:560px){ .ed-exrow { flex-wrap:wrap; } .ed-exlabel, .ed-exrow .ed-exkey { flex:1 1 100%; } } /* Notes cards (author + timestamp + delete) */ .sh-note { padding:11px 13px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:9px; } .sh-note-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; } .sh-note-when { font-size:12px; color:var(--ink-400); flex:1; } .sh-note-author { flex:none; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--brand-700); background:var(--brand-50); border-radius:999px; padding:3px 9px; } .sh-note-del { flex:none; background:none; border:none; color:var(--ink-400); font-size:18px; line-height:1; cursor:pointer; padding:0 2px; border-radius:6px; } .sh-note-del:hover { color:var(--danger-fg); background:var(--danger-bg); } .sh-note-add textarea { min-height:44px; } /* Request full access (shadchan home) */ .sh-reqacc-wrap { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:6px 0 4px; } .sh-reqacc { background:var(--brand-600, #3c5a2b); color:#fff; border:none; border-radius:999px; padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer; } .sh-reqacc:hover:not(:disabled) { filter:brightness(1.08); } .sh-reqacc:disabled { opacity:.7; cursor:default; } .sh-reqacc-note { font-size:12.5px; color:var(--ink-400); } .sh-reqacc-modal-backdrop { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(25,32,20,.42); } .sh-reqacc-modal { width:min(440px,100%); box-sizing:border-box; background:var(--surface,#fff); border:1px solid var(--line,#e3e5dd); border-radius:16px; padding:22px; box-shadow:0 18px 55px rgba(20,30,15,.25); } .sh-reqacc-modal h3 { margin:0 0 7px; color:var(--ink-900,#25301f); } .sh-reqacc-modal-note { margin:0 0 12px; color:var(--ink-500,#68705f); font-size:13px; line-height:1.45; } .sh-reqacc-modal textarea { width:100%; box-sizing:border-box; resize:vertical; min-height:92px; padding:10px; border:1px solid var(--line,#e3e5dd); border-radius:9px; font:inherit; color:var(--ink-900,#25301f); } .sh-reqacc-modal-count { text-align:right; color:var(--ink-400,#8a8f7d); font-size:11px; margin-top:4px; } .sh-reqacc-modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; } /* My notes (private per-user) */ .pn-compose { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin-bottom:18px; } .pn-text { width:100%; box-sizing:border-box; resize:vertical; min-height:64px; } .pn-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; } .pn-field { flex:1 1 220px; min-width:200px; } .pn-lab { display:block; font-size:12px; font-weight:600; color:var(--ink-400); margin-bottom:5px; } .pn-fileinput { width:100%; box-sizing:border-box; font-size:13px; } .pn-actions { margin-top:12px; display:flex; justify-content:flex-end; } .pn-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; align-items:center; } .pn-subj { font-size:12.5px; border:1px solid var(--line-soft); background:var(--surface-2); color:var(--ink-700); border-radius:999px; padding:4px 11px; } .pn-fileopen { font-size:12.5px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-900); border-radius:999px; padding:4px 11px; cursor:pointer; } .pn-fileopen:hover { border-color:var(--brand-400); color:var(--brand-700); } .sh-note-edit { flex:none; background:none; border:none; color:var(--ink-400); font-size:14px; line-height:1; cursor:pointer; padding:0 4px; border-radius:6px; } .sh-note-edit:hover { color:var(--brand-700); background:var(--brand-50); } .sh-note.pn-editing { background:var(--surface-2); } .sh-note.pn-editing .pn-text { width:100%; box-sizing:border-box; resize:vertical; min-height:60px; } .pn-curfile { font-size:12.5px; color:var(--ink-700); margin-bottom:6px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .pn-rm { font-size:12px; color:var(--ink-500); display:inline-flex; gap:4px; align-items:center; cursor:pointer; } .pn-hint { font-size:11.5px; color:var(--ink-400); margin-top:4px; } .sh-note.pn-editing .pn-actions { gap:8px; } /* Edit card — single flowing column in intake-form order */ .ed-flow .field { margin-bottom:12px; } .ed-flow .field > .input, .ed-flow .field input, .ed-flow .field select, .ed-flow .field textarea { width:100%; } .ed-sec-h { margin:22px 0 8px; padding-bottom:5px; border-bottom:2px solid var(--brand,#3c5a2b); } .ed-sec-h:first-child { margin-top:2px; } .ed-sec-h h4 { margin:0; font-size:15px; color:var(--brand,#3c5a2b); font-weight:700; } .ed-sec-note { display:block; font-size:12px; color:var(--ink-400,#8a8f7d); margin-top:3px; } /* Type-to-search single picker (suggestions) */ .sp-pick { position:relative; } .sp-menu { position:absolute; z-index:50; left:0; right:0; top:calc(100% + 4px); max-height:280px; overflow-y:auto; background:var(--surface,#fff); border:1px solid var(--line,#e3e5dd); border-radius:10px; box-shadow:0 12px 30px rgba(20,30,15,.16); } .sp-opt { padding:9px 12px; font-size:14px; cursor:pointer; border-bottom:1px solid var(--line,#eee4d0); } .sp-opt:last-child { border-bottom:0; } .sp-opt:hover { background:var(--brand-50,#eef2e8); } .sp-opt-none { color:var(--ink-400,#8a8f7d); font-style:italic; } .sp-opt-empty { color:var(--ink-400,#8a8f7d); cursor:default; } .sp-opt-empty:hover { background:none; } /* Shift notes — structured staff activity log */ .sn-form { display:flex; flex-direction:column; gap:8px; background:var(--surface-2, #f4f5f0); border:1px solid var(--line, #e3e5dd); border-radius:12px; padding:12px; margin-bottom:14px; } .sn-form-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .sn-form-row > .input { flex:1; min-width:150px; } .sn-form-row > .btn { flex:none; } .sn-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; } .sn-filter { border:1px solid var(--line, #e3e5dd); background:var(--surface, #fff); color:var(--ink-500, #555); border-radius:999px; padding:5px 12px; font-size:13px; font-weight:600; cursor:pointer; } .sn-filter.active { background:var(--brand-700, #3c5a2b); color:#fff; border-color:var(--brand-700, #3c5a2b); } .sn-fc { opacity:.7; font-weight:700; margin-left:2px; } .sn-item { border:1px solid var(--line, #e3e5dd); border-radius:12px; padding:10px 12px; margin-bottom:8px; background:var(--surface, #fff); } .sn-item-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; } .sn-type { flex:none; font-size:12px; font-weight:600; background:var(--brand-50, #eef2e8); color:var(--brand-700, #3c5a2b); border-radius:999px; padding:3px 10px; } .sn-status { flex:none; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-radius:999px; padding:2px 8px; color:#fff; } .sh-ss-follow { background:#c0632b; } .sh-ss-done { background:#3c5a2b; } .sh-ss-urgent { background:#c0392b; } .sh-note-when { flex:none; margin-left:auto; font-size:12px; color:var(--ink-400); } .sh-note-single { flex:0 1 auto; min-width:0; font-weight:600; color:var(--brand-700); cursor:pointer; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:45%; } .sh-note-single:hover { text-decoration:underline; } .sn-edit { flex:none; background:none; border:none; color:var(--ink-400); font-size:14px; cursor:pointer; padding:0 2px; } .sn-edit:hover { color:var(--brand-700); } .sn-followup { margin-top:6px; padding:8px 10px; background:var(--surface-2, #f4f5f0); border-radius:8px; font-size:13px; } .sn-fl-l { font-weight:700; color:var(--brand-700, #3c5a2b); margin-right:4px; } /* Shidduch — photo gallery */ .sh-photos { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px,1fr)); gap:9px; } .sh-photo { position:relative; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line); background:var(--surface-2); } .sh-photo img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; } .sh-photo-broken { width:100%; height:100%; display:grid; place-items:center; color:var(--ink-400); font-size:20px; } .sh-photo-del { position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%; border:none; background:rgba(20,24,16,.6); color:#fff; font-size:16px; line-height:1; cursor:pointer; display:grid; place-items:center; } .sh-photo-del:hover { background:var(--danger-fg); } /* Documents / files list */ .sh-file { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); margin-bottom:7px; } .sh-file-ic { font-size:18px; line-height:1; flex:none; } .sh-file-name { flex:1; min-width:0; font-size:13.5px; color:var(--brand-600); font-weight:600; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } a.sh-file-name:hover { text-decoration:underline; } .sh-file-del { flex:none; width:24px; height:24px; border-radius:50%; border:none; cursor:pointer; background:rgba(20,24,16,.12); color:var(--ink-500); font-size:16px; line-height:1; display:grid; place-items:center; } .sh-file-del:hover { background:var(--danger-fg); color:#fff; } button.sh-file-name { background:none; border:none; padding:0; text-align:left; cursor:pointer; } button.sh-file-name:hover { text-decoration:underline; } /* In-app document preview (PDF / image) */ .sh-docview { position:fixed; inset:0; z-index:410; display:flex; flex-direction:column; background:rgba(10,12,10,.92); } .sh-dv-bar { display:flex; align-items:center; gap:10px; padding:10px 14px; padding-top:max(10px, env(safe-area-inset-top)); background:#2b2e30; color:#fff; } .sh-dv-title { flex:1; min-width:0; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sh-dv-share { flex:none; display:inline-flex; align-items:center; gap:6px; color:#fff; border:none; background:rgba(255,255,255,.16); padding:7px 13px; border-radius:7px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; } .sh-dv-share:hover { background:rgba(255,255,255,.28); } .sh-dv-x { flex:none; width:38px; height:38px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; font-size:18px; line-height:1; cursor:pointer; display:grid; place-items:center; } .sh-dv-x:hover { background:rgba(255,255,255,.28); } .sh-dv-body { flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:14px; padding-bottom:max(14px, env(safe-area-inset-bottom)); } .sh-dv-frame { width:100%; height:100%; border:0; background:#fff; border-radius:6px; } .sh-dv-img { max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; margin:auto; } .sh-dv-pages { display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; } .sh-dv-canvas { background:#fff; border-radius:4px; box-shadow:0 6px 24px rgba(0,0,0,.4); max-width:100%; } .sh-dv-msg { color:#fff; font-size:14px; text-align:center; margin:auto; line-height:1.5; } .sh-dv-msg b { text-decoration:underline; } .sh-dv-doc { background:#fff; color:#1c2431; width:100%; max-width:820px; border-radius:6px; box-shadow:0 6px 24px rgba(0,0,0,.4); padding:36px 40px; font-family:'Source Sans 3',sans-serif; font-size:15px; line-height:1.6; } .sh-dv-doc h1, .sh-dv-doc h2, .sh-dv-doc h3 { font-family:'Lora',Georgia,serif; margin:.6em 0 .3em; } .sh-dv-doc p { margin:0 0 .6em; } .sh-dv-doc img { max-width:100%; height:auto; } .sh-dv-doc table { border-collapse:collapse; width:100%; } .sh-dv-doc td, .sh-dv-doc th { border:1px solid #e5e1d7; padding:6px 8px; } /* Centred image viewer (lightbox) */ .sh-lightbox { position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; background:rgba(10,12,10,.86); padding:24px; padding-top:max(24px, env(safe-area-inset-top)); padding-bottom:max(24px, env(safe-area-inset-bottom)); animation:shLbIn .16s ease; } @keyframes shLbIn { from { opacity:0; } to { opacity:1; } } .sh-lb-img { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; box-shadow:0 12px 48px rgba(0,0,0,.5); } .sh-lb-x { position:fixed; top:max(14px, env(safe-area-inset-top)); right:16px; width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; } .sh-lb-x:hover { background:rgba(255,255,255,.28); } .sh-mini input[type=file] { display:none; } .sh-mini label, label.sh-mini { cursor:pointer; } /* Shidduch — profile actions + gender colours already inline */ .sh-prof-actions { display:flex; gap:8px; } /* ---- PDF export: on-screen preview + print ---- */ #shPrint { display:none; } body.sh-preview { overflow:hidden; } body.sh-preview #shPrint { display:block; position:fixed; inset:0; z-index:150; background:#4b4f52; overflow-y:auto; -webkit-overflow-scrolling:touch; } .pr-bar { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px; background:#2b2e30; color:#fff; padding:10px 14px; padding-top:max(10px, env(safe-area-inset-top)); } .pr-bar-title { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; text-align:center; } .pr-btn { background:var(--brand-500); color:#fff; border:none; padding:9px 14px; border-radius:8px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; } .pr-btn:hover { background:var(--brand-600); } .pr-btn-ghost { background:rgba(255,255,255,.14); } .pr-seg { display:inline-flex; background:rgba(255,255,255,.12); border-radius:9px; padding:3px; gap:2px; } .pr-seg-b { background:transparent; color:rgba(255,255,255,.75); border:none; padding:6px 13px; border-radius:7px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .15s,color .15s; } .pr-seg-b:hover { color:#fff; } .pr-seg-b.on { background:#fff; color:#1c2431; } .pr-scroll { padding:20px; display:flex; justify-content:center; } .pr-page { font-family:'Lora', Georgia, serif; color:#1c2431; background:#fff; width:100%; max-width:720px; font-size:13px; line-height:1.3; padding:26px 30px; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.35); } @media print { html, body.sh-preview { overflow:visible !important; height:auto !important; background:#fff !important; } body.sh-preview > *:not(#shPrint) { display:none !important; } body.sh-preview #shPrint { position:static !important; inset:auto !important; display:block !important; background:#fff; overflow:visible !important; height:auto !important; } .pr-bar { display:none !important; } .pr-scroll { padding:0 !important; display:block !important; overflow:visible !important; height:auto !important; } #prBody { display:block !important; } .pr-page { box-shadow:none; border-radius:0; max-width:none; padding:0; } @page { size:A4; margin:16mm 14mm; } } .pr-page-legacy { font-family:'Lora', Georgia, serif; color:#1c2431; max-width:720px; margin:0 auto; } .pr-topline { display:flex; align-items:baseline; justify-content:space-between; font-family:'Source Sans 3',sans-serif; font-size:.78em; color:#6b7280; margin-bottom:.5em; } .pr-bsd { font-family:'Lora',Georgia,serif; font-size:1.15em; color:#1c2431; } .pr-top { display:flex; align-items:flex-start; justify-content:space-between; border-bottom:2px solid #2f6bd4; padding-bottom:.45em; margin-bottom:.55em; } .pr-org { font-size:1.35em; font-weight:700; } .pr-kicker { font-family:'Source Sans 3',sans-serif; font-size:.7em; letter-spacing:.12em; text-transform:uppercase; color:#8a8f7d; margin-top:1px; } .pr-logo { height:2.4em; width:auto; object-fit:contain; } .pr-name { font-size:1.5em; font-weight:700; margin:0 0 .1em; line-height:1.1; } .pr-stamp { font-family:'Source Sans 3',sans-serif; font-size:.72em; color:#8a8f7d; text-align:right; margin:-.15em 0 .15em; } .pr-headrow { display:flex; justify-content:space-between; gap:1em; align-items:flex-start; } .pr-headmain { flex:1; min-width:0; } .pr-headphoto .pr-photos { margin:0; } .pr-sub { font-family:'Source Sans 3',sans-serif; font-size:.95em; color:#4b5563; margin:0 0 .35em; } .pr-tags { display:flex; gap:.5em; flex-wrap:wrap; margin-bottom:.5em; } .pr-tag { font-family:'Source Sans 3',sans-serif; font-size:.8em; font-weight:600; color:#fff; padding:.12em .8em; border-radius:999px; } .pr-tag-o { background:#eef1e8; color:#3c5a2b; } .pr-photos { display:flex; flex-wrap:wrap; gap:.4em; margin-bottom:.5em; } .pr-photos img { width:8em; height:10em; object-fit:cover; border-radius:6px; border:1px solid #e5e1d7; } .pr-tbl { width:100%; border-collapse:collapse; font-family:'Source Sans 3',sans-serif; } .pr-tbl td { padding:.2em .3em; border-bottom:1px solid #eee4d0; vertical-align:top; line-height:1.28; } .pr-l { width:31%; color:#98a0ad; font-size:.78em; font-weight:400; padding-top:.42em; } .pr-v { color:#1c2431; font-weight:500; font-size:.92em; white-space:pre-line; } .pr-li { margin:0 0 .12em; } .pr-sec { margin-top:.6em; } .pr-sec h3 { font-size:1em; font-weight:700; margin:0 0 .25em; border-bottom:1.5px solid #eee4d0; padding-bottom:.12em; text-transform:uppercase; letter-spacing:.02em; } .pr-list { margin:0; padding-left:1.05em; } .pr-list li { margin:0 0 .1em; } .pr-para { font-family:'Source Sans 3',sans-serif; font-size:.92em; line-height:1.38; color:#1c2431; white-space:pre-wrap; margin:0; } .pr-note { font-family:'Source Sans 3',sans-serif; font-size:13px; padding:6px 0; border-bottom:1px solid #f2ecdd; } .pr-note-m { color:#8a8f7d; font-size:11px; margin-bottom:2px; } .pr-foot { margin-top:.8em; padding-top:.4em; border-top:1px solid #e5e1d7; font-family:'Source Sans 3',sans-serif; font-size:.7em; color:#8a8f7d; text-align:center; } /* Shidduch — suggestions & mazal tov cards */ .sh-sug { display:block; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px; cursor:pointer; font:inherit; color:inherit; transition:border-color .12s, box-shadow .12s; } .sh-sug:hover { border-color:var(--brand-200); box-shadow:var(--shadow-sm); } .sh-sug-top { display:flex; align-items:center; justify-content:space-between; gap:10px; } .sh-sug-pair { font-size:15px; } .sh-m { color:#2b6f92; } .sh-f { color:#c05c86; } .sh-amp { color:var(--ink-400); margin:0 4px; font-weight:400; } .sh-heart { color:#d1495b; margin:0 5px; } .sh-sug-meta { font-size:12.5px; color:var(--ink-500); margin-top:5px; } .sh-sug-ans { display:flex; flex-direction:column; gap:3px; margin-top:8px; font-size:13px; color:var(--ink-700); } .sh-sug-ans span { display:block; } .sh-mazal { background:linear-gradient(180deg, #fbf6e9, var(--surface)); } /* Shidduch — extra info chips on each single row */ .sh-row-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; } .sh-chip { font-size:11px; color:var(--ink-600, #55604a); background:var(--surface-2); border:1px solid var(--line-soft); padding:2px 8px; border-radius:6px; white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis; } .sh-chip-bg { background:#eef2e6; color:#4c5a37; border-color:#e0e7d2; } .sh-chip-lw { background:#eef1f6; color:#3f5170; border-color:#dde3ef; } @media (max-width:640px){ .sh-chip { max-width:150px; } } /* ============================================================ Shidduch — singles gallery cards (redesigned) ============================================================ */ .sh-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(288px, 1fr)); gap:14px; } .sh-card { position:relative; display:flex; flex-direction:column; gap:12px; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 16px 14px; cursor:pointer; font:inherit; color:inherit; overflow:hidden; box-shadow:0 1px 2px rgba(20,30,15,.04); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .sh-card:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(20,30,15,.12); border-color:color-mix(in srgb, var(--gc) 40%, var(--line)); } .sh-card-accent { position:absolute; top:0; left:0; right:0; height:4px; background:var(--gc); opacity:.9; } .sh-card-head { display:flex; align-items:center; gap:12px; } .sh-card .sh-av { width:46px; height:46px; border-radius:50%; font-size:15px; box-shadow:0 0 0 3px color-mix(in srgb, var(--gc) 16%, transparent); } .sh-card-id { min-width:0; display:flex; flex-direction:column; gap:2px; } .sh-card-name { font-family:var(--font-serif); font-weight:600; font-size:17px; color:var(--ink-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sh-card-meta { font-size:13px; color:var(--ink-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sh-card-tags { display:flex; flex-wrap:wrap; gap:6px; } .sh-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:11px; border-top:1px solid var(--line-soft); } .sh-card .sh-callcount { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--ink-400); } /* refined chips */ .sh-chip { font-size:11.5px; line-height:1.5; color:var(--ink-500); background:var(--surface-2); border:1px solid var(--line-soft); padding:2px 9px; border-radius:999px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sh-chip-bg { background:#eff4e7; color:#4c5a37; border-color:#e2e9d4; } .sh-chip-lw { background:#eef2f8; color:#3f5170; border-color:#dde4f0; } @media (max-width:520px){ .sh-grid { grid-template-columns:1fr; } } /* Shidduch — extra facts on the singles card (parents, maiden name) */ .sh-card-facts { display:flex; flex-direction:column; gap:3px; } .sh-fact { font-size:12.5px; color:var(--ink-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sh-fact-l { color:var(--ink-400); font-size:11px; text-transform:uppercase; letter-spacing:.03em; margin-right:4px; } /* Shidduch — @-mention dropdown for notes */ .mention-menu { position:fixed; z-index:300; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-lg); max-height:220px; overflow-y:auto; padding:4px; } .mention-item { padding:8px 12px; border-radius:7px; cursor:pointer; font-size:14px; color:var(--ink-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mention-item.active, .mention-item:hover { background:var(--brand-50); color:var(--brand-700); } /* Shidduch — save-to-portfolio button + admin notes section */ .sh-savebtn.saved { background:var(--gold-500, #b0862f); color:#fff; border-color:var(--gold-500, #b0862f); } .sh-savebtn.saved:hover { background:var(--gold-600, #916d24); } .sh-admin-sec { border:1px solid #e7d9b8; background:#fbf6e9; border-radius:var(--radius); padding:14px; } .sh-admin-sec .sh-sec-head h4 { color:#8a5a13; } :root[data-theme="dark"] .sh-admin-sec { background:rgba(176,134,47,.08); border-color:rgba(176,134,47,.3); } /* Shidduch — staff hub tabs + time clock */ .sh-tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:16px; } .sh-tab { background:none; border:none; padding:10px 16px; font:inherit; font-size:14.5px; font-weight:600; color:var(--ink-500); cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-1px; } .sh-tab.active { color:var(--brand-700); border-bottom-color:var(--brand-600); } .sh-clock { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px; padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); } .sh-clock .input { flex:0 1 auto; } .sh-clock-act { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; margin-left:6px; } .sh-clock-act.in { background:var(--success-bg); color:var(--success-fg); } .sh-clock-act.out { background:var(--warn-bg); color:var(--warn-fg); } /* Shidduch — "your suggestions only" banner for shadchanim */ .sh-mine-banner { background:var(--brand-50); color:var(--brand-700); border:1px solid var(--brand-200); border-radius:var(--radius-sm); padding:9px 14px; font-size:13.5px; margin-bottom:14px; } /* Shidduch — clickable @mentions in notes */ .sh-mention { color:var(--brand-600); font-weight:600; background:var(--brand-50); padding:0 4px; border-radius:5px; text-decoration:none; cursor:pointer; } .sh-mention:hover { background:var(--brand-100); text-decoration:underline; } /* Shidduch — portfolio shadchan picker */ .sh-picker-list { max-height:320px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); padding:6px; } .sh-picker-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:7px; cursor:pointer; font-size:14.5px; } .sh-picker-item:hover { background:var(--surface-2); } .sh-picker-item input { width:17px; height:17px; } /* Team — access & activity */ .access-list { display:flex; flex-direction:column; gap:8px; } .access-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:11px 14px; cursor:pointer; font:inherit; color:inherit; } .access-row:hover { border-color:var(--brand-200); box-shadow:var(--shadow-sm); } .avatar.sm { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:600; flex:none; } .access-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .access-name { font-weight:600; display:flex; align-items:center; gap:8px; } .access-sub { font-size:13px; color:var(--ink-500); } .access-meta { display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:12.5px; flex:none; text-align:right; } .role-badge { font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; } .role-admin { background:#f6ecd2; color:#916d24; } .role-secretary { background:var(--info-bg); color:var(--info-fg); } .role-volunteer { background:var(--success-bg); color:var(--success-fg); } .sess-list { display:flex; flex-direction:column; max-height:260px; overflow-y:auto; } .sess-row { display:flex; justify-content:space-between; padding:8px 2px; border-bottom:1px solid var(--line-soft); font-size:13.5px; } @media (max-width:640px){ .access-meta { display:none; } } /* Team — permissions matrix */ .pm-wrap { overflow-x:auto; } .pm-table { width:100%; border-collapse:collapse; font-size:13.5px; min-width:420px; } .pm-table th, .pm-table td { padding:9px 12px; text-align:left; border-bottom:1px solid var(--line-soft); } .pm-table thead th { border-bottom:2px solid var(--line); } .pm-table th:not(:first-child), .pm-table td:not(:first-child) { text-align:center; width:96px; } .pm-table td:first-child { font-weight:500; color:var(--ink-700); } .pm-table tbody tr:hover { background:var(--surface-2, rgba(0,0,0,.02)); } .pm { display:inline-block; font-weight:700; font-size:12px; } .pm-yes { color:var(--success-fg); font-size:15px; } .pm-view { color:var(--info-fg); font-weight:600; font-size:11.5px; } .pm-no { color:var(--ink-300); } .pm-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:12px; color:var(--ink-500); } .pm-legend b { color:var(--ink-700); } .ax-tog { display:inline-flex; } .ax-tog input { width:18px; height:18px; accent-color:var(--brand); cursor:pointer; } .ax-prow { display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:9px 12px; } /* Team — live access status */ .live-pill { font-size:11px; font-weight:700; padding:2px 10px; border-radius:999px; white-space:nowrap; } .live-full { background:var(--success-bg); color:var(--success-fg); } .live-shad { background:#fdf0d5; color:#9a6a00; } .live-lock { background:var(--danger-bg); color:var(--danger-fg); } .access-readonly { background:var(--info-bg); color:var(--info-fg); border-radius:10px; padding:9px 13px; font-size:13px; margin-bottom:12px; } .live-now { display:flex; align-items:center; gap:9px; font-size:14px; } .live-preview { margin-top:14px; } .live-preview-in { background:var(--surface-2, rgba(0,0,0,.03)); border:1px solid var(--line-soft); border-radius:10px; padding:11px 13px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:13.5px; } /* Team — danger zone (suspend / delete) */ .danger-zone { margin-top:18px; padding:14px; border:1px solid var(--danger-bg); border-radius:12px; background:color-mix(in srgb, var(--danger-bg) 40%, transparent); } .danger-title { font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--danger-fg); margin-bottom:10px; } .danger-actions { display:flex; gap:10px; flex-wrap:wrap; } /* Shidduch — clickable brand (home link) */ .sh-brand { background:none; border:none; width:100%; cursor:pointer; font:inherit; text-align:left; } .sh-brand:hover .sh-brand-name { color:var(--brand-500); } /* Shidduch — home / dashboard */ .sh-home { max-width:1100px; } .sh-home-sec { font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-500); margin:30px 2px 13px; } .sh-home-sec:first-child { margin-top:6px; } /* Overview stat cards — calm, uniform; only the number carries colour */ .sh-home-stats { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:13px; } .sh-stat { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:15px 17px; box-shadow:0 1px 2px rgba(20,30,15,.04); } .sh-stat-v { font-family:var(--font-serif); font-size:30px; font-weight:700; color:var(--sc); line-height:1.05; } .sh-stat-l { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-500); margin-top:5px; } .sh-stat-l::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--sc); flex:none; opacity:.9; } /* Quick-access tiles */ .sh-home-tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:12px; } .sh-htile { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 12px; background:var(--surface); border:1px solid var(--line); border-radius:14px; cursor:pointer; font:inherit; font-size:14px; font-weight:600; color:var(--ink-900); box-shadow:0 1px 2px rgba(20,30,15,.04); transition:transform .15s, box-shadow .15s, border-color .15s; text-align:center; } .sh-htile:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(20,30,15,.10); border-color:var(--brand-200); } .sh-htile-ic { width:42px; height:42px; border-radius:12px; background:var(--brand-50); color:var(--brand-600); display:grid; place-items:center; } .sh-htile-ic svg { width:22px; height:22px; } /* Shidduch — home welcome greeting */ .sh-welcome { font-family:var(--font-serif); font-size:clamp(22px,4vw,29px); font-weight:600; color:var(--brand-700); margin:2px 0 3px; } .sh-welcome span { color:var(--gold-600); } .sh-welcome-sub { color:var(--ink-500); font-size:14.5px; margin:0 0 4px; } /* Shidduch — Settings page */ .sh-settings { max-width:640px; } .sh-settings-intro { color:var(--ink-500); font-size:14.5px; margin:2px 0 20px; line-height:1.55; } .sh-set-list { display:flex; flex-direction:column; gap:12px; } .sh-set-card { display:flex; align-items:center; gap:15px; width:100%; text-align:left; padding:16px 18px; background:var(--surface); border:1px solid var(--line); border-radius:14px; cursor:pointer; font:inherit; color:var(--ink-900); box-shadow:0 1px 2px rgba(20,30,15,.04); transition:transform .12s, box-shadow .12s, border-color .12s; } .sh-set-card:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(20,30,15,.10); border-color:var(--brand-200); } .sh-set-ic { width:44px; height:44px; border-radius:12px; background:var(--brand-50); color:var(--brand-600); display:grid; place-items:center; flex:none; } .sh-set-ic svg { width:22px; height:22px; } .sh-set-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } .sh-set-name { font-weight:600; font-size:15.5px; } .sh-set-desc { font-size:13px; color:var(--ink-500); line-height:1.4; } .sh-set-arr { color:var(--ink-400,#9aa08c); flex:none; } /* Shidduch — messages / chat */ .sh-chat { display:flex; gap:16px; height:calc(100vh - 180px); min-height:420px; } .sh-chat-contacts { width:270px; flex:none; overflow-y:auto; display:flex; flex-direction:column; gap:4px; border:1px solid var(--line); border-radius:var(--radius); padding:8px; background:var(--surface); } .sh-contact { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; padding:9px 10px; border-radius:var(--radius-sm); cursor:pointer; font:inherit; color:inherit; } .sh-contact:hover { background:var(--surface-2); } .sh-contact.active { background:var(--brand-50); } .sh-contact .sh-av { width:38px; height:38px; flex:none; } .sh-contact-main { min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; } .sh-contact-name { font-weight:600; font-size:14px; display:flex; align-items:center; gap:6px; } .sh-contact-last { font-size:12.5px; color:var(--ink-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sh-unread { font-style:normal; font-size:11px; font-weight:700; background:var(--danger-fg); color:#fff; min-width:18px; height:18px; padding:0 5px; border-radius:999px; display:inline-grid; place-items:center; } .sh-chat-main { flex:1; min-width:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); display:flex; flex-direction:column; overflow:hidden; } .sh-chat-empty { margin:auto; color:var(--ink-400); padding:24px; text-align:center; } .sh-chat-head { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); font-size:15px; } .sh-chat-head .sh-av { width:34px; height:34px; } .sh-chat-back { display:none; background:none; border:none; font-size:20px; cursor:pointer; color:var(--ink-700); } .sh-chat-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; } .sh-bubble { max-width:76%; padding:8px 12px; border-radius:14px; font-size:14px; } .sh-bubble.theirs { align-self:flex-start; background:var(--surface-2); border:1px solid var(--line-soft); border-bottom-left-radius:4px; } .sh-bubble.mine { align-self:flex-end; background:var(--brand-600); color:#fff; border-bottom-right-radius:4px; } .sh-bubble-text { white-space:pre-wrap; word-break:break-word; } .sh-bubble-time { font-size:10.5px; opacity:.7; margin-top:3px; text-align:right; } .sh-chat-input { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); } .sh-chat-input textarea { flex:1; resize:none; border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; font:inherit; font-size:14px; max-height:120px; background:var(--surface); color:var(--ink-900); } @media (max-width:720px) { .sh-chat { height:calc(100vh - 150px); } .sh-chat-contacts { width:100%; } .sh-chat.has-active .sh-chat-contacts { display:none; } .sh-chat:not(.has-active) .sh-chat-main { display:none; } .sh-chat-back { display:block; } } /* Shidduch — central admin notes: subject link */ .sh-anote-subj { display:inline-block; background:none; border:none; padding:0; margin:2px 0 6px; cursor:pointer; font:inherit; font-size:13px; font-weight:600; color:var(--brand-700); } .sh-anote-subj:hover { text-decoration:underline; } /* Shidduch — "More info" accordion on the profile */ .sh-moreinfo-btn { display:flex; align-items:center; gap:8px; width:100%; justify-content:center; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px; font:inherit; font-size:14px; font-weight:600; color:var(--brand-700); cursor:pointer; } .sh-moreinfo-btn:hover { background:var(--brand-50); } .sh-moreinfo-btn .chev { transition:transform .2s; } .sh-moreinfo-btn.open .chev { transform:rotate(180deg); } .sh-moreinfo { margin-top:10px; } /* Shidduch — staff shifts / time clock */ .sh-clockin { display:flex; gap:10px; align-items:center; margin-bottom:20px; flex-wrap:wrap; } .sh-clockin .input { max-width:240px; } .sh-onshift-head { font-family:var(--font-serif); font-size:16px; font-weight:600; color:var(--brand-700); margin:0 0 10px; display:flex; align-items:center; gap:8px; } .sh-onshift-head em { font-style:normal; font-size:12px; font-weight:600; background:var(--brand-50); color:var(--brand-700); padding:1px 9px; border-radius:999px; } .sh-onshift { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:12px; } .sh-shiftcard { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--success-fg); border-radius:12px; padding:13px 15px; } .sh-shift-info { flex:1; min-width:0; } .sh-shift-name { font-weight:600; font-size:15px; } .sh-timer { font-family:var(--font-serif); font-size:22px; font-weight:700; color:var(--success-fg); font-variant-numeric:tabular-nums; } .sh-shift-since { font-size:11.5px; color:var(--ink-400); } .sh-shiftcard .sh-out { padding:7px 12px; } /* Shidduch — on-shift reminder banner on the home dashboard */ .sh-onshift-banner { background:#eef7ef; border:1px solid #cfe6d2; border-radius:14px; padding:16px; margin-bottom:24px; } :root[data-theme="dark"] .sh-onshift-banner { background:rgba(63,144,104,.1); border-color:rgba(63,144,104,.3); } /* Shidduch — AI Matchmaker */ .mm-list { display:flex; flex-direction:column; gap:10px; } /* Matchmaker — hero + mode picker */ .mm-hero { text-align:center; padding:24px 18px 22px; margin-bottom:20px; border-radius:18px; background:linear-gradient(160deg, var(--brand-50), var(--surface)); border:1px solid var(--brand-100, var(--line)); } .mm-hero-ic { width:56px; height:56px; margin:0 auto 10px; border-radius:16px; display:grid; place-items:center; font-size:28px; background:var(--surface); box-shadow:0 6px 18px rgba(60,90,43,.14); } .mm-hero-title { font-family:var(--font-serif); font-size:24px; font-weight:700; margin:0 0 4px; color:var(--ink-900); } .mm-hero-sub { color:var(--ink-500); font-size:14px; max-width:520px; margin:0 auto 18px; line-height:1.5; } .mm-modes { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; } .mm-auto { font-size:15px; padding:12px 22px; box-shadow:0 6px 16px rgba(60,90,43,.22); } .mm-or { color:var(--ink-400); font-size:13px; } .mm-pick { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:9px 13px; min-width:220px; color:var(--ink-500); } .mm-pick select { border:none; background:none; flex:1; font:inherit; font-size:14px; outline:none; color:var(--ink-900); cursor:pointer; } /* Matchmaker — thinking animation */ .mm-thinking { text-align:center; padding:46px 20px; } .mm-brain { font-size:44px; animation:mm-pulse 1.2s ease-in-out infinite; } @keyframes mm-pulse { 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.14); opacity:1 } } .mm-think-dots { display:flex; gap:7px; justify-content:center; margin:14px 0 10px; } .mm-think-dots span { width:9px; height:9px; border-radius:50%; background:var(--brand-500); animation:mm-bounce 1s infinite ease-in-out; } .mm-think-dots span:nth-child(2){ animation-delay:.18s } .mm-think-dots span:nth-child(3){ animation-delay:.36s } @keyframes mm-bounce { 0%,80%,100%{ transform:translateY(0); opacity:.4 } 40%{ transform:translateY(-9px); opacity:1 } } .mm-think-txt { color:var(--ink-500); font-size:13.5px; } .mm-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:15px 17px; transition:box-shadow .15s, border-color .15s; } .mm-card:hover { box-shadow:0 6px 18px rgba(20,30,15,.08); border-color:var(--brand-200); } .mm-top { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .mm-person { display:inline-flex; align-items:center; gap:8px; background:none; border:none; padding:0; font:inherit; font-weight:700; font-size:15.5px; cursor:pointer; color:var(--ink-900); } .mm-person:hover { text-decoration:underline; } .mm-person em { font-style:normal; font-weight:600; font-size:12px; color:var(--ink-400); } .mm-av { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#20303a; font-size:13px; font-weight:700; flex:none; } .mm-av-m { background:#9CCBE3; } .mm-av-f { background:#EFA9C4; } .mm-cardfoot { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; } /* Intake inbox */ .sh-nav-badge { display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px; margin-left:7px; border-radius:999px; background:#d1495b; color:#fff; font-size:11px; font-weight:800; font-style:normal; vertical-align:middle; } .intk-inbox { display:flex; flex-direction:column; gap:12px; } .intk-item { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; } .intk-item-top { display:flex; align-items:center; gap:12px; } .intk-photo { width:46px; height:46px; border-radius:10px; object-fit:cover; flex:none; } .intk-sug-ic { width:46px; height:46px; border-radius:10px; flex:none; display:grid; place-items:center; font-size:22px; background:var(--brand-50); } .intk-item-main { flex:1; min-width:0; } .intk-item-name { font-weight:700; font-size:15.5px; } .intk-detail { margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft); display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; } .intk-kv { display:flex; flex-direction:column; gap:1px; min-width:0; } .intk-kv .intk-k { font-size:11.5px; color:var(--ink-500); font-weight:600; } .intk-kv .intk-v { font-size:14px; color:var(--ink-900); word-break:break-word; } .intk-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:13px; align-items:center; } .intk-added { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:#2f6b3a; background:#eaf5ec; border:1px solid #c9e4cf; padding:5px 11px; border-radius:999px; } .intk-tabs { flex-wrap:wrap; } .intk-tabs .sh-tab em { font-style:normal; font-size:11px; font-weight:700; background:var(--brand-50); color:var(--brand-700); padding:1px 7px; border-radius:999px; margin-inline-start:5px; } .intk-tabs .sh-tab.active em { background:var(--brand-600); color:#fff; } @media (max-width:560px){ .intk-detail { grid-template-columns:1fr; } } .mm-score { flex:none; font-family:var(--font-serif); font-weight:700; font-size:22px; width:76px; min-height:52px; padding:6px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:12px; line-height:1.05; } .mm-score small { font-size:12px; font-weight:600; } .mm-label { font-family:var(--font-sans, inherit); font-style:normal; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-top:3px; opacity:.85; } .mm-hi { background:var(--success-bg); color:var(--success-fg); } .mm-mid { background:var(--warn-bg); color:var(--warn-fg); } .mm-lo { background:var(--line-soft); color:var(--ink-500); } .mm-pair { flex:1; min-width:0; font-size:16px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .mm-name { background:none; border:none; padding:0; font:inherit; font-weight:700; cursor:pointer; } .mm-name:hover { text-decoration:underline; } .mm-reasons { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; } .mm-good, .mm-warn { font-size:12px; padding:3px 9px; border-radius:999px; } .mm-good { background:var(--success-bg); color:var(--success-fg); } .mm-warn { background:var(--warn-bg); color:var(--warn-fg); } .mm-actions { display:flex; gap:8px; flex-wrap:wrap; } /* Matchmaker — Deep AI analysis panel */ .mm-ai { margin-top:12px; padding:13px 15px; border:1px solid var(--brand-200); border-radius:12px; background:var(--brand-50); } .mm-ai-loading { font-size:13.5px; color:var(--brand-700); } .mm-ai-err { font-size:13px; color:var(--ink-700); } .mm-ai-err code { background:var(--line-soft); padding:1px 5px; border-radius:5px; font-size:12px; } .mm-ai-head { display:flex; align-items:center; gap:12px; margin-bottom:8px; } .mm-ai-verdict { font-weight:700; font-size:15px; font-family:var(--font-serif); } .mm-ai-summary { font-size:13.5px; line-height:1.5; margin:6px 0 10px; color:var(--ink-800); } .mm-ai-list { list-style:none; padding:0; margin:0 0 8px; display:flex; flex-direction:column; gap:4px; font-size:13px; } .mm-ai-list.good li { color:var(--success-fg); } .mm-ai-list.warn li { color:var(--warn-fg); } .mm-ai-consider { font-size:13px; margin-top:6px; padding-top:9px; border-top:1px solid var(--brand-200); color:var(--ink-800); } /* ============================================================ Accessibility & polish — visible keyboard focus everywhere. :where() keeps specificity 0 so component colours still win; this only adds a focus ring for keyboard users (not mouse). ============================================================ */ :where(button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--brand-500, #55742a); outline-offset: 2px; border-radius: 6px; } :where(a) { text-underline-offset: 2px; } /* ============================================================ Landing — event poster in the hero (clickable, cross-fading) ============================================================ */ .lp-hero-art.lp-has-poster { display: flex; align-items: center; justify-content: center; min-height: 0; } .lp-poster { display: block; width: 100%; max-width: 420px; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 48px rgba(20,30,15,.20); transition: transform .2s ease, box-shadow .2s ease; } .lp-poster[href] { cursor: pointer; } .lp-poster[href]:hover { transform: translateY(-4px); box-shadow: 0 28px 60px rgba(20,30,15,.26); } .lp-poster img { display: block; width: 100%; height: auto; transition: opacity .32s ease; } .lp-poster img.fade { opacity: 0; } .lp-poster-dots { display: flex; gap: 7px; justify-content: center; margin-top: 16px; } .lp-poster-dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: var(--line); cursor: pointer; transition: all .2s ease; } .lp-poster-dots button.on { width: 22px; background: var(--brand-500); } /* Mobile: every advert shown at once, stacked (no rotation). */ .lp-poster-stack { display: flex; flex-direction: column; gap: 14px; align-items: center; width: 100%; } /* Show the poster on mobile too (unlike the decorative illustration). */ @media (max-width: 560px) { .lp-hero-art.lp-has-poster { display: flex !important; margin-top: 22px; } .lp-poster { max-width: 360px; } } /* Shidduch — News admin list */ .news-admin-list { display: flex; flex-direction: column; gap: 10px; } .news-arow { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; } .news-athumb { width: 60px; height: 60px; border-radius: 10px; flex: none; background: var(--brand-50); background-size: cover; background-position: center; display: grid; place-items: center; font-size: 24px; } .news-amain { flex: 1; min-width: 0; } .news-atitle { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; } .news-draft { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; background: var(--warn-bg); color: var(--warn-fg); padding: 2px 8px; border-radius: 999px; } .news-aactions { display: flex; gap: 8px; flex: none; } @media (max-width: 560px) { .news-aactions { flex-direction: column; } } /* ============================================================ In-app back / forward — floating control (mobile) ============================================================ */ .nav-fab { position: fixed; left: 12px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1400; display: none; gap: 2px; padding: 4px; background: var(--surface, #fff); border: 1px solid var(--line, #e2e2e2); border-radius: 999px; box-shadow: 0 8px 24px rgba(20,30,15,.22); } .nav-fab.show { display: flex; } .nav-fab-btn { width: 40px; height: 40px; border: none; border-radius: 999px; background: transparent; color: var(--text, #1a1a1a); font-size: 26px; line-height: 1; font-weight: 700; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; transition: background .15s ease, transform .1s ease; } .nav-fab-btn:hover { background: var(--brand-50, #eef3e9); } .nav-fab-btn:active { transform: scale(.9); } .nav-fab-btn:disabled { opacity: .32; cursor: default; } .nav-fab-btn:disabled:hover { background: transparent; } /* On wide screens keep it available but tucked into the corner. */ @media (min-width: 900px) { .nav-fab { left: auto; right: 18px; bottom: 18px; } } /* ============================================================ Volunteer rota — admin management grid ============================================================ */ .ra-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:12px 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; } .ra-status { font-weight:700; font-size:13px; } .ra-status.is-pub { color: var(--brand-500, #3f9068); } .ra-status.is-draft { color: var(--muted, #8a8f80); } .ra-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:12px; } .ra-table { border-collapse:collapse; min-width:100%; font-size:13px; } .ra-table th, .ra-table td { border:1px solid var(--line); padding:6px 8px; vertical-align:top; } .ra-table thead th { background: var(--brand-50, #eef3e9); text-align:center; position:sticky; top:0; white-space:nowrap; } .ra-table .ra-corner { text-align:left; } /* Rota flat-table view (one row per slot) */ .ra-ftable { width:100%; border-collapse:collapse; font-size:13.5px; background:var(--surface); } .ra-ftable th { text-align:left; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-400); font-weight:700; padding:10px 13px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; } .ra-ftable td { padding:9px 13px; border-bottom:1px solid var(--line-soft); vertical-align:middle; } .ra-ftable tbody tr:last-child td { border-bottom:none; } .ra-ftable .ra-td-date { white-space:nowrap; font-weight:600; color:var(--ink-900); } .ra-ftable .ra-td-who { display:flex; flex-wrap:wrap; gap:5px; align-items:center; } .ra-tst { font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; } .ra-tst.open { background:var(--success-bg, #e7f1e4); color:var(--success-fg, #2f6b3a); } .ra-tst.full { background:#e8eef8; color:#2f5b9e; } .ra-tst.closed { background:#f1e5e4; color:#9a4a44; } .ra-dow { font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color: var(--muted); } .ra-dnum { font-size:15px; font-weight:700; font-family:'Lora',serif; } .ra-time { text-align:left; white-space:nowrap; font-weight:700; background: var(--surface); position:sticky; left:0; } .ra-cell { min-width:118px; } .ra-cell.ra-full { background: rgba(185,138,42,.07); } .ra-cell.ra-none { text-align:center; color: var(--line); } .ra-chip { display:inline-flex; align-items:center; gap:4px; background:#eef1ea; color:#41503a; border-radius:999px; padding:2px 4px 2px 9px; font-size:12px; margin:0 4px 4px 0; } .ra-x { border:none; background:none; color:#9a4a4a; cursor:pointer; font-size:14px; line-height:1; padding:0 2px; border-radius:50%; } .ra-x:hover { background:#f4dede; } .ra-add { border:1px dashed var(--line); background:none; color: var(--muted); border-radius:8px; padding:3px 8px; font-size:12px; cursor:pointer; } .ra-add:hover { border-color: var(--brand-500,#3f9068); color: var(--brand-500,#3f9068); } .rr-wd { display:flex; flex-wrap:wrap; gap:6px 14px; } .rr-wd-item { display:flex; align-items:center; gap:6px; font-size:14px; cursor:pointer; } .rr-wd-item input { width:auto; } /* Volunteer rota — noted (marked) dates: coloured + reason, still open for shifts */ .ra-blockbtn { margin-top:5px; border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:8px; padding:2px 7px; font-size:11px; cursor:pointer; white-space:nowrap; } .ra-blockbtn:hover { border-color:#d8bd78; color:#8a6d1e; } .ra-blockbtn.is-noted { color:#8a6d1e; border-color:#e7cf97; background:#fbf3df; } .ra-th-noted { background:#fbf3df !important; } .ra-blockreason { font-size:11px; font-weight:600; color:#8a6d1e; margin:2px 0; } .ra-mday-noted .ra-mday-head { background:#fbf3df; color:#8a6d1e; } .ra-note-row { padding:7px 12px; color:#8a6d1e; font-size:12.5px; font-weight:600; background:#fbf3df; border-top:1px solid #eadfc2; } /* Closed days (blocked to sign-ups) — red-toned to distinguish from a plain note */ .ra-blockbtn.is-closed { color:#a4433f; border-color:#e6b4af; background:#fbe4e2; } .ra-th-closed { background:#fbe4e2 !important; } .ra-th-closed .ra-blockreason, .ra-th-closed + .ra-blockreason { color:#a4433f; } .ra-mday-closed .ra-mday-head { background:#fbe4e2; color:#a4433f; } .ra-mday-closed .ra-note-row { color:#a4433f; background:#fbe4e2; border-top-color:#f0cbc6; } .ra-closed-tag { display:inline-block; font-size:11px; font-weight:700; color:#a4433f; background:#fbe4e2; border:1px solid #e6b4af; border-radius:7px; padding:1px 7px; } .ra-slot-note { display:inline-block; font-size:10.5px; font-weight:600; color:#8a6d1e; background:#fbf3df; border:1px solid #e7cf97; border-radius:7px; padding:1px 7px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ra-slotmark { border:none; background:none; cursor:pointer; font-size:12px; line-height:1; padding:2px 3px; border-radius:6px; opacity:.4; transition:opacity .15s, background .15s; } .ra-slotmark:hover { opacity:1; background:rgba(60,90,43,.1); } .ra-slotmark.is-on { opacity:1; } /* Events (RSVP) admin */ .ev-admin-card { text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:15px 17px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; box-shadow:0 1px 2px rgba(20,30,15,.04); transition:transform .12s, box-shadow .12s, border-color .12s; } .ev-admin-card:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(20,30,15,.10); border-color:var(--brand-200); } .ev-ac-title { font-weight:600; font-size:15.5px; color:var(--ink-900); } .ev-ac-draft { font-style:normal; font-size:11px; color:#a4433f; background:#fbe4e2; border-radius:6px; padding:1px 6px; } .ev-rsvp-row { display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line-soft,#f0efe9); padding:8px 2px; } /* Volunteer rota — admin mobile (stacked day cards) */ .ra-bar-btns { margin-left:auto; display:flex; gap:8px; } .ra-mlist { display:flex; flex-direction:column; gap:12px; } .ra-mday { border:1px solid var(--line); border-radius:12px; overflow:hidden; } .ra-mday-head { background: var(--brand-50, #eef3e9); padding:8px 12px; font-weight:700; font-size:14px; } .ra-mslot { display:flex; gap:10px; padding:9px 12px; border-top:1px dashed var(--line); align-items:flex-start; } .ra-mslot.ra-full { background: rgba(185,138,42,.06); } .ra-mslot-time { flex:0 0 92px; font-weight:700; font-size:13px; padding-top:3px; } .ra-mslot-body { flex:1; display:flex; flex-wrap:wrap; gap:6px; align-items:center; } @media (max-width:700px){ .ra-bar { flex-wrap:wrap; } .ra-bar-btns { margin-left:0; width:100%; } .ra-bar-btns .sh-mini { flex:1; } } @media (max-width:420px){ .ra-mslot { flex-direction:column; gap:5px; } .ra-mslot-time { flex:none; padding-top:0; } } /* Systems hub — polish + admin tile accent */ .hub-tile { position:relative; overflow:hidden; } .hub-tile::after { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:transparent; transition:background .15s; } .hub-tile:hover::after { background:var(--brand-400); } .hub-tile:active { transform:translateY(-1px); } .hub-tile-go { transition:transform .18s, color .15s; } .hub-tile:hover .hub-tile-go { transform:translateX(4px); color:var(--brand-600); } .hub-tile-admin .hub-tile-ic { background:#f5efdd; color:#a9812a; } .hub-tile-admin:hover { border-color:#e5d29a; } .hub-tile-admin:hover::after { background:#c9a94e; } .hub-tile-admin .hub-badge { color:#8a6d1e; background:#f5efdd; } @media (max-width:560px){ .hub-tile { padding:18px 16px; gap:14px; } .hub-tile-ic { width:52px; height:52px; border-radius:14px; } .hub-tile-ic svg { width:26px; height:26px; } .hub-tile-title { font-size:18px; } .hub-tile-sub { font-size:13px; } .hub-main { padding:24px 0; } } /* ============================================================ Settings & team — standalone admin area ============================================================ */ #adminArea { display:none; position:fixed; inset:0; z-index:82; background:var(--bg); color:var(--ink-900); overflow-y:auto; -webkit-overflow-scrolling:touch; } .aa-inner { min-height:100%; max-width:1080px; margin:0 auto; padding:16px clamp(14px,4vw,36px) 40px; } .aa-head { display:flex; align-items:center; gap:14px; justify-content:space-between; padding-top:max(6px, env(safe-area-inset-top)); } .aa-back { display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--line); color:var(--ink-700); padding:7px 13px; border-radius:999px; font:inherit; font-size:13.5px; cursor:pointer; } .aa-back:hover { background:var(--surface-2); } .aa-logo { height:38px; width:auto; object-fit:contain; margin-right:auto; margin-left:8px; } .aa-head-right { display:flex; align-items:center; gap:12px; } .aa-user { font-size:13px; color:var(--ink-500); } .aa-signout { background:none; border:1px solid var(--line); color:var(--ink-700); padding:7px 13px; border-radius:999px; font:inherit; font-size:13px; cursor:pointer; } .aa-signout:hover { background:var(--surface-2); } .aa-body { margin-top:18px; } .aa-title { font-family:var(--font-serif); font-size:clamp(24px,4.5vw,34px); font-weight:600; color:var(--brand-700); margin:0 0 4px; } .aa-lead { color:var(--ink-500); font-size:15px; margin:0 0 18px; } .aa-tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:22px; flex-wrap:wrap; } .aa-tab { background:none; border:none; border-bottom:2px solid transparent; color:var(--ink-500); padding:10px 14px; font:inherit; font-size:15px; font-weight:600; cursor:pointer; margin-bottom:-1px; } .aa-tab:hover { color:var(--ink-900); } .aa-tab.active { color:var(--brand-700); border-bottom-color:var(--brand-500); } @media (max-width:560px){ .aa-logo { height:32px; } .aa-user { display:none; } .aa-tab { flex:1; text-align:center; padding:10px 6px; } } /* Hub / admin "View site" link */ .hub-site { background:none; border:1px solid var(--line); color:var(--brand-700); padding:7px 14px; border-radius:999px; font:inherit; font-size:13px; cursor:pointer; } .hub-site:hover { background:var(--brand-50); border-color:var(--brand-200); } @media (max-width:560px){ .hub-site, .aa-signout#aaSite { padding:7px 11px; } } /* Call log — per-call summary */ .sh-call-summary { font-size:12.5px; color:var(--sh-muted,#6b7563); margin-top:3px; white-space:pre-wrap; word-break:break-word; line-height:1.4; } .sh-call-outcome { display:inline-block; font-size:11.5px; font-weight:700; color:var(--brand-600,#4a6b35); background:var(--brand-50,#eef3e9); padding:1px 8px; border-radius:999px; }