:root { --paper: #f4f8fb; --paper-deep: #e5edf4; --surface: #ffffff; --surface-strong: #f8fbfd; --ink: #071522; --muted: #607181; --soft: #8193a2; --line: rgba(13, 85, 126, 0.18); --olive: #0b84b2; --olive-dark: #06334f; --gold: #b99342; --gold-bright: #dfc36e; --burgundy: #9d2637; --red: var(--burgundy); --blue: #00a7d7; --cyan: #00c7ff; --deep-blue: #030914; --navy: #071523; --green: #0b84b2; --soft-green: rgba(0, 167, 215, 0.12); --shadow: 0 18px 50px rgba(4, 26, 44, 0.12); --radius: 8px; --page-hero-image: none; --page-hero-position: center; --page-hero-min-height: clamp(330px, 42vw, 540px); --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --serif: Georgia, "Times New Roman", serif; } :root[data-theme="dark"] { color-scheme: dark; --paper: #030914; --paper-deep: #061220; --surface: #081525; --surface-strong: #0c1d31; --ink: #f8f2e6; --muted: #b9c8d5; --soft: #87a6ba; --line: rgba(216, 183, 99, 0.24); --olive: #00b8ee; --olive-dark: #dcefff; --gold: #d7b65f; --gold-bright: #f0d77c; --burgundy: #df5b79; --blue: #00c7ff; --cyan: #00d5ff; --green: #45d1ff; --soft-green: rgba(0, 199, 255, 0.13); --shadow: 0 22px 70px rgba(0, 0, 0, 0.44); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; background: linear-gradient(90deg, rgba(0, 167, 215, 0.045) 1px, transparent 1px), linear-gradient(180deg, rgba(185, 147, 66, 0.052) 1px, transparent 1px), var(--paper); background-size: 48px 48px; color: var(--ink); font-family: var(--sans); /* Lock the X axis WITHOUT becoming a scroll container. `overflow-x: hidden` would make the scroll container for sticky descendants, which silently breaks the sticky top nav (it scrolls away on every layout). `clip` prevents horizontal scroll the same way but keeps position: sticky working. The companion `html { overflow-x: clip }` handles the iOS/root scroller. */ overflow-x: clip; } button, input { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } .app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; } .mega-menu { position: sticky; top: 0; /* Sits above page content but below dropdown overlays (notif-panel, mega-panel drawer, modals). Z-INDEX LADDER: page content: 0-50 floating donate: 80 mega-menu (this): 100 mega-panel drawer: 1000 PWA install banner: 9000 PWA iOS howto: 9001 modal-overlay: 9999 notif-panel: 10000 */ z-index: 100; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 14px 28px; border-bottom: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line)); background: linear-gradient(90deg, rgba(0, 167, 215, 0.07), transparent 24%, rgba(185, 147, 66, 0.06)), rgba(255, 255, 255, 0.92); backdrop-filter: blur(16px); } :root[data-theme="dark"] .mega-menu { border-bottom-color: rgba(0, 199, 255, 0.32); background: linear-gradient(90deg, rgba(0, 199, 255, 0.09), transparent 28%, rgba(215, 182, 95, 0.06)), rgba(3, 9, 20, 0.94); box-shadow: inset 0 -1px 0 rgba(215, 182, 95, 0.24), 0 16px 40px rgba(0, 0, 0, 0.24); } .mega-menu .brand { margin-bottom: 0; } .mega-links { display: flex; justify-content: center; gap: clamp(10px, 1.15vw, 18px); min-width: 0; flex-wrap: wrap; row-gap: 10px; } .mega-links .nav-item { white-space: nowrap; } .menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); } .page-main { padding-top: 18px; } .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 42px; padding: 24px 28px; border-top: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line)); background: linear-gradient(90deg, rgba(0, 167, 215, 0.06), transparent 32%, rgba(185, 147, 66, 0.07)), rgba(255, 255, 255, 0.74); } .footer-brand { display: flex; align-items: center; gap: 14px; min-width: 0; } .footer-brand-copy strong, .footer-brand-copy span { display: block; } .footer-brand-copy span { margin-top: 4px; color: var(--muted); font-size: 13px; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 14px; color: var(--olive); font-size: 13px; font-weight: 800; } .sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; background: rgba(255, 253, 248, 0.78); border-right: 1px solid var(--line); backdrop-filter: blur(14px); } .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; } .brand-logo-shell, .footer-logo-shell, .brand-mark { display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 58px; margin-top: 0; border-radius: 12px; background: radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.82), transparent 48%), color-mix(in srgb, var(--surface) 84%, var(--gold) 16%); color: var(--olive-dark); font-family: var(--serif); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.46), 0 12px 28px rgba(4, 26, 44, 0.12); } .brand-logo, .footer-logo { width: 100%; height: 100%; object-fit: contain; display: block; padding: 3px; filter: drop-shadow(0 6px 14px rgba(4, 26, 44, 0.18)); } .brand-logo[hidden], .footer-logo[hidden], .logo-fallback[hidden] { display: none; } .logo-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: var(--gold); font-family: var(--serif); font-size: 18px; font-weight: 900; } .brand strong { display: block; font-family: var(--serif); font-size: 19px; } .brand small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; } .nav-list { display: grid; gap: 6px; } .nav-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-radius: var(--radius); color: var(--muted); font-size: 14px; font-weight: 650; } .nav-item:hover, .nav-item.active { background: #eef0e5; color: var(--olive-dark); } :root[data-theme="dark"] .nav-item:hover, :root[data-theme="dark"] .nav-item.active { background: rgba(143, 166, 121, 0.14); color: var(--olive-dark); } .theme-toggle { border: 0; background: transparent; cursor: pointer; } .theme-toggle[data-theme-mode="dark"] { color: var(--gold); } :root[data-theme="dark"] .site-footer, :root[data-theme="dark"] .wide-section, :root[data-theme="dark"] .card, :root[data-theme="dark"] .rabbi-card, :root[data-theme="dark"] .admin-panel, :root[data-theme="dark"] .rabbi-console-panel, :root[data-theme="dark"] .profile-section, :root[data-theme="dark"] .support-card, :root[data-theme="dark"] .auth-panel, :root[data-theme="dark"] .public-chat-card, :root[data-theme="dark"] .rabbi-admin-session, :root[data-theme="dark"] .recorded-item, :root[data-theme="dark"] .live-row { background-color: var(--surface); } :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select, :root[data-theme="dark"] .search { background-color: #11140f; color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: #918b80; } .nav-user-item { gap: 8px; } .nav-account-menu { position: relative; display: inline-flex; align-items: center; min-width: 0; padding-bottom: 8px; margin-bottom: -8px; } .nav-account-summary { cursor: pointer; } .nav-account-caret { width: 8px; height: 8px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.68; } .nav-account-dropdown { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; display: grid; min-width: 220px; padding: 8px; border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, var(--cyan) 8%), color-mix(in srgb, var(--surface) 91%, var(--gold) 9%)); box-shadow: 0 20px 46px rgba(3, 9, 20, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.18); opacity: 0; visibility: hidden; transform: translateY(6px) scale(0.98); transform-origin: top right; transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease; } .nav-account-menu:hover .nav-account-dropdown, .nav-account-menu:focus-within .nav-account-dropdown { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .account-menu-item { display: flex; align-items: center; gap: 10px; min-height: 40px; width: 100%; padding: 0 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: color-mix(in srgb, var(--ink) 78%, var(--muted)); font: inherit; font-size: 13px; font-weight: 760; text-align: left; text-decoration: none; cursor: pointer; } .account-menu-item:hover, .account-menu-item.active { border-color: color-mix(in srgb, var(--cyan) 34%, transparent); background: color-mix(in srgb, var(--cyan) 12%, transparent); color: var(--ink); } .account-menu-item[hidden] { display: none !important; } .nav-user-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; position: relative; width: 26px; height: 26px; border: 1px solid #d7c9b1; border-radius: 999px; background: var(--avatar, linear-gradient(135deg, var(--olive), var(--gold))); color: #fff; font-size: 12px; font-weight: 900; overflow: hidden; } .nav-user-avatar.has-message-badge { overflow: visible; } .nav-message-badge { position: absolute; top: -7px; right: -9px; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid #fffdf8; border-radius: 999px; background: var(--burgundy); color: #fff; font-size: 10px; font-weight: 950; line-height: 1; box-shadow: 0 8px 18px rgba(157, 38, 55, 0.26); } .sidebar-card { position: absolute; left: 18px; right: 18px; bottom: 24px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .eyeless-label { margin: 0 0 8px; color: var(--gold); font-size: 11px; font-weight: 800; text-transform: uppercase; } .sidebar-card strong { display: block; margin-bottom: 6px; font-family: var(--serif); font-size: 21px; } .sidebar-card span { color: var(--muted); font-size: 13px; line-height: 1.45; } .main { width: min(100%, 1280px); margin: 0 auto; padding: 26px 28px 52px; min-width: 0; } .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0 18px; background: linear-gradient(180deg, var(--paper) 82%, rgba(247, 243, 233, 0)); } .search { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 620px; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 253, 248, 0.88); min-width: 0; } .search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ajax-search-wrap { position: relative; flex: 1; max-width: 620px; min-width: 0; } .ajax-search-wrap .search { max-width: none; } .ajax-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; display: grid; gap: 8px; max-height: min(520px, calc(100vh - 150px)); overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 253, 248, 0.98); box-shadow: var(--shadow); } .ajax-search-results[hidden] { display: none; } .search-results-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 8px; border-bottom: 1px solid rgba(85, 107, 76, 0.14); } .ajax-search-item { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border: 1px solid rgba(85, 107, 76, 0.12); border-radius: 12px; color: inherit; text-decoration: none; } .ajax-search-item:hover { border-color: rgba(85, 107, 76, 0.32); background: rgba(238, 244, 231, 0.78); } .ajax-search-item strong { display: block; font-size: 14px; } .ajax-search-item p, .search-empty { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; } .top-actions { display: flex; gap: 10px; min-width: 0; } .primary-button, .ghost-button, .small-button, .support-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; font-size: 13px; font-weight: 800; min-width: 0; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; } .primary-button { padding: 0 16px; background: var(--burgundy); color: #fff !important; box-shadow: 0 12px 26px rgba(157, 38, 55, 0.22); } .primary-button:visited, .primary-button:hover, .primary-button:focus { color: #fff !important; } .ghost-button, .small-button { padding: 0 14px; border-color: var(--line); background: var(--surface); color: var(--ink); } .small-button { height: 36px; color: var(--burgundy); } .primary-button:hover, .ghost-button:hover, .small-button:hover, .support-button:hover { transform: translateY(-1px); } .live-dot { width: 8px; height: 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2); } .welcome-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: stretch; } .welcome-grid > *, .discovery-grid > *, .content-grid > * { min-width: 0; } .live-panel, .action-panel, .wide-section, .stack-section, .topics-panel, .zone-panel { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 253, 248, 0.9); box-shadow: var(--shadow); } .live-panel { position: relative; overflow: hidden; padding: 26px; min-width: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 250, 239, 0.92)), radial-gradient(circle at 78% 16%, rgba(183, 139, 63, 0.18), transparent 30%); } .live-panel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: linear-gradient(180deg, var(--burgundy), var(--gold), var(--olive)); } .live-panel > * { position: relative; } .section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; margin-bottom: 20px; flex-wrap: wrap; } .recorded-cta { display: grid; gap: 2px; min-width: 172px; padding: 11px 13px; border: 1px solid rgba(183, 139, 63, 0.34); border-radius: var(--radius); background: linear-gradient(135deg, #fffdf8, #f8efd9); color: var(--ink); box-shadow: 0 10px 24px rgba(46, 38, 25, 0.08); } .recorded-cta span { color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; } .recorded-cta strong { color: var(--burgundy); font-size: 13px; line-height: 1.1; } .recorded-cta:hover, .recorded-cta:focus { transform: translateY(-1px); border-color: rgba(157, 38, 55, 0.35); } /* Live section heading - stacks Open Table + Recorded CTA side by side */ .live-heading-actions { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; } .open-table-cta { display: grid; gap: 2px; min-width: 148px; padding: 11px 13px; border: 1px solid rgba(243, 213, 100, 0.55); border-radius: var(--radius); background: linear-gradient(135deg, rgba(243, 196, 80, 0.18), rgba(231, 160, 60, 0.12)); color: #fffaf0; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; } .open-table-cta i { font-size: 14px; color: #f3d58a; margin-bottom: 2px; } .open-table-cta span { color: rgba(255, 250, 240, 0.62); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: 0.06em; } .open-table-cta strong { color: #f3d58a; font-size: 13px; line-height: 1.1; } .open-table-cta:hover, .open-table-cta:focus { transform: translateY(-2px); border-color: rgba(243, 213, 100, 0.9); background: linear-gradient(135deg, rgba(243, 196, 80, 0.28), rgba(231, 160, 60, 0.22)); } h1, h2, h3, p { margin-top: 0; overflow-wrap: break-word; } h1, h2 { font-family: var(--serif); font-weight: 700; } h1 { max-width: 720px; margin-bottom: 10px; font-size: clamp(34px, 4vw, 58px); line-height: 1.02; } .section-heading p { max-width: 650px; margin-bottom: 0; color: var(--muted); font-size: 16px; line-height: 1.55; } .live-table { display: grid; gap: 10px; } .featured-live { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: end; gap: 18px; margin-bottom: 12px; padding: 18px; border: 1px solid rgba(157, 38, 55, 0.2); border-radius: var(--radius); background: linear-gradient(135deg, #fff8eb, #fffdf8); box-shadow: 0 14px 34px rgba(157, 38, 55, 0.08); } .live-eyebrow { display: inline-flex; width: max-content; margin-bottom: 10px; padding: 5px 8px; border-radius: 999px; background: rgba(157, 38, 55, 0.1); color: var(--burgundy); font-size: 11px; font-weight: 900; } .eyebrow { display: inline-flex; margin-bottom: 10px; color: var(--burgundy); font-size: 12px; font-weight: 900; text-transform: uppercase; } .featured-live h2 { margin-bottom: 7px; font-size: clamp(25px, 3vw, 38px); line-height: 1.02; } .featured-live p { margin-bottom: 0; color: var(--muted); } .featured-live-action { display: grid; justify-items: stretch; gap: 4px; text-align: center; } .featured-live-action strong { font-family: var(--serif); font-size: 34px; line-height: 1; } .featured-live-action span { margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 800; } .live-row { display: grid; grid-template-columns: 46px minmax(0, 1.2fr) minmax(120px, 0.7fr) 82px 112px; align-items: center; gap: 14px; min-height: 72px; padding: 10px 12px; border: 1px solid #eadfca; border-radius: var(--radius); background: #fffbf2; } .compact-live-table:empty { display: none; } .compact-live-table .live-row { min-height: 64px; background: rgba(255, 253, 248, 0.82); } .upcoming-live-strip { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(183, 139, 63, 0.24); } .upcoming-shiur-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .upcoming-shiur-card, .scheduled-shiur-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px; border: 1px solid color-mix(in srgb, var(--rabbi-start, var(--olive)) 30%, var(--line)); border-radius: 14px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 13%, transparent), transparent 30%), linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(255, 248, 232, 0.82)); box-shadow: 0 14px 34px rgba(46, 38, 25, 0.08); } .upcoming-shiur-card h3, .scheduled-shiur-card h4 { margin: 0 0 6px; font-family: var(--sans); font-size: 18px; font-weight: 950; line-height: 1.14; } .upcoming-shiur-card p, .scheduled-shiur-card p, .upcoming-shiur-card small, .scheduled-shiur-card small { display: block; margin: 0 0 8px; color: var(--muted); line-height: 1.4; } .upcoming-shiur-card .row-actions, .scheduled-shiur-card .row-actions { grid-column: 1 / -1; } /* Button-based date & time picker for scheduling a shiur */ .sched-datetime { display: grid; gap: 0.55rem; } .sched-dt-summary { font-weight: 800; font-size: 0.98rem; color: color-mix(in srgb, var(--rabbi-end, var(--gold, #d7b65f)) 72%, var(--text, #1f2933)); padding: 0.35rem 0; } .dt-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } .dt-time-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; margin-top: 0.15rem; } .dt-time-row .dt-chip-row { padding: 0.15rem 0; } .dt-chip { appearance: none; border: 1px solid var(--line, rgba(0, 0, 0, 0.16)); background: var(--surface, rgba(255, 255, 255, 0.04)); color: var(--text, var(--ink, #e9eef6)); border-radius: 10px; padding: 0.5rem 0.85rem; font-size: 0.86rem; font-weight: 700; cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease, transform 0.12s ease; white-space: nowrap; } .dt-chip--sm { padding: 0.45rem 0.7rem; min-width: 2.6rem; text-align: center; } .dt-chip:hover { border-color: var(--gold, #d7b65f); transform: translateY(-1px); } .dt-chip.active { background: linear-gradient(135deg, var(--rabbi-start, #1f3a5f), var(--rabbi-accent, var(--rabbi-end, #c8203c))); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22); } .upcoming-artwork, .scheduled-artwork { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid color-mix(in srgb, var(--rabbi-end, var(--gold)) 34%, var(--line)); border-radius: 12px; background: var(--artwork, linear-gradient(135deg, var(--olive), var(--gold))); background-size: cover; background-position: center; color: #fffaf0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .upcoming-artwork:empty::before { content: "613"; font-family: var(--serif); font-size: 26px; font-weight: 900; } .avatar { display: inline-block; position: relative; width: 46px; height: 46px; overflow: hidden; border-radius: 50%; border: 2px solid #fff; background: var(--avatar); box-shadow: 0 0 0 1px #d8cdb8; } .avatar::before { content: ""; position: absolute; left: 13px; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 246, 224, 0.92); } .avatar::after { content: ""; position: absolute; left: 8px; bottom: -4px; width: 30px; height: 25px; border-radius: 16px 16px 0 0; background: rgba(46, 58, 47, 0.85); } .avatar.has-photo::before, .avatar.has-photo::after { display: none; } .rabbi-hover-trigger { cursor: pointer; } .rabbi-name-link { color: inherit; text-decoration: none; } .rabbi-name-link:hover, .rabbi-name-link:focus { color: var(--burgundy); } .rabbi-hover-card { position: absolute; z-index: 80; width: min(430px, calc(100vw - 24px)); padding: 16px; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: 14px; background: radial-gradient(circle at top left, color-mix(in srgb, var(--gold) 16%, transparent), transparent 36%), linear-gradient(135deg, #fffdf8, #f9f2e4); box-shadow: 0 28px 70px rgba(28, 25, 18, 0.22); backdrop-filter: blur(16px); overflow: hidden; } .rabbi-hover-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--burgundy), var(--gold), var(--green)); } .rabbi-hover-top { display: flex; gap: 11px; align-items: center; margin-bottom: 12px; position: relative; z-index: 1; } .rabbi-hover-top strong, .rabbi-hover-top span { display: block; } .rabbi-hover-top span, .rabbi-hover-card p { color: var(--muted); font-size: 13px; line-height: 1.45; } .rabbi-hover-card p { margin: 10px 0; } .hover-live-pill { display: inline-flex; align-items: center; width: max-content; padding: 5px 8px; border-radius: 999px; background: #ad263d; color: #fff; font-size: 11px; font-weight: 900; text-decoration: none; box-shadow: 0 12px 28px rgba(173, 38, 61, 0.2); } .hover-status-pill, .hover-signal-row span, .hover-office { display: inline-flex; align-items: center; width: max-content; padding: 5px 8px; border-radius: 999px; background: var(--soft-green); color: var(--green); font-size: 11px; font-weight: 900; } .hover-office { flex-wrap: wrap; gap: 6px; width: 100%; border-radius: 14px; } .hover-office-date { display: inline-grid; gap: 1px; } .hover-office-date strong { font-family: var(--serif); font-size: 16px; line-height: 1; } .hover-office-date small, .hover-office small { color: var(--muted); font-size: 10px; } .hover-signal-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; position: relative; z-index: 1; } .hover-focus { color: var(--ink) !important; font-size: 14px !important; margin: 0 0 12px !important; } .hover-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; } .hover-chip-row span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.56); color: var(--green); font-size: 11px; font-weight: 900; } .hover-facts { display: grid; gap: 8px; margin: 12px 0; } .hover-facts div, .hover-start { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.48); } .hover-facts span, .hover-start > span, .hover-live-detail small { display: block; color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; } .hover-facts strong, .hover-start strong { display: block; color: var(--ink); font-size: 13px; line-height: 1.35; } .hover-session { display: block; color: inherit; text-decoration: none; } .hover-session span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; } .hover-live-detail { margin-top: 8px; } .hover-office { margin-top: 10px; } .hover-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .rabbi-hover-card .small-button, .rabbi-hover-card .ghost-button { display: inline-flex; min-height: 36px; padding: 8px 12px; align-items: center; justify-content: center; } .rabbi-hover-loading { color: var(--muted); font-weight: 800; } .row-title { min-width: 0; } .row-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-title span, .row-meta, .viewer-count { color: var(--muted); font-size: 13px; } .viewer-count { font-weight: 750; } .join-button { height: 36px; border: 0; border-radius: var(--radius); background: var(--olive-dark); color: #fff; cursor: pointer; font-size: 12px; font-weight: 850; } .action-panel { display: grid; gap: 14px; padding: 16px; align-content: start; background: linear-gradient(180deg, #fbf4e8, #f4ead7); } .support-box, .upload-status { padding: 18px; border: 1px solid #dfd0b8; border-radius: var(--radius); background: var(--surface-strong); } .support-box { min-height: 0; } .support-box h2 { margin-bottom: 8px; font-size: 25px; } .support-box p { margin-bottom: 16px; color: var(--muted); font-size: 14px; } .amount-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; } .amount-grid button { height: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: #fbf7ee; cursor: pointer; font-weight: 800; } .amount-grid button.selected { border-color: var(--gold); background: #f4e7c7; } .custom-amount-label { display: grid; gap: 6px; margin-bottom: 12px; color: var(--muted); font-size: 12px; font-weight: 800; } .custom-amount-label input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fffdf8; color: var(--ink); font-weight: 800; } .support-button { width: 100%; background: var(--olive); color: #fff; text-decoration: none; } .upload-status { display: flex; gap: 12px; align-items: flex-start; background: #fffaf0; } .upload-status .icon { color: var(--blue); } .upload-status strong { display: block; margin-bottom: 5px; } .upload-status p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; } .discovery-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; margin-top: 18px; } .wide-section, .stack-section, .topics-panel, .zone-panel { padding: 20px; } .section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; } .section-title-row h2 { margin-bottom: 0; font-size: 28px; } .section-title-row a { color: var(--olive); font-size: 13px; font-weight: 800; } .orthodox-note { max-width: 760px; margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.5; } .segmented { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius); background: #f6efe0; } .segmented button { height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 800; } .segmented button.active { background: #fff; color: var(--ink); box-shadow: 0 4px 14px rgba(52, 44, 29, 0.08); } .rabbi-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .rabbi-directory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .rabbi-filter-bar { display: grid; gap: 12px; margin: 18px 0; padding: 14px; border: 1px solid rgba(85, 107, 76, 0.16); border-radius: 14px; background: rgba(255, 253, 248, 0.78); } .rabbi-search { width: 100%; max-width: none; } .filter-row { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: clamp(12px, 1.2vw, 18px); } .filter-row select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 253, 248, 0.92); color: var(--ink); font-weight: 850; } .filter-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; font-weight: 850; } .rabbi-card { position: relative; overflow: hidden; padding: 14px; border: 1px solid color-mix(in srgb, var(--rabbi-start, #0077a8) 46%, #e7dcc8); border-radius: var(--radius); background: linear-gradient(90deg, var(--rabbi-start, #0077a8) 0 4px, transparent 4px), radial-gradient(circle at 95% 0%, color-mix(in srgb, var(--rabbi-end, #d7b65f) 18%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, #0077a8) 7%, #fffbf4), #fffbf4 58%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rabbi-end, #d7b65f) 16%, transparent); } .rabbi-card.is-live { border-color: color-mix(in srgb, var(--rabbi-start, #b1263d) 58%, var(--burgundy)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rabbi-end, #d8a457) 22%, transparent), 0 14px 34px color-mix(in srgb, var(--rabbi-start, #b1263d) 20%, transparent); } .rabbi-top { display: flex; gap: 11px; align-items: center; margin-bottom: 12px; } .rabbi-card h3 { margin-bottom: 3px; font-size: 16px; } .rabbi-card h3 a { color: var(--ink); } .rabbi-card h3 a:hover { color: var(--burgundy); } .live-card-badge, .live-pill { display: inline-flex; align-items: center; width: max-content; margin-bottom: 10px; padding: 6px 9px; border-radius: 999px; background: var(--rabbi-gradient, #ad263d); color: #fff; font-size: 11px; font-weight: 900; box-shadow: 0 10px 24px color-mix(in srgb, var(--rabbi-start, #b1263d) 28%, transparent); } .live-card-badge::before, .live-pill::before { content: ""; width: 7px; height: 7px; margin-right: 6px; border-radius: 999px; background: #fff; } .rabbi-card p, .gem-item p, .shiur-item p, .learning-item p { color: var(--muted); font-size: 13px; line-height: 1.45; } .rabbi-card p { min-height: 38px; margin-bottom: 0; } .public-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .public-link-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--rabbi-end, var(--gold)) 42%, var(--line)); border-radius: 999px; background: radial-gradient(circle at 32% 22%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 18%, transparent), transparent 42%), color-mix(in srgb, var(--surface) 88%, transparent); color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 76%, var(--ink)); text-decoration: none; box-shadow: 0 10px 24px color-mix(in srgb, var(--rabbi-start, var(--cyan)) 10%, transparent); } .public-link-icon:hover, .public-link-icon:focus-visible { color: #fff; border-color: color-mix(in srgb, var(--rabbi-end, var(--gold)) 68%, var(--rabbi-start, var(--cyan))); background: var(--rabbi-gradient, linear-gradient(135deg, var(--cyan), var(--gold))); transform: translateY(-1px); } .public-link-row-card { margin-top: 10px; } .public-link-row-card .public-link-icon { width: 29px; height: 29px; font-size: 13px; } .rabbi-card-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 12px; width: 100%; min-width: 0; } .rabbi-card-action { display: grid; place-items: center; gap: 3px; min-width: 0; min-height: 42px; padding: 6px 2px; border: 1px solid color-mix(in srgb, var(--rabbi-start, var(--cyan)) 38%, var(--line)); border-radius: 10px; background: radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 18%, transparent), transparent 44%), color-mix(in srgb, var(--surface) 90%, transparent); color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 76%, var(--ink)); text-align: center; text-decoration: none; } .rabbi-card-action i { font-size: 12px; line-height: 1; } .rabbi-card-action span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: 8px; font-weight: 650; line-height: 1; } .rabbi-card-action:hover, .rabbi-card-action:focus-visible { border-color: color-mix(in srgb, var(--rabbi-end, var(--gold)) 70%, #fff); background: var(--rabbi-gradient, linear-gradient(135deg, var(--cyan), var(--gold))); color: #fff; transform: translateY(-1px); } .rabbi-card-scheduler { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--rabbi-start, var(--cyan)) 36%, var(--line)); border-radius: 12px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 14%, transparent), transparent 42%), color-mix(in srgb, var(--surface) 90%, var(--rabbi-start, var(--cyan)) 6%); } .rabbi-card-scheduler-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; } .rabbi-card-scheduler-head .icon { width: 30px; height: 30px; color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 82%, var(--ink)); } .rabbi-card-scheduler-head strong, .rabbi-card-slot strong { display: block; color: var(--ink); font-size: 13px; line-height: 1.2; } .rabbi-card-scheduler-head span, .rabbi-card-slot span { color: var(--muted); font-size: 11px; font-weight: 850; } .rabbi-card-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; } .rabbi-card-steps li { display: grid; justify-items: center; gap: 5px; min-width: 0; padding: 8px 5px; border: 1px solid color-mix(in srgb, var(--rabbi-end, var(--gold)) 32%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--surface-strong) 88%, var(--rabbi-end, var(--gold)) 5%); color: var(--muted); font-size: 10px; font-weight: 900; text-align: center; line-height: 1.15; } .rabbi-card-steps li span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 999px; background: var(--rabbi-gradient, linear-gradient(135deg, var(--cyan), var(--gold))); color: #fff; font-size: 10px; font-weight: 950; } .rabbi-card-slot { padding: 9px 10px; border: 1px dashed color-mix(in srgb, var(--rabbi-start, var(--cyan)) 34%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--surface) 92%, transparent); } .rabbi-card-schedule-button { width: 100%; min-height: 38px; justify-content: center; padding: 9px 12px; font-size: 12px; } .public-link-row-hover { margin: 10px 0 12px; } .public-link-row-hover .public-link-icon { width: 30px; height: 30px; font-size: 13px; } .rabbi-directory .rabbi-card { display: grid; align-content: start; min-height: 0; padding: 10px; border-radius: 10px; } .rabbi-directory .rabbi-top { gap: 9px; margin-bottom: 7px; } .rabbi-directory .avatar { width: 38px; height: 38px; flex: 0 0 38px; } .rabbi-directory .avatar::before { left: 10px; top: 8px; width: 15px; height: 15px; } .rabbi-directory .avatar::after { left: 6px; bottom: -4px; width: 25px; height: 21px; } .rabbi-directory .rabbi-card h3 { margin-bottom: 1px; font-size: 14px; line-height: 1.12; } .rabbi-directory .row-meta { font-size: 12px; line-height: 1.25; } .rabbi-directory .live-card-badge { margin-bottom: 7px; padding: 4px 8px; font-size: 10px; } .rabbi-directory .live-card-badge::before { width: 6px; height: 6px; margin-right: 5px; } .rabbi-directory .rabbi-card p { display: -webkit-box; min-height: 0; margin-bottom: 0; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.38; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .rabbi-directory .public-link-row-card { margin-top: 8px; } .rabbi-directory .public-link-row-card .public-link-icon { width: 25px; height: 25px; font-size: 11px; } .rabbi-directory .metric-row { gap: 5px; } .rabbi-directory .metric { padding: 4px 6px; border-radius: 5px; font-size: 10px; line-height: 1; } .metric-row { display: flex; flex-wrap: wrap; gap: 6px; } .metric { padding: 5px 7px; border-radius: 6px; background: color-mix(in srgb, var(--rabbi-end, #d7b65f) 14%, #eef0e5); color: color-mix(in srgb, var(--rabbi-start, #0077a8) 74%, var(--olive-dark)); font-size: 11px; font-weight: 800; } .gem-list, .shiur-list { display: grid; gap: 10px; } .gem-item, .shiur-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: start; padding-bottom: 10px; border-bottom: 1px solid #eadfca; } .gem-item:last-child, .shiur-item:last-child { padding-bottom: 0; border-bottom: 0; } .gem-item strong, .shiur-item strong { display: block; margin-bottom: 3px; } .gem-item p, .shiur-item p { margin-bottom: 0; } .newly-uploaded-item strong { margin-bottom: 2px; } .new-upload-rabbi { margin-bottom: 2px !important; color: var(--olive-dark) !important; font-size: 12px !important; font-weight: 850; } .new-upload-rabbi .rabbi-name-link { color: var(--burgundy); } .content-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 18px; margin-top: 18px; } .mood-cloud { display: flex; flex-wrap: wrap; gap: 10px; } .mood-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fffbf4; color: var(--olive-dark); cursor: pointer; font-size: 13px; font-weight: 800; } .mood-chip.active { border-color: var(--olive); background: #e9eddd; } .mood-chip span { color: var(--muted); font-size: 11px; } .source-thumb { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #d9ccb5; border-radius: var(--radius); background: repeating-linear-gradient(180deg, #fffaf0 0 6px, #f2e8d4 6px 7px); color: var(--gold); } .session-artwork { display: block; width: 42px; height: 42px; border: 1px solid #d9ccb5; border-radius: var(--radius); background: var(--artwork) center/cover, linear-gradient(135deg, #6f7d50, #b28d53); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); } .large-artwork { width: 54px; height: 54px; } .back-link { display: inline-block; margin-bottom: 18px; color: var(--olive-dark); font-weight: 900; } .rabbi-profile { padding: clamp(10px, 1.6vw, 18px); } .rabbi-profile .back-link { margin-bottom: 10px; } .rabbi-profile-head { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; margin: 8px -4px 0; padding: 22px; border: 1px solid color-mix(in srgb, var(--rabbi-start, #0077a8) 46%, var(--line)); border-radius: 18px; background: radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--rabbi-start, #0077a8) 28%, transparent), transparent 26%), radial-gradient(circle at 96% 18%, color-mix(in srgb, var(--rabbi-end, #d7b65f) 24%, transparent), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, #0077a8) 7%, var(--surface)), color-mix(in srgb, var(--rabbi-end, #d7b65f) 8%, var(--surface))); box-shadow: inset 5px 0 0 var(--rabbi-start, #0077a8), 0 18px 40px color-mix(in srgb, var(--rabbi-start, #0077a8) 12%, transparent); } .rabbi-profile-head .avatar { width: 76px; height: 76px; } .profile-title-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .profile-title-row h1 { margin: 0; } .profile-section { margin-top: 26px; padding: 18px; border: 1px solid color-mix(in srgb, var(--rabbi-end, #d7b65f) 32%, var(--line)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, #0077a8) 5%, var(--surface)), var(--surface)); } .profile-section h2 { margin-bottom: 12px; font-size: 26px; } .profile-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .profile-facts article { padding: 13px; border: 1px solid color-mix(in srgb, var(--rabbi-start, #0077a8) 26%, var(--line)); border-radius: var(--radius); background: color-mix(in srgb, var(--rabbi-end, #d7b65f) 8%, #fffbf4); } .profile-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .rabbi-tags-section .metric { border-color: color-mix(in srgb, var(--rabbi-start, #0077a8) 26%, var(--line)); background: color-mix(in srgb, var(--rabbi-end, #d7b65f) 11%, #fffdf8); } .profile-facts span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 800; } .rabbi-intro-video video, .rabbi-intro-video iframe { display: block; width: 100%; max-width: 100%; margin-inline: auto; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 14px; background: #111; object-fit: contain; object-position: center center; box-shadow: 0 16px 38px rgba(46, 38, 25, 0.12); } .learning-item { padding: 13px 0; border-bottom: 1px solid #eadfca; } .learning-item:first-child { padding-top: 0; } .learning-item:last-child { padding-bottom: 0; border-bottom: 0; } .learning-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .learning-top strong { line-height: 1.25; } .progress { overflow: hidden; height: 7px; border-radius: 999px; background: #ede2ce; } .progress span { display: block; height: 100%; width: var(--progress); border-radius: inherit; background: linear-gradient(90deg, var(--olive), var(--gold)); } .toast { position: fixed; /* Centre horizontally via auto margins (NOT transform) so the tfFadeLift animation's transform can't knock it off-centre, and so it clears the bottom-right donate FAB on every layout. */ left: 0; right: 0; margin: 0 auto; width: fit-content; bottom: 24px; /* One above the floating donate button (2147483646) so messages are never hidden behind it. */ z-index: 2147483647; transform: translateY(18px); opacity: 0; max-width: min(360px, calc(100vw - 32px)); padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-strong); box-shadow: var(--shadow); color: var(--ink); font-size: 14px; font-weight: 700; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; } .toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; } .toast a { color: var(--cyan); font-weight: 900; text-decoration: underline; text-underline-offset: 2px; } .admin-shell h1 { margin-bottom: 12px; } .admin-form { display: grid; gap: 14px; max-width: 720px; } .admin-form.compact { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; max-width: none; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); } .admin-form label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 800; } .admin-form input, .admin-form textarea, .admin-form select { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fffdf8; color: var(--ink); font: inherit; } .admin-form textarea { min-height: 90px; resize: vertical; } .limited-textarea-field { position: relative; } .limited-textarea-field textarea { padding-bottom: 32px; } .char-counter { justify-self: end; margin-top: -28px; margin-right: 12px; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--muted); font-size: 11px; font-weight: 900; line-height: 1; pointer-events: none; } .char-counter.is-warning { color: var(--burgundy); border-color: color-mix(in srgb, var(--burgundy) 42%, var(--line)); } .admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; } .admin-tabs button { min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fffbf4; color: var(--muted); cursor: pointer; font-weight: 800; } .admin-tabs button.active { background: var(--olive); color: #fff; } .admin-panel { display: none; } .admin-panel.active { display: block; } .admin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .admin-grid article { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fffbf4; } .admin-grid strong { display: block; font-family: var(--serif); font-size: 32px; } .admin-grid span { color: var(--muted); font-size: 13px; } .admin-list-head { display: grid; grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr); gap: 16px; align-items: end; margin: 8px 0 12px; } .admin-list-head h2 { margin-bottom: 4px; } .admin-list-controls { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(130px, 0.55fr)); gap: clamp(12px, 1.2vw, 18px); align-items: end; } .admin-list-controls label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 850; } .admin-list-controls input, .admin-list-controls select { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fffdf8; color: var(--ink); font: inherit; } .admin-rabbi-search { display: flex !important; align-items: center; gap: 10px; max-width: none; min-height: 42px; padding: 0 12px; } .admin-list-controls .admin-rabbi-search input { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0; } .zone-message-search { width: 100%; max-width: none; margin: 10px 0 16px; } .admin-rabbi-list { display: grid; } .admin-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); } .admin-rabbi-editor { display: block; } .rabbi-edit-form { max-width: none; } .rabbi-editor-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .rabbi-editor-head .avatar { flex: 0 0 auto; } .rabbi-edit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .wide-field { grid-column: span 3; } .admin-row p { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.45; } .row-actions { display: flex; align-items: center; gap: 8px; } .admin-permission-search { max-width: 360px; } .permission-list { display: grid; gap: 4px; } .permission-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .permission-badges .metric { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; } .permission-badges .allowed { border-color: rgba(90, 109, 76, 0.25); background: #e9eddd; color: var(--olive-dark); } .permission-badges .warning { border-color: #e0b2aa; background: #fff1ee; color: var(--burgundy); } .permission-actions { flex-wrap: wrap; justify-content: flex-end; } .danger-button { border-color: rgba(170, 37, 62, 0.35); color: var(--burgundy); } .checkbox-line { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--panel) 82%, transparent); } .checkbox-line input { width: 18px; min-height: 18px; flex: 0 0 auto; } .checklist-form { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--surface) 82%, transparent); } .content-flag-row.auto-held { border-left: 4px solid var(--burgundy); padding-left: 12px; } .content-flag-row textarea { min-height: 72px; } .audit-row strong { color: var(--text); } .security-list { display: grid; gap: 10px; color: var(--muted); line-height: 1.5; } .auth-panel { max-width: 760px; margin-inline: auto; } .auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; } .auth-note { margin-top: 14px; padding: 14px; border: 1px solid rgba(90, 109, 76, 0.25); border-radius: var(--radius); background: #f6f8f1; color: var(--green); font-weight: 800; } .auth-note code { display: inline-block; margin: 0 8px; padding: 4px 8px; border-radius: 6px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 16px; } .auth-note span { display: block; margin-top: 6px; color: var(--muted); font-weight: 700; } .status-warning { margin: 16px 0; padding: 14px; border: 1px solid #e0b2aa; border-radius: var(--radius); background: #fff1ee; color: var(--burgundy); font-weight: 800; } .disabled-control { opacity: 0.55; cursor: not-allowed; } .api-guide { display: grid; gap: 16px; margin-top: 18px; } .api-guide article { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fffbf4; } .api-guide h2, .api-guide h3 { margin-bottom: 10px; } .api-guide ol { margin: 0 0 12px 20px; color: var(--muted); line-height: 1.55; } .api-guide code { color: var(--olive-dark); font-weight: 800; } .api-guide pre { overflow-x: auto; padding: 12px; border-radius: var(--radius); background: #eef0e5; } .social-api-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } .social-api-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 16px 0; } .social-api-card { border: 1px solid rgba(120, 214, 230, 0.24); border-radius: 8px; padding: 14px; background: rgba(5, 18, 29, 0.52); } .social-api-card.configured { border-color: rgba(86, 232, 170, 0.55); } .social-api-card h3, .social-api-card p { margin-top: 0; } .social-api-card .ghost-button { width: max-content; min-height: 34px; padding: 8px 12px; } .distribution-platform-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .distribution-platform-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(120, 214, 230, 0.24); border-radius: 8px; background: rgba(5, 18, 29, 0.48); } .distribution-platform-card.configured { border-color: rgba(86, 232, 170, 0.5); } .distribution-platform-card p { margin: 4px 0 0; color: var(--muted); } .distribution-platform-card .primary-button, .distribution-platform-card .ghost-button { min-height: 34px; padding: 8px 12px; white-space: nowrap; } @media (max-width: 760px) { .social-api-form { grid-template-columns: 1fr; } .distribution-platform-card { grid-template-columns: 1fr; } } .recorded-controls { display: grid; grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(170px, 0.72fr)); gap: clamp(14px, 1.35vw, 22px); align-items: stretch; margin-bottom: 18px; } .recorded-search { max-width: none; } .sort-label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; } .sort-label select { height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 800; } .recorded-item { grid-template-columns: 58px minmax(0, 1fr); padding: 12px 0; } .recorded-item .metric { display: inline-flex; width: fit-content; margin-top: 8px; } .recorded-item .avatar { margin-top: 2px; } .recorded-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .recorded-rabbi-line { font-weight: 750; } .recorded-rabbi-line span { color: var(--muted); font-weight: 650; } .recorded-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .recorded-tags button { height: 25px; padding: 0 8px; border: 1px solid #dfd2bd; border-radius: 999px; background: #fbf7ee; color: var(--olive-dark); cursor: pointer; font-size: 11px; font-weight: 800; } .recorded-tags button:hover { border-color: var(--olive); background: #eef0e5; } .recorded-metrics { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; color: var(--muted); font-size: 12px; font-weight: 750; } .recorded-metrics a { color: var(--burgundy); } .rabbi-admin-shell { max-width: 1180px; border-color: rgba(63, 127, 159, 0.18); background: linear-gradient(135deg, rgba(63, 127, 159, 0.08), transparent 34%), linear-gradient(315deg, rgba(157, 38, 55, 0.06), transparent 38%), #fffdf8; } .rabbi-admin-shell h1, .rabbi-admin-shell h2 { font-family: var(--sans); letter-spacing: 0; } .rabbi-admin-shell h1 { font-size: 42px; font-weight: 900; } .rabbi-admin-shell h2 { font-size: 24px; font-weight: 900; } .rabbi-admin-stats article { background: rgba(255, 255, 255, 0.74); border-color: rgba(63, 127, 159, 0.16); box-shadow: 0 10px 32px rgba(31, 36, 31, 0.06); } .rabbi-admin-subhead { margin-top: 26px; } .rabbi-console-tabs { position: sticky; top: 74px; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; padding: 10px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(63, 127, 159, 0.16); border-radius: 14px; backdrop-filter: blur(16px); } .rabbi-console-tabs button { min-height: 38px; padding: 9px 14px; border: 1px solid transparent; border-radius: 999px; background: #eef4f2; color: var(--olive-dark); cursor: pointer; font-weight: 900; } .rabbi-console-tabs button:hover, .rabbi-console-tabs button.active { border-color: rgba(63, 127, 159, 0.28); background: #ffffff; color: var(--blue); } .rabbi-console-tabs button.active { box-shadow: 0 10px 24px rgba(63, 127, 159, 0.12); } .tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; min-height: 22px; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12px; line-height: 1; } .rabbi-console-panel { display: grid; gap: 14px; margin-top: 18px; padding: 22px; border: 1px solid rgba(63, 127, 159, 0.16); border-radius: 16px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 14px 36px rgba(31, 36, 31, 0.06); } .rabbi-console-panel[hidden] { display: none; } .link-button { border: 0; background: transparent; color: var(--olive-dark); cursor: pointer; font: inherit; font-weight: 900; } .link-button:hover { color: var(--burgundy); } .rabbi-profile-form, .rabbi-upload-form { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } .rabbi-live-form { grid-template-columns: minmax(260px, 1fr) 180px auto; align-items: end; max-width: none; } .schedule-builder { display: grid; gap: 16px; margin-top: 20px; padding: 18px; border: 1px solid rgba(85, 107, 76, 0.18); border-radius: 16px; background: radial-gradient(circle at 100% 0%, rgba(183, 139, 63, 0.1), transparent 30%), rgba(255, 253, 248, 0.64); } .schedule-shiur-form { grid-template-columns: minmax(230px, 1fr) 210px 210px; max-width: none; } .scheduled-shiur-list { display: grid; gap: 12px; } .scheduled-shiur-card { grid-template-columns: 156px minmax(0, 1fr) auto; align-items: center; } .scheduled-shiur-card .row-actions { grid-column: auto; justify-content: flex-end; } .scheduled-artwork { min-width: 128px; } .form-section-title { display: grid; gap: 3px; margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(85, 107, 76, 0.16); } .form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .form-section-title h3 { margin: 0; font-size: 15px; font-weight: 950; } .form-section-title p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; } .field-block { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 900; } .photo-upload-control { display: grid; gap: 6px; } .media-upload-card { grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px; border: 1px solid rgba(85, 107, 76, 0.18); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 252, 245, 0.98), rgba(246, 250, 239, 0.78)); } .media-preview { display: grid; place-items: center; width: 78px; height: 78px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 250, 240, 0.95); color: var(--muted); font-size: 11px; font-weight: 900; text-align: center; } .square-preview { border-radius: 999px; } .media-preview img, .media-preview video, .media-preview iframe { width: 100%; height: 100%; border: 0; object-fit: cover; } .video-preview { width: 112px; aspect-ratio: 16 / 9; height: auto; border-radius: 12px; } /* If the card uses the standard 92px first column but contains a video preview (which is 112px wide), expand the column so the thumbnail doesn't overflow into the text/description column and cause overlap. */ .media-upload-card:has(> .video-preview) { grid-template-columns: 130px minmax(0, 1fr) auto; } .media-upload-card .media-upload-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .media-upload-card .media-upload-copy strong { font-size: 0.95rem; font-weight: 800; } .media-upload-card .media-upload-copy p { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--muted, #6b7280); } /* Fallback for browsers without :has() - keeps the layout safe */ @supports not selector(:has(*)) { .media-upload-card { grid-template-columns: 130px minmax(0, 1fr) auto; } } .recording-upload-card { grid-template-columns: 180px minmax(0, 1fr) auto; } .recording-upload-card .video-preview { width: 168px; } .recorded-video-frame { margin-top: 14px; width: min(760px, 100%); aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #050505; } .recorded-video-frame iframe, .recorded-video-frame video { width: 100%; height: 100%; border: 0; display: block; } .media-upload-copy { display: grid; gap: 3px; } .media-upload-copy strong { font-size: 15px; font-weight: 950; } .file-upload-button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; min-height: 42px; padding: 0 16px; border: 1px solid rgba(85, 107, 76, 0.28); border-radius: 10px; background: var(--surface); color: var(--green); font-weight: 950; cursor: pointer; white-space: nowrap; } .file-upload-button:focus-visible { outline: 0; border-color: color-mix(in srgb, var(--cyan) 58%, var(--gold)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 14%, transparent), 0 12px 28px color-mix(in srgb, var(--cyan) 14%, transparent); } .file-upload-button input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; /* suppress native "No file chosen" label in some browsers */ z-index: 2; } .upload-only-field .photo-upload-control { margin-top: 6px; padding: 12px; border: 1px dashed rgba(85, 107, 76, 0.38); border-radius: 10px; background: rgba(246, 250, 239, 0.72); } .photo-upload-control > input { padding: 8px; } .photo-upload-control p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; } .photo-upload-control .upload-result { color: var(--green); } .photo-upload-control input[type="file"] { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-weight: 850; } .photo-upload-control input.visually-hidden-file-input[type="file"] { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; } .photo-crop-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 18px; background: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 34%), rgba(1, 8, 18, 0.72); backdrop-filter: blur(14px); } .photo-crop-dialog { width: min(1120px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: clamp(18px, 2vw, 28px); border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--cyan) 20%); border-radius: 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, var(--cyan) 8%), color-mix(in srgb, var(--surface-soft) 92%, var(--gold) 8%)); box-shadow: 0 34px 100px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .photo-crop-canvas { display: block; width: min(100%, 560px); aspect-ratio: 1; height: auto; margin: 0 auto; border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--cyan) 26%); border-radius: 18px; background: #071524; cursor: grab; touch-action: none; box-shadow: 0 20px 56px rgba(0, 0, 0, 0.36), 0 0 0 8px color-mix(in srgb, var(--surface) 76%, transparent); } .photo-crop-canvas.is-dragging { cursor: grabbing; } .photo-crop-canvas:focus-visible { outline: 3px solid color-mix(in srgb, var(--cyan) 70%, var(--gold)); outline-offset: 5px; } .photo-crop-canvas.artwork-canvas { width: min(100%, 780px); aspect-ratio: 16 / 9; } .crop-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); gap: clamp(16px, 2vw, 24px); align-items: stretch; margin: 20px 0; } .crop-stage { position: relative; display: grid; place-items: center; min-width: 0; padding: clamp(12px, 2vw, 18px); border: 1px solid color-mix(in srgb, var(--line) 76%, var(--cyan) 24%); border-radius: 22px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--cyan) 13%, transparent), transparent 46%), color-mix(in srgb, var(--surface-strong) 92%, transparent); } .crop-stage-hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 48px); padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent); border-radius: 999px; background: rgba(1, 8, 18, 0.74); color: #fffaf0; font-size: 0.78rem; font-weight: 900; pointer-events: none; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28); } .crop-tool-panel { display: grid; align-content: start; gap: 16px; padding: 16px; border: 1px solid color-mix(in srgb, var(--line) 76%, var(--gold) 24%); border-radius: 22px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 88%, var(--cyan) 8%), color-mix(in srgb, var(--surface-soft) 88%, var(--gold) 7%)); } .crop-readout { display: grid; gap: 4px; padding: 14px; border: 1px solid color-mix(in srgb, var(--line) 74%, var(--cyan) 26%); border-radius: 16px; background: color-mix(in srgb, var(--surface-strong) 88%, transparent); } .crop-readout span, .crop-readout small { color: var(--muted); font-size: 0.78rem; font-weight: 850; } .crop-readout strong { color: var(--ink); } .crop-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .crop-action-grid .ghost-button { width: 100%; min-height: 42px; } .crop-controls { display: grid; gap: 14px; margin: 0; } .crop-controls label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 800; } .crop-controls label span { display: flex; justify-content: space-between; gap: 12px; } .crop-controls input[type="range"] { accent-color: var(--cyan); min-height: 28px; } .crop-controls input[type="range"]:disabled { opacity: 0.48; } @media (max-width: 900px) { .crop-workspace { grid-template-columns: 1fr; } .crop-tool-panel { grid-template-columns: 1fr; } .crop-stage-hint { position: static; transform: none; justify-self: center; margin-top: 12px; } } @media (max-width: 560px) { .photo-crop-modal { padding: 10px; place-items: start center; } .photo-crop-dialog { max-height: calc(100vh - 20px); padding: 14px; } .crop-action-grid { grid-template-columns: 1fr; } } .field-hint { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 750; } .rabbi-chat-panel { border: 1px solid rgba(176, 36, 58, 0.16); background: linear-gradient(135deg, rgba(255, 252, 245, 0.98), rgba(250, 244, 232, 0.82)); } .rabbi-message-area { margin-top: 22px; } .rabbi-page-message-thread { min-height: 190px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 250, 240, 0.72)), repeating-linear-gradient(180deg, rgba(183, 139, 63, 0.05) 0 1px, transparent 1px 38px); } .chat-thread { display: grid; gap: 10px; max-height: 360px; overflow: auto; padding: 12px; border: 1px solid rgba(85, 107, 76, 0.14); border-radius: 12px; background: rgba(255, 255, 255, 0.54); } .compact-thread { max-height: 260px; } .chat-message { max-width: min(680px, 88%); padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .chat-message.mine { justify-self: end; background: rgba(234, 241, 225, 0.95); } .chat-message strong { display: block; font-size: 13px; font-weight: 950; } .chat-message p { margin: 4px 0 6px; } .chat-message span { color: var(--muted); font-size: 11px; font-weight: 800; } .message-public-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; margin-top: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.74); color: var(--green); font-weight: 950; cursor: pointer; } .message-public-toggle.selected { border-color: rgba(85, 107, 76, 0.34); background: var(--soft-green); } .message-public-status { display: block; margin-top: 6px; color: var(--muted); font-weight: 850; } .color-picker-field { display: grid; grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; width: 100%; } .color-picker-note { margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; font-weight: 750; } .color-picker-field .color-preview { display: block; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--avatar); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.86); } .color-picker-field label { gap: 5px; font-size: 12px; } .color-picker-field input[type="color"] { width: 100%; height: 42px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.72); cursor: pointer; } .rabbi-card-design-preview { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border: 1px solid color-mix(in srgb, var(--rabbi-start, #0077a8) 42%, rgba(85, 107, 76, 0.16)); border-radius: 16px; background: linear-gradient(90deg, var(--rabbi-start, #0077a8) 0 5px, transparent 5px), radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--rabbi-start, #0077a8) 28%, transparent), transparent 32%), radial-gradient(circle at 95% 0%, color-mix(in srgb, var(--rabbi-end, #d7b65f) 22%, transparent), transparent 36%), rgba(255, 255, 255, 0.74); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rabbi-end, #d7b65f) 20%, transparent); } .rabbi-card-design-preview .avatar { width: 54px; height: 54px; } .rabbi-card-design-preview strong { display: block; font-size: 18px; font-weight: 950; } .rabbi-card-design-preview p { margin: 2px 0 8px; color: var(--muted); } .card-color-picker { max-width: 620px; } .chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 12px; align-items: end; } .chat-compose textarea { min-height: 86px; } .chat-consent-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; } .chat-admin-card h3 { margin: 0; font-size: 22px; } .public-chat-list { display: grid; gap: 14px; } .public-chat-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 252, 245, 0.86); } .rabbi-chat-panel, .public-chat-panel, .chat-admin-card { position: relative; overflow: hidden; border-color: rgba(85, 107, 76, 0.18); background: radial-gradient(circle at 10% 0%, rgba(183, 139, 63, 0.12), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 244, 0.9)); box-shadow: 0 22px 70px rgba(30, 35, 26, 0.08); } .rabbi-chat-panel::before, .public-chat-panel::before, .chat-admin-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--burgundy), var(--gold), var(--olive)); } .chat-panel-head { padding-bottom: 14px; border-bottom: 1px solid rgba(85, 107, 76, 0.12); } .chat-panel-head h2 { font-size: clamp(28px, 4vw, 44px); } .chat-status-pill { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid rgba(85, 107, 76, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.72); color: var(--muted); font-size: 12px; font-weight: 950; } .chat-status-pill.allowed { border-color: rgba(85, 107, 76, 0.28); background: var(--soft-green); color: var(--green); } .chat-thread { gap: 14px; max-height: min(520px, 62vh); padding: 18px; border-color: rgba(85, 107, 76, 0.12); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 252, 245, 0.76)), repeating-linear-gradient(135deg, rgba(85, 107, 76, 0.035) 0 1px, transparent 1px 24px); } .compact-thread { max-height: 380px; } .chat-message { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; width: min(760px, 92%); max-width: none; padding: 0; border: 0; border-radius: 0; background: transparent; } .chat-message.mine { justify-self: end; grid-template-columns: minmax(0, 1fr) 34px; background: transparent; } .chat-message.mine .chat-avatar-mini { grid-column: 2; } .chat-message.mine .chat-bubble { grid-column: 1; grid-row: 1; border-color: rgba(85, 107, 76, 0.22); background: linear-gradient(135deg, rgba(234, 241, 225, 0.98), rgba(255, 255, 255, 0.9)); } .chat-avatar-mini { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(85, 107, 76, 0.18); border-radius: 50%; background: linear-gradient(135deg, var(--olive), var(--gold)); color: #fff; font-size: 11px; font-weight: 950; box-shadow: 0 8px 20px rgba(54, 63, 47, 0.14); } .chat-bubble { min-width: 0; padding: 12px 14px; border: 1px solid rgba(183, 139, 63, 0.18); border-radius: 18px; border-top-left-radius: 8px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 12px 34px rgba(55, 47, 33, 0.06); } .chat-message.mine .chat-bubble { border-top-left-radius: 18px; border-top-right-radius: 8px; } .chat-message.is-public .chat-bubble { border-color: rgba(177, 38, 61, 0.24); box-shadow: 0 16px 40px rgba(177, 38, 61, 0.09); } .chat-bubble-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: baseline; } .chat-bubble-head strong { font-size: 13px; font-weight: 950; } .chat-bubble-head time { color: var(--muted); font-size: 11px; font-weight: 800; } .chat-bubble p { margin: 7px 0 0; line-height: 1.45; } .message-public-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(85, 107, 76, 0.1); } .message-public-toggle { min-height: 32px; border-color: rgba(85, 107, 76, 0.16); background: rgba(255, 255, 255, 0.86); box-shadow: 0 8px 20px rgba(55, 47, 33, 0.05); } .message-public-toggle.selected { border-color: rgba(177, 38, 61, 0.22); background: rgba(177, 38, 61, 0.08); color: var(--burgundy); } .message-public-status { margin: 0; font-size: 11px; } .public-request-note { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid rgba(177, 38, 61, 0.24); border-radius: 999px; background: linear-gradient(135deg, rgba(177, 38, 61, 0.12), rgba(255, 236, 221, 0.9)); color: var(--burgundy); font-size: 13px; font-weight: 950; box-shadow: 0 10px 24px rgba(177, 38, 61, 0.12); } .public-request-note.approved { border-color: rgba(85, 107, 76, 0.28); background: linear-gradient(135deg, rgba(234, 241, 225, 0.98), rgba(255, 255, 255, 0.86)); color: var(--green); } .public-request-note.quiet { border-color: rgba(85, 107, 76, 0.12); background: rgba(255, 255, 255, 0.72); color: var(--muted); font-size: 12px; font-weight: 850; box-shadow: none; } .public-live-note { color: var(--green); font-weight: 950; } .chat-compose { grid-template-columns: minmax(0, 1fr) 64px; gap: 12px; padding: 12px; border: 1px solid rgba(85, 107, 76, 0.13); border-radius: 18px; background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84); } .chat-compose textarea { min-height: 72px; border: 0; background: transparent; resize: vertical; } .chat-compose textarea:focus { outline: none; box-shadow: none; } .chat-compose .primary-button { min-height: 48px; align-self: stretch; } .public-chat-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; } .public-chat-title span { color: var(--muted); font-size: 12px; font-weight: 900; } .rabbi-admin-list { display: grid; gap: 16px; } .rabbi-admin-session { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fffbf4; } .rabbi-admin-preview { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .rabbi-admin-artwork { width: 72px; height: 72px; } .rabbi-shiur-form { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } .terms-list { display: grid; gap: 14px; } .terms-list article { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fffbf4; } .terms-list h2 { margin-bottom: 8px; font-size: 24px; } .donation-page { display: grid; gap: 22px; } .donation-hero { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .donation-hero h1 { margin-bottom: 8px; } .donation-hero p { max-width: 680px; color: var(--muted); font-size: 16px; line-height: 1.55; } .donation-summary { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fffaf0; } .donation-summary span { color: var(--muted); font-size: 12px; font-weight: 850; text-transform: uppercase; } .donation-summary strong { font-family: var(--serif); font-size: 42px; line-height: 1; } .donation-form { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } .donation-amount-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 6px 0 0; } .load-more-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; } .icon { display: inline-flex; width: 18px; height: 18px; flex: 0 0 auto; } .icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } @media (max-width: 1180px) { .app-shell { grid-template-columns: 82px minmax(0, 1fr); } .brand span:last-child, .nav-item:not(.active), .nav-item.active { font-size: 0; } .nav-item { justify-content: center; padding: 0; } .nav-user-item span:not(.nav-user-avatar) { display: none; } .sidebar-card { display: none; } .mega-menu { grid-template-columns: minmax(0, 1fr) 44px; padding: 12px 72px 12px 14px; } .mega-menu .brand { min-width: 0; overflow: hidden; } .menu-toggle { position: absolute; top: 12px; right: 14px; display: inline-grid !important; place-items: center; z-index: 2; } .mega-links { grid-column: 1 / -1; display: none; flex-direction: column; align-items: stretch; padding-top: 10px; } .mega-links.open { display: flex; } .mega-links .nav-item, .mega-links .nav-item:not(.active), .mega-links .nav-item.active { justify-content: flex-start; padding: 0 12px; font-size: 14px; } .mega-links .nav-user-item span:not(.nav-user-avatar) { display: inline; } .mega-links.open .nav-account-menu { display: grid; width: 100%; padding-bottom: 0; margin-bottom: 0; } .mega-links.open .nav-account-summary { width: 100%; justify-content: flex-start; } .mega-links.open .nav-account-dropdown { position: static; display: grid; min-width: 0; width: 100%; margin-top: 8px; opacity: 1; visibility: visible; transform: none; box-shadow: none; } .welcome-grid, .discovery-grid, .content-grid { grid-template-columns: 1fr; } .rabbi-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rabbi-directory, .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .mega-menu { grid-template-columns: minmax(0, 1fr) 44px; padding: 12px 72px 12px 14px; } .menu-toggle { position: absolute; top: 12px; right: 14px; display: inline-grid !important; place-items: center; justify-self: end; z-index: 2; } .mega-menu .brand { min-width: 0; overflow: hidden; } .mega-menu .brand > span:last-child { min-width: 0; } .mega-menu .brand strong, .mega-menu .brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mega-links { grid-column: 1 / -1; display: none; flex-direction: column; align-items: stretch; padding-top: 10px; } .mega-links.open { display: flex; } .app-shell { display: block; } .sidebar { position: static; display: flex; align-items: center; height: auto; padding: 14px; gap: 14px; overflow-x: hidden; } .brand { margin-bottom: 0; } .nav-list { display: flex; } .main { padding: 12px 14px 34px; width: 100vw; max-width: 100vw; overflow: hidden; } .topbar, .section-heading, .section-title-row { align-items: stretch; flex-direction: column; } .recorded-cta, .open-table-cta { width: 100%; min-width: 0; } .live-heading-actions { width: 100%; } .top-actions { display: grid; grid-template-columns: 1fr; width: 100%; } .ajax-search-wrap { width: 100%; max-width: none; } .ajax-search-item { grid-template-columns: 1fr; } .top-actions button { width: 100%; padding-inline: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; } h1 { font-size: 30px; max-width: 100%; } .live-panel, .action-panel, .wide-section, .stack-section, .topics-panel, .zone-panel { padding: 16px; width: 100%; max-width: 100%; } .live-row { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 10px; } .featured-live { grid-template-columns: 1fr; align-items: stretch; } .live-row .row-meta { display: none; } .viewer-count { grid-column: 2; } .join-button { grid-column: 1 / -1; grid-row: auto; width: 100%; padding: 0 8px; font-size: 11px; } .rabbi-rail { grid-template-columns: 1fr; } .rabbi-directory, .admin-grid, .admin-list-head, .admin-list-controls, .auth-grid, .recorded-controls, .rabbi-profile-head, .profile-facts, .admin-form.compact, .rabbi-profile-form, .rabbi-upload-form, .rabbi-live-form, .schedule-shiur-form, .scheduled-shiur-card, .rabbi-shiur-form, .donation-form, .donation-hero { grid-template-columns: 1fr; } .scheduled-shiur-card .row-actions { grid-column: 1 / -1; justify-content: stretch; } .scheduled-shiur-card .row-actions > *, .upcoming-shiur-card .row-actions > * { flex: 1 1 100%; } .filter-row, .filter-summary { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; } .donation-amount-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-row, .site-footer { flex-direction: column; align-items: stretch; } .rabbi-edit-grid { grid-template-columns: 1fr; } .media-upload-card { grid-template-columns: 1fr; align-items: stretch; } .media-preview { width: 88px; height: 88px; } .video-preview { width: 100%; } .file-upload-button { width: 100%; } .chat-compose { grid-template-columns: 1fr; } .chat-message { max-width: 100%; } .rabbi-admin-preview { grid-template-columns: 54px minmax(0, 1fr); } .rabbi-admin-artwork { width: 54px; height: 54px; } .wide-field { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } } .recorded-controls { align-items: center; } .thumbnail-wrapper { position: relative; display: inline-block; line-height: 0; } .play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; background: rgba(0, 0, 0, 0.45); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; pointer-events: none; } .play-overlay svg { width: 14px; height: 14px; fill: currentColor; margin-left: 3px; } :root[data-theme="dark"] .site-footer, :root[data-theme="dark"] .sidebar, :root[data-theme="dark"] .wide-section, :root[data-theme="dark"] .content-card, :root[data-theme="dark"] .rabbi-card, :root[data-theme="dark"] .admin-panel, :root[data-theme="dark"] .admin-row, :root[data-theme="dark"] .rabbi-console-panel, :root[data-theme="dark"] .profile-section, :root[data-theme="dark"] .support-card, :root[data-theme="dark"] .auth-panel, :root[data-theme="dark"] .public-chat-card, :root[data-theme="dark"] .rabbi-admin-session, :root[data-theme="dark"] .recorded-item, :root[data-theme="dark"] .live-row, :root[data-theme="dark"] .donation-card, :root[data-theme="dark"] .media-upload-card, :root[data-theme="dark"] .rabbi-card-design-preview, :root[data-theme="dark"] .photo-crop-dialog { background: linear-gradient(135deg, rgba(32, 37, 28, 0.96), rgba(24, 27, 21, 0.92)) !important; border-color: var(--line); } :root[data-theme="dark"] .rabbi-card { border-color: color-mix(in srgb, var(--rabbi-start, #0077a8) 54%, var(--line)) !important; background: linear-gradient(90deg, var(--rabbi-start, #0077a8) 0 4px, transparent 4px), radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--rabbi-end, #d7b65f) 22%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, #0077a8) 16%, #182016), color-mix(in srgb, var(--rabbi-end, #d7b65f) 9%, #151912)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rabbi-end, #d7b65f) 22%, transparent); } :root[data-theme="dark"] .chat-thread, :root[data-theme="dark"] .chat-compose, :root[data-theme="dark"] .chat-bubble, :root[data-theme="dark"] .public-request-note.quiet, :root[data-theme="dark"] .color-picker-field input[type="color"], :root[data-theme="dark"] .photo-crop-canvas, :root[data-theme="dark"] .media-preview { background: rgba(17, 20, 15, 0.76) !important; border-color: var(--line); } :root[data-theme="dark"] .crop-stage, :root[data-theme="dark"] .crop-tool-panel, :root[data-theme="dark"] .crop-readout { background: radial-gradient(circle at 20% 0%, rgba(0, 191, 232, 0.11), transparent 38%), linear-gradient(145deg, rgba(8, 24, 41, 0.94), rgba(3, 9, 20, 0.88)); border-color: rgba(217, 180, 90, 0.25); } :root[data-theme="dark"] .crop-stage-hint { background: rgba(2, 13, 25, 0.84); border-color: rgba(217, 180, 90, 0.42); color: #fff6df; } :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select, :root[data-theme="dark"] .search, :root[data-theme="dark"] .ghost-button { background: #11140f !important; color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] .metric, :root[data-theme="dark"] .nav-user-item, :root[data-theme="dark"] .chat-status-pill { background: color-mix(in srgb, var(--rabbi-end, #d7b65f) 18%, rgba(143, 166, 121, 0.13)); color: #eff7df; } :root[data-theme="dark"] .public-link-icon { background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 20%, transparent), transparent 44%), rgba(8, 14, 24, 0.84); color: color-mix(in srgb, var(--rabbi-end, var(--gold)) 52%, #d9ecff); border-color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 45%, rgba(217, 180, 90, 0.36)); } :root[data-theme="dark"] .public-link-icon:hover, :root[data-theme="dark"] .public-link-icon:focus-visible { color: #ffffff; background: var(--rabbi-gradient, linear-gradient(135deg, var(--cyan), var(--gold))); } :root[data-theme="dark"] .char-counter { background: rgba(8, 14, 24, 0.88); color: #d9ecff; border-color: rgba(217, 180, 90, 0.32); } /* Dark-mode contrast pass: keep every surface dark when text is light. */ :root[data-theme="dark"] { --green: #bfe3a7; --soft-green: rgba(143, 166, 121, 0.2); } :root[data-theme="dark"] body { background: linear-gradient(90deg, rgba(211, 173, 93, 0.07) 1px, transparent 1px), linear-gradient(180deg, rgba(143, 166, 121, 0.07) 1px, transparent 1px), var(--paper); color: var(--ink); } :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] strong, :root[data-theme="dark"] label { color: var(--ink); } :root[data-theme="dark"] p, :root[data-theme="dark"] span, :root[data-theme="dark"] .row-meta, :root[data-theme="dark"] .viewer-count, :root[data-theme="dark"] .section-heading p, :root[data-theme="dark"] .featured-live p, :root[data-theme="dark"] .support-box p, :root[data-theme="dark"] .rabbi-card p, :root[data-theme="dark"] .gem-item p, :root[data-theme="dark"] .shiur-item p, :root[data-theme="dark"] .learning-item p, :root[data-theme="dark"] .admin-grid span, :root[data-theme="dark"] .admin-row p, :root[data-theme="dark"] .field-block, :root[data-theme="dark"] .form-section-title p, :root[data-theme="dark"] .recorded-rabbi-line span, :root[data-theme="dark"] .recorded-metrics, :root[data-theme="dark"] .donation-hero p, :root[data-theme="dark"] .public-chat-title span, :root[data-theme="dark"] .chat-bubble-head time { color: var(--muted); } :root[data-theme="dark"] .brand-mark { background: #f8efd9; color: #374733; border-color: #d3bd82; } :root[data-theme="dark"] .brand small { color: #d6cfbf; } :root[data-theme="dark"] .live-panel, :root[data-theme="dark"] .action-panel, :root[data-theme="dark"] .stack-section, :root[data-theme="dark"] .topics-panel, :root[data-theme="dark"] .zone-panel, :root[data-theme="dark"] .rabbi-admin-shell, :root[data-theme="dark"] .rabbi-chat-panel, :root[data-theme="dark"] .public-chat-panel, :root[data-theme="dark"] .chat-admin-card { background: radial-gradient(circle at 80% 12%, rgba(211, 173, 93, 0.12), transparent 28%), linear-gradient(135deg, rgba(32, 37, 28, 0.98), rgba(20, 23, 18, 0.96)) !important; color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] .rabbi-profile-head, :root[data-theme="dark"] .profile-section { border-color: color-mix(in srgb, var(--rabbi-start, #0077a8) 42%, var(--line)); background: radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--rabbi-start, #0077a8) 24%, transparent), transparent 26%), radial-gradient(circle at 96% 18%, color-mix(in srgb, var(--rabbi-end, #d7b65f) 18%, transparent), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, #0077a8) 14%, #182016), color-mix(in srgb, var(--rabbi-end, #d7b65f) 8%, #151912)) !important; } :root[data-theme="dark"] .profile-facts article { border-color: color-mix(in srgb, var(--rabbi-start, #0077a8) 32%, var(--line)); background: color-mix(in srgb, var(--rabbi-end, #d7b65f) 10%, #11140f) !important; } .empty-state { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 18px; border: 1px solid color-mix(in srgb, var(--line) 78%, var(--olive)); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, var(--olive) 12%), var(--surface)); box-shadow: 0 14px 34px rgba(46, 38, 25, 0.08); } .empty-state-mark { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 999px; background: linear-gradient(135deg, var(--olive), var(--gold)); color: #fffaf0; font-family: var(--serif); font-weight: 900; } .empty-state strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 18px; } .empty-state p, .learning-note { margin: 0; color: var(--muted); line-height: 1.45; } .learning-note { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); border-radius: 0 var(--radius) var(--radius) 0; } .share-card-modal, .note-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; background: rgba(12, 12, 10, 0.64); } .share-card-dialog, .note-dialog { width: min(860px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .note-dialog { width: min(620px, 100%); display: grid; gap: 14px; } .share-card-canvas { display: block; width: 100%; aspect-ratio: 1200 / 630; height: auto; margin: 14px 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fffaf0; } .share-card-dialog label, .note-dialog label { display: grid; gap: 8px; font-size: 13px; font-weight: 800; color: var(--muted); } .share-card-dialog textarea, .note-dialog textarea { min-height: 96px; resize: vertical; } :root[data-theme="dark"] .empty-state { background: linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 86%, var(--olive) 14%), var(--surface)); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24); } :root[data-theme="dark"] .share-card-dialog, :root[data-theme="dark"] .note-dialog { background: var(--surface-strong); } @media (max-width: 720px) { .empty-state { grid-template-columns: 1fr; align-items: start; } .empty-state .ghost-button { width: 100%; } } .recent-rabbis-section { margin-top: 18px; } .recent-rabbi-card { display: grid; gap: 8px; } .recent-rabbi-card > .metric { width: fit-content; } /* 2026 status pill under each Recently-Active-Leader card. Replaces the old flat beige .metric chip. Glassy rounded pill; live → glowing teal with a pulsing dot, otherwise a quiet "recently active" pill with a clock glyph. */ .rrl-status { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 5px 13px 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.01em; line-height: 1; color: var(--muted, #9fb0c4); background: color-mix(in srgb, var(--surface-strong, #0f1a2a) 78%, transparent); border: 1px solid rgba(255, 255, 255, 0.10); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .rrl-status > i { font-size: 11px; opacity: 0.75; } .rrl-status--live { color: #eafff8; background: linear-gradient(135deg, color-mix(in srgb, #16d1b0 26%, transparent), color-mix(in srgb, #18b7d9 18%, transparent)); border-color: color-mix(in srgb, #16d1b0 52%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, #16d1b0 20%, transparent), 0 8px 22px color-mix(in srgb, #16d1b0 24%, transparent); } .rrl-dot { width: 8px; height: 8px; border-radius: 50%; background: #20e3b2; box-shadow: 0 0 0 0 rgba(32, 227, 178, 0.7); animation: rrlPulse 1.6s ease-out infinite; } @keyframes rrlPulse { 0% { box-shadow: 0 0 0 0 rgba(32, 227, 178, 0.65); } 70% { box-shadow: 0 0 0 7px rgba(32, 227, 178, 0); } 100% { box-shadow: 0 0 0 0 rgba(32, 227, 178, 0); } } @media (prefers-reduced-motion: reduce) { .rrl-dot { animation: none; } } .topic-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 460px); gap: 20px; align-items: end; margin-bottom: 18px; } .topic-hero .eyebrow { display: inline-flex; margin-bottom: 8px; color: var(--red); font-size: 12px; font-weight: 900; letter-spacing: 0; text-transform: uppercase; } .topic-hero h1 { margin-bottom: 10px; } .topic-hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .topic-hero-stats article { min-height: 92px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .topic-hero-stats strong { display: block; color: var(--ink); font-family: var(--serif); font-size: 34px; line-height: 1; } .topic-hero-stats span { color: var(--muted); font-size: 13px; } .topic-live-panel { display: grid; gap: 10px; } .topic-discovery-grid, .topic-content-grid { margin-top: 18px; } .topic-rabbi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .topic-rabbi-mini { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); } .topic-rabbi-mini:last-child { border-bottom: 0; } .topic-rabbi-mini .avatar { flex: 0 0 auto; width: 42px; height: 42px; } .topic-rabbi-mini p { margin: 3px 0 0; color: var(--muted); font-size: 13px; } .topic-session-card { align-items: start; } .topic-session-artwork { width: 58px; height: 58px; } .topic-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .mini-chip { padding: 6px 9px; font-size: 11px; } .topic-qna-list { display: grid; gap: 12px; } .topic-qna-card { padding: 14px; } .topic-qna-card p:not(.orthodox-note) { margin: 8px 0 10px; color: var(--ink); line-height: 1.45; } .topic-related-panel { margin-top: 18px; } :root[data-theme="dark"] .topic-hero-stats article, :root[data-theme="dark"] .topic-qna-card { background: var(--panel); border-color: var(--line); } @media (max-width: 900px) { .topic-hero, .topic-discovery-grid, .topic-content-grid { grid-template-columns: 1fr; } .topic-rabbi-grid { grid-template-columns: 1fr; } } .preset-chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 86%, var(--green) 8%); } .preset-chip-row strong { margin-right: 4px; font-size: 13px; } .preset-chip-row .metric { cursor: pointer; } .rabbi-preset-form, .rabbi-office-form { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } .rabbi-office-form > label { align-self: start; align-content: start; } .rabbi-office-form > label > input, .rabbi-office-form > label > select { height: 42px; min-height: 42px; } .preview-mode-grid, .office-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .office-grid-single { grid-template-columns: 1fr; } .preview-mode-grid > article, .office-column, .office-slot { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 92%, var(--green) 4%); } .preview-frame { min-height: 190px; display: grid; align-content: start; gap: 10px; padding: 12px; border: 1px dashed color-mix(in srgb, var(--line) 70%, var(--green)); border-radius: 14px; background: color-mix(in srgb, var(--page) 72%, var(--surface)); } .preview-frame .rabbi-card { width: 100%; min-height: 0; } .preview-hover-card { position: static; width: min(310px, 100%); transform: none; opacity: 1; pointer-events: auto; } .profile-hero-preview { grid-template-columns: auto minmax(0, 1fr); align-items: center; min-height: 150px; border-style: solid; background: radial-gradient(circle at 94% 18%, color-mix(in srgb, var(--rabbi-end, #d7b65f) 30%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, #0077a8) 18%, var(--surface)), var(--surface)); } .profile-hero-preview h3 { margin: 0; font-family: var(--serif); font-size: clamp(28px, 5vw, 54px); line-height: 0.95; } .office-slot { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .office-column-wide { width: 100%; } .office-request-list { display: grid; gap: 12px; } .office-date-preview { display: grid; gap: 8px; padding: 14px; border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line)); border-radius: 18px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 36%), color-mix(in srgb, var(--surface) 90%, var(--paper)); } .office-calendar-picker { display: grid; gap: 12px; min-width: 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--surface) 92%, var(--cyan) 4%); } .office-calendar-picker-head { display: grid; gap: 3px; } .office-calendar-picker-head strong { color: var(--ink); } .office-calendar-picker-head small, .office-date-choice small { color: var(--muted); font-weight: 800; line-height: 1.25; } .office-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; min-width: 0; max-height: min(480px, 58vh); overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; } /* Day-of-week header row - sticky so it stays visible on scroll */ .calendar-day-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 4px 2px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); background: var(--paper); color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; pointer-events: none; user-select: none; } .calendar-day-header.is-friday-header { color: color-mix(in srgb, var(--gold) 72%, var(--muted)); } .calendar-day-header.is-shabbat-header { color: var(--gold); background: color-mix(in srgb, var(--paper) 92%, var(--gold) 8%); } /* Empty placeholder cells for week alignment */ .calendar-filler { min-height: 0; pointer-events: none; } .office-date-choice { position: relative; display: grid; grid-template-rows: 14px 14px 16px auto; align-content: start; gap: 2px; min-width: 0; min-height: 62px; padding: 6px 6px 5px; border: 1px solid color-mix(in srgb, var(--cyan) 24%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--surface-strong) 88%, var(--paper)); color: var(--ink); text-align: left; cursor: pointer; overflow: hidden; transition: border-color 120ms, box-shadow 120ms; } .office-date-hebrew { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gold); font-size: 12px; font-style: normal; font-weight: 900; line-height: 1.15; } .office-date-choice span { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 900; line-height: 1.15; } .office-date-choice .office-date-status { display: inline-flex; align-items: center; gap: 4px; width: max-content; max-width: 100%; min-height: 16px; padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--cyan) 26%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--surface) 78%, transparent); font-size: 9px; font-weight: 900; line-height: 1; white-space: nowrap; align-self: end; } .office-date-choice .office-date-status i { width: 4px; height: 4px; flex: 0 0 4px; border-radius: 999px; background: var(--cyan); } .office-date-choice.has-shabbat-boundary .office-date-status { border-color: color-mix(in srgb, var(--gold) 36%, var(--line)); color: color-mix(in srgb, var(--gold) 84%, #fff); } .office-date-choice.has-shabbat-boundary .office-date-status i { background: var(--gold); } .office-date-choice:hover, .office-date-choice.is-selected { border-color: color-mix(in srgb, var(--gold) 72%, var(--cyan)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 14%, transparent); } .office-date-choice.has-posted-slot { border-width: 2px; border-color: color-mix(in srgb, #25f4ff 72%, var(--gold)); background: linear-gradient(135deg, color-mix(in srgb, #00d5ff 28%, var(--surface-strong)), color-mix(in srgb, var(--gold) 20%, var(--surface))), color-mix(in srgb, var(--surface-strong) 72%, #00d5ff 28%); box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 14%, transparent), 0 0 0 3px color-mix(in srgb, #00d5ff 16%, transparent); } .office-date-choice.has-posted-slot .office-date-status { border-color: color-mix(in srgb, #fff 34%, var(--gold)); background: color-mix(in srgb, #071018 68%, transparent); color: color-mix(in srgb, #ffffff 82%, var(--gold)); } .office-date-choice.has-posted-slot .office-date-status i { background: #fff; } .office-date-choice.is-selected { padding-right: 34px; animation: office-date-mark 180ms ease-out; } .office-date-choice.is-selected span, .office-date-choice.is-selected .office-date-hebrew { max-width: calc(100% - 18px); } .office-date-choice.is-selected::after { content: "✓"; position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--gold); color: #071018; font-size: 13px; font-weight: 950; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); } .office-calendar-load-more { justify-self: center; min-height: 34px; padding: 7px 13px; font-size: 12px; } @keyframes office-date-mark { from { transform: scale(0.97); } to { transform: scale(1); } } .office-date-choice.has-shabbat-boundary { border-style: dashed; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 42%), color-mix(in srgb, var(--surface-strong) 88%, var(--cyan) 4%); } /* Shabbat (Saturday) - warm gold column highlight */ .office-date-choice.is-shabbat { background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 68%), color-mix(in srgb, var(--surface-strong) 84%, var(--gold) 12%); border-color: color-mix(in srgb, var(--gold) 48%, var(--line)); border-style: solid; } .office-date-choice.is-shabbat .office-date-hebrew { color: color-mix(in srgb, var(--gold) 90%, #fff); } .office-date-choice.is-shabbat .office-date-status { border-color: color-mix(in srgb, var(--gold) 44%, var(--line)); color: color-mix(in srgb, var(--gold) 88%, #fff); } .office-date-choice.is-shabbat .office-date-status i { background: var(--gold); } /* Holiday - distinct teal/cyan accent */ .office-date-choice.is-holiday { background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 66%), color-mix(in srgb, var(--surface-strong) 84%, var(--cyan) 12%); border-color: color-mix(in srgb, var(--cyan) 52%, var(--line)); } .office-date-choice.is-holiday .office-date-hebrew { color: color-mix(in srgb, var(--cyan) 88%, #fff); } .office-date-choice.is-holiday .office-date-status { border-color: color-mix(in srgb, var(--cyan) 44%, var(--line)); color: color-mix(in srgb, var(--cyan) 88%, #fff); } .office-date-choice.is-holiday .office-date-status i { background: var(--cyan); } /* Holiday name label shown below the status badge */ .office-date-holiday-name { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; font-weight: 900; letter-spacing: 0.02em; color: color-mix(in srgb, var(--cyan) 88%, #fff); line-height: 1.1; } .office-date-choice.is-closed, .office-date-choice:disabled { cursor: not-allowed; opacity: 0.58; background: color-mix(in srgb, var(--surface) 88%, var(--muted) 8%); } .hebrew-date-stack { display: inline-grid; gap: 2px; align-content: center; min-width: 136px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 82%, var(--cyan) 6%), color-mix(in srgb, var(--surface) 86%, var(--gold) 7%)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent); } .hebrew-date-stack strong { color: var(--text); font-family: var(--serif); font-size: clamp(20px, 2vw, 30px); line-height: 0.96; } .hebrew-date-stack small { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; } .office-slot-date-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; } .office-request-item { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 18px; padding: 20px; border-left: 4px solid var(--inbox-accent, var(--gold)); } .office-request-body { display: grid; gap: 12px; min-width: 0; } .office-request-head { align-items: start; } .office-request-head p, .office-request-note, .office-request-timeline { margin: 0; } .office-request-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .office-request-meta span, .office-price-chip-row span { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--line) 78%, var(--gold)); border-radius: 999px; color: var(--text); background: color-mix(in srgb, var(--surface) 82%, var(--cyan) 5%); font-size: 12px; font-weight: 900; } .office-request-note { max-width: 72ch; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--inbox-accent, var(--gold)) 28%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--page) 72%, var(--surface)); } .office-request-actions { align-self: center; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(54px, max-content); justify-content: end; gap: 6px; white-space: nowrap; } .office-request-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 54px; min-height: 34px; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--cyan) 32%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--surface) 92%, var(--cyan) 4%); color: var(--text); font-size: 10px; font-weight: 850; line-height: 1; text-decoration: none; cursor: pointer; } .office-request-action i { width: 13px; font-size: 12px; line-height: 1; text-align: center; } .office-request-action span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .office-request-action:hover, .office-request-action:focus-visible { border-color: color-mix(in srgb, var(--cyan) 58%, var(--gold)); color: var(--cyan); transform: translateY(-1px); } .office-request-action-accept, .office-request-action-done { border-color: color-mix(in srgb, #4ed6a8 42%, var(--line)); } .office-request-action-decline { border-color: color-mix(in srgb, #df5d7d 48%, var(--line)); color: color-mix(in srgb, #df5d7d 80%, var(--text)); } .office-request-action-room { border-color: color-mix(in srgb, var(--cyan) 44%, var(--line)); } .office-request-action-calendar { border-color: color-mix(in srgb, var(--gold) 46%, var(--line)); } .office-shell-card { padding: 22px; border: 1px solid color-mix(in srgb, var(--cyan) 24%, var(--line)); border-radius: 22px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 36%), color-mix(in srgb, var(--surface) 92%, var(--cyan) 4%); } .office-day-picker { display: grid; gap: 10px; } .office-day-picker .field-label { font-weight: 800; color: var(--ink); } .office-day-grid { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 10px; } .office-day-option { position: relative; display: flex; flex-direction: row !important; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--line) 80%, var(--cyan)); border-radius: 14px; background: color-mix(in srgb, var(--surface-strong) 84%, var(--cyan) 6%); cursor: pointer; color: var(--ink); } .office-day-option input { width: 18px; height: 18px; min-height: 0; padding: 0; flex: 0 0 18px; accent-color: var(--cyan); } .admin-form .office-day-option { display: flex; gap: 10px; } .admin-form .office-day-option input { width: 18px; } .office-day-option span { line-height: 1.1; } .office-day-option:has(input:checked) { border-color: color-mix(in srgb, var(--cyan) 72%, var(--gold)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 35%, transparent); background: color-mix(in srgb, var(--cyan) 18%, var(--surface)); } .office-schedule-warning { margin: 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--red) 62%, var(--gold)); border-radius: 14px; background: color-mix(in srgb, var(--red) 14%, var(--surface)); color: color-mix(in srgb, var(--red) 72%, var(--ink)); font-weight: 800; } .price-tier-builder { display: grid; gap: 12px; padding: 16px; border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--surface-strong) 86%, var(--gold) 4%); } .price-tier-rows { display: grid; gap: 14px; } .price-tier-row { position: relative; display: grid; grid-template-columns: minmax(180px, 1.6fr) minmax(120px, 0.7fr) minmax(120px, 0.7fr) auto; gap: 12px; align-items: end; padding: 14px; border: 1px solid color-mix(in srgb, var(--cyan) 34%, var(--gold) 18%); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 44%), color-mix(in srgb, var(--surface) 88%, var(--surface-strong) 12%); box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent); } .price-tier-card-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); } .price-tier-number { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 30px; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--line)); border-radius: 999px; color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--surface)); font-size: 0.76rem; font-weight: 800; text-transform: uppercase; } .price-tier-heading { min-width: 0; display: grid; gap: 2px; text-align: right; } .price-tier-heading strong, .price-tier-heading small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .price-tier-heading strong { color: var(--ink); font-weight: 800; } .price-tier-heading small { color: var(--muted); font-weight: 700; } .remove-account-photo-button { justify-self: start; } .personal-home-engine { display: grid; gap: 16px; } .live-panel .personal-home-engine { margin: 18px 0 22px; padding: 16px; border-radius: 8px; box-shadow: none; } .personal-home-edit { width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 999px; } .homepage-preferences-card { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--surface) 90%, var(--cyan) 4%); } .homepage-preferences-card h3 { margin: 0; } /* Allow wrapping so the button never gets clipped in a narrow column */ .homepage-preferences-card .section-title-row { flex-wrap: wrap; margin-bottom: 0; row-gap: 10px; } .homepage-preferences-card .section-title-row > div { min-width: 0; flex: 1 1 160px; } .homepage-view-button { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; min-height: 36px; padding: 8px 14px; border-radius: 999px; white-space: nowrap; line-height: 1; } .homepage-view-button i { font-size: 13px; } .homepage-preferences-form { gap: 16px; } .pref-form-group { display: grid; gap: 7px; } .pref-form-label { margin: 0; font-size: 11px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } /* ── My Topics section inside Learning Preferences card ── */ .pref-topics-section { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); } .pref-topics-label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .pref-topics-label i { font-size: 11px; color: var(--cyan); } .pref-topic-chips { display: flex; flex-wrap: wrap; gap: 7px; min-height: 28px; } .pref-topic-add { display: grid; gap: 5px; max-width: 460px; } .pref-topic-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .pref-topic-input-row .ghost-button { min-height: 34px; padding-inline: 14px; border-radius: 9px; } .pref-topic-chip { display: inline-flex; align-items: center; border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--cyan) 8%, var(--surface-strong)); overflow: hidden; transition: border-color 150ms; } .pref-topic-chip:hover { border-color: color-mix(in srgb, var(--cyan) 52%, var(--line)); } .pref-topic-link { padding: 5px 8px 5px 12px; font-size: 12px; font-weight: 900; color: var(--ink); text-decoration: none; white-space: nowrap; } .pref-topic-link:hover { color: var(--cyan); } .pref-topic-remove { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 4px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; transition: background 150ms, color 150ms; } .pref-topic-remove:hover { background: color-mix(in srgb, #f87171 18%, transparent); color: #f87171; } .pref-topics-empty { font-size: 12px; color: var(--muted); font-weight: 600; align-self: center; } /* ── Explore topics section ── */ .pref-explore-section { display: grid; gap: 8px; padding-top: 2px; } .pref-explore-chips { display: flex; flex-wrap: wrap; gap: 6px; } .pref-explore-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 12px; font-weight: 500; cursor: pointer; transition: border-color 150ms, background 150ms, color 150ms; line-height: 1.3; } .pref-explore-chip:hover { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); color: var(--cyan); } .pref-explore-chip:disabled { opacity: 0.45; cursor: default; } .pref-explore-plus { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan); font-size: 13px; font-weight: 700; line-height: 1; flex-shrink: 0; transition: background 150ms; } .pref-explore-chip:hover .pref-explore-plus { background: color-mix(in srgb, var(--cyan) 30%, transparent); } /* ── Category / Level / Hashkafa - minimal 2026 meta row ── */ .pref-meta-row { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 10px; align-items: end; } @media (max-width: 640px) { .pref-meta-row { grid-template-columns: 1fr 1fr; } .pref-meta-field--wide { grid-column: 1 / -1; } } @media (max-width: 400px) { .pref-meta-row { grid-template-columns: 1fr; } .pref-topic-input-row { grid-template-columns: 1fr; } } .pref-meta-field { display: flex; flex-direction: column; gap: 4px; } .pref-meta-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .pref-meta-input { width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--text); font-size: 13px; line-height: 1.4; transition: border-color 150ms, background 150ms; outline: none; appearance: none; -webkit-appearance: none; box-sizing: border-box; font-family: inherit; } .pref-meta-input:focus { border-color: color-mix(in srgb, var(--cyan) 60%, var(--line)); background: color-mix(in srgb, var(--surface) 100%, transparent); } select.pref-meta-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; padding-right: 28px; cursor: pointer; } .pref-meta-textarea { resize: vertical; min-height: 68px; } .preference-modal-open { overflow: hidden; } .preference-onboarding-overlay { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: clamp(12px, 3vw, 28px); background: rgba(0, 8, 14, 0.74); backdrop-filter: blur(10px); } .preference-onboarding-modal { width: min(620px, 100%); max-height: min(720px, calc(100dvh - 24px)); overflow: auto; border: 1px solid color-mix(in srgb, var(--cyan) 34%, var(--gold) 18%); border-radius: 18px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 36%), var(--surface); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42); } .preference-onboarding-modal form { display: grid; gap: 18px; padding: clamp(18px, 4vw, 30px); } .preference-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .preference-progress span { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--line) 80%, transparent); } .preference-progress span.is-active { background: linear-gradient(90deg, var(--gold), var(--cyan)); } .preference-step-body, .preference-step-copy, .preference-field-grid { display: grid; gap: 12px; } .preference-step-copy h2 { margin: 0; font-size: clamp(30px, 7vw, 52px); line-height: 0.98; } .preference-step-copy p { margin: 0; color: var(--muted); } .preference-choice-grid, .preference-toggle-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .preference-toggle-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .preference-choice { min-width: 0; cursor: pointer; } .preference-choice input { position: absolute; opacity: 0; pointer-events: none; } .preference-choice span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--surface-strong) 88%, var(--cyan) 4%); color: var(--text); font-weight: 850; text-align: center; white-space: nowrap; } .preference-choice input:checked + span { border-color: color-mix(in srgb, var(--cyan) 70%, var(--gold)); background: color-mix(in srgb, var(--cyan) 18%, var(--surface)); color: var(--ink); } .preference-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .preference-field-grid label { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 13px; font-weight: 850; } .preference-field-grid input, .preference-field-grid select, .preference-field-grid textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); color: var(--ink); font: inherit; } .preference-field-grid textarea { min-height: 96px; resize: vertical; } .preference-field-grid .wide-field { grid-column: 1 / -1; } .preference-onboarding-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .preference-onboarding-actions button { min-height: 42px; } @media (max-width: 620px) { .preference-onboarding-overlay { align-items: end; padding: 8px; } .preference-onboarding-modal { width: 100%; max-height: calc(100dvh - 16px); border-radius: 16px; } .preference-choice-grid, .preference-toggle-row, .preference-field-grid { grid-template-columns: 1fr; } .preference-choice span { min-height: 44px; justify-content: flex-start; } .preference-onboarding-actions { display: grid; grid-template-columns: 1fr; } } .personal-engine-controls { display: grid; gap: 12px; } .segmented-filter, .personal-engine-selects { display: flex; flex-wrap: wrap; gap: 8px; } .filter-pill { display: inline-flex; align-items: center; min-height: 40px; cursor: pointer; } .filter-pill input { position: absolute; opacity: 0; pointer-events: none; } .filter-pill span { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 13px; border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, var(--gold) 3%); color: var(--text); font-weight: 800; white-space: nowrap; } .filter-pill input:checked + span { border-color: color-mix(in srgb, var(--cyan) 62%, var(--gold)); background: color-mix(in srgb, var(--cyan) 18%, var(--surface)); color: var(--ink); } .personal-filter-select { display: grid; gap: 5px; min-width: min(220px, 100%); color: var(--muted); font-size: 12px; font-weight: 900; } .personal-filter-select select { min-height: 42px; } .personal-engine-results { display: grid; gap: 14px; } .personal-engine-summary { display: flex; flex-wrap: wrap; gap: 7px; } .personal-engine-summary span { display: inline-flex; min-height: 28px; align-items: center; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--line)); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 850; } .personal-engine-recordings { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } .personal-recording-row { display: grid; gap: 4px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 92%, var(--cyan) 4%); color: inherit; text-decoration: none; } .personal-recording-row strong, .personal-recording-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .personal-recording-row span { color: var(--muted); font-size: 13px; } .office-price-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .office-slot-card { padding: 18px; } .office-public-actions { display: grid; align-content: start; gap: 12px; } .payout-card { border-color: color-mix(in srgb, var(--cyan) 44%, var(--gold)); } .payout-actions { display: grid; gap: 10px; max-width: 520px; } .payout-actions small { color: var(--muted); font-weight: 800; } .office-status-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 5px 10px; border: 1px solid color-mix(in srgb, currentColor 34%, transparent); border-radius: 999px; font-size: 12px; font-weight: 950; line-height: 1; white-space: nowrap; color: var(--text); background: color-mix(in srgb, var(--surface) 78%, currentColor 12%); } .office-request-item.office-status-requested { --inbox-accent: #45c7ff; } .office-status-pill.office-status-requested { --inbox-accent: #45c7ff; color: #45c7ff; } .office-request-item.office-status-accepted { --inbox-accent: #4ed6a8; } .office-status-pill.office-status-accepted { --inbox-accent: #4ed6a8; color: #34b88d; } .office-request-item.office-status-completed { --inbox-accent: #d9b45a; } .office-status-pill.office-status-completed { --inbox-accent: #d9b45a; color: #b8902d; } .office-request-item.office-status-declined, .office-request-item.office-status-cancelled { --inbox-accent: #df5d7d; } .office-status-pill.office-status-declined, .office-status-pill.office-status-cancelled { --inbox-accent: #df5d7d; color: #df5d7d; } .office-slot p, .office-slot small { margin: 0; } .office-slot form { display: grid; gap: 8px; } .office-slot textarea { min-width: min(280px, 100%); min-height: 72px; } .office-hours-section { width: 100%; } .office-booking-grid { display: grid; gap: clamp(18px, 2.4vw, 28px); width: 100%; } .office-booking-card { --office-accent: var(--cyan); display: grid; grid-template-columns: minmax(180px, 0.42fr) minmax(260px, 0.76fr) minmax(320px, 0.82fr); gap: clamp(16px, 2vw, 24px); align-items: stretch; padding: clamp(18px, 2.4vw, 28px); border: 1px solid color-mix(in srgb, var(--office-accent) 42%, var(--gold) 24%); border-radius: 24px; background: radial-gradient(circle at 98% 0%, color-mix(in srgb, var(--office-accent) 18%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, var(--office-accent) 5%), var(--surface)); box-shadow: var(--shadow-soft); } .office-booking-date, .office-booking-copy, .office-booking-form, .office-booking-login { min-width: 0; } .office-booking-date { display: grid; align-content: start; gap: 14px; padding: 16px; border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--line)); border-radius: 20px; background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 42%), color-mix(in srgb, var(--surface-strong) 88%, var(--office-accent) 5%); } .office-booking-date .hebrew-date-stack { padding: 0; border: 0; background: transparent; } .office-booking-date .hebrew-date-primary { font-family: var(--serif); font-size: clamp(25px, 2.4vw, 36px); line-height: 1.02; } .office-booking-copy { display: grid; align-content: start; gap: 14px; } .office-booking-copy h3 { margin: 0; font-size: clamp(25px, 2vw, 32px); line-height: 1.04; } .office-viewer-time, .office-slot-note { margin: 0; color: var(--text); } .office-slot-meta-row, .office-public-links { display: flex; flex-wrap: wrap; gap: 10px; } .office-slot-meta-row span { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--office-accent) 32%, var(--line)); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 900; } .office-booking-form { display: grid; gap: 12px; padding: clamp(16px, 2vw, 22px); border: 1px solid color-mix(in srgb, var(--cyan) 54%, var(--line)); border-radius: 24px; background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 30%), radial-gradient(circle at 100% 8%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 88%, var(--cyan) 8%), color-mix(in srgb, var(--surface) 92%, var(--gold) 4%)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 48px rgba(0, 0, 0, 0.16); } .office-form-header { display: flex; justify-content: space-between; gap: 10px; align-items: start; } .office-form-header small, .office-note-field span { color: var(--muted); font-size: 12px; font-weight: 900; } .office-availability-picker { display: grid; gap: 10px; } .office-picker-label { color: var(--muted); font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: 0.06em; } .office-segment-grid, .office-admin-segment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 8px; } .office-segment-option, .office-admin-segment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; min-height: 50px; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--cyan) 34%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--surface) 90%, var(--cyan) 5%); cursor: pointer; } .office-availability-picker.readonly .office-segment-option { cursor: default; } .office-availability-picker.readonly .office-segment-option input { opacity: 0.45; } .office-segment-option.selected, .office-admin-segment:has(input:checked) { border-color: color-mix(in srgb, var(--cyan) 72%, var(--gold)); background: color-mix(in srgb, var(--surface) 78%, var(--cyan) 13%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 24%, transparent); } .office-segment-option strong, .office-admin-segment strong { display: block; font-size: 13px; } .office-segment-option small, .office-admin-segment small { display: block; color: var(--muted); font-size: 11px; font-weight: 900; } .office-segment-booked { opacity: 0.72; } /* Booked = truly locked: disabled checkbox, not-allowed cursor */ .office-segment-booked { background: color-mix(in srgb, var(--surface) 86%, var(--muted) 12%); border-color: color-mix(in srgb, var(--muted) 32%, var(--line)); cursor: not-allowed; } /* Closed by rabbi = selectable for reopening: pointer cursor, amber tint */ .office-segment-closed { background: color-mix(in srgb, var(--surface) 80%, #b45309 10%); border-color: color-mix(in srgb, #b45309 38%, var(--line)); border-style: dashed; cursor: pointer; opacity: 0.82; } .office-segment-closed:hover { opacity: 1; border-color: color-mix(in srgb, #b45309 65%, var(--line)); box-shadow: 0 0 0 2px color-mix(in srgb, #b45309 18%, transparent); } .office-segment-closed small { color: #b45309 !important; font-weight: 900; } /* "yours" / "booked" = pending request slots - selectable for release */ .office-segment-yours { background: color-mix(in srgb, var(--surface) 82%, var(--gold) 14%); border-color: color-mix(in srgb, var(--gold) 56%, var(--line)); border-style: dashed; cursor: pointer; opacity: 0.9; } .office-segment-yours:hover { opacity: 1; border-color: color-mix(in srgb, var(--gold) 80%, var(--line)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 18%, transparent); } .office-segment-yours small { color: color-mix(in srgb, var(--gold) 80%, var(--ink)) !important; } .office-segment-booked { cursor: pointer; } .office-segment-booked:hover { opacity: 0.9; box-shadow: 0 0 0 2px color-mix(in srgb, var(--muted) 18%, transparent); } .office-release-btn { color: color-mix(in srgb, var(--gold) 80%, var(--ink)); border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); } .office-availability-empty { padding: 12px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); font-weight: 850; } .office-tier-option, .office-request-type-grid label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 54px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--surface) 92%, var(--gold) 4%); cursor: pointer; } .office-tier-option.selected { border-color: color-mix(in srgb, var(--cyan) 64%, var(--gold)); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 38%), color-mix(in srgb, var(--surface) 84%, var(--cyan) 8%); } .office-tier-option strong, .office-request-type-grid span { font-weight: 950; } .office-tier-option small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; } .office-tier-option em { color: var(--gold-bright); font-style: normal; font-weight: 950; } .office-request-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .office-request-type-grid label { grid-template-columns: auto minmax(0, 1fr); min-height: 44px; font-size: 12px; } .office-note-field { display: grid; gap: 6px; } .office-note-field textarea { min-height: 112px; width: 100%; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--cyan) 38%, var(--line)); border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, var(--cyan) 5%), color-mix(in srgb, var(--surface-strong) 94%, var(--gold) 3%)); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); resize: vertical; } .office-book-button { width: 100%; min-height: 48px; } .office-booking-login { display: grid; align-content: center; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; } .office-admin-segments { display: grid; gap: 12px; margin-top: 16px; padding: 14px; border: 1px solid color-mix(in srgb, var(--cyan) 34%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--surface-strong) 88%, var(--cyan) 5%); } .public-office-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap: 16px; width: 100%; } .public-office-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr); gap: 16px; align-items: stretch; padding: 18px; border: 1px solid color-mix(in srgb, var(--rabbi-start, var(--cyan)) 34%, var(--cinema-line)); border-radius: 20px; background: radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 18%, transparent), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, var(--rabbi-start, var(--cyan)) 8%), var(--surface)); box-shadow: var(--shadow-soft); } .office-slot-main { display: grid; align-content: start; gap: 8px; min-width: 0; } .office-slot-kicker { display: inline-flex; align-self: flex-start; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); border-radius: 100px; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 8%, transparent); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2px; } .office-slot-main strong { font-size: 21px; } .office-slot-main p, .office-slot-main small { margin: 0; } .office-request-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 56px; gap: 10px; align-items: stretch; margin: 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--surface-strong) 84%, var(--cyan) 6%); } .office-request-panel label { display: grid; gap: 6px; } .office-request-panel label:last-of-type { grid-column: 1 / 3; } .office-request-panel label span { color: var(--muted); font-size: 12px; font-weight: 900; } .office-request-panel textarea { min-width: 0; width: 100%; min-height: 86px; background: color-mix(in srgb, var(--surface) 88%, var(--paper)); } .office-request-panel .chat-icon-button { align-self: stretch; width: 56px; height: auto; } .request-card { border-top: 3px solid var(--burgundy); } .inbox-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0; } .inbox-stat-card { --inbox-accent: var(--cyan); display: grid; gap: 5px; min-height: 118px; padding: 16px; border: 1px solid color-mix(in srgb, var(--inbox-accent) 44%, var(--line)); border-radius: 18px; background: radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--inbox-accent) 18%, transparent), transparent 36%), linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, var(--inbox-accent) 7%), var(--surface)); } .inbox-stat-card span { color: var(--muted); font-size: 12px; font-weight: 950; text-transform: uppercase; } .inbox-stat-card strong { font-family: var(--serif); font-size: 38px; line-height: 1; } .inbox-stat-card small { color: var(--muted); font-weight: 800; } .inbox-private { --inbox-accent: #45c7ff; } .inbox-qna { --inbox-accent: #df5d7d; } .inbox-office { --inbox-accent: #d9b45a; } .inbox-live { --inbox-accent: #4ed6a8; } .inbox-request, .admin-inbox-request { --inbox-accent: #d9b45a; } .inbox-moderation, .admin-inbox-moderation, .admin-inbox-removal, .admin-inbox-auto-hold { --inbox-accent: #df5d7d; } .inbox-donation, .admin-inbox-donation { --inbox-accent: #4ed6a8; } .admin-inbox-flag, .admin-inbox-qna { --inbox-accent: #45c7ff; } .inbox-feed { gap: 18px; } .inbox-section, .admin-inbox-card { border-color: color-mix(in srgb, var(--inbox-accent, var(--cyan)) 42%, var(--line)) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--inbox-accent, var(--cyan)) 78%, var(--gold)) 0 4px, transparent 4px), radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--inbox-accent, var(--cyan)) 18%, transparent), transparent 34%), color-mix(in srgb, var(--surface) 92%, var(--inbox-accent, var(--cyan)) 4%) !important; } .inbox-item { border-color: color-mix(in srgb, var(--inbox-accent, var(--cyan)) 30%, var(--line)); background: color-mix(in srgb, var(--surface) 91%, var(--inbox-accent, var(--cyan)) 4%); } .admin-inbox-feed { display: grid; gap: 14px; } .admin-inbox-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; } .admin-inbox-card h3 { margin: 4px 0 6px; font-size: 22px; } .admin-inbox-card p, .admin-inbox-card small { display: block; margin: 0; color: var(--muted); } .inbox-kind { display: inline-flex; width: fit-content; padding: 4px 9px; border: 1px solid color-mix(in srgb, var(--inbox-accent, var(--cyan)) 42%, var(--line)); border-radius: 999px; color: var(--inbox-accent, var(--cyan)); font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: 0.08em; } .pinned-shiur-section { border-color: color-mix(in srgb, var(--rabbi-end, #d7b65f) 45%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, #0077a8) 10%, var(--surface)), color-mix(in srgb, var(--rabbi-end, #d7b65f) 8%, var(--surface))); } @media (max-width: 840px) { .rabbi-preset-form, .rabbi-office-form, .preview-mode-grid, .office-grid { grid-template-columns: 1fr; } .office-slot { grid-template-columns: 1fr; } .office-request-item, .price-tier-row { grid-template-columns: 1fr; } .price-tier-card-head { align-items: flex-start; flex-direction: column; } .price-tier-heading { text-align: left; width: 100%; } .office-request-actions { grid-auto-columns: minmax(44px, 1fr); justify-content: stretch; width: 100%; } .office-request-action { min-width: 0; padding-inline: 6px; } } @media (max-width: 520px) { .office-request-action { min-height: 34px; padding-inline: 4px; } .office-request-action span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .public-office-card, .admin-inbox-card { grid-template-columns: 1fr; } .inbox-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } :root[data-theme="dark"] .preset-chip-row, :root[data-theme="dark"] .preview-mode-grid > article, :root[data-theme="dark"] .office-column, :root[data-theme="dark"] .office-slot, :root[data-theme="dark"] .preview-frame { background: rgba(18, 26, 17, 0.9); border-color: rgba(216, 224, 201, 0.16); } :root[data-theme="dark"] .profile-hero-preview, :root[data-theme="dark"] .pinned-shiur-section { background: radial-gradient(circle at 94% 18%, color-mix(in srgb, var(--rabbi-end, #d7b65f) 24%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, #0077a8) 16%, #11180f), #11180f) !important; } .rabbi-profile-actions { margin-top: 14px; } .follow-rabbi-button.active { background: linear-gradient(135deg, var(--rabbi-start, var(--green)), var(--rabbi-end, var(--gold))); color: #fff; border-color: transparent; } .public-comment .chat-bubble { border-style: dashed; } .public-comment-form, .live-question-form { margin-top: 14px; } .recorded-actions { margin-top: 12px; gap: 8px; flex-wrap: wrap; } .compact-action { min-width: 0; padding-inline: 16px; } .zone-card-list { display: grid; gap: 12px; margin-top: 16px; } .zone-learning-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .zone-learning-card > div:first-child { min-width: 0; } .zone-learning-card .compact-actions { flex: 0 0 auto; display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 8px; } .shelf-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 38px; padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--gold) 26%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--surface-strong) 88%, var(--cyan) 5%); color: var(--ink); font-size: 12px; font-weight: 850; line-height: 1; text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 7%, transparent); } .shelf-action i { width: 14px; flex: 0 0 14px; color: var(--cyan); font-size: 13px; text-align: center; } .shelf-action-watch { border-color: color-mix(in srgb, var(--cyan) 38%, var(--gold) 22%); } .shelf-action-note i { color: var(--gold); } .shelf-action:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--gold) 58%, var(--cyan)); background: color-mix(in srgb, var(--cyan) 14%, var(--surface)); } .learning-stat-grid { margin: 18px 0; } .award-card { border-left: 4px solid var(--gold); } .notification-card.unread { border-color: var(--danger); box-shadow: 0 16px 34px rgba(170, 37, 62, 0.16); } .notification-card small { color: var(--muted); display: inline-block; margin-top: 0.35rem; } .live-question-queue { border-top: 3px solid var(--gold); } .live-question-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .live-question-item.pinned { box-shadow: inset 4px 0 0 var(--gold); } .qna-search { margin: 24px 0; } .qna-library-list { margin-top: 18px; } .qna-library-card .public-chat-title { align-items: flex-start; } :root[data-theme="dark"] .follow-rabbi-button.active { color: #10140f; } :root[data-theme="dark"] .public-comment .chat-bubble { background: rgba(255, 248, 234, 0.035); } /* Motion layer: restrained, shared animations for the whole platform. */ @keyframes tfFadeLift { from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(5px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes tfCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes tfChatIn { from { opacity: 0; transform: translateX(-14px) translateY(6px); } to { opacity: 1; transform: translateX(0) translateY(0); } } @keyframes tfChatMineIn { from { opacity: 0; transform: translateX(14px) translateY(6px); } to { opacity: 1; transform: translateX(0) translateY(0); } } @keyframes tfLivePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 95, 115, 0.3); } 50% { box-shadow: 0 0 0 7px rgba(217, 95, 115, 0); } } @keyframes tfDotPulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.28); opacity: 1; } } @keyframes tfBadgePop { 0% { transform: scale(0.72); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes tfBadgeBreathe { 0%, 100% { box-shadow: 0 8px 18px rgba(157, 38, 55, 0.26); } 50% { box-shadow: 0 8px 26px rgba(157, 38, 55, 0.5); } } @keyframes tfSurfaceShift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } .page-main > .topbar, .page-main > section, .auth-panel, .donation-card, .admin-panel, .rabbi-console-panel, .zone-panel { animation: tfFadeLift 560ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } .page-main > section:nth-of-type(2) { animation-delay: 70ms; } .page-main > section:nth-of-type(3) { animation-delay: 130ms; } .page-main > section:nth-of-type(4) { animation-delay: 190ms; } .rabbi-card, .live-row, .recorded-item, .shiur-item, .gem-item, .learning-item, .admin-row, .public-chat-card, .chat-admin-card, .rabbi-admin-session, .media-upload-card, .api-guide article, .terms-list article { animation: tfCardIn 430ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } .live-row, .recorded-item, .public-chat-card, .rabbi-admin-session { position: relative; overflow: hidden; } .rabbi-rail > .rabbi-card:nth-child(2), .rabbi-directory > .rabbi-card:nth-child(2), .live-table > .live-row:nth-child(2), .shiur-list > .shiur-item:nth-child(2), .admin-list > .admin-row:nth-child(2) { animation-delay: 45ms; } .rabbi-rail > .rabbi-card:nth-child(3), .rabbi-directory > .rabbi-card:nth-child(3), .live-table > .live-row:nth-child(3), .shiur-list > .shiur-item:nth-child(3), .admin-list > .admin-row:nth-child(3) { animation-delay: 90ms; } .rabbi-rail > .rabbi-card:nth-child(4), .rabbi-directory > .rabbi-card:nth-child(4), .live-table > .live-row:nth-child(4), .shiur-list > .shiur-item:nth-child(4), .admin-list > .admin-row:nth-child(4) { animation-delay: 135ms; } .rabbi-rail > .rabbi-card:nth-child(5), .rabbi-directory > .rabbi-card:nth-child(5), .live-table > .live-row:nth-child(5), .shiur-list > .shiur-item:nth-child(5), .admin-list > .admin-row:nth-child(5) { animation-delay: 180ms; } .rabbi-rail > .rabbi-card:nth-child(n+6), .rabbi-directory > .rabbi-card:nth-child(n+6), .live-table > .live-row:nth-child(n+6), .shiur-list > .shiur-item:nth-child(n+6), .admin-list > .admin-row:nth-child(n+6) { animation-delay: 220ms; } .primary-button, .ghost-button, .small-button, .support-button, .join-button, .mood-chip, .metric, .nav-item, .amount-grid button, .donation-amount-grid button, .rabbi-console-tabs button, .admin-tabs button { position: relative; overflow: hidden; } .primary-button::after, .ghost-button::after, .small-button::after, .support-button::after, .join-button::after, .mood-chip::after, .nav-item::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.24) 45%, transparent 72%); transform: translateX(-130%); transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1); } .primary-button:hover::after, .ghost-button:hover::after, .small-button:hover::after, .support-button:hover::after, .join-button:hover::after, .mood-chip:hover::after, .nav-item:hover::after { transform: translateX(130%); } .rabbi-card::after, .recorded-item::after, .live-row::after, .public-chat-card::after, .rabbi-admin-session::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 0%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 18%, transparent) 48%, transparent 78%); opacity: 0; transform: translateX(-115%); transition: opacity 220ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1); } .rabbi-card:hover::after, .recorded-item:hover::after, .live-row:hover::after, .public-chat-card:hover::after, .rabbi-admin-session:hover::after { opacity: 1; transform: translateX(115%); } .live-card-badge, .live-pill, .hover-live-pill { animation: tfLivePulse 1900ms ease-out infinite; } .live-dot, .live-card-badge::before, .live-pill::before, .hover-live-pill::before { animation: tfDotPulse 1450ms ease-in-out infinite; } .nav-message-badge { animation: tfBadgePop 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both, tfBadgeBreathe 2200ms ease-in-out 420ms infinite; } .chat-message { animation: tfChatIn 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } .chat-message.mine { animation-name: tfChatMineIn; } .live-panel, .rabbi-profile-head, .profile-section, .support-card, .donation-card { background-size: 160% 160%; animation-name: tfFadeLift, tfSurfaceShift; animation-duration: 560ms, 9000ms; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), ease-in-out; animation-fill-mode: both, both; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; } .ajax-search-results, .rabbi-hover-card, .photo-crop-dialog { animation: tfFadeLift 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } /* The toast manages its own opacity via .toast / .toast.show and is created on demand — keep it OUT of the fade-lift group (that 'both' fill was leaving the empty box faintly visible as a dark circle). */ .toast:empty { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; } } /* Final polish pass: consistent affordances, tighter dense controls, and safer contrast. */ button, a, input, textarea, select, .rabbi-card, .live-row, .recorded-item, .content-card, .wide-section, .zone-panel, .admin-row { transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .search:focus-within { outline: 3px solid color-mix(in srgb, var(--gold) 52%, transparent); outline-offset: 3px; } .search input:focus-visible { outline: 0; outline-offset: 0; } .rabbi-card:hover, .recorded-item:hover, .live-row:hover, .content-card:hover { border-color: color-mix(in srgb, var(--olive) 44%, var(--line)); box-shadow: 0 14px 34px rgba(46, 38, 25, 0.1); transform: translateY(-1px); } .admin-list-controls .admin-rabbi-search, .recorded-search, .rabbi-search, .zone-message-search { align-items: center; height: 46px; } .admin-list-controls .admin-rabbi-search input, .recorded-search input, .rabbi-search input, .zone-message-search input { min-height: 0; height: auto; line-height: 1.25; } .admin-list-controls .admin-rabbi-search .icon, .recorded-search .icon, .rabbi-search .icon, .zone-message-search .icon { flex: 0 0 auto; } .admin-grid article, .rabbi-admin-stats article, .donation-summary, .metric { color: var(--ink); } :root[data-theme="dark"] .rabbi-card:hover, :root[data-theme="dark"] .recorded-item:hover, :root[data-theme="dark"] .live-row:hover, :root[data-theme="dark"] .content-card:hover { border-color: color-mix(in srgb, var(--gold) 44%, var(--line)); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34); } :root[data-theme="dark"] .admin-grid strong, :root[data-theme="dark"] .rabbi-admin-stats strong, :root[data-theme="dark"] .donation-summary strong, :root[data-theme="dark"] .metric, :root[data-theme="dark"] .metric strong { color: #fff7e8 !important; } :root[data-theme="dark"] .admin-list-controls .admin-rabbi-search, :root[data-theme="dark"] .recorded-search, :root[data-theme="dark"] .rabbi-search, :root[data-theme="dark"] .zone-message-search { background: #0c100b !important; border-color: rgba(244, 240, 230, 0.24); } :root[data-theme="dark"] .admin-list-controls .admin-rabbi-search input, :root[data-theme="dark"] .recorded-search input, :root[data-theme="dark"] .rabbi-search input, :root[data-theme="dark"] .zone-message-search input { background: transparent !important; color: #f7f0df !important; } :root[data-theme="dark"] .ajax-search-results { background: #161a13 !important; border-color: rgba(244, 240, 230, 0.2); } :root[data-theme="dark"] .ajax-search-item { border-color: rgba(244, 240, 230, 0.14); } :root[data-theme="dark"] .ajax-search-item:hover { background: rgba(143, 166, 121, 0.14); border-color: rgba(211, 173, 93, 0.36); } .search input, .search input:focus, .search input:focus-visible, .admin-list-controls .admin-rabbi-search input, .admin-list-controls .admin-rabbi-search input:focus, .recorded-search input, .recorded-search input:focus, .rabbi-search input, .rabbi-search input:focus, .zone-message-search input, .zone-message-search input:focus { border: 0 !important; box-shadow: none !important; background: transparent !important; outline: 0 !important; } :root[data-theme="dark"] .search input, :root[data-theme="dark"] .search input:focus, :root[data-theme="dark"] .search input:focus-visible, :root[data-theme="dark"] .admin-list-controls .admin-rabbi-search input, :root[data-theme="dark"] .admin-list-controls .admin-rabbi-search input:focus, :root[data-theme="dark"] .recorded-search input, :root[data-theme="dark"] .recorded-search input:focus, :root[data-theme="dark"] .rabbi-search input, :root[data-theme="dark"] .rabbi-search input:focus, :root[data-theme="dark"] .zone-message-search input, :root[data-theme="dark"] .zone-message-search input:focus { border: 0 !important; box-shadow: none !important; background: transparent !important; outline: 0 !important; } :root[data-theme="dark"] .color-picker-note { color: var(--muted); } :root[data-theme="dark"] .featured-live, :root[data-theme="dark"] .live-row, :root[data-theme="dark"] .compact-live-table .live-row, :root[data-theme="dark"] .recorded-cta, :root[data-theme="dark"] .support-box, :root[data-theme="dark"] .upload-status, :root[data-theme="dark"] .rabbi-hover-card, :root[data-theme="dark"] .profile-facts article, :root[data-theme="dark"] .api-guide article, :root[data-theme="dark"] .terms-list article, :root[data-theme="dark"] .rabbi-admin-stats article, :root[data-theme="dark"] .admin-grid article, :root[data-theme="dark"] .donation-summary, :root[data-theme="dark"] .auth-note, :root[data-theme="dark"] .media-upload-card, :root[data-theme="dark"] .upload-only-field .photo-upload-control, :root[data-theme="dark"] .public-chat-card, :root[data-theme="dark"] .rabbi-admin-session { background: rgba(17, 20, 15, 0.9) !important; color: var(--ink); border-color: var(--line); box-shadow: none; } :root[data-theme="dark"] .photo-upload-control input[type="file"] { background: rgba(8, 11, 8, 0.96); color: #fff7e8; border-color: rgba(220, 232, 207, 0.28); } :root[data-theme="dark"] .photo-upload-control input[type="file"]::file-selector-button { border: 1px solid rgba(220, 232, 207, 0.28); border-radius: 8px; background: rgba(143, 166, 121, 0.2); color: #fff7e8; font-weight: 900; } :root[data-theme="dark"] .photo-upload-control p { color: #d7cfbf !important; } :root[data-theme="dark"] .photo-upload-control .upload-result { color: #dce8cf !important; } :root[data-theme="dark"] .rabbi-hover-card { background: radial-gradient(circle at top left, rgba(213, 171, 85, 0.12), transparent 38%), linear-gradient(135deg, #141912, #0d100c) !important; border-color: rgba(220, 232, 207, 0.24); box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42); } :root[data-theme="dark"] .rabbi-hover-top strong, :root[data-theme="dark"] .hover-focus, :root[data-theme="dark"] .hover-facts strong, :root[data-theme="dark"] .hover-start strong { color: #fff7e8 !important; } :root[data-theme="dark"] .rabbi-hover-top span, :root[data-theme="dark"] .rabbi-hover-card p, :root[data-theme="dark"] .hover-session span, :root[data-theme="dark"] .hover-facts span, :root[data-theme="dark"] .hover-start > span, :root[data-theme="dark"] .hover-live-detail small { color: #d7cfbf !important; } :root[data-theme="dark"] .hover-facts div, :root[data-theme="dark"] .hover-start, :root[data-theme="dark"] .hover-chip-row span { background: rgba(8, 11, 8, 0.58); border-color: rgba(220, 232, 207, 0.18); } :root[data-theme="dark"] .hover-chip-row span, :root[data-theme="dark"] .hover-status-pill, :root[data-theme="dark"] .hover-signal-row span, :root[data-theme="dark"] .hover-office { color: #dce8cf; } :root[data-theme="dark"] .admin-tabs button, :root[data-theme="dark"] .rabbi-console-tabs button, :root[data-theme="dark"] .mood-chip, :root[data-theme="dark"] .recorded-tags button, :root[data-theme="dark"] .metric, :root[data-theme="dark"] .permission-badges .allowed, :root[data-theme="dark"] .chat-status-pill, :root[data-theme="dark"] .message-public-toggle, :root[data-theme="dark"] .public-request-note.quiet { background: rgba(143, 166, 121, 0.16) !important; color: var(--ink) !important; border-color: rgba(143, 166, 121, 0.34); } :root[data-theme="dark"] .admin-tabs button.active, :root[data-theme="dark"] .rabbi-console-tabs button.active, :root[data-theme="dark"] .rabbi-console-tabs button:hover, :root[data-theme="dark"] .mood-chip.active, :root[data-theme="dark"] .recorded-tags button:hover { background: rgba(143, 166, 121, 0.34) !important; color: #ffffff !important; border-color: rgba(220, 232, 207, 0.5); } :root[data-theme="dark"] .admin-tabs, :root[data-theme="dark"] .rabbi-console-tabs { background: rgba(17, 20, 15, 0.84) !important; border: 1px solid rgba(220, 232, 207, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } :root[data-theme="dark"] .admin-tabs button, :root[data-theme="dark"] .rabbi-console-tabs button { background: rgba(220, 232, 207, 0.08) !important; color: #dce8cf !important; border-color: rgba(220, 232, 207, 0.14); } :root[data-theme="dark"] .admin-tabs button:hover, :root[data-theme="dark"] .rabbi-console-tabs button:hover { background: rgba(220, 232, 207, 0.16) !important; color: #ffffff !important; border-color: rgba(220, 232, 207, 0.32); } :root[data-theme="dark"] .admin-tabs button.active, :root[data-theme="dark"] .rabbi-console-tabs button.active { background: linear-gradient(135deg, rgba(143, 166, 121, 0.92), rgba(183, 139, 63, 0.58)) !important; color: #10140f !important; border-color: rgba(220, 232, 207, 0.42); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); } :root[data-theme="dark"] .tab-count { background: #12a9d6; color: #041018; } @media (min-width: 900px) { .rabbi-admin-workspace { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 18px; } .rabbi-admin-content { min-width: 0; } .rabbi-admin-workspace .rabbi-console-tabs { position: sticky; top: 82px; display: grid; align-self: start; gap: 6px; max-height: calc(100vh - 102px); margin: 0; padding: 8px; overflow-y: auto; border-radius: 16px; } .rabbi-admin-workspace .rabbi-console-tabs button { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 36px; padding: 8px 10px; border-radius: 11px; text-align: left; line-height: 1.1; white-space: normal; } .rabbi-admin-workspace .tab-count { margin-left: auto; } .rabbi-admin-workspace .rabbi-console-panel { margin-top: 0; } } :root[data-theme="dark"] .primary-button, :root[data-theme="dark"] .support-button { background: var(--burgundy) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .ghost-button, :root[data-theme="dark"] .small-button, :root[data-theme="dark"] .link-button { background: rgba(17, 20, 15, 0.9) !important; color: var(--ink) !important; border-color: var(--line); } :root[data-theme="dark"] .join-button { background: #dce8cf !important; color: #1f2a1d !important; } :root[data-theme="dark"] .amount-grid button, :root[data-theme="dark"] .donation-amount-grid button, :root[data-theme="dark"] .segmented button { background: rgba(244, 240, 230, 0.08) !important; color: var(--ink) !important; border-color: rgba(244, 240, 230, 0.28); } :root[data-theme="dark"] .amount-grid button.selected, :root[data-theme="dark"] .donation-amount-grid button.selected, :root[data-theme="dark"] .segmented button.active { background: rgba(211, 173, 93, 0.22) !important; color: #ffffff !important; border-color: var(--gold); } :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select, :root[data-theme="dark"] .search { background: #0f120e !important; color: var(--ink) !important; border-color: rgba(244, 240, 230, 0.22); } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: #b9b2a4 !important; opacity: 1; } :root[data-theme="dark"] .rabbi-filter-bar { background: radial-gradient(circle at 95% 10%, rgba(211, 173, 93, 0.1), transparent 28%), linear-gradient(135deg, rgba(29, 35, 25, 0.96), rgba(18, 22, 16, 0.94)) !important; border-color: rgba(244, 240, 230, 0.16); box-shadow: inset 0 0 0 1px rgba(143, 166, 121, 0.08); } :root[data-theme="dark"] .rabbi-filter-bar .search, :root[data-theme="dark"] .rabbi-filter-bar select { background: #0c100b !important; color: #f7f0df !important; border-color: rgba(244, 240, 230, 0.24); } :root[data-theme="dark"] .rabbi-filter-bar .search:focus-within, :root[data-theme="dark"] .rabbi-filter-bar select:focus { border-color: rgba(211, 173, 93, 0.72); box-shadow: 0 0 0 3px rgba(211, 173, 93, 0.12); outline: 0; } :root[data-theme="dark"] .rabbi-filter-bar .search input { background: transparent !important; color: #f7f0df !important; } :root[data-theme="dark"] .rabbi-filter-bar .search input::placeholder { color: #bdb6a8 !important; } :root[data-theme="dark"] .rabbi-filter-bar .icon, :root[data-theme="dark"] .filter-summary, :root[data-theme="dark"] #rabbiResultCount { color: #d7d0bf !important; } /* NOTE: .upcoming-live-strip intentionally NOT in this list — the strip is a clean transparent container; only the cards inside carry a surface. */ :root[data-theme="dark"] .schedule-builder, :root[data-theme="dark"] .upcoming-shiur-card, :root[data-theme="dark"] .scheduled-shiur-card { background: radial-gradient(circle at 100% 0%, rgba(211, 173, 93, 0.12), transparent 30%), linear-gradient(135deg, rgba(24, 29, 22, 0.98), rgba(15, 18, 14, 0.96)) !important; border-color: rgba(244, 240, 230, 0.18); color: var(--ink); } :root[data-theme="dark"] .upcoming-live-strip { background: none !important; border-color: rgba(244, 240, 230, 0.14); } :root[data-theme="dark"] .upcoming-shiur-card p, :root[data-theme="dark"] .scheduled-shiur-card p, :root[data-theme="dark"] .upcoming-shiur-card small, :root[data-theme="dark"] .scheduled-shiur-card small { color: #d6cfbf; } :root[data-theme="dark"] .upcoming-artwork, :root[data-theme="dark"] .scheduled-artwork { border-color: rgba(244, 240, 230, 0.24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] #clearRabbiFilters { background: rgba(211, 173, 93, 0.16) !important; color: #f7d36e !important; border-color: rgba(211, 173, 93, 0.36); } :root[data-theme="dark"] .source-thumb, :root[data-theme="dark"] .session-artwork, :root[data-theme="dark"] .media-preview, :root[data-theme="dark"] .photo-crop-canvas { background-color: #0f120e !important; border-color: rgba(244, 240, 230, 0.24); color: var(--gold); } :root[data-theme="dark"] .new-upload-rabbi, :root[data-theme="dark"] .back-link, :root[data-theme="dark"] .link-button, :root[data-theme="dark"] .recorded-metrics a, :root[data-theme="dark"] .rabbi-name-link:hover, :root[data-theme="dark"] .recorded-cta strong, :root[data-theme="dark"] .api-guide code { color: var(--gold) !important; } :root[data-theme="dark"] .new-upload-rabbi .rabbi-name-link, :root[data-theme="dark"] .eyebrow, :root[data-theme="dark"] .small-button, :root[data-theme="dark"] .danger-button, :root[data-theme="dark"] .message-public-toggle.selected, :root[data-theme="dark"] .public-request-note { color: #ff8da0 !important; } :root[data-theme="dark"] .chat-thread, :root[data-theme="dark"] .chat-compose { background: rgba(10, 13, 10, 0.72) !important; border-color: rgba(244, 240, 230, 0.16); } :root[data-theme="dark"] .chat-bubble, :root[data-theme="dark"] .chat-message.mine .chat-bubble { background: rgba(24, 29, 22, 0.96) !important; color: var(--ink); border-color: rgba(143, 166, 121, 0.28); } :root[data-theme="dark"] .public-request-note, :root[data-theme="dark"] .status-warning, :root[data-theme="dark"] .permission-badges .warning { background: rgba(217, 95, 115, 0.16) !important; border-color: rgba(217, 95, 115, 0.38); } :root[data-theme="dark"] .public-request-note.approved, :root[data-theme="dark"] .auth-note, :root[data-theme="dark"] .public-live-note { color: var(--green) !important; } :root[data-theme="dark"] .api-guide pre, :root[data-theme="dark"] .auth-note code { background: #0f120e !important; color: var(--ink) !important; border-color: var(--line); } :root[data-theme="dark"] .rabbi-profile-head, :root[data-theme="dark"] .profile-section { border-color: color-mix(in srgb, var(--rabbi-start, #0077a8) 42%, var(--line)); background: radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--rabbi-start, #0077a8) 24%, transparent), transparent 26%), radial-gradient(circle at 96% 18%, color-mix(in srgb, var(--rabbi-end, #d7b65f) 18%, transparent), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, #0077a8) 14%, #182016), color-mix(in srgb, var(--rabbi-end, #d7b65f) 8%, #151912)) !important; } :root[data-theme="dark"] .profile-facts article { border-color: color-mix(in srgb, var(--rabbi-start, #0077a8) 32%, var(--line)); background: color-mix(in srgb, var(--rabbi-end, #d7b65f) 10%, #11140f) !important; } /* Final blue-gold override must remain after all earlier contrast patches. */ :root[data-theme="dark"] { --green: #45d1ff; --soft-green: rgba(0, 199, 255, 0.13); --olive: #00b8ee; --olive-dark: #dcefff; --blue: #00c7ff; --gold: #d7b65f; --gold-bright: #f0d77c; } :root[data-theme="dark"] body { background: radial-gradient(circle at 50% -8%, rgba(0, 199, 255, 0.18), transparent 36rem), radial-gradient(circle at 82% 8%, rgba(215, 182, 95, 0.11), transparent 26rem), linear-gradient(90deg, rgba(0, 199, 255, 0.055) 1px, transparent 1px), linear-gradient(180deg, rgba(215, 182, 95, 0.045) 1px, transparent 1px), var(--paper); background-size: auto, auto, 48px 48px, 48px 48px; } :root[data-theme="dark"] .mega-menu { border-bottom-color: rgba(0, 199, 255, 0.34); background: linear-gradient(90deg, rgba(0, 199, 255, 0.1), transparent 26%, rgba(215, 182, 95, 0.07)), rgba(3, 9, 20, 0.95) !important; box-shadow: inset 0 -1px 0 rgba(215, 182, 95, 0.24), 0 18px 48px rgba(0, 0, 0, 0.36); } :root[data-theme="dark"] .brand-logo-shell { background: radial-gradient(circle at 50% 42%, rgba(248, 242, 230, 0.22), transparent 48%), linear-gradient(135deg, rgba(5, 18, 32, 0.96), rgba(11, 31, 50, 0.86)); box-shadow: inset 0 0 0 1px rgba(0, 199, 255, 0.16), 0 0 24px rgba(0, 199, 255, 0.12), 0 14px 32px rgba(0, 0, 0, 0.34); } :root[data-theme="dark"] .brand-logo { filter: drop-shadow(0 0 10px rgba(215, 182, 95, 0.22)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.36)); } :root[data-theme="dark"] .brand strong, :root[data-theme="dark"] .site-footer strong, :root[data-theme="dark"] .rabbi-card h3 a, :root[data-theme="dark"] .rabbi-card h3, :root[data-theme="dark"] .recorded-item strong, :root[data-theme="dark"] .live-row strong, :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] strong, :root[data-theme="dark"] label { color: #fff8ec !important; } :root[data-theme="dark"] .brand small, :root[data-theme="dark"] .site-footer span, :root[data-theme="dark"] p, :root[data-theme="dark"] .row-meta, :root[data-theme="dark"] .viewer-count, :root[data-theme="dark"] .field-block, :root[data-theme="dark"] .recorded-metrics, :root[data-theme="dark"] .chat-bubble-head time, :root[data-theme="dark"] .rabbi-card p, :root[data-theme="dark"] .gem-item p, :root[data-theme="dark"] .shiur-item p, :root[data-theme="dark"] .learning-item p { color: #c5d2dc !important; } :root[data-theme="dark"] .nav-item { color: #c9d7e2 !important; } :root[data-theme="dark"] .nav-item.active, :root[data-theme="dark"] .nav-item:hover, :root[data-theme="dark"] .nav-user-item { background: rgba(0, 199, 255, 0.11) !important; color: #f8f2e6 !important; box-shadow: inset 0 0 0 1px rgba(215, 182, 95, 0.18), 0 10px 28px rgba(0, 0, 0, 0.2); } :root[data-theme="dark"] .site-footer { border-top-color: rgba(215, 182, 95, 0.28); background: linear-gradient(90deg, rgba(0, 199, 255, 0.08), transparent 34%, rgba(215, 182, 95, 0.07)), rgba(5, 15, 27, 0.92) !important; box-shadow: inset 0 1px 0 rgba(0, 199, 255, 0.2); } :root[data-theme="dark"] .site-footer nav { color: #d7b65f !important; } :root[data-theme="dark"] .wide-section, :root[data-theme="dark"] .content-card, :root[data-theme="dark"] .admin-panel, :root[data-theme="dark"] .admin-row, :root[data-theme="dark"] .rabbi-console-panel, :root[data-theme="dark"] .profile-section, :root[data-theme="dark"] .support-card, :root[data-theme="dark"] .auth-panel, :root[data-theme="dark"] .public-chat-card, :root[data-theme="dark"] .rabbi-admin-session, :root[data-theme="dark"] .recorded-item, :root[data-theme="dark"] .live-row, :root[data-theme="dark"] .donation-card, :root[data-theme="dark"] .media-upload-card, :root[data-theme="dark"] .photo-crop-dialog, :root[data-theme="dark"] .zone-panel, :root[data-theme="dark"] .live-panel, :root[data-theme="dark"] .action-panel, :root[data-theme="dark"] .stack-section, :root[data-theme="dark"] .topics-panel, :root[data-theme="dark"] .rabbi-admin-shell, :root[data-theme="dark"] .rabbi-chat-panel, :root[data-theme="dark"] .public-chat-panel, :root[data-theme="dark"] .chat-admin-card, :root[data-theme="dark"] .featured-live, :root[data-theme="dark"] .support-box, :root[data-theme="dark"] .upload-status, :root[data-theme="dark"] .api-guide article, :root[data-theme="dark"] .terms-list article, :root[data-theme="dark"] .rabbi-admin-stats article, :root[data-theme="dark"] .admin-grid article, :root[data-theme="dark"] .donation-summary { background: radial-gradient(circle at 92% 0%, rgba(0, 199, 255, 0.09), transparent 28%), radial-gradient(circle at 12% 0%, rgba(215, 182, 95, 0.07), transparent 30%), linear-gradient(135deg, rgba(8, 21, 37, 0.98), rgba(4, 12, 23, 0.96)) !important; border-color: rgba(215, 182, 95, 0.2) !important; color: var(--ink) !important; } :root[data-theme="dark"] .rabbi-card { border-color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 50%, rgba(215, 182, 95, 0.34)) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--rabbi-start, var(--cyan)) 78%, var(--gold)) 0 3px, transparent 3px), radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 24%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, var(--cyan)) 16%, #071523), color-mix(in srgb, var(--rabbi-end, var(--gold)) 10%, #050d18)) !important; } :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select, :root[data-theme="dark"] .search, :root[data-theme="dark"] .admin-list-controls .admin-rabbi-search, :root[data-theme="dark"] .recorded-search, :root[data-theme="dark"] .rabbi-search, :root[data-theme="dark"] .zone-message-search { background: rgba(2, 8, 15, 0.9) !important; color: #f8f2e6 !important; border-color: rgba(215, 182, 95, 0.25) !important; } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: #91a8b8 !important; } :root[data-theme="dark"] .primary-button, :root[data-theme="dark"] .support-button { background: linear-gradient(135deg, #0077a8, #00aeea) !important; color: #f9fdff !important; border-color: rgba(215, 182, 95, 0.26) !important; box-shadow: 0 14px 34px rgba(0, 174, 234, 0.22); } :root[data-theme="dark"] .join-button, :root[data-theme="dark"] .amount-grid button.selected, :root[data-theme="dark"] .donation-amount-grid button.selected, :root[data-theme="dark"] .segmented button.active { background: linear-gradient(135deg, #d7b65f, #f0d77c) !important; color: #071523 !important; } :root[data-theme="dark"] .ghost-button, :root[data-theme="dark"] .small-button, :root[data-theme="dark"] .link-button, :root[data-theme="dark"] .admin-tabs button, :root[data-theme="dark"] .rabbi-console-tabs button, :root[data-theme="dark"] .mood-chip, :root[data-theme="dark"] .recorded-tags button, :root[data-theme="dark"] .metric, :root[data-theme="dark"] .permission-badges .allowed, :root[data-theme="dark"] .chat-status-pill, :root[data-theme="dark"] .message-public-toggle, :root[data-theme="dark"] .public-request-note.quiet, :root[data-theme="dark"] .amount-grid button, :root[data-theme="dark"] .donation-amount-grid button { background: rgba(0, 199, 255, 0.09) !important; color: #e8f6ff !important; border-color: rgba(215, 182, 95, 0.25) !important; } :root[data-theme="dark"] .admin-tabs, :root[data-theme="dark"] .rabbi-console-tabs, :root[data-theme="dark"] .rabbi-filter-bar { background: linear-gradient(135deg, rgba(7, 21, 35, 0.96), rgba(3, 9, 20, 0.96)) !important; border-color: rgba(215, 182, 95, 0.22) !important; } :root[data-theme="dark"] .admin-tabs button.active, :root[data-theme="dark"] .rabbi-console-tabs button.active, :root[data-theme="dark"] .mood-chip.active, :root[data-theme="dark"] .recorded-tags button:hover { background: linear-gradient(135deg, rgba(215, 182, 95, 0.9), rgba(0, 199, 255, 0.58)) !important; color: #061220 !important; } :root[data-theme="dark"] .nav-item span, :root[data-theme="dark"] .primary-button span, :root[data-theme="dark"] .ghost-button span, :root[data-theme="dark"] .small-button span, :root[data-theme="dark"] .support-button span, :root[data-theme="dark"] .join-button span, :root[data-theme="dark"] .theme-toggle span { color: inherit !important; } :root[data-theme="dark"] .footer-logo-shell { border-color: rgba(215, 182, 95, 0.62); background: radial-gradient(circle at 50% 42%, rgba(248, 242, 230, 0.22), transparent 48%), linear-gradient(135deg, rgba(5, 18, 32, 0.96), rgba(11, 31, 50, 0.86)); box-shadow: inset 0 0 0 1px rgba(0, 199, 255, 0.16), 0 0 24px rgba(0, 199, 255, 0.12), 0 14px 32px rgba(0, 0, 0, 0.34); } :root[data-theme="dark"] .footer-logo { filter: drop-shadow(0 0 10px rgba(215, 182, 95, 0.22)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.36)); } @media (max-width: 720px) { .brand-logo-shell, .footer-logo-shell { width: 50px; height: 50px; flex: 0 0 50px; } .footer-brand { align-items: flex-start; } } /* Luxury minimal cinematic visual layer. Keep this last so the platform has one coherent skin. */ :root { --paper: #f3f6f7; --paper-deep: #dce5eb; --surface: rgba(255, 255, 252, 0.88); --surface-strong: rgba(248, 250, 248, 0.94); --ink: #07111b; --muted: #62717b; --soft: #8495a1; --line: rgba(168, 128, 45, 0.24); --olive: #007da8; --olive-dark: #062b42; --gold: #b99342; --gold-bright: #e5ca7a; --burgundy: #b1263d; --blue: #009ed2; --cyan: #00bfe8; --deep-blue: #020713; --navy: #071523; --green: #007da8; --soft-green: rgba(0, 158, 210, 0.1); --shadow: 0 26px 80px rgba(7, 17, 27, 0.14); --shadow-soft: 0 18px 46px rgba(7, 17, 27, 0.1); --cinema-glass: rgba(255, 255, 252, 0.78); --cinema-glass-strong: rgba(255, 255, 252, 0.92); --cinema-line: color-mix(in srgb, var(--gold) 38%, var(--line)); --radius: 16px; --radius-lg: 22px; --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif; } :root[data-theme="dark"] { color-scheme: dark; --paper: #020813; --paper-deep: #061525; --surface: rgba(7, 19, 33, 0.82); --surface-strong: rgba(9, 25, 43, 0.92); --ink: #fff7ea; --muted: #bfd0dc; --soft: #87a7bb; --line: rgba(220, 187, 100, 0.24); --olive: #00bfe8; --olive-dark: #e8f8ff; --gold: #d9b45a; --gold-bright: #f3d47b; --burgundy: #df5d7d; --blue: #00bce8; --cyan: #33dcff; --green: #00bfe8; --soft-green: rgba(0, 191, 232, 0.12); --shadow: 0 34px 100px rgba(0, 0, 0, 0.48); --shadow-soft: 0 22px 56px rgba(0, 0, 0, 0.34); --cinema-glass: rgba(6, 18, 31, 0.72); --cinema-glass-strong: rgba(8, 23, 39, 0.9); --cinema-line: rgba(217, 180, 90, 0.3); } body { position: relative; min-height: 100vh; background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 90%, var(--paper-deep)) 0%, var(--paper) 48%, color-mix(in srgb, var(--paper) 86%, var(--navy) 14%) 100%), repeating-linear-gradient(90deg, color-mix(in srgb, var(--blue) 7%, transparent) 0 1px, transparent 1px 72px), repeating-linear-gradient(180deg, color-mix(in srgb, var(--gold) 7%, transparent) 0 1px, transparent 1px 72px) !important; background-attachment: fixed; letter-spacing: 0; } :root[data-theme="dark"] body { background: linear-gradient(180deg, #020813 0%, #04111e 43%, #020813 100%), repeating-linear-gradient(90deg, rgba(0, 191, 232, 0.07) 0 1px, transparent 1px 72px), repeating-linear-gradient(180deg, rgba(217, 180, 90, 0.045) 0 1px, transparent 1px 72px) !important; } body::before, body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; } body::before { opacity: 0.64; background: linear-gradient(120deg, transparent 0 42%, color-mix(in srgb, var(--gold) 12%, transparent) 42.25% 42.55%, transparent 42.8%), linear-gradient(60deg, transparent 0 56%, color-mix(in srgb, var(--cyan) 10%, transparent) 56.25% 56.48%, transparent 56.75%), linear-gradient(180deg, color-mix(in srgb, var(--gold) 10%, transparent), transparent 34%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 74%); } body::after { opacity: 0.38; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyan) 10%, transparent), transparent), linear-gradient(180deg, transparent, color-mix(in srgb, var(--gold) 8%, transparent), transparent); background-size: 100% 1px, 1px 100%; background-position: 50% 108px, 50% 0; background-repeat: no-repeat; } .mega-menu, .main, .site-footer { position: relative; z-index: 1; } .mega-menu { padding: 16px 34px; z-index: 1200; overflow: visible; border-bottom: 1px solid var(--cinema-line); background: linear-gradient(90deg, color-mix(in srgb, var(--surface-strong) 88%, transparent), color-mix(in srgb, var(--surface) 74%, transparent)), linear-gradient(90deg, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 34%, color-mix(in srgb, var(--gold) 9%, transparent)) !important; backdrop-filter: blur(22px) saturate(140%); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--gold) 18%, transparent), 0 18px 70px rgba(3, 9, 20, 0.12); } :root[data-theme="dark"] .mega-menu { background: linear-gradient(90deg, rgba(2, 8, 19, 0.92), rgba(5, 16, 29, 0.86)), linear-gradient(90deg, rgba(0, 191, 232, 0.1), transparent 42%, rgba(217, 180, 90, 0.1)) !important; border-bottom-color: rgba(217, 180, 90, 0.28); box-shadow: inset 0 -1px 0 rgba(0, 191, 232, 0.24), 0 22px 80px rgba(0, 0, 0, 0.46); } .brand-logo-shell, .footer-logo-shell, .brand-mark { border-radius: 15px; background: radial-gradient(circle at 50% 38%, rgba(0, 191, 232, 0.14), transparent 54%), linear-gradient(145deg, #03101f, #082139 58%, #041526); box-shadow: inset 0 0 0 1px rgba(217, 180, 90, 0.26), 0 0 0 1px color-mix(in srgb, var(--cyan) 18%, transparent), 0 18px 42px rgba(3, 9, 20, 0.18); } .brand-logo, .footer-logo { filter: drop-shadow(0 0 8px rgba(217, 180, 90, 0.18)) drop-shadow(0 9px 16px rgba(0, 0, 0, 0.34)); } :root[data-theme="dark"] .brand-logo-shell, :root[data-theme="dark"] .footer-logo-shell, :root[data-theme="dark"] .brand-mark { background: linear-gradient(145deg, rgba(3, 13, 24, 0.98), rgba(8, 26, 43, 0.92)), linear-gradient(135deg, rgba(217, 180, 90, 0.12), rgba(0, 191, 232, 0.12)); box-shadow: inset 0 0 0 1px rgba(217, 180, 90, 0.24), 0 0 28px rgba(0, 191, 232, 0.13), 0 18px 42px rgba(0, 0, 0, 0.38); } .brand strong { color: var(--ink); font-size: 19px; letter-spacing: 0; } .brand small { color: var(--muted); letter-spacing: 0; } .nav-item { min-height: 44px; padding: 0 14px; border: 1px solid transparent; border-radius: 14px; color: color-mix(in srgb, var(--ink) 72%, var(--muted)); transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease; } .nav-item:hover, .nav-item.active, .nav-user-item { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 12%, var(--surface)), color-mix(in srgb, var(--cyan) 9%, var(--surface))) !important; border-color: color-mix(in srgb, var(--gold) 32%, transparent); color: var(--ink) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 10%, transparent), 0 12px 28px rgba(3, 9, 20, 0.1); } :root[data-theme="dark"] .nav-item:hover, :root[data-theme="dark"] .nav-item.active, :root[data-theme="dark"] .nav-user-item { background: linear-gradient(135deg, rgba(0, 191, 232, 0.15), rgba(217, 180, 90, 0.1)) !important; border-color: rgba(217, 180, 90, 0.24); color: #fff7ea !important; } :root[data-theme="dark"] .nav-account-dropdown { border-color: rgba(217, 180, 90, 0.26); background: linear-gradient(135deg, rgba(5, 18, 33, 0.98), rgba(13, 26, 25, 0.98)); box-shadow: 0 22px 52px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .account-menu-item { color: color-mix(in srgb, #fff7ea 78%, var(--muted)); } :root[data-theme="dark"] .account-menu-item:hover, :root[data-theme="dark"] .account-menu-item.active { border-color: rgba(0, 199, 255, 0.34); background: rgba(0, 199, 255, 0.12); color: #fff7ea; } .topbar-calendar { justify-self: center; width: min(320px, 24vw); min-height: 48px; display: grid; align-content: center; gap: 2px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line)); border-radius: 16px; background: radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 36%), color-mix(in srgb, var(--surface-strong) 78%, transparent); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 8%, transparent); } .topbar-calendar-date { display: flex; align-items: center; gap: 8px; min-width: 0; } .topbar-calendar .icon { width: 17px; height: 17px; flex: 0 0 auto; color: var(--cyan); } .topbar-calendar strong, .topbar-calendar em, .topbar-calendar span, .topbar-calendar small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-calendar strong { color: var(--ink); font-size: 13px; line-height: 1.15; } .topbar-calendar em { color: var(--muted); font-size: 11px; font-style: normal; line-height: 1.1; } .topbar-calendar-meta { padding-left: 25px; color: var(--muted); font-size: 11px; line-height: 1.2; } .topbar-calendar-meta span, .topbar-calendar-meta b, .topbar-calendar-meta small { display: inline; } .topbar-calendar-meta small { color: color-mix(in srgb, var(--gold) 72%, var(--muted)); font-size: 10px; letter-spacing: 0.01em; } .topbar-calendar-meta b { color: color-mix(in srgb, var(--gold) 74%, var(--muted)); font-weight: 700; } :root[data-theme="dark"] .topbar-calendar { border-color: rgba(217, 180, 90, 0.28); background: radial-gradient(circle at 8% 18%, rgba(0, 191, 232, 0.18), transparent 38%), linear-gradient(135deg, rgba(4, 17, 31, 0.88), rgba(2, 9, 18, 0.8)); box-shadow: inset 0 0 0 1px rgba(0, 191, 232, 0.1), 0 12px 32px rgba(0, 0, 0, 0.16); } :root[data-theme="dark"] .topbar-calendar strong { color: #fff7ea; } :root[data-theme="dark"] .topbar-calendar em, :root[data-theme="dark"] .topbar-calendar-meta { color: rgba(218, 232, 242, 0.82); } :root[data-theme="dark"] .topbar-calendar-meta small { color: #d9b45a; } :root[data-theme="dark"] .topbar-calendar-meta b { color: rgba(217, 180, 90, 0.72); } @media (max-width: 1180px) { .topbar-calendar { grid-column: 1 / -1; width: 100%; justify-self: stretch; min-height: 44px; } .topbar-calendar-meta { padding-left: 25px; } } @media (max-width: 760px) { .topbar-calendar { padding: 8px 10px; } .topbar-calendar-date { gap: 7px; } .topbar-calendar-meta span, .topbar-calendar-meta small { display: inline; } } .main { width: min(100%, 1320px); padding: 36px 30px 68px; } .page-main { padding-top: 30px; } .topbar { top: 78px; z-index: 12; padding: 10px; border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 86%, transparent), color-mix(in srgb, var(--surface) 72%, transparent)) !important; backdrop-filter: blur(18px) saturate(130%); box-shadow: var(--shadow-soft); } #liveTorahStart { margin: 10px 0 12px; } .personal-home-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px; padding: 30px; border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); border-radius: var(--radius-lg); background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--cyan) 13%, transparent), transparent 34%), radial-gradient(circle at 6% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--cinema-glass-strong) 94%, transparent), color-mix(in srgb, var(--surface) 86%, transparent)); box-shadow: var(--shadow); backdrop-filter: blur(20px) saturate(130%); } .personal-home-hero h1 { max-width: none; margin: 0; font-size: 64px; line-height: 0.95; letter-spacing: 0; } .personal-home-hero p { margin: 10px 0 0; color: var(--muted); font-size: 18px; } .personal-topic-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; max-width: 520px; } /* Chip wrapper - holds the tag link + the tiny + button together */ .personal-topic-chip-wrap { display: inline-flex; align-items: center; border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--surface-strong) 82%, transparent); transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; overflow: hidden; } .personal-topic-chip-wrap:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cyan) 52%, var(--gold)); background: color-mix(in srgb, var(--cyan) 12%, var(--surface-strong)); } .personal-topic-chip { display: inline-flex; align-items: center; min-height: 38px; padding: 9px 10px 9px 14px; color: var(--ink); font-weight: 900; text-decoration: none; border: none; background: transparent; } .personal-topic-chip:hover { color: var(--ink); } /* Tiny + button */ .topic-add-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 6px 0 0; padding: 0; border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--cyan) 12%, transparent); color: var(--cyan); font-size: 14px; font-weight: 900; line-height: 1; cursor: pointer; flex-shrink: 0; transition: background 150ms, border-color 150ms, color 150ms; } .topic-add-btn:hover { background: var(--cyan); border-color: var(--cyan); color: #030914; } .topic-add-btn--done { background: color-mix(in srgb, var(--cyan) 20%, transparent); border-color: color-mix(in srgb, var(--cyan) 50%, transparent); color: var(--cyan); cursor: default; font-size: 11px; } :root[data-theme="dark"] .personal-home-hero { background: radial-gradient(circle at 88% 0%, rgba(0, 191, 232, 0.16), transparent 35%), radial-gradient(circle at 12% 8%, rgba(217, 180, 90, 0.14), transparent 34%), linear-gradient(135deg, rgba(8, 24, 41, 0.94), rgba(4, 12, 23, 0.88)); border-color: rgba(217, 180, 90, 0.24); } :root[data-theme="dark"] .personal-topic-chip-wrap { background: rgba(4, 14, 25, 0.78); border-color: rgba(217, 180, 90, 0.26); } :root[data-theme="dark"] .personal-topic-chip { color: #eef9ff; } .search, .admin-list-controls .admin-rabbi-search, .recorded-search, .rabbi-search, .zone-message-search, input, textarea, select { border-radius: 13px; border-color: color-mix(in srgb, var(--gold) 26%, var(--line)) !important; background: color-mix(in srgb, var(--surface-strong) 86%, transparent) !important; color: var(--ink) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, white 40%, transparent); } :root[data-theme="dark"] .search, :root[data-theme="dark"] .admin-list-controls .admin-rabbi-search, :root[data-theme="dark"] .recorded-search, :root[data-theme="dark"] .rabbi-search, :root[data-theme="dark"] .zone-message-search, :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: rgba(2, 9, 17, 0.72) !important; border-color: rgba(217, 180, 90, 0.22) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(0, 191, 232, 0.04); } .search:focus-within, input:focus, textarea:focus, select:focus { outline: 0; border-color: color-mix(in srgb, var(--cyan) 58%, var(--gold)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08); } h1, h2, h3 { color: var(--ink); letter-spacing: 0; } h1 { max-width: 800px; font-size: clamp(42px, 5.25vw, 76px); line-height: 0.98; } h2 { line-height: 1.02; } p, .row-meta, .viewer-count { color: var(--muted); } .live-panel, .action-panel, .wide-section, .stack-section, .topics-panel, .zone-panel, .auth-panel, .donation-card, .admin-panel, .rabbi-console-panel, .profile-section, .support-card, .public-chat-card, .rabbi-admin-session, .recorded-item, .live-row, .media-upload-card, .photo-crop-dialog, .chat-admin-card { border-radius: var(--radius-lg); border: 1px solid var(--cinema-line) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--cinema-glass-strong) 92%, transparent), color-mix(in srgb, var(--cinema-glass) 86%, transparent)), linear-gradient(120deg, color-mix(in srgb, var(--cyan) 5%, transparent), transparent 42%, color-mix(in srgb, var(--gold) 6%, transparent)) !important; box-shadow: var(--shadow); backdrop-filter: blur(20px) saturate(125%); } :root[data-theme="dark"] .live-panel, :root[data-theme="dark"] .action-panel, :root[data-theme="dark"] .wide-section, :root[data-theme="dark"] .stack-section, :root[data-theme="dark"] .topics-panel, :root[data-theme="dark"] .zone-panel, :root[data-theme="dark"] .auth-panel, :root[data-theme="dark"] .donation-card, :root[data-theme="dark"] .admin-panel, :root[data-theme="dark"] .admin-row, :root[data-theme="dark"] .rabbi-console-panel, :root[data-theme="dark"] .profile-section, :root[data-theme="dark"] .support-card, :root[data-theme="dark"] .public-chat-card, :root[data-theme="dark"] .rabbi-admin-session, :root[data-theme="dark"] .recorded-item, :root[data-theme="dark"] .live-row, :root[data-theme="dark"] .media-upload-card, :root[data-theme="dark"] .photo-crop-dialog, :root[data-theme="dark"] .chat-admin-card, :root[data-theme="dark"] .api-guide article, :root[data-theme="dark"] .terms-list article, :root[data-theme="dark"] .rabbi-admin-stats article, :root[data-theme="dark"] .admin-grid article, :root[data-theme="dark"] .donation-summary { background: linear-gradient(135deg, rgba(8, 24, 41, 0.92), rgba(4, 12, 23, 0.88)), linear-gradient(120deg, rgba(0, 191, 232, 0.07), transparent 42%, rgba(217, 180, 90, 0.07)) !important; border-color: rgba(217, 180, 90, 0.22) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 32px 96px rgba(0, 0, 0, 0.4); } .live-panel, .wide-section, .stack-section, .topics-panel, .zone-panel, .rabbi-console-panel, .admin-panel, .donation-card, .profile-section { position: relative; overflow: hidden; } .wide-section::before, .stack-section::before, .topics-panel::before, .zone-panel::before, .rabbi-console-panel::before, .admin-panel::before, .donation-card::before, .profile-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.42; background: linear-gradient(90deg, var(--gold) 0 44px, transparent 44px) top left / 180px 1px no-repeat, linear-gradient(180deg, var(--gold) 0 44px, transparent 44px) top left / 1px 180px no-repeat, linear-gradient(270deg, color-mix(in srgb, var(--cyan) 80%, var(--gold)) 0 36px, transparent 36px) bottom right / 160px 1px no-repeat, linear-gradient(0deg, color-mix(in srgb, var(--cyan) 80%, var(--gold)) 0 36px, transparent 36px) bottom right / 1px 160px no-repeat; } .live-panel { padding: clamp(28px, 4vw, 50px); min-height: 560px; } .live-panel::before { width: 3px; background: linear-gradient(180deg, transparent, var(--gold), var(--cyan), transparent) !important; opacity: 0.92; } .live-panel::after { content: ""; position: absolute; right: clamp(18px, 5vw, 70px); top: clamp(24px, 6vw, 72px); width: min(42vw, 460px); aspect-ratio: 1; pointer-events: none; opacity: 0.2; background: linear-gradient(60deg, transparent 49.7%, var(--gold) 50%, transparent 50.3%), linear-gradient(120deg, transparent 49.7%, var(--cyan) 50%, transparent 50.3%), linear-gradient(180deg, transparent 49.7%, color-mix(in srgb, var(--gold) 70%, var(--cyan)) 50%, transparent 50.3%); transform: rotate(30deg); mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.9), transparent 78%); } .section-heading { margin-bottom: clamp(24px, 4vw, 42px); } .section-heading p { max-width: 690px; font-size: 17px; line-height: 1.65; } .featured-live { align-items: center; padding: clamp(20px, 3vw, 32px); border-radius: 18px; border-color: color-mix(in srgb, var(--gold) 26%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 92%, var(--gold) 8%), color-mix(in srgb, var(--surface) 86%, var(--cyan) 7%)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 54px rgba(3, 9, 20, 0.14); } :root[data-theme="dark"] .featured-live { background: linear-gradient(135deg, rgba(10, 25, 42, 0.94), rgba(7, 16, 29, 0.88)), linear-gradient(90deg, rgba(217, 180, 90, 0.1), transparent 55%, rgba(0, 191, 232, 0.08)) !important; border-color: rgba(217, 180, 90, 0.24); } .live-eyebrow, .live-card-badge, .live-pill, .chat-status-pill, .metric, .mood-chip { border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); border-radius: 999px; letter-spacing: 0; } .live-eyebrow { background: color-mix(in srgb, var(--burgundy) 10%, var(--surface)); color: var(--burgundy); } .recorded-cta, .support-box, .upload-status, .donation-summary, .profile-facts article, .api-guide article, .terms-list article, .rabbi-admin-stats article, .admin-grid article { border-radius: 16px; border-color: color-mix(in srgb, var(--gold) 26%, var(--line)) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 92%, transparent), color-mix(in srgb, var(--surface) 82%, transparent)) !important; box-shadow: var(--shadow-soft); } :root[data-theme="dark"] .recorded-cta, :root[data-theme="dark"] .support-box, :root[data-theme="dark"] .upload-status, :root[data-theme="dark"] .donation-summary, :root[data-theme="dark"] .profile-facts article, :root[data-theme="dark"] .api-guide article, :root[data-theme="dark"] .terms-list article, :root[data-theme="dark"] .rabbi-admin-stats article, :root[data-theme="dark"] .admin-grid article { background: linear-gradient(135deg, rgba(2, 9, 17, 0.82), rgba(10, 25, 42, 0.74)) !important; border-color: rgba(217, 180, 90, 0.2) !important; } .primary-button, .support-button { min-height: 44px; border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); border-radius: 13px; background: linear-gradient(135deg, color-mix(in srgb, var(--burgundy) 86%, var(--gold) 14%), color-mix(in srgb, var(--burgundy) 72%, var(--cyan) 18%)) !important; color: #fffaf0 !important; box-shadow: 0 16px 42px color-mix(in srgb, var(--burgundy) 26%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.16); } .join-button, .amount-grid button.selected, .donation-amount-grid button.selected, .segmented button.active { border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent) !important; border-radius: 13px; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 92%, white 8%), color-mix(in srgb, var(--gold-bright) 78%, var(--cyan) 8%)) !important; color: #06101a !important; box-shadow: 0 14px 34px color-mix(in srgb, var(--gold) 18%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .ghost-button, .small-button, .link-button, .admin-tabs button, .rabbi-console-tabs button, .mood-chip, .recorded-tags button, .amount-grid button, .donation-amount-grid button { border-radius: 13px; background: color-mix(in srgb, var(--surface-strong) 82%, transparent) !important; color: var(--ink) !important; border-color: color-mix(in srgb, var(--gold) 22%, var(--line)) !important; } :root[data-theme="dark"] .ghost-button, :root[data-theme="dark"] .small-button, :root[data-theme="dark"] .link-button, :root[data-theme="dark"] .admin-tabs button, :root[data-theme="dark"] .rabbi-console-tabs button, :root[data-theme="dark"] .mood-chip, :root[data-theme="dark"] .recorded-tags button, :root[data-theme="dark"] .amount-grid button, :root[data-theme="dark"] .donation-amount-grid button { background: rgba(4, 14, 25, 0.78) !important; color: #eef9ff !important; border-color: rgba(217, 180, 90, 0.22) !important; } .admin-tabs, .rabbi-console-tabs, .rabbi-filter-bar, .recorded-tags { border-radius: 18px; border-color: color-mix(in srgb, var(--gold) 24%, var(--line)) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 86%, transparent), color-mix(in srgb, var(--surface) 72%, transparent)) !important; box-shadow: var(--shadow-soft); } :root[data-theme="dark"] .admin-tabs, :root[data-theme="dark"] .rabbi-console-tabs, :root[data-theme="dark"] .rabbi-filter-bar, :root[data-theme="dark"] .recorded-tags { background: linear-gradient(135deg, rgba(2, 9, 17, 0.86), rgba(8, 23, 39, 0.78)) !important; border-color: rgba(217, 180, 90, 0.22) !important; } .admin-tabs button.active, .rabbi-console-tabs button.active, .mood-chip.active, .recorded-tags button:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 88%, white 8%), color-mix(in srgb, var(--cyan) 24%, var(--gold))) !important; color: #06101a !important; } .rabbi-card { padding: 16px; border-radius: 18px; border-color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 58%, var(--gold) 28%) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--rabbi-start, var(--cyan)) 76%, var(--gold)) 0 3px, transparent 3px), linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, var(--cyan)) 12%, var(--surface-strong)), color-mix(in srgb, var(--rabbi-end, var(--gold)) 9%, var(--surface))) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rabbi-end, var(--gold)) 14%, transparent), var(--shadow-soft); } :root[data-theme="dark"] .rabbi-card { background: linear-gradient(90deg, color-mix(in srgb, var(--rabbi-start, var(--cyan)) 78%, var(--gold)) 0 3px, transparent 3px), linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, var(--cyan)) 16%, rgba(7, 20, 34, 0.94)), color-mix(in srgb, var(--rabbi-end, var(--gold)) 12%, rgba(3, 9, 18, 0.94))) !important; border-color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 56%, rgba(217, 180, 90, 0.36)) !important; } .rabbi-card h3 { font-size: 17px; line-height: 1.1; } .rabbi-card p { color: var(--muted) !important; } .avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 68%, transparent), 0 10px 24px rgba(3, 9, 20, 0.2); } .avatar.has-photo::before, .avatar.has-photo::after { display: none; } .source-thumb, .session-artwork, .upcoming-artwork, .scheduled-artwork, .media-preview { border-radius: 13px; border-color: color-mix(in srgb, var(--gold) 30%, var(--line)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 12px 28px rgba(3, 9, 20, 0.14); } .site-footer { padding: 30px 34px; border-top: 1px solid var(--cinema-line); background: linear-gradient(90deg, color-mix(in srgb, var(--surface-strong) 88%, transparent), color-mix(in srgb, var(--surface) 72%, transparent)), linear-gradient(90deg, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 36%, color-mix(in srgb, var(--gold) 10%, transparent)) !important; backdrop-filter: blur(18px); } :root[data-theme="dark"] .site-footer { background: linear-gradient(90deg, rgba(2, 8, 19, 0.94), rgba(6, 18, 31, 0.88)), linear-gradient(90deg, rgba(0, 191, 232, 0.08), transparent 36%, rgba(217, 180, 90, 0.1)) !important; border-top-color: rgba(217, 180, 90, 0.28); } .site-footer nav a { color: var(--gold); transition: color 160ms ease, transform 160ms ease; } .site-footer nav a:hover { color: var(--cyan); transform: translateY(-1px); } .footer-logo-shell .logo-fallback, .brand-logo-shell .logo-fallback { color: var(--gold) !important; } @keyframes tfCinematicRise { from { opacity: 0; transform: translateY(18px) scale(0.992); filter: blur(4px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes tfSacredSweep { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } .page-main > .topbar, .page-main > section, .auth-panel, .donation-card, .admin-panel, .rabbi-console-panel, .zone-panel, .profile-section { animation: tfCinematicRise 720ms cubic-bezier(0.16, 1, 0.3, 1) both; } .live-panel::after, .wide-section::before, .stack-section::before, .topics-panel::before, .zone-panel::before { animation: tfSacredSweep 18s ease-in-out infinite alternate; } .rabbi-card, .live-row, .recorded-item, .public-chat-card, .chat-admin-card, .rabbi-admin-session, .shiur-item, .gem-item, .learning-item { transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms ease, box-shadow 220ms ease, background 220ms ease; } .rabbi-card:hover, .live-row:hover, .recorded-item:hover, .public-chat-card:hover, .chat-admin-card:hover, .rabbi-admin-session:hover, .shiur-item:hover, .gem-item:hover, .learning-item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gold) 48%, var(--cyan)) !important; box-shadow: 0 26px 72px rgba(3, 9, 20, 0.2), 0 0 0 1px color-mix(in srgb, var(--cyan) 14%, transparent); } :root[data-theme="dark"] .rabbi-card:hover, :root[data-theme="dark"] .live-row:hover, :root[data-theme="dark"] .recorded-item:hover, :root[data-theme="dark"] .public-chat-card:hover, :root[data-theme="dark"] .chat-admin-card:hover, :root[data-theme="dark"] .rabbi-admin-session:hover, :root[data-theme="dark"] .shiur-item:hover, :root[data-theme="dark"] .gem-item:hover, :root[data-theme="dark"] .learning-item:hover { box-shadow: 0 28px 84px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(0, 191, 232, 0.16), 0 0 36px rgba(0, 191, 232, 0.08); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; } } @media (max-width: 920px) { .topbar { top: 72px; align-items: stretch; } .personal-home-hero { grid-template-columns: 1fr; align-items: start; padding: 22px; } .personal-home-hero h1 { font-size: 44px; line-height: 1; } .personal-topic-row { justify-content: flex-start; max-width: none; } .live-panel { min-height: 0; } .live-panel::after { width: 280px; opacity: 0.14; } } /* Rabbi page media and guided controls */ .help-tip { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 6px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cyan) 34%, var(--gold)); background: color-mix(in srgb, var(--surface-strong) 78%, transparent); color: var(--gold); font-size: 12px; font-weight: 900; line-height: 1; cursor: help; vertical-align: middle; box-shadow: 0 8px 22px rgba(3, 9, 20, 0.16); } .help-tip::after { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 80; width: min(280px, 70vw); padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--line)); background: color-mix(in srgb, var(--surface-strong) 94%, #06101a 8%); color: var(--ink); box-shadow: 0 22px 58px rgba(3, 9, 20, 0.28); content: attr(data-tip); font: 700 12px/1.45 var(--body-font); opacity: 0; pointer-events: none; transform: translate(-50%, 6px); transition: opacity 160ms ease, transform 160ms ease; } .help-tip:hover::after, .help-tip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); } :root[data-theme="dark"] .help-tip::after { background: rgba(3, 12, 23, 0.98); color: #eef9ff; box-shadow: 0 24px 72px rgba(0, 0, 0, 0.52), 0 0 34px rgba(0, 191, 232, 0.08); } .social-link-grid, .page-design-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .page-design-grid { padding: 16px; border: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line)); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, var(--cyan)) 9%, var(--surface-strong)), color-mix(in srgb, var(--rabbi-end, var(--gold)) 8%, var(--surface))); } .banner-upload-control .banner-preview, .media-preview.banner-preview { width: min(100%, 320px); min-width: min(100%, 220px); height: auto; min-height: 0; aspect-ratio: 16 / 9; border-radius: 14px; } .media-upload-card.banner-upload-control { grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) auto; } .banner-upload-control .banner-preview img, .media-preview.banner-preview img { width: 100%; height: 100%; object-fit: cover; } .photo-crop-canvas.banner-canvas { width: min(100%, 820px); aspect-ratio: 16 / 9; height: auto; } .rabbi-public-hero { position: relative; min-height: 0; overflow: hidden; display: grid; gap: clamp(10px, 1.5vw, 16px); align-items: stretch; padding: clamp(10px, 1.6vw, 18px); border-radius: 20px; border: 1px solid color-mix(in srgb, var(--rabbi-start, var(--cyan)) 42%, var(--gold) 28%); background: radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--rabbi-start, var(--cyan)) 24%, transparent), transparent 34%), radial-gradient(circle at 84% 20%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 24%, transparent), transparent 36%), linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 78%, var(--rabbi-start, var(--cyan)) 12%), color-mix(in srgb, var(--surface) 80%, var(--rabbi-end, var(--gold)) 11%)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent), 0 34px 90px rgba(3, 9, 20, 0.2); } .rabbi-public-hero::before { display: none; } .rabbi-public-hero::after { display: none; } .rabbi-banner-stage { position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9; justify-self: center; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--rabbi-start, var(--cyan)) 24%); background-color: color-mix(in srgb, var(--surface) 80%, #020814 20%); background-image: var(--rabbi-banner, linear-gradient(145deg, var(--rabbi-start, #0077a8), var(--rabbi-end, #d7b65f))); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: var(--banner-opacity, 1); filter: saturate(1.08) contrast(1.04); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 12%, transparent), 0 34px 90px rgba(0, 0, 0, 0.26), 0 0 70px color-mix(in srgb, var(--rabbi-start, var(--cyan)) 15%, transparent); } .rabbi-banner-stage::after { display: none; } .banner-clear .rabbi-banner-stage { background-image: var(--rabbi-banner, linear-gradient(135deg, var(--rabbi-start, #0077a8), var(--rabbi-end, #d7b65f))); } .banner-warm .rabbi-banner-stage::after { background: linear-gradient(0deg, rgba(2, 8, 18, 0.68), transparent 58%), radial-gradient(circle at 26% 18%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 30%, transparent), transparent 38%); } .hero-minimal .rabbi-public-hero::after { display: none; } .hero-minimal .rabbi-public-hero { min-height: 0; } .hero-illuminated .rabbi-public-hero { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 24%, transparent), 0 42px 110px color-mix(in srgb, var(--rabbi-end, var(--gold)) 20%, rgba(3, 9, 20, 0.2)); } .accent-soft .rabbi-public-hero { border-color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 28%, var(--gold) 18%); } .accent-bold .rabbi-public-hero, .accent-bold .profile-section { border-color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 56%, var(--rabbi-end, var(--gold)) 30%) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rabbi-end, var(--gold)) 16%, transparent), 0 30px 90px color-mix(in srgb, var(--rabbi-start, var(--cyan)) 18%, rgba(3, 9, 20, 0.22)); } .rabbi-hero-content { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); align-items: center; padding: clamp(14px, 2.4vw, 30px); border-radius: 16px; border: 1px solid color-mix(in srgb, var(--gold) 26%, var(--rabbi-start, var(--cyan)) 18%); background: radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--rabbi-start, var(--cyan)) 14%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 84%, var(--rabbi-start, var(--cyan)) 10%), color-mix(in srgb, var(--surface) 86%, var(--rabbi-end, var(--gold)) 9%)); box-shadow: 0 20px 54px rgba(0, 0, 0, 0.18); } .rabbi-hero-avatar { position: relative; width: clamp(128px, 14vw, 190px); aspect-ratio: 1; border-radius: 999px; background: var(--avatar, var(--rabbi-gradient)); background-size: cover; background-position: center; border: 3px solid color-mix(in srgb, var(--gold) 72%, white 10%); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.06), 0 24px 70px rgba(0, 0, 0, 0.32), 0 0 40px color-mix(in srgb, var(--rabbi-start, var(--cyan)) 22%, transparent); } .rabbi-hero-avatar:not(.has-photo)::before, .rabbi-hero-avatar:not(.has-photo)::after { content: ""; position: absolute; border-radius: 999px; background: rgba(255, 250, 230, 0.82); } .rabbi-hero-avatar:not(.has-photo)::before { width: 26%; height: 26%; top: 22%; left: 50%; transform: translateX(-50%); } .rabbi-hero-avatar:not(.has-photo)::after { width: 54%; height: 34%; left: 23%; bottom: 20%; background: rgba(8, 25, 21, 0.82); } .rabbi-hero-copy { max-width: 980px; } .rabbi-hero-copy h1 { color: #fffaf0; text-shadow: 0 2px 0 rgba(0, 191, 232, 0.18), 0 18px 44px rgba(0, 0, 0, 0.42); } .rabbi-hero-meta, .rabbi-hero-note { color: rgba(255, 250, 238, 0.88); } .rabbi-hero-note { max-width: 850px; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.5; } .rabbi-social-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 4px; } .rabbi-social-links a { display: inline-flex; align-items: center; min-height: 38px; padding: 9px 13px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--cyan) 14%); background: rgba(2, 10, 20, 0.58); color: #fffaf0; font: 900 12px/1 var(--body-font); text-decoration: none; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22); transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; } .rabbi-social-links a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cyan) 48%, var(--gold)); background: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 22%, rgba(2, 10, 20, 0.7)); } .public-link-row-profile { gap: 10px; margin: 18px 0 4px; } .public-link-row-profile .public-link-icon { width: 42px; height: 42px; border-color: color-mix(in srgb, var(--gold) 42%, var(--cyan) 16%); background: rgba(2, 10, 20, 0.58); color: #fffaf0; font-size: 17px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22); } .public-link-row-profile .public-link-icon:hover { background: var(--rabbi-gradient, linear-gradient(135deg, var(--cyan), var(--gold))); } .rabbi-public-hero .ghost-button, .rabbi-public-hero .primary-button { background: rgba(2, 10, 20, 0.72) !important; color: #fffaf0 !important; border-color: color-mix(in srgb, var(--gold) 36%, var(--cyan) 16%) !important; } :root[data-theme="light"] .rabbi-public-hero .ghost-button { background: rgba(255, 250, 240, 0.72) !important; color: #06101a !important; } :root[data-theme="light"] .rabbi-hero-copy h1 { color: #071421; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 16px 36px rgba(6, 16, 26, 0.12); } :root[data-theme="light"] .rabbi-hero-meta, :root[data-theme="light"] .rabbi-hero-note { color: rgba(7, 20, 33, 0.82); } @media (max-width: 920px) { .social-link-grid, .page-design-grid { grid-template-columns: 1fr; } .rabbi-public-hero { min-height: 0; } .rabbi-hero-content { grid-template-columns: 1fr; align-items: start; } .rabbi-hero-avatar { width: 132px; } } @media (max-width: 640px) { .rabbi-public-hero { padding: 8px; } .rabbi-banner-stage { border-radius: 12px; } .rabbi-hero-content { gap: 12px; padding: 14px; } .profile-tab-list { gap: 7px; padding: 8px; border-radius: 16px; } .profile-tab-button { flex-basis: calc(50% - 4px); min-height: 38px; padding: 8px 10px; border-radius: 12px; font-size: 12px; } } .support-box select, .support-box input[type="text"] { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink); padding: 10px 12px; font-weight: 800; } .donation-form select { min-height: 48px; } .active-action, .recorded-actions .active-action { border-color: color-mix(in srgb, var(--gold) 70%, var(--olive)); background: color-mix(in srgb, var(--gold) 22%, var(--surface)); color: var(--olive-dark); } .shelf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .shelf-section { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: linear-gradient(135deg, rgba(0, 167, 215, 0.05), transparent 45%), color-mix(in srgb, var(--surface) 92%, transparent); } .compact-title-row { margin-bottom: 10px; } .compact-title-row h3 { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); } :root[data-theme="dark"] .support-box select, :root[data-theme="dark"] .support-box input[type="text"], :root[data-theme="dark"] .shelf-section { background: linear-gradient(135deg, rgba(0, 199, 255, 0.08), transparent 48%), #081525; color: var(--ink); border-color: rgba(215, 182, 95, 0.26); } :root[data-theme="dark"] .active-action, :root[data-theme="dark"] .recorded-actions .active-action { background: linear-gradient(135deg, rgba(0, 199, 255, 0.2), rgba(215, 182, 95, 0.16)); color: #fff8e8; border-color: rgba(215, 182, 95, 0.52); } @media (max-width: 780px) { .shelf-grid { grid-template-columns: 1fr; } } @media (max-width: 520px) { .zone-learning-card { align-items: start; flex-direction: column; } .zone-learning-card .compact-actions { width: 100%; } .shelf-action { flex: 1 1 0; } } /* Recorded session cards: compact grid, centered play affordance, icon-only actions. */ .shiur-list.large-list { grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); align-items: stretch; gap: 16px; } #recordedList.shiur-list.large-list { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .compact-recorded-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; height: 100%; padding: 12px !important; border-bottom: 0 !important; } .compact-recorded-card .recorded-card-body { display: grid; align-content: start; gap: 8px; min-width: 0; } .compact-recorded-card strong { margin: 0; font-size: 15px; line-height: 1.25; } .compact-recorded-card p { font-size: 12.5px; line-height: 1.35; } .thumbnail-wrapper { position: relative; display: inline-grid; place-items: center; line-height: 0; isolation: isolate; } .compact-recorded-card > .thumbnail-wrapper, .topic-session-card .thumbnail-wrapper { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 15px; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--cyan) 16%, transparent), transparent 36%), linear-gradient(135deg, rgba(8, 24, 41, 0.92), rgba(3, 10, 20, 0.96)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent), 0 16px 36px rgba(3, 9, 20, 0.2); } .compact-recorded-card .session-artwork, .compact-recorded-card .source-thumb, .topic-session-card .session-artwork, .topic-session-card .source-thumb { width: 100%; height: 100%; border-radius: inherit; } .compact-recorded-card .source-thumb, .topic-session-card .source-thumb { background: linear-gradient(120deg, rgba(0, 191, 232, 0.14), transparent 42%), repeating-linear-gradient(180deg, #fffaf0 0 9px, #e9dcc2 9px 11px); } .newly-uploaded-item .thumbnail-wrapper.compact-thumb { width: 42px; height: 42px; overflow: hidden; border-radius: 13px; } .newly-uploaded-item .thumbnail-wrapper.compact-thumb .source-thumb, .newly-uploaded-item .thumbnail-wrapper.compact-thumb .session-artwork { width: 100%; height: 100%; } .play-overlay { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--gold) 42%, rgba(255, 255, 255, 0.26)); border-radius: 999px; background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.28), transparent 30%), rgba(3, 10, 20, 0.68); color: #fff8e8; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 0 24px rgba(0, 191, 232, 0.14); transform: translate(-50%, -50%); pointer-events: none; } .play-overlay i, .play-overlay svg { width: auto; height: auto; margin-left: 2px; font-size: 14px; } .recorded-actions.icon-action-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 2px; } .icon-action-button { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; min-width: 34px; padding: 0; border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); border-radius: 11px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--cyan) 8%, var(--surface))); color: var(--ink); cursor: pointer; font-size: 13px; text-decoration: none; box-shadow: 0 9px 20px rgba(3, 9, 20, 0.08); } .chat-icon-button { width: 38px; height: 38px; min-width: 38px; border-radius: 13px; } .message-public-row .chat-icon-button, .row-actions .chat-icon-button { flex: 0 0 auto; margin: 0; padding: 0; } .message-public-row .chat-icon-button.message-public-toggle { min-height: 38px; border-color: color-mix(in srgb, var(--gold) 28%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--cyan) 8%, var(--surface))); } .message-public-row .chat-icon-button.message-public-toggle.selected { border-color: color-mix(in srgb, var(--danger) 30%, var(--gold)); color: var(--danger); background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 12%, var(--surface)), color-mix(in srgb, var(--gold) 11%, var(--surface))); } .chat-icon-button.primary-chat-action { color: #fff8e8; border-color: color-mix(in srgb, var(--cyan) 64%, var(--gold)); background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 72%, #06506f), color-mix(in srgb, var(--danger) 64%, #641627)); box-shadow: 0 16px 34px rgba(0, 191, 232, 0.13), 0 12px 28px rgba(177, 38, 61, 0.2); } .chat-compose .chat-icon-button.primary-chat-action { align-self: stretch; width: 56px; height: auto; min-height: 56px; border-radius: 16px; justify-self: end; } .chat-icon-button i { font-size: 14px; line-height: 1; } .icon-action-button:hover, .icon-action-button:focus-visible { border-color: color-mix(in srgb, var(--cyan) 44%, var(--gold)); color: var(--cyan); transform: translateY(-1px); } .icon-action-button.danger-button { color: var(--danger); } .icon-action-button.complete-action { color: var(--green); } .icon-action-button[data-tooltip]::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 20; width: max-content; max-width: 180px; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--ink) 96%, #000); color: #fff8e8; font-size: 11px; font-weight: 850; line-height: 1.2; white-space: normal; opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity 140ms ease, transform 140ms ease; } .icon-action-button:hover::after, .icon-action-button:focus-visible::after { opacity: 1; transform: translate(-50%, 0); } :root[data-theme="dark"] .compact-recorded-card .source-thumb, :root[data-theme="dark"] .topic-session-card .source-thumb { background: linear-gradient(120deg, rgba(0, 191, 232, 0.16), transparent 42%), repeating-linear-gradient(180deg, #071120 0 9px, #0d1b2d 9px 11px) !important; } :root[data-theme="dark"] .icon-action-button { background: linear-gradient(135deg, rgba(6, 18, 31, 0.92), rgba(3, 9, 18, 0.96)); color: #f7f0df; border-color: rgba(217, 180, 90, 0.28); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28); } :root[data-theme="dark"] .icon-action-button:hover, :root[data-theme="dark"] .icon-action-button:focus-visible { color: var(--cyan); border-color: rgba(0, 191, 232, 0.46); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36), 0 0 22px rgba(0, 191, 232, 0.1); } :root[data-theme="dark"] .icon-action-button[data-tooltip]::after { background: #03101f; color: #fff8e8; border-color: rgba(217, 180, 90, 0.34); } :root[data-theme="dark"] .message-public-row .chat-icon-button.message-public-toggle { background: linear-gradient(135deg, rgba(6, 18, 31, 0.94), rgba(3, 9, 18, 0.96)) !important; color: #f7f0df !important; border-color: rgba(217, 180, 90, 0.28) !important; } :root[data-theme="dark"] .message-public-row .chat-icon-button.message-public-toggle.selected { background: linear-gradient(135deg, rgba(77, 27, 38, 0.92), rgba(10, 25, 42, 0.94)) !important; color: #ff9bae !important; border-color: rgba(217, 95, 115, 0.42) !important; } :root[data-theme="dark"] .public-office-card, :root[data-theme="dark"] .office-booking-card, :root[data-theme="dark"] .office-booking-date, :root[data-theme="dark"] .office-booking-form, :root[data-theme="dark"] .office-request-panel, :root[data-theme="dark"] .inbox-stat-card, :root[data-theme="dark"] .admin-inbox-card, :root[data-theme="dark"] .inbox-item, :root[data-theme="dark"] .inbox-section { border-color: color-mix(in srgb, var(--inbox-accent, var(--cyan)) 42%, rgba(217, 180, 90, 0.24)) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--inbox-accent, var(--cyan)) 62%, var(--gold)) 0 3px, transparent 3px), radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--inbox-accent, var(--cyan)) 16%, transparent), transparent 34%), linear-gradient(135deg, rgba(8, 21, 37, 0.96), rgba(4, 12, 23, 0.94)) !important; color: #fff8ec !important; } :root[data-theme="dark"] .office-tier-option, :root[data-theme="dark"] .office-request-type-grid label, :root[data-theme="dark"] .office-booking-login { color: #fff8ec; border-color: rgba(217, 180, 90, 0.28); background: radial-gradient(circle at 96% 0%, rgba(0, 191, 232, 0.08), transparent 36%), rgba(2, 8, 15, 0.7); } :root[data-theme="dark"] .office-booking-form { background: radial-gradient(circle at 10% 0%, rgba(0, 191, 232, 0.16), transparent 34%), radial-gradient(circle at 100% 8%, rgba(217, 180, 90, 0.12), transparent 38%), linear-gradient(145deg, rgba(8, 31, 52, 0.9), rgba(4, 15, 29, 0.9)) !important; border-color: rgba(0, 191, 232, 0.45) !important; } :root[data-theme="dark"] .office-tier-option.selected { border-color: rgba(0, 191, 232, 0.66); background: radial-gradient(circle at 96% 0%, rgba(0, 191, 232, 0.22), transparent 40%), linear-gradient(135deg, rgba(8, 32, 48, 0.94), rgba(3, 12, 23, 0.9)); } :root[data-theme="dark"] .office-slot-meta-row span, :root[data-theme="dark"] .office-form-header small, :root[data-theme="dark"] .office-note-field span, :root[data-theme="dark"] .office-tier-option small { color: #bfd0dc; } :root[data-theme="dark"] .office-slot-kicker, :root[data-theme="dark"] .inbox-kind { color: color-mix(in srgb, var(--inbox-accent, var(--cyan)) 74%, #fff8ec) !important; border-color: color-mix(in srgb, var(--inbox-accent, var(--cyan)) 42%, rgba(217, 180, 90, 0.32)) !important; background: rgba(2, 8, 15, 0.62); } :root[data-theme="dark"] .office-request-panel textarea, :root[data-theme="dark"] .office-request-panel input, :root[data-theme="dark"] .office-note-field textarea { background: radial-gradient(circle at 0% 0%, rgba(0, 191, 232, 0.12), transparent 34%), linear-gradient(135deg, rgba(7, 22, 39, 0.94), rgba(4, 13, 25, 0.92)) !important; color: #fff8ec !important; border-color: rgba(0, 191, 232, 0.34) !important; } :root[data-theme="dark"] .inbox-stat-card small, :root[data-theme="dark"] .admin-inbox-card small, :root[data-theme="dark"] .admin-inbox-card p, :root[data-theme="dark"] .office-request-panel label span { color: #bfd0dc !important; } :root[data-theme="dark"] .chat-icon-button.primary-chat-action { color: #fff8e8 !important; border-color: rgba(0, 191, 232, 0.48) !important; background: linear-gradient(135deg, rgba(0, 126, 164, 0.92), rgba(217, 95, 115, 0.88)) !important; } @media (min-width: 1280px) { #recordedList.shiur-list.large-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 920px) { .shiur-list.large-list, #recordedList.shiur-list.large-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .shiur-list.large-list, #recordedList.shiur-list.large-list { grid-template-columns: 1fr; } } /* Inbox and chat polish pass. Keep this last so messages never fall back to flat black boxes. */ .chat-thread, .chat-compose, .public-office-card, .office-request-panel, .inbox-section, .admin-inbox-card { backdrop-filter: blur(16px) saturate(130%); } :root[data-theme="dark"] .chat-thread { background: radial-gradient(circle at 12% 0%, rgba(0, 191, 232, 0.07), transparent 28%), radial-gradient(circle at 92% 0%, rgba(217, 180, 90, 0.06), transparent 32%), linear-gradient(135deg, rgba(6, 18, 31, 0.86), rgba(2, 8, 16, 0.84)) !important; border-color: rgba(217, 180, 90, 0.22) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 50px rgba(0, 0, 0, 0.24); } :root[data-theme="dark"] .chat-compose { background: linear-gradient(135deg, rgba(7, 21, 35, 0.88), rgba(2, 8, 15, 0.86)) !important; border-color: rgba(217, 180, 90, 0.24) !important; } .chat-compose textarea, :root[data-theme="dark"] .chat-compose textarea { border: 0 !important; background: transparent !important; box-shadow: none !important; } .chat-compose:focus-within { border-color: color-mix(in srgb, var(--cyan) 56%, var(--gold)) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 13%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.04); } :root[data-theme="dark"] .chat-bubble { background: linear-gradient(135deg, rgba(9, 25, 43, 0.92), rgba(4, 13, 24, 0.92)) !important; border-color: rgba(0, 191, 232, 0.16) !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28); } :root[data-theme="dark"] .chat-message.mine .chat-bubble { background: linear-gradient(135deg, rgba(12, 39, 38, 0.9), rgba(7, 24, 38, 0.94)) !important; border-color: rgba(217, 180, 90, 0.2) !important; } @media (max-width: 640px) { .main.page-main { width: 100%; max-width: 100%; padding: 8px 7px 28px; overflow-x: hidden; } .wide-section.rabbi-admin-shell { width: 100%; max-width: 100%; padding: 10px; border-radius: 14px; } .rabbi-admin-shell h1 { font-size: 30px; } .rabbi-admin-subhead { margin-top: 12px; } .rabbi-console-tabs { position: static; gap: 6px; margin: 12px 0; padding: 6px; border-radius: 12px; } .rabbi-console-tabs button { min-height: 34px; padding: 7px 9px; font-size: 12px; } .rabbi-console-panel { gap: 10px; margin-top: 10px; padding: 10px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; } .office-shell-card { gap: 10px; max-width: none; padding: 2px; border: 0; border-radius: 0; background: transparent; } .form-section-title, .office-date-preview, .office-calendar-picker, .price-tier-builder { padding: 10px; border-radius: 14px; } .admin-form label { gap: 5px; font-size: 12px; } .admin-form input, .admin-form textarea, .admin-form select { min-height: 40px; padding: 9px 10px; border-radius: 12px; } .office-calendar-picker { gap: 9px; } .office-calendar-days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-height: 340px; } .calendar-day-header { font-size: 9px; padding: 3px 1px; } .office-date-choice { grid-template-rows: 13px 12px 14px auto; gap: 1px; min-height: 52px; padding: 5px 4px 4px; border-radius: 8px; } .office-date-choice span { font-size: 10px; } .office-date-choice .office-date-status { min-height: 13px; padding: 1px 4px; font-size: 7px; } .office-date-holiday-name { font-size: 7px; } .office-date-hebrew { font-size: 9px; } .hebrew-date-stack { min-width: 0; width: 100%; padding: 9px 10px; border-radius: 12px; } .office-grid, .office-grid-single { gap: 10px; } .media-upload-card.banner-upload-control { grid-template-columns: 1fr; } .banner-upload-control .banner-preview, .media-preview.banner-preview { width: 100%; min-width: 0; } } :root[data-theme="dark"] .public-office-card, :root[data-theme="dark"] .office-booking-card, :root[data-theme="dark"] .office-booking-date, :root[data-theme="dark"] .office-booking-form, :root[data-theme="dark"] .office-request-panel, :root[data-theme="dark"] .inbox-stat-card, :root[data-theme="dark"] .admin-inbox-card, :root[data-theme="dark"] .inbox-item, :root[data-theme="dark"] .inbox-section { border-color: color-mix(in srgb, var(--inbox-accent, var(--cyan)) 42%, rgba(217, 180, 90, 0.24)) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--inbox-accent, var(--cyan)) 62%, var(--gold)) 0 3px, transparent 3px), radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--inbox-accent, var(--cyan)) 16%, transparent), transparent 34%), linear-gradient(135deg, rgba(8, 21, 37, 0.96), rgba(4, 12, 23, 0.94)) !important; } :root[data-theme="dark"] .office-request-panel textarea { background: rgba(2, 8, 15, 0.74) !important; color: #fff8ec !important; border-color: rgba(217, 180, 90, 0.25) !important; } @media (max-width: 720px) { .inbox-stat-grid { grid-template-columns: 1fr; } .office-request-panel { grid-template-columns: 1fr; } .office-request-panel label:last-of-type, .office-request-panel .chat-icon-button { grid-column: auto; } .office-slot-date-row { grid-template-columns: 1fr; } } @media (max-width: 1120px) { .office-booking-card { grid-template-columns: 1fr 1.35fr; } .office-booking-form, .office-booking-login { grid-column: 1 / -1; } } @media (max-width: 760px) { .office-booking-card, .office-booking-card .section-title-row { grid-template-columns: 1fr; } .office-request-type-grid { grid-template-columns: 1fr; } } .agreement-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); } .request-rabbi-page { width: min(100%, 1280px); margin-inline: auto; padding: clamp(16px, 2.4vw, 28px); } .page-image-hero { position: relative; display: block; aspect-ratio: 16 / 9; margin: 0 auto clamp(24px, 4vw, 42px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line)); border-radius: clamp(22px, 3vw, 34px); background: linear-gradient(180deg, rgba(3, 9, 20, 0.08), rgba(3, 9, 20, 0.16)), var(--page-hero-image) var(--page-hero-position, center) / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 28px 92px rgba(3, 9, 20, 0.28); isolation: isolate; } .page-image-hero::before { content: ""; position: absolute; pointer-events: none; z-index: 0; inset: 0; background: linear-gradient(180deg, rgba(217, 180, 90, 0.18), transparent 26%, rgba(0, 191, 232, 0.12)), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 84px); mix-blend-mode: screen; opacity: 0.78; } .page-image-hero::after { display: none; } .recorded-page-hero, .support-page-hero, .request-rabbi-hero { width: 100%; margin-bottom: clamp(22px, 3vw, 34px); } .recorded-page-hero { --page-hero-position: center; } .support-page-hero { --page-hero-position: center; display: flex !important; align-items: flex-end; justify-content: flex-end; } .page-hero-action { position: absolute; top: clamp(18px, 3vw, 34px); right: clamp(18px, 3vw, 34px); z-index: 2; display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0.75rem 1rem; border: 1px solid rgba(217, 180, 90, 0.62); border-radius: 999px; background: rgba(3, 9, 20, 0.58); color: #fff8e8; font-weight: 850; text-decoration: none; backdrop-filter: blur(12px); transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; } .page-hero-action:hover { border-color: var(--gold-bright); background: rgba(3, 9, 20, 0.76); transform: translateY(-1px); } .page-intro { text-align: center; margin-bottom: clamp(24px, 4vw, 42px); } .page-intro .eyebrow { display: inline-flex; margin-bottom: 12px; color: var(--gold-bright); font-size: 0.875rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.05em; } .page-intro h1 { max-width: 780px; margin: 0 auto; font-size: clamp(38px, 5vw, 66px); font-weight: 950; line-height: 1.15; color: var(--gold); } .page-intro p { width: min(720px, 100%); margin: 14px auto 0; color: var(--muted); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.58; } .request-rabbi-form { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: none; margin-inline: auto; } .request-rabbi-form .wide-field, .request-rabbi-form .agreement-section, .request-rabbi-form .primary-button { grid-column: 1 / -1; } .request-rabbi-textarea { grid-column: span 3; } .request-rabbi-textarea textarea { min-height: 112px; } .request-support-upload { display: grid; gap: 0.65rem; padding: clamp(14px, 2vw, 20px); border: 1px dashed color-mix(in srgb, var(--cyan) 42%, var(--gold) 28%); border-radius: 18px; background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 26%), color-mix(in srgb, var(--surface) 94%, var(--gold) 5%); } .request-support-upload > span { color: var(--ink); font-size: 1rem; } .request-support-upload small { color: var(--muted); font-weight: 700; line-height: 1.45; } .request-support-upload input[type="file"] { min-height: 48px; padding: 0.65rem; } .support-file-list, .support-doc-grid { display: flex; flex-wrap: wrap; gap: 0.55rem; } .support-file-list span, .support-doc-link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, var(--cyan) 7%); color: var(--ink); font-weight: 800; } .support-file-list em, .support-doc-link small { color: var(--muted); font-style: normal; font-weight: 700; } .request-support-docs { display: grid; gap: 0.65rem; margin: 0.8rem 0; padding: 0.85rem; border: 1px solid color-mix(in srgb, var(--cyan) 38%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--surface) 92%, var(--cyan) 5%); } .support-doc-link { text-decoration: none; border-radius: 14px; } .support-doc-link:hover { border-color: var(--cyan); transform: translateY(-1px); } .support-docs-empty { margin: 0.45rem 0; color: var(--muted); } .agreement-doc { max-height: 420px; overflow: auto; padding: 1.25rem; border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--line)); border-radius: 18px; background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 26%), color-mix(in srgb, var(--surface) 94%, var(--gold) 6%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 12%, transparent); } .agreement-doc h2, .agreement-doc h3, .agreement-doc h4 { margin: 0 0 0.65rem; } .agreement-doc p, .agreement-doc li { color: var(--muted); line-height: 1.65; } .agreement-doc ol { padding-left: 1.35rem; } .agreement-confirmations { display: grid; gap: 0.65rem; margin: 1rem 0; } .agreement-doc + .agreement-read-line { margin-top: 1.25rem; } .agreement-check, .agreement-read-line { align-items: flex-start; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 88%, var(--gold) 5%); } .agreement-read-line:not(.ready) { opacity: 0.72; } .signature-widget { display: grid; gap: 0.9rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--cyan) 34%, var(--line)); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--cyan) 5%), var(--surface)); } .signature-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .signature-head p { margin: 0.25rem 0 0; color: var(--muted); } .signature-canvas { display: block; width: 100%; min-height: 180px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); border-radius: 16px; background: #fffdf7; touch-action: none; cursor: crosshair; } .signed-agreement-panel { display: grid; gap: 0.85rem; margin-top: 0.8rem; padding: 0.9rem; border-radius: 16px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 91%, var(--gold) 5%); } .signed-agreement-panel.is-signed { border-color: color-mix(in srgb, #6fa37a 50%, var(--line)); } .signed-agreement-panel.is-missing { border-color: color-mix(in srgb, var(--danger) 52%, var(--line)); } .signed-agreement-panel.compact p { margin: 0.35rem 0 0; } .signature-preview { width: min(340px, 100%); border: 1px solid var(--line); border-radius: 14px; background: #fffdf7; padding: 0.45rem; } .agreement-mini-checklist { display: flex; gap: 0.4rem; flex-wrap: wrap; } :root[data-theme="dark"] .agreement-doc, :root[data-theme="dark"] .agreement-check, :root[data-theme="dark"] .agreement-read-line, :root[data-theme="dark"] .signature-widget, :root[data-theme="dark"] .signed-agreement-panel, :root[data-theme="dark"] .request-support-upload, :root[data-theme="dark"] .request-support-docs { background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 26%), color-mix(in srgb, var(--surface) 94%, #0ea5e9 4%); border-color: color-mix(in srgb, var(--gold) 34%, var(--line)); } :root[data-theme="dark"] .signature-preview, :root[data-theme="dark"] .signature-canvas { background: #fffdf7; } @media (max-width: 860px) { .request-rabbi-form { grid-template-columns: 1fr; } .request-rabbi-textarea, .request-rabbi-form .wide-field, .request-rabbi-form .agreement-section, .request-rabbi-form .primary-button { grid-column: 1; } } @media (max-width: 620px) { .request-rabbi-page { padding: 12px; } /* All hero images on the platform are 1672x941 (16:9). On mobile we lock the frame to the SAME 16:9 aspect ratio with background-size: cover so the gold frame hugs the photo tightly - no empty dark band below the image. !important guards the overrides because there are multiple competing .request-rabbi-hero rules elsewhere in the file (legacy ones that set aspect-ratio: 4/5 portrait). */ .page-image-hero { min-height: 0 !important; height: auto !important; aspect-ratio: 16 / 9 !important; border-radius: 22px; background-size: cover !important; background-position: center center !important; } .support-page-hero { display: flex !important; flex-direction: column; justify-content: flex-end !important; align-items: flex-start !important; } .support-page-hero .donation-summary { width: min(100% - 32px, 260px); margin: 0 16px 16px; } .page-hero-action { position: relative; top: auto; right: auto; width: fit-content; margin: 0 16px 16px; } /* Apply-to-Teach / Library / Support hero: same 16:9 lock as everything else, with cover fill so the artwork reaches all the way to the frame edges. Force-overrides any legacy portrait aspect-ratio rules. */ .request-rabbi-hero, .recorded-page-hero, .support-page-hero { --page-hero-position: center center !important; aspect-ratio: 16 / 9 !important; min-height: 0 !important; height: auto !important; background: linear-gradient(180deg, rgba(3, 9, 20, 0.04), rgba(3, 9, 20, 0.16)), var(--page-hero-image) center center / cover no-repeat !important; background-color: #030914 !important; } .page-intro h1 { max-width: 100%; font-size: clamp(38px, 12vw, 50px); } } /* Tablet: same 16:9 lock + cover fill - was previously inheriting the desktop 16:9 already, but the explicit cover prevents any background- size: contain rule from leaking padding below the image. */ @media (min-width: 621px) and (max-width: 1100px) { .page-image-hero, .request-rabbi-hero, .recorded-page-hero, .support-page-hero { aspect-ratio: 16 / 9; min-height: 0; background-size: cover !important; background-position: center !important; } } /* My Zone account sidebar and public rabbi profile sidebar */ .zone-sidebar-layout { display: grid; grid-template-columns: minmax(220px, 270px) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 22px; } .zone-sidebar { position: sticky; top: 94px; display: grid; gap: 14px; align-self: start; } .zone-sidebar-card, .rabbi-profile-side-card, .rabbi-profile-side-meta { border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line)); border-radius: 20px; background: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 32%), color-mix(in srgb, var(--surface-strong) 88%, transparent); box-shadow: var(--shadow-soft); } .zone-sidebar-card { display: grid; gap: 7px; padding: 16px; } .zone-sidebar-card .nav-user-avatar { width: 56px; height: 56px; } .zone-sidebar-card strong, .rabbi-profile-side-card strong { color: var(--ink); font-weight: 950; } .zone-sidebar-card small, .rabbi-profile-side-card span, .rabbi-profile-side-meta span { color: var(--muted); overflow-wrap: anywhere; } .zone-sidebar-tabs.rabbi-console-tabs { position: static; top: auto; display: grid; margin: 0; padding: 8px; } .zone-sidebar-tabs button { width: 100%; justify-content: flex-start; text-align: left; } .zone-content { min-width: 0; } .account-settings-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr); gap: 20px; align-items: start; } .account-profile-form { margin: 0; } .profile-system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .form-note { margin: -4px 0 8px; color: var(--muted); font-size: 0.92rem; line-height: 1.45; } .account-avatar-card .media-upload-card { height: 100%; } /* ── Account photo card - 2026 vertical redesign ── */ .account-photo-upload { display: flex !important; flex-direction: column; align-items: center; gap: 0; padding: 28px 20px 22px; border: 1px solid color-mix(in srgb, var(--cyan) 18%, var(--line)); border-radius: 24px; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 68%), color-mix(in srgb, var(--surface-strong) 82%, var(--paper)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 6%, transparent), 0 8px 32px -8px color-mix(in srgb, var(--cyan) 8%, transparent); text-align: center; } /* Big circular avatar with glow ring */ .account-photo-upload .media-preview { width: 96px; height: 96px; max-width: 96px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--cyan) 40%, var(--line)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cyan) 10%, transparent), 0 4px 20px -4px color-mix(in srgb, var(--cyan) 20%, transparent); background: color-mix(in srgb, var(--surface) 90%, var(--cyan) 8%); margin-bottom: 16px; flex-shrink: 0; } .account-photo-upload .media-upload-copy { gap: 4px; margin-bottom: 18px; } .account-photo-upload .media-upload-copy strong { font-size: 16px; font-weight: 950; color: var(--ink); } .account-photo-upload .media-upload-copy p { font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.5; } /* Upload button - cyan filled, full-width */ .account-photo-upload .file-upload-button { width: 100%; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: none; border-radius: 14px; background: var(--cyan); color: #030914; font-size: 14px; font-weight: 950; letter-spacing: 0.01em; box-shadow: 0 2px 12px -2px color-mix(in srgb, var(--cyan) 48%, transparent); transition: filter 150ms, box-shadow 150ms; } .account-photo-upload .file-upload-button:hover { filter: brightness(1.1); box-shadow: 0 4px 20px -4px color-mix(in srgb, var(--cyan) 56%, transparent); } /* Remove button - subtle text-link style */ .account-photo-upload .remove-account-photo-button { margin-top: 10px; min-height: 0; padding: 5px 10px; border: none; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; transition: color 150ms; } .account-photo-upload .remove-account-photo-button:hover { color: color-mix(in srgb, #f87171 80%, var(--muted)); } .account-photo-upload .upload-result { margin-top: 8px; font-size: 12px; width: 100%; } /* Neutralise any dark-theme !important background that targets .media-upload-card */ :root[data-theme="dark"] .account-photo-upload { background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 68%), color-mix(in srgb, var(--surface-strong) 78%, #0a1420) !important; border-color: color-mix(in srgb, var(--cyan) 22%, var(--line)) !important; } .account-side-stack { display: grid; gap: 16px; } .account-security-card { display: grid; gap: 12px; padding: 18px; border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent) 22%); border-radius: var(--radius-md); background: linear-gradient(140deg, color-mix(in srgb, var(--surface) 88%, var(--accent) 12%), var(--surface-soft)); } .account-security-card h3 { margin: 0 0 4px; } .account-security-card p { margin: 0; color: var(--muted); line-height: 1.45; } .account-profile-form textarea { min-height: 116px; resize: vertical; } .field-counter { display: block; margin-top: 6px; color: var(--muted); font-size: 0.8rem; text-align: right; } .rabbi-profile-layout { display: grid; grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 24px; } .rabbi-profile-sidebar { position: sticky; top: 94px; display: grid; gap: 14px; align-self: start; } .rabbi-profile-side-card { display: grid; gap: 8px; padding: 16px; } .minimal-schedule-card { display: grid; gap: 10px; min-width: 0; margin-top: 8px; padding: 12px; border: 1px solid color-mix(in srgb, var(--rabbi-start, var(--cyan)) 34%, var(--gold) 22%); border-radius: 14px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 12%, transparent), transparent 42%), color-mix(in srgb, var(--surface) 90%, var(--rabbi-start, var(--cyan)) 6%); } .minimal-schedule-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; } .minimal-schedule-head .icon { width: 27px; height: 27px; color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 82%, var(--ink)); } .minimal-schedule-head strong, .minimal-schedule-steps strong { display: block; color: var(--ink); font-size: 12px; line-height: 1.15; } .minimal-schedule-head span, .minimal-schedule-card p { color: var(--muted); font-size: 11px; font-weight: 850; line-height: 1.35; } .minimal-schedule-card p { margin: 0; } .minimal-schedule-steps { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; padding: 0; list-style: none; } .minimal-schedule-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; min-width: 0; padding: 7px 8px; border: 1px solid color-mix(in srgb, var(--rabbi-end, var(--gold)) 28%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--surface-strong) 88%, var(--rabbi-end, var(--gold)) 5%); } .minimal-schedule-steps li span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--rabbi-gradient, linear-gradient(135deg, var(--cyan), var(--gold))); color: #fff; font-size: 10px; font-weight: 950; } .minimal-schedule-action { width: 100%; justify-content: center; text-align: center; } .rabbi-profile-side-card .rabbi-hero-avatar { width: 68px; min-width: 68px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--surface) 76%, transparent), 0 14px 34px rgba(0, 0, 0, 0.22); } .rabbi-profile-side-nav { display: grid; gap: 8px; padding: 10px; border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line)); border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 84%, transparent), color-mix(in srgb, var(--surface) 78%, transparent)); } .rabbi-profile-side-nav a { display: flex; align-items: center; min-height: 40px; padding: 9px 12px; border: 1px solid transparent; border-radius: 14px; color: var(--ink); text-decoration: none; font-weight: 950; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; } .rabbi-profile-side-nav a:hover, .rabbi-profile-side-nav a:focus-visible { transform: translateX(2px); border-color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 34%, var(--gold) 22%); background: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 10%, var(--surface-strong)); } .rabbi-profile-side-meta { display: grid; gap: 2px; padding: 16px; } .rabbi-profile-side-meta strong { font: 950 2rem/1 var(--display-font); color: var(--ink); } .rabbi-profile-side-meta small { width: fit-content; margin-top: 8px; padding: 5px 9px; border-radius: 999px; background: var(--burgundy); color: #fff; font-weight: 950; } .rabbi-profile-main { display: grid; gap: 18px; min-width: 0; } :root[data-theme="dark"] .zone-sidebar-card, :root[data-theme="dark"] .rabbi-profile-side-card, :root[data-theme="dark"] .rabbi-profile-side-meta, :root[data-theme="dark"] .rabbi-profile-side-nav { background: radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 32%), color-mix(in srgb, var(--surface-strong) 92%, #00c7ff 3%); border-color: color-mix(in srgb, var(--gold) 32%, var(--line)); } :root[data-theme="dark"] .rabbi-profile-side-nav a:hover, :root[data-theme="dark"] .rabbi-profile-side-nav a:focus-visible { background: color-mix(in srgb, var(--cyan) 12%, var(--surface-strong)); border-color: color-mix(in srgb, var(--cyan) 34%, var(--gold)); } @media (max-width: 980px) { .zone-sidebar-layout, .rabbi-profile-layout { grid-template-columns: 1fr; } .zone-sidebar, .rabbi-profile-sidebar { position: static; } .zone-sidebar-tabs.rabbi-console-tabs, .rabbi-profile-side-nav { display: flex; overflow-x: auto; scroll-snap-type: x proximity; } .zone-sidebar-tabs button, .rabbi-profile-side-nav a { flex: 0 0 auto; scroll-snap-align: start; } .account-settings-grid { grid-template-columns: 1fr; } } @media (max-width: 620px) { .profile-system-grid { grid-template-columns: 1fr; } } /* Rabbi curated themes: each teacher gets strong identity without unsafe custom contrast. */ .rabbi-card { isolation: isolate; border-color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 62%, var(--rabbi-end, var(--gold)) 38%) !important; background: linear-gradient(90deg, var(--rabbi-start, var(--cyan)) 0 6px, transparent 6px), radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--rabbi-start, var(--cyan)) 28%, transparent), transparent 34%), radial-gradient(circle at 96% 12%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 30%, transparent), transparent 38%), linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, var(--cyan)) 20%, var(--surface-strong)), color-mix(in srgb, var(--rabbi-end, var(--gold)) 17%, var(--surface)) 74%) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rabbi-end, var(--gold)) 30%, transparent), inset 6px 0 0 color-mix(in srgb, var(--rabbi-start, var(--cyan)) 82%, transparent), 0 18px 48px color-mix(in srgb, var(--rabbi-start, var(--cyan)) 16%, transparent), 0 8px 28px color-mix(in srgb, var(--rabbi-end, var(--gold)) 12%, transparent) !important; } .rabbi-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--rabbi-gradient, linear-gradient(135deg, var(--cyan), var(--gold))); opacity: 0.96; z-index: 0; } .rabbi-card::after { z-index: 0; } .rabbi-card > * { position: relative; z-index: 1; } .rabbi-card .avatar { border-color: color-mix(in srgb, var(--rabbi-end, var(--gold)) 58%, #ffffff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rabbi-start, var(--cyan)) 72%, transparent), 0 0 0 5px color-mix(in srgb, var(--rabbi-end, var(--gold)) 34%, transparent), 0 16px 34px color-mix(in srgb, var(--rabbi-start, var(--cyan)) 24%, transparent) !important; } .rabbi-card h3 a { color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 28%, var(--ink)) !important; } .rabbi-card h3 a:hover, .rabbi-card h3 a:focus-visible { color: color-mix(in srgb, var(--rabbi-end, var(--gold)) 54%, var(--rabbi-start, var(--cyan))) !important; } .rabbi-card .row-meta { color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 30%, var(--muted)); } .rabbi-card .live-card-badge { border: 1px solid color-mix(in srgb, var(--rabbi-end, var(--gold)) 46%, rgba(255, 255, 255, 0.42)); background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.36), transparent 22%), var(--rabbi-gradient, linear-gradient(135deg, var(--cyan), var(--gold))) !important; box-shadow: 0 12px 28px color-mix(in srgb, var(--rabbi-start, var(--cyan)) 26%, transparent), 0 4px 18px color-mix(in srgb, var(--rabbi-end, var(--gold)) 18%, transparent); } .rabbi-card .public-link-icon { border-color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 56%, var(--rabbi-end, var(--gold)) 24%) !important; color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 72%, var(--ink)) !important; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 24%, transparent), transparent 46%), color-mix(in srgb, var(--rabbi-start, var(--cyan)) 8%, var(--surface-strong)) !important; } .rabbi-card .public-link-icon:hover, .rabbi-card .public-link-icon:focus-visible { color: #fff !important; border-color: color-mix(in srgb, var(--rabbi-end, var(--gold)) 72%, #fff) !important; background: var(--rabbi-gradient, linear-gradient(135deg, var(--cyan), var(--gold))) !important; box-shadow: 0 12px 26px color-mix(in srgb, var(--rabbi-start, var(--cyan)) 24%, transparent); } .rabbi-card .rabbi-card-action { border-color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 56%, var(--rabbi-end, var(--gold)) 24%) !important; color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 74%, var(--ink)) !important; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 24%, transparent), transparent 46%), color-mix(in srgb, var(--rabbi-start, var(--cyan)) 8%, var(--surface-strong)) !important; } .rabbi-card .rabbi-card-action:hover, .rabbi-card .rabbi-card-action:focus-visible { color: #fff !important; border-color: color-mix(in srgb, var(--rabbi-end, var(--gold)) 72%, #fff) !important; background: var(--rabbi-gradient, linear-gradient(135deg, var(--cyan), var(--gold))) !important; } .rabbi-card:hover { border-color: color-mix(in srgb, var(--rabbi-end, var(--gold)) 62%, var(--rabbi-start, var(--cyan)) 38%) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rabbi-end, var(--gold)) 40%, transparent), inset 6px 0 0 var(--rabbi-start, var(--cyan)), 0 26px 72px color-mix(in srgb, var(--rabbi-start, var(--cyan)) 24%, transparent), 0 12px 38px color-mix(in srgb, var(--rabbi-end, var(--gold)) 20%, transparent), 0 0 0 1px color-mix(in srgb, var(--rabbi-end, var(--gold)) 22%, transparent) !important; } :root[data-theme="dark"] .rabbi-card { background: linear-gradient(90deg, var(--rabbi-start, var(--cyan)) 0 6px, transparent 6px), radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--rabbi-start, var(--cyan)) 36%, transparent), transparent 36%), radial-gradient(circle at 96% 10%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 32%, transparent), transparent 40%), linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, var(--cyan)) 23%, rgba(5, 18, 34, 0.96)), color-mix(in srgb, var(--rabbi-end, var(--gold)) 18%, rgba(1, 8, 18, 0.96)) 78%) !important; border-color: color-mix(in srgb, var(--rabbi-start, var(--cyan)) 58%, var(--rabbi-end, var(--gold)) 42%) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rabbi-end, var(--gold)) 28%, transparent), inset 6px 0 0 color-mix(in srgb, var(--rabbi-start, var(--cyan)) 88%, transparent), 0 22px 60px rgba(0, 0, 0, 0.36), 0 0 34px color-mix(in srgb, var(--rabbi-start, var(--cyan)) 16%, transparent) !important; } :root[data-theme="dark"] .rabbi-card h3 a { color: color-mix(in srgb, #ffffff 76%, var(--rabbi-end, var(--gold))) !important; } :root[data-theme="dark"] .rabbi-card .row-meta, :root[data-theme="dark"] .rabbi-card p { color: color-mix(in srgb, #d8e8f5 76%, var(--rabbi-end, var(--gold)) 24%) !important; } :root[data-theme="dark"] .rabbi-card .public-link-icon { color: color-mix(in srgb, #ffffff 64%, var(--rabbi-end, var(--gold))) !important; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 28%, transparent), transparent 46%), color-mix(in srgb, var(--rabbi-start, var(--cyan)) 13%, rgba(0, 8, 16, 0.88)) !important; } :root[data-theme="dark"] .rabbi-card .rabbi-card-action { color: color-mix(in srgb, #ffffff 66%, var(--rabbi-end, var(--gold))) !important; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 28%, transparent), transparent 46%), color-mix(in srgb, var(--rabbi-start, var(--cyan)) 13%, rgba(0, 8, 16, 0.88)) !important; } :root[data-theme="dark"] .rabbi-card:hover { border-color: color-mix(in srgb, var(--rabbi-end, var(--gold)) 66%, var(--rabbi-start, var(--cyan)) 34%) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rabbi-end, var(--gold)) 36%, transparent), inset 6px 0 0 var(--rabbi-start, var(--cyan)), 0 30px 86px rgba(0, 0, 0, 0.52), 0 0 44px color-mix(in srgb, var(--rabbi-start, var(--cyan)) 22%, transparent), 0 0 30px color-mix(in srgb, var(--rabbi-end, var(--gold)) 16%, transparent) !important; } .rabbi-hover-card .hover-actions > .small-button, .rabbi-hover-card .hover-actions > .ghost-button, .rabbi-hover-card .hover-actions > .primary-button, .rabbi-hover-card .hover-actions > .join-button { height: 38px !important; min-height: 38px !important; padding: 0 13px !important; align-items: center; line-height: 1; white-space: nowrap; } /* Admin console responsive refinement */ .admin-shell { width: min(100%, 1440px) !important; max-width: 1440px; padding: clamp(28px, 4vw, 58px) clamp(18px, 3vw, 42px) clamp(54px, 6vw, 84px) !important; } .admin-shell > .wide-section { max-width: 100%; padding: clamp(28px, 4vw, 58px) !important; border-radius: clamp(20px, 2vw, 30px); } .admin-shell .section-title-row { align-items: flex-start; gap: 22px; margin-bottom: clamp(20px, 3vw, 34px); } .admin-shell h1 { max-width: min(980px, 100%) !important; margin: 0 !important; font-size: clamp(44px, 6vw, 82px) !important; line-height: 0.95 !important; text-wrap: balance; } .admin-tabs { display: grid !important; gap: 14px !important; margin: clamp(18px, 3vw, 28px) 0 clamp(20px, 3vw, 34px) !important; padding: 14px !important; border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line)); border-radius: 22px !important; } .admin-tab-primary, .admin-advanced-tabs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .admin-advanced-tabs { display: none; padding: 14px; border: 1px solid color-mix(in srgb, var(--cyan) 22%, var(--line)); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 84%, transparent), color-mix(in srgb, var(--surface) 72%, transparent)); } .admin-tabs.is-advanced-active .admin-advanced-tabs { display: flex; } .admin-advanced-tabs p { flex: 1 1 320px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; } .admin-tabs button { min-height: 44px !important; padding: 0 16px !important; border-radius: 14px !important; white-space: nowrap; } .admin-panel { padding: clamp(22px, 3vw, 36px) !important; border-radius: 24px !important; } .admin-panel > .section-title-row { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line)); } .admin-panel h2 { margin-bottom: 7px; font-size: clamp(28px, 3.4vw, 42px); line-height: 1; } .admin-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; gap: 14px !important; } .admin-grid article { min-height: 108px; padding: 18px 20px !important; border-radius: 18px !important; } .admin-list-head { grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr) !important; gap: 22px !important; margin: 24px 0 18px !important; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line)); } .admin-list-controls { grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(150px, 0.7fr)) !important; gap: clamp(14px, 1.35vw, 22px) !important; } .admin-list-controls label { min-width: 0; } .admin-list-controls .admin-rabbi-search { height: 48px; } .admin-row { gap: 22px !important; padding: 22px 0 !important; } .content-flag-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 22px !important; border: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line)); border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 76%, transparent), color-mix(in srgb, var(--surface) 70%, transparent)); } .content-flag-row + .content-flag-row { margin-top: 14px; } .content-flag-row p { max-width: 860px; margin: 8px 0 16px; font-size: 14px; line-height: 1.6; } .content-flag-row label { max-width: 520px; display: grid; gap: 8px; color: var(--muted); font-weight: 850; } .content-flag-row textarea { width: 100%; min-height: 86px !important; padding: 12px; border-radius: 14px; } .content-flag-row .row-actions { justify-content: flex-end; flex-wrap: wrap; } :root[data-theme="dark"] .admin-advanced-tabs, :root[data-theme="dark"] .content-flag-row { background: linear-gradient(135deg, rgba(6, 18, 31, 0.86), rgba(2, 9, 17, 0.78)), linear-gradient(120deg, rgba(0, 191, 232, 0.05), transparent 52%, rgba(217, 180, 90, 0.06)) !important; border-color: rgba(217, 180, 90, 0.22) !important; } @media (max-width: 1100px) { .admin-shell { padding-inline: clamp(12px, 3vw, 24px) !important; } .admin-shell > .wide-section { padding: clamp(22px, 4vw, 34px) !important; } .admin-list-head, .admin-list-controls, .content-flag-row { grid-template-columns: 1fr !important; } .content-flag-row .row-actions { justify-content: stretch; } .content-flag-row .row-actions > * { flex: 1 1 160px; } } @media (max-width: 640px) { .admin-shell { width: 100% !important; padding: 16px 12px 42px !important; } .admin-shell > .wide-section { padding: 20px 14px !important; border-radius: 20px; } .admin-shell .section-title-row { flex-direction: column; align-items: stretch; } .admin-shell h1 { font-size: clamp(36px, 15vw, 54px) !important; } .admin-tab-primary, .admin-advanced-tabs { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .admin-advanced-tabs { display: none; } .admin-tabs.is-advanced-active .admin-advanced-tabs { display: grid; } .admin-advanced-tabs p { grid-column: 1 / -1; } .admin-tabs button { min-width: 0; width: 100%; padding-inline: 10px !important; } .admin-panel { padding: 18px 12px !important; } .admin-panel h2 { font-size: 30px; } .content-flag-row { padding: 16px !important; } } /* Cinematic frame-sequence hero */ .scroll-hero-shell { position: relative; isolation: isolate; width: 100%; --scroll-hero-height: calc(100dvh - 91px); border-bottom: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--gold)); background: #000; } .scroll-hero-scroller { position: relative; z-index: 5; width: 100%; height: calc(100vh - 91px); height: var(--scroll-hero-height); overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; } .scroll-hero-scroller::-webkit-scrollbar { display: none; } .scroll-hero-wrapper { position: relative; width: 100%; } .scroll-hero-video { position: sticky; top: 0; left: 0; width: 100%; height: calc(100vh - 91px); height: var(--scroll-hero-height); z-index: 10; overflow: hidden; background: radial-gradient(circle at 50% 26%, rgba(0, 199, 255, 0.14), transparent 38%), #000712; } .scroll-hero-canvas, .scroll-hero-end, .scroll-hero-end img, .scroll-hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; } .scroll-hero-canvas, .scroll-hero-end img { object-fit: cover; } .scroll-hero-overlay { z-index: 1; pointer-events: none; background: radial-gradient(circle at 50% 42%, transparent 0 26%, rgba(1, 7, 14, 0.34) 55%, rgba(1, 7, 14, 0.78) 100%), linear-gradient(180deg, rgba(0, 7, 18, 0.2), rgba(0, 7, 18, 0.62)); } .scroll-hero-end { z-index: 2; opacity: 0; transform-origin: center center; pointer-events: none; } .scroll-hero-text { position: absolute; left: 50%; bottom: 12%; z-index: 3; width: min(680px, calc(100% - 44px)); padding: 24px 28px; text-align: center; color: #fff8ea; border: 1px solid rgba(217, 182, 95, 0.34); border-radius: 22px; background: linear-gradient(135deg, rgba(2, 12, 24, 0.64), rgba(6, 22, 38, 0.42)), rgba(0, 0, 0, 0.34); box-shadow: 0 0 0 1px rgba(0, 199, 255, 0.07), 0 28px 70px rgba(0, 0, 0, 0.38), inset 0 0 26px rgba(217, 182, 95, 0.1); backdrop-filter: blur(10px) saturate(130%); opacity: 0; filter: blur(10px); transform: translate(-50%, 30px) scale(0.94); transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1), filter 620ms cubic-bezier(0.16, 1, 0.3, 1), transform 620ms cubic-bezier(0.16, 1, 0.3, 1), border-color 620ms ease, box-shadow 620ms ease; pointer-events: none; } .scroll-hero-text.active { opacity: 1; filter: blur(0); transform: translate(-50%, 0) scale(1); animation: scrollHeroGlow 2.8s ease-in-out infinite; } .scroll-hero-text h2 { margin: 0 0 12px; color: #fff8ea; font-family: var(--serif); font-size: 68px; line-height: 0.96; letter-spacing: 0; text-shadow: 0 16px 38px rgba(0, 0, 0, 0.6); } .scroll-hero-text p { max-width: 560px; margin: 0 auto; color: rgba(237, 247, 255, 0.92); font-size: 20px; line-height: 1.45; } .scroll-hero-cta { position: absolute; right: 34px; bottom: 32px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid rgba(0, 199, 255, 0.42); border-radius: 999px; background: rgba(2, 12, 24, 0.64); color: #eaffff; font-weight: 900; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32); backdrop-filter: blur(10px); } .scroll-hero-cta:hover { color: #06101d; background: linear-gradient(135deg, var(--gold-bright), var(--cyan)); } .scroll-hero-indicator { position: absolute; left: 50%; bottom: 26px; z-index: 4; display: flex; flex-direction: column; align-items: center; color: rgba(255, 255, 255, 0.88); text-align: center; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.76); transform: translateX(-50%); animation: scrollHeroBounce 2s infinite; } .scroll-hero-indicator span { font-size: 12px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; } .scroll-hero-indicator svg { width: 32px; height: 32px; margin-top: 3px; filter: drop-shadow(0 0 8px rgba(0, 199, 255, 0.68)); } .snap-section { scroll-snap-align: start; scroll-snap-stop: always; } .scroll-hero-snap { width: 100%; height: calc(100vh - 91px); height: var(--scroll-hero-height); visibility: hidden; pointer-events: none; } .scroll-hero-scroller.motion-reduced .scroll-hero-text { opacity: 0; } .scroll-hero-scroller.motion-reduced .scroll-hero-text:first-of-type { opacity: 1; filter: none; transform: translate(-50%, 0) scale(1); animation: none; } @keyframes scrollHeroGlow { 0%, 100% { border-color: rgba(217, 182, 95, 0.34); box-shadow: 0 0 0 1px rgba(0, 199, 255, 0.07), 0 28px 70px rgba(0, 0, 0, 0.38), inset 0 0 26px rgba(217, 182, 95, 0.1); } 50% { border-color: rgba(217, 182, 95, 0.88); box-shadow: 0 0 34px rgba(0, 199, 255, 0.24), 0 0 52px rgba(217, 182, 95, 0.38), 0 30px 80px rgba(0, 0, 0, 0.44), inset 0 0 30px rgba(217, 182, 95, 0.2); } } @keyframes scrollHeroBounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); } } .preference-toggle { display: grid !important; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 12px; padding: 15px; border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--surface-strong) 70%, transparent); cursor: pointer; user-select: none; } .preference-toggle input[type="checkbox"] { width: 20px !important; height: 20px !important; min-height: 0 !important; margin: 2px 0 0 !important; padding: 0 !important; accent-color: var(--cyan); box-shadow: none !important; } .preference-toggle span { display: grid; gap: 5px; } .preference-toggle small { color: var(--muted); font-weight: 700; line-height: 1.45; } :root[data-theme="dark"] .preference-toggle { background: rgba(0, 199, 255, 0.055); border-color: rgba(217, 182, 95, 0.22); } /* Pill toggle variant - used for the cinematic hero preference */ .hero-pref-toggle { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; transition: border-color 180ms, background 180ms; } .hero-pref-toggle:hover { border-color: color-mix(in srgb, var(--cyan) 40%, var(--line)); background: color-mix(in srgb, var(--surface-strong) 80%, var(--cyan) 4%); } /* The pill track */ .toggle-pill-wrap { position: relative; display: block; width: 46px; height: 26px; flex-shrink: 0; } .toggle-pill-wrap input[type="checkbox"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; pointer-events: none; } .toggle-pill { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--muted) 48%, var(--surface)); border: 1px solid color-mix(in srgb, var(--muted) 28%, var(--line)); transition: background 200ms, border-color 200ms; } .toggle-pill::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); } .toggle-pill-wrap input:checked ~ .toggle-pill { background: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 60%, transparent); } .toggle-pill-wrap input:checked ~ .toggle-pill::after { transform: translateX(20px); } /* Text block next to the toggle */ .toggle-body { display: grid; gap: 4px; } .toggle-body strong { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink); } .toggle-body strong i { color: var(--cyan); font-size: 13px; } .toggle-body small { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.45; } @media (max-width: 1024px) { .scroll-hero-text h2 { font-size: 48px; } .scroll-hero-text p { font-size: 18px; } } @media (max-width: 720px) { .scroll-hero-shell { --scroll-hero-height: calc(100dvh - 83px); } .scroll-hero-text { bottom: 14%; width: calc(100% - 28px); padding: 18px 16px; border-radius: 18px; } .scroll-hero-text h2 { font-size: 36px; } .scroll-hero-text p { font-size: 16px; } .scroll-hero-cta { right: 14px; bottom: 18px; min-height: 40px; padding-inline: 13px; font-size: 13px; } .scroll-hero-indicator { bottom: 16px; } } @media (max-width: 460px) { .scroll-hero-text { bottom: 17%; } .scroll-hero-text h2 { font-size: 31px; } .scroll-hero-cta { left: 14px; right: auto; } } .rabbi-theme-picker { display: grid; gap: 14px; width: 100%; } .rabbi-theme-picker select { width: 100%; } .theme-selected-preview { display: flex; align-items: center; gap: 14px; min-height: 74px; padding: 14px; border: 1px solid color-mix(in srgb, var(--rabbi-accent, var(--cyan)) 48%, var(--line)); border-radius: 18px; background: radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 18%, transparent), transparent 44%), linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, var(--cyan)) 12%, var(--surface)), color-mix(in srgb, var(--rabbi-end, var(--gold)) 9%, var(--surface-strong))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rabbi-end, var(--gold)) 14%, transparent), 0 16px 38px color-mix(in srgb, var(--rabbi-start, var(--cyan)) 10%, transparent); } .theme-swatch { flex: 0 0 auto; width: 44px; height: 44px; border: 2px solid color-mix(in srgb, var(--theme-end, var(--gold)) 70%, #fff); border-radius: 999px; background: linear-gradient(135deg, var(--theme-start, var(--cyan)), var(--theme-accent, var(--gold)), var(--theme-end, var(--olive))); box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent, var(--gold)) 16%, transparent), 0 12px 26px color-mix(in srgb, var(--theme-start, var(--cyan)) 18%, transparent); } .theme-selected-preview strong, .theme-option strong { color: var(--ink); } .theme-selected-preview small, .theme-picker-note { color: var(--muted); font-weight: 750; line-height: 1.45; } .theme-option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 10px; max-height: 348px; overflow: auto; padding: 4px; } .theme-option { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 62px; padding: 10px; border: 1px solid color-mix(in srgb, var(--rabbi-accent, var(--cyan)) 34%, var(--line)); border-radius: 16px; background: radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 14%, transparent), transparent 42%), linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, var(--cyan)) 11%, var(--surface-strong)), color-mix(in srgb, var(--rabbi-end, var(--gold)) 8%, var(--surface))); color: var(--ink); text-align: left; cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; } .theme-option:hover, .theme-option:focus-visible { transform: translateY(-1px); border-color: color-mix(in srgb, var(--rabbi-accent, var(--cyan)) 70%, var(--rabbi-end, var(--gold))); box-shadow: 0 16px 32px color-mix(in srgb, var(--rabbi-start, var(--cyan)) 14%, transparent); } .theme-option.is-selected { border-color: color-mix(in srgb, var(--rabbi-accent, var(--cyan)) 74%, var(--gold)); background: radial-gradient(circle at 94% 0%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 22%, transparent), transparent 42%), linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, var(--cyan)) 18%, var(--surface-strong)), color-mix(in srgb, var(--rabbi-end, var(--gold)) 13%, var(--surface))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rabbi-end, var(--gold)) 20%, transparent), 0 18px 42px color-mix(in srgb, var(--rabbi-start, var(--cyan)) 16%, transparent); } .theme-option .theme-swatch { width: 31px; height: 31px; } .admin-theme-picker .theme-option-grid { display: flex; flex-wrap: wrap; gap: 7px; max-height: none; overflow: visible; padding: 0; } .admin-theme-picker { gap: 9px; } .admin-theme-picker .theme-select-label { display: grid; grid-template-columns: 72px minmax(0, 260px); align-items: center; gap: 10px; } .admin-theme-picker .theme-select-label span { color: var(--muted); font-size: 12px; font-weight: 700; } .admin-theme-picker .theme-selected-preview { display: inline-flex; width: fit-content; max-width: 100%; min-height: 38px; gap: 8px; padding: 7px 10px; border-radius: 999px; box-shadow: none; } .admin-theme-picker .theme-selected-preview .theme-swatch { width: 20px; height: 20px; border-width: 1px; box-shadow: none; } .admin-theme-picker .theme-selected-preview strong { font-size: 12px; font-weight: 700; white-space: nowrap; } .admin-theme-picker .theme-option { width: auto; min-height: 31px; gap: 6px; padding: 5px 8px; border-radius: 999px; box-shadow: none; } .admin-theme-picker .theme-option:hover, .admin-theme-picker .theme-option:focus-visible { transform: none; box-shadow: none; } .admin-theme-picker .theme-option .theme-swatch { width: 14px; height: 14px; border-width: 1px; box-shadow: none; } .admin-theme-picker .theme-option span { max-width: 118px; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1; text-overflow: ellipsis; white-space: nowrap; } .admin-theme-picker .theme-option.is-selected span { color: var(--ink); font-weight: 750; } .admin-theme-picker .theme-picker-note { display: none; } .rabbi-card .public-link-icon, .rabbi-hover-card .public-link-icon, .public-link-row-profile .public-link-icon { color: color-mix(in srgb, var(--rabbi-accent, var(--cyan)) 68%, var(--ink)) !important; border-color: color-mix(in srgb, var(--rabbi-accent, var(--cyan)) 44%, var(--rabbi-end, var(--gold)) 28%) !important; } .rabbi-card .public-link-icon:hover, .rabbi-card .public-link-icon:focus-visible, .rabbi-hover-card .public-link-icon:hover, .rabbi-hover-card .public-link-icon:focus-visible, .public-link-row-profile .public-link-icon:hover, .public-link-row-profile .public-link-icon:focus-visible { color: #fff !important; background: var(--rabbi-gradient, linear-gradient(135deg, var(--cyan), var(--gold))) !important; } :root[data-theme="dark"] .theme-selected-preview, :root[data-theme="dark"] .theme-option { background: radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 20%, transparent), transparent 42%), linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, var(--cyan)) 16%, rgba(3, 12, 22, 0.95)), color-mix(in srgb, var(--rabbi-end, var(--gold)) 10%, rgba(5, 16, 28, 0.94))); } :root[data-theme="dark"] .theme-selected-preview strong, :root[data-theme="dark"] .theme-option strong { color: #fff8e8; } :root[data-theme="dark"] .theme-selected-preview small, :root[data-theme="dark"] .theme-picker-note { color: #b9c8d8; } :root[data-theme="dark"] .rabbi-card .public-link-icon, :root[data-theme="dark"] .rabbi-hover-card .public-link-icon, :root[data-theme="dark"] .public-link-row-profile .public-link-icon { color: color-mix(in srgb, #ffffff 72%, var(--rabbi-accent, var(--cyan)) 28%) !important; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--rabbi-end, var(--gold)) 26%, transparent), transparent 46%), color-mix(in srgb, var(--rabbi-start, var(--cyan)) 14%, rgba(0, 8, 16, 0.9)) !important; } @media (max-width: 720px) { .theme-option-grid { grid-template-columns: 1fr; max-height: 420px; } .admin-theme-picker .theme-select-label { grid-template-columns: 1fr; } .admin-theme-picker .theme-option-grid { max-height: none; } } /* ========================================================================== Topbar Shabbat Calendar Dropdown ========================================================================== */ .topbar-calendar { position: relative !important; z-index: 1201; cursor: pointer; } .topbar-calendar-trigger { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; } .topbar-calendar-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 320px; background: rgba(10, 20, 30, 0.95); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); border-radius: 16px; padding: 16px; z-index: 1300; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 191, 232, 0.1); backdrop-filter: blur(12px); flex-direction: column; gap: 12px; text-align: left; } .topbar-calendar-dropdown.open { display: flex; } .topbar-dropdown-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 8px; } .topbar-dropdown-header strong { font-size: 14px; color: var(--gold) !important; font-weight: 600; } .location-badge { background: rgba(0, 191, 232, 0.15); border: 1px solid var(--cyan); color: var(--cyan); font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 500; } .topbar-time-item, .topbar-parasha-item { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 6px; } .topbar-time-item span, .topbar-parasha-item span { color: var(--muted) !important; } .topbar-time-item strong, .topbar-parasha-item strong { color: #fff !important; font-weight: 600; } .topbar-holiday-badge { display: flex; align-items: center; gap: 6px; background: rgba(217, 180, 90, 0.1); border: 1px solid rgba(217, 180, 90, 0.2); color: var(--gold); padding: 6px 10px; border-radius: 6px; font-size: 12px; margin-top: 8px; } .topbar-change-loc-btn { background: none; border: none; color: var(--cyan); cursor: pointer; font-size: 12px; padding: 0; margin-top: 8px; text-align: left; text-decoration: underline; } .topbar-change-loc-btn:hover { color: #fff; } .topbar-cities-scroll { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; } .topbar-cities-scroll::-webkit-scrollbar { width: 4px; } .topbar-cities-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 2px; } .topbar-city-row { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: rgba(255, 255, 255, 0.02); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05); } .topbar-city-row strong { font-size: 13px; color: #fff !important; margin-bottom: 2px; } .topbar-city-row span { font-size: 11px; color: var(--muted) !important; display: flex; justify-content: space-between; align-items: center; } .topbar-city-row span strong { color: #fff !important; font-size: 11px; margin: 0; } .topbar-dropdown-divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 10px 0; } .topbar-form-label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); } .topbar-form-input-row { display: flex; gap: 6px; width: 100%; } .topbar-form-input-row input { flex: 1; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 13px; } .topbar-form-input-row input:focus { outline: none; border-color: var(--cyan); } .topbar-form-submit-btn { background: linear-gradient(135deg, var(--cyan), var(--gold)); border: none; color: #000 !important; font-weight: 700; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; } .topbar-form-submit-btn:hover { opacity: 0.9; } .topbar-login-prompt { text-align: center; font-size: 12px; padding: 4px 0; } .topbar-login-prompt p { color: var(--muted); margin-bottom: 10px; line-height: 1.4; } .topbar-login-btn { display: inline-block; background: rgba(0, 191, 232, 0.1); border: 1px solid var(--cyan); color: var(--cyan) !important; padding: 6px 12px; border-radius: 8px; text-decoration: none; font-weight: 700; } .topbar-login-btn:hover { background: var(--cyan); color: #000 !important; } /* ========================================================================== Daily Jewish Life Dashboard - Premium Redesign ========================================================================== */ /* Hero Header */ .daily-dashboard-hero { padding: 40px 0; text-align: center; background: radial-gradient(circle at 50% -20%, rgba(217, 180, 90, 0.15), transparent 70%); } .daily-dashboard-hero h1 { font-family: 'Outfit', sans-serif; font-size: 32px; color: #fff; margin-bottom: 8px; } .daily-dashboard-hero .hebrew-date { color: var(--gold); font-size: 18px; font-weight: 500; } /* Announcement Strip */ .dashboard-announce-strip { display: flex; align-items: center; justify-content: center; gap: 12px; background: rgba(255, 255, 255, 0.03); padding: 12px 20px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); margin-bottom: 30px; } .dashboard-announce-strip .badge { background: var(--gold); color: #000; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; } /* ── Dashboard grid ────────────────────────────────────────────────────── */ .daily-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-bottom: 40px; align-items: start; } /* ── Card base - Apple frosted-glass style ──────────────────────────────── */ .daily-dashboard-card { background: rgba(18, 24, 32, 0.72); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 18px; padding: 22px 22px 18px; display: flex; flex-direction: column; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25), 0 8px 32px rgba(0, 0, 0, 0.15); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, box-shadow 0.2s ease; position: relative; } .daily-dashboard-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 12px 40px rgba(0, 0, 0, 0.2); } /* Accent border tints */ .dz-card--gold { border-color: rgba(217, 180, 90, 0.14); } .dz-card--gold:hover { border-color: rgba(217, 180, 90, 0.3); } .dz-card--cyan { border-color: rgba(0, 191, 232, 0.12); } .dz-card--cyan:hover { border-color: rgba(0, 191, 232, 0.28); } .dz-card--purple { border-color: rgba(160, 100, 240, 0.14); } .dz-card--purple:hover { border-color: rgba(160, 100, 240, 0.3); } /* Drag states */ .daily-dashboard-card.dragging { opacity: 0.5; cursor: grabbing; transform: rotate(1deg) scale(0.98); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); } .daily-dashboard-card.drag-over { border-style: dashed !important; border-color: var(--cyan) !important; box-shadow: 0 0 0 2px rgba(0, 191, 232, 0.25) !important; } /* ── Card header ────────────────────────────────────────────────────────── */ .daily-dashboard-card .card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .daily-dashboard-card .card-header h3 { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.92); margin: 0; flex: 1; } /* ── Card SVG icon (header badge) ───────────────────────────────────────── */ .card-svg-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; } .dz-card--gold .card-svg-icon { background: rgba(217, 180, 90, 0.12); color: #d4a843; } .dz-card--cyan .card-svg-icon { background: rgba(0, 191, 232, 0.10); color: #00bfe8; } .dz-card--purple .card-svg-icon { background: rgba(160, 100, 240, 0.12); color: #a064f0; } /* ── Drag handle ────────────────────────────────────────────────────────── */ .card-drag-handle { display: flex; align-items: center; color: rgba(255, 255, 255, 0.18); cursor: grab; user-select: none; padding: 4px; border-radius: 6px; transition: color 0.15s, background 0.15s; flex-shrink: 0; } .card-drag-handle:hover { color: rgba(255, 255, 255, 0.42); background: rgba(255, 255, 255, 0.05); } /* ── Favourite star ─────────────────────────────────────────────────────── */ .daily-fav-btn { background: none; border: none; cursor: pointer; color: rgba(255, 255, 255, 0.2); padding: 4px; display: flex; align-items: center; border-radius: 6px; transition: color 0.15s ease, transform 0.15s ease, background 0.15s; flex-shrink: 0; } .daily-fav-btn:hover { color: var(--gold); background: rgba(217, 180, 90, 0.08); transform: scale(1.15); } .daily-fav-btn.is-fav { color: var(--gold); animation: fav-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); } .daily-fav-btn svg { display: block; } @keyframes fav-pop { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } /* Legacy stubs kept for compatibility */ .drag-handle { cursor: grab; color: var(--muted); opacity: 0.3; } .fav-btn.active { color: var(--gold); } /* ── Study link button ──────────────────────────────────────────────────── */ .study-link-btn { align-self: flex-start; font-size: 12px; color: var(--cyan); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; background: rgba(0, 191, 232, 0.08); border: 1px solid rgba(0, 191, 232, 0.15); transition: background 0.15s, transform 0.15s; margin-top: 6px; } .study-link-btn:hover { background: rgba(0, 191, 232, 0.18); color: #fff; transform: translateX(2px); } /* ── Hero Date Header ───────────────────────────────────────────────────── */ .daily-hero-header { margin-bottom: 28px; } .daily-hero-date { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; } .daily-hero-hebrew { font-size: 26px; font-weight: 700; color: var(--gold); text-shadow: 0 0 18px rgba(217, 180, 90, 0.35); letter-spacing: 0.02em; } .daily-hero-gregorian { font-size: 14px; color: var(--muted); font-weight: 400; letter-spacing: 0.03em; text-transform: uppercase; } /* ── Announcement Chip Strip ────────────────────────────────────────────── */ .daily-announce-strip { display: flex; flex-wrap: wrap; gap: 8px; } .announce-chip { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, rgba(217, 180, 90, 0.12), rgba(0, 191, 232, 0.06)); border: 1px solid rgba(217, 180, 90, 0.25); border-radius: 100px; padding: 6px 14px; font-size: 13px; color: #f5e8c0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); transition: transform 0.15s ease, border-color 0.15s ease; } .announce-chip:hover { transform: translateY(-1px); border-color: rgba(217, 180, 90, 0.45); } .announce-title { font-weight: 500; } .announce-heb { font-size: 12px; color: var(--gold); opacity: 0.8; } /* ── Card accent colour variants ────────────────────────────────────────── */ .dz-card--gold { border-color: rgba(217, 180, 90, 0.18); } .dz-card--gold:hover { border-color: rgba(217, 180, 90, 0.38); box-shadow: 0 14px 40px rgba(217, 180, 90, 0.08); } .dz-card--gold .card-header { border-bottom-color: rgba(217, 180, 90, 0.12); } .dz-card--gold .card-icon-emoji { text-shadow: 0 0 10px rgba(217, 180, 90, 0.6); } .dz-card--cyan { border-color: rgba(0, 191, 232, 0.15); } .dz-card--cyan:hover { border-color: rgba(0, 191, 232, 0.35); box-shadow: 0 14px 40px rgba(0, 191, 232, 0.07); } .dz-card--cyan .card-header { border-bottom-color: rgba(0, 191, 232, 0.10); } .dz-card--cyan .card-icon-emoji { text-shadow: 0 0 10px rgba(0, 191, 232, 0.6); } .dz-card--purple { border-color: rgba(160, 100, 240, 0.18); } .dz-card--purple:hover { border-color: rgba(160, 100, 240, 0.38); box-shadow: 0 14px 40px rgba(160, 100, 240, 0.08); } .dz-card--purple .card-header { border-bottom-color: rgba(160, 100, 240, 0.10); } .dz-card--purple .card-icon-emoji { text-shadow: 0 0 10px rgba(160, 100, 240, 0.6); } /* ── Drag states ────────────────────────────────────────────────────────── */ .daily-dashboard-card.dragging { opacity: 0.45; cursor: grabbing; transform: rotate(1.5deg) scale(0.97); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); } .daily-dashboard-card.drag-over { border-style: dashed !important; border-color: var(--cyan) !important; box-shadow: 0 0 0 2px rgba(0, 191, 232, 0.3) !important; } /* ── Card header elements ───────────────────────────────────────────────── */ .daily-dashboard-card .card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding-bottom: 12px; } .daily-dashboard-card .card-header h3 { font-size: 15px; margin: 0; color: #fff; font-weight: 600; flex: 1; } .card-drag-handle { font-size: 16px; color: rgba(255, 255, 255, 0.2); cursor: grab; user-select: none; padding: 2px 4px; border-radius: 4px; transition: color 0.15s; flex-shrink: 0; line-height: 1; } .card-drag-handle:hover { color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.05); } .card-icon-emoji { font-size: 18px; flex-shrink: 0; line-height: 1; } /* ── Favourite star button ──────────────────────────────────────────────── */ .daily-fav-btn { background: none; border: none; cursor: pointer; font-size: 18px; color: rgba(255, 255, 255, 0.2); padding: 2px 4px; line-height: 1; transition: color 0.15s ease, transform 0.15s ease; flex-shrink: 0; } .daily-fav-btn:hover { color: var(--gold); transform: scale(1.2); } .daily-fav-btn.is-fav { color: var(--gold); text-shadow: 0 0 8px rgba(217, 180, 90, 0.5); animation: fav-pop 0.3s ease; } @keyframes fav-pop { 0% { transform: scale(1); } 50% { transform: scale(1.45); } 100% { transform: scale(1); } } /* ── Shabbat Widget ─────────────────────────────────────────────────────── */ .shabbat-times-row { display: flex; gap: 12px; margin-bottom: 16px; } .shabbat-pill { flex: 1; display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 12px 14px; } .candle-pill { background: linear-gradient(135deg, rgba(217, 180, 90, 0.12), rgba(217, 180, 90, 0.04)); border: 1px solid rgba(217, 180, 90, 0.2); } .havdalah-pill { background: linear-gradient(135deg, rgba(0, 191, 232, 0.1), rgba(0, 191, 232, 0.03)); border: 1px solid rgba(0, 191, 232, 0.18); } .shabbat-pill .pill-icon { font-size: 22px; line-height: 1; flex-shrink: 0; } .shabbat-pill div { display: flex; flex-direction: column; } .shabbat-pill small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 2px; } .shabbat-pill strong { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.1; } .candle-pill strong { color: var(--gold); } .havdalah-pill strong { color: var(--cyan); } .shabbat-parasha-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; background: linear-gradient(90deg, rgba(217, 180, 90, 0.08), transparent); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 10px 14px; } .parasha-badge { font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: 0.05em; direction: rtl; } .parasha-name { font-size: 15px; color: #fff; font-weight: 500; } .shabbat-holiday-chip { display: inline-block; margin: 4px 4px 0 0; background: rgba(217, 180, 90, 0.1); border: 1px solid rgba(217, 180, 90, 0.2); border-radius: 100px; padding: 3px 10px; font-size: 12px; color: #f5e8c0; } /* ── Announce chip icon ─────────────────────────────────────────────────── */ .announce-chip-icon { display: flex; align-items: center; flex-shrink: 0; opacity: 0.7; } .announce-chip--holiday .announce-chip-icon { color: var(--gold); opacity: 1; } /* ── Location bar SVG icons ─────────────────────────────────────────────── */ .loc-icon { display: flex; align-items: center; flex-shrink: 0; } .loc-icon--pin { color: var(--cyan); } .loc-icon--warn { color: #e8a630; } /* ── Edit button ────────────────────────────────────────────────────────── */ .dz-edit-btn { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: rgba(255, 255, 255, 0.55); font-size: 11px; font-weight: 500; padding: 3px 9px; cursor: pointer; transition: background 0.15s, color 0.15s; margin-left: auto; white-space: nowrap; } .dz-edit-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } /* ── Shabbat pill SVG icons ─────────────────────────────────────────────── */ .pill-svg { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; } .candle-svg { background: rgba(217, 180, 90, 0.12); color: #d4a843; } .stars-svg { background: rgba(180, 130, 240, 0.12); color: #a878f0; } /* ── Parasha row ────────────────────────────────────────────────────────── */ .shabbat-parasha-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; background: rgba(217, 180, 90, 0.05); border-left: 2px solid rgba(217, 180, 90, 0.4); border-radius: 0 8px 8px 0; padding: 9px 12px; } .parasha-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); font-weight: 600; white-space: nowrap; } .parasha-name { font-size: 14px; color: rgba(255, 255, 255, 0.9); font-weight: 500; } /* ── Study track SVG icons ──────────────────────────────────────────────── */ .track-svg { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; } .track-svg--gold { background: rgba(217, 180, 90, 0.12); color: #d4a843; } .track-svg--cyan { background: rgba(0, 191, 232, 0.10); color: #00bfe8; } .track-svg--purple { background: rgba(160, 100, 240, 0.12); color: #a064f0; } .track-svg--teal { background: rgba(45, 207, 196, 0.10); color: #2dcfc4; } .daily-location-bar .loc-icon { font-size: 14px; flex-shrink: 0; } .daily-location-bar .loc-label { flex: 1; } .daily-location-bar strong { color: #fff; } .daily-location-bar.uncalibrated { color: rgba(217, 180, 90, 0.7); } /* legacy compat */ .daily-location-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); } .daily-location-status .icon { width: 14px; height: 14px; color: var(--cyan); } .daily-location-status.uncalibrated .icon { color: var(--gold); } .daily-location-status .ghost-button.compact { margin-left: auto; padding: 4px 8px; font-size: 11px; } .daily-location-form { margin-top: 10px; } .daily-location-form .form-input-group { display: flex; gap: 8px; } .daily-location-form .form-input-group input { flex: 1; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; padding: 7px 12px; border-radius: 8px; font-size: 13px; } .daily-location-form .form-input-group input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(0, 191, 232, 0.15); } .daily-location-form .form-input-group .primary-button.compact { padding: 7px 14px; font-size: 12px; white-space: nowrap; } .daily-dashboard-card .card-footer { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 16px; } /* ── Zmanim grouped ─────────────────────────────────────────────────────── */ .zman-group { margin-bottom: 12px; } .zman-group:last-child { margin-bottom: 0; } .zman-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); opacity: 0.55; margin-bottom: 5px; padding-left: 2px; } .zman-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.03); border-radius: 8px; margin-bottom: 3px; transition: background 0.15s; } .zman-row:hover { background: rgba(0, 191, 232, 0.04); border-color: rgba(0, 191, 232, 0.08); } .zman-label { font-size: 12px; color: var(--muted); } .zman-time { font-size: 13px; font-weight: 600; color: #e8f4fd; font-variant-numeric: tabular-nums; } /* ── Study track colour variants ────────────────────────────────────────── */ .study-track-box { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 13px 14px; display: flex; flex-direction: column; gap: 8px; transition: background 0.2s ease, border-color 0.2s ease; } .study-track-box:hover { background: rgba(255, 255, 255, 0.04); } .track-gold { border-left: 3px solid var(--gold); } .track-cyan { border-left: 3px solid var(--cyan); } .track-purple { border-left: 3px solid #a064f0; } .track-teal { border-left: 3px solid #2dcfc4; } .study-track-header { display: flex; align-items: center; gap: 8px; } .track-emoji { font-size: 15px; line-height: 1; flex-shrink: 0; } .study-track-header strong { font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.07em; } .track-cyan .study-track-header strong { color: var(--cyan); } .track-purple .study-track-header strong { color: #a064f0; } .track-teal .study-track-header strong { color: #2dcfc4; } .study-track-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .study-title { font-size: 14px; font-weight: 600; color: #fff; } .study-hebrew { font-size: 14px; color: var(--muted); font-weight: 500; } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .daily-hero-hebrew { font-size: 20px; } .daily-dashboard-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 24px; } .shabbat-times-row { flex-direction: column; } .shabbat-pill { padding: 10px 12px; } .shabbat-pill strong { font-size: 18px; } .daily-header-panel { flex-direction: column; align-items: flex-start; } .daily-holiday-banner { width: 100%; } } /* YouTube card previews, public profile tabs, and On the Table */ .youtube-preview { width: 100%; display: flex; align-items: center; gap: 0.75rem; border: 1px solid color-mix(in srgb, var(--rabbi-accent, var(--accent)) 45%, var(--line)); border-radius: 14px; padding: 0.7rem 0.85rem; background: linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, var(--panel)) 22%, transparent), color-mix(in srgb, var(--rabbi-end, var(--panel)) 16%, transparent)); color: var(--text); cursor: pointer; text-align: left; min-height: 52px; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .youtube-preview:hover, .youtube-preview:focus-visible { transform: translateY(-1px); border-color: var(--rabbi-accent, var(--accent)); box-shadow: 0 16px 36px color-mix(in srgb, var(--rabbi-accent, var(--accent)) 18%, transparent); } .youtube-preview-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #ff0033; color: white; flex: 0 0 auto; } .youtube-preview-copy { display: grid; gap: 0.1rem; min-width: 0; } .youtube-preview-copy small { color: var(--muted); } .youtube-preview-hover { margin: 0.65rem 0; } .youtube-preview-profile { min-height: 88px; max-width: 560px; } .youtube-preview-frame { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--rabbi-accent, var(--accent)) 50%, var(--line)); background: #000; } .youtube-preview-frame iframe, .featured-youtube-shell iframe { width: 100%; height: 100%; border: 0; display: block; } .featured-youtube-shell { max-width: 760px; } .rabbi-profile-tabs { display: grid; gap: 1.2rem; width: 100%; max-width: 100%; min-width: 0; } .profile-tab-list { display: flex; flex-wrap: wrap; gap: 0.65rem; width: 100%; max-width: 100%; min-width: 0; padding: 0.7rem; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--panel) 82%, transparent); overflow: hidden; } .profile-tab-button { flex: 1 1 min(100%, 132px); min-width: 0; min-height: 42px; border: 1px solid var(--line); border-radius: 999px; padding: 0.65rem 1rem; background: var(--surface); color: var(--text); font-weight: 800; cursor: pointer; white-space: normal; line-height: 1.15; } .profile-tab-button.active { color: var(--button-text); border-color: transparent; background: linear-gradient(135deg, var(--rabbi-start, var(--accent)), var(--rabbi-accent, var(--accent-2))); } .profile-tab-panel { display: grid; gap: 1.2rem; min-width: 0; } .on-table-page { display: grid; gap: 1.8rem; } .on-table-hero-row h1 { margin: 0.25rem 0; } .on-table-section { display: grid; gap: 1rem; } .on-table-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1rem; } .on-table-card { display: grid; gap: 1rem; align-content: start; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--panel) 88%, transparent); box-shadow: var(--shadow-soft); } .on-table-live-card { border-color: color-mix(in srgb, var(--danger) 42%, var(--line)); } .on-table-card-top { display: flex; gap: 0.9rem; align-items: flex-start; } .on-table-card-top h3 { margin: 0.35rem 0 0.2rem; } .on-table-card-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; } .on-table-time { display: grid; gap: 0.2rem; padding: 0.75rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); } .on-table-artwork { width: 72px; height: 72px; border-radius: 16px; flex: 0 0 auto; } /* 2026 premium live Torah grid and scheduling polish */ .live-streaming-panel { grid-column: 1 / -1; overflow: hidden; /* prevent any child from bleeding outside the rounded panel */ padding: clamp(20px, 3vw, 34px); background: radial-gradient(circle at 14% 0%, rgba(231, 196, 118, 0.28), transparent 30%), radial-gradient(circle at 86% 8%, rgba(117, 36, 56, 0.2), transparent 28%), linear-gradient(135deg, rgba(22, 18, 27, 0.98), rgba(50, 34, 47, 0.96) 52%, rgba(26, 50, 48, 0.95)); color: #fffaf0; border-color: rgba(231, 196, 118, 0.34); box-shadow: 0 28px 80px rgba(18, 13, 24, 0.28); } .live-streaming-panel::before { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(231, 196, 118, 0.78), transparent); } .live-streaming-heading h1, .live-streaming-heading p, .live-streaming-panel .section-title-row h2, .live-streaming-panel .row-meta { color: inherit; } .live-streaming-heading .eyebrow { color: #f3d58a; } .live-streaming-heading p { max-width: 620px; color: rgba(255, 250, 240, 0.74); } .live-stream-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); max-width: 100%; min-width: 0; } .live-stream-card { position: relative; overflow: hidden; display: grid; border: 1px solid rgba(255, 246, 218, 0.16); border-radius: 24px; background: rgba(255, 255, 255, 0.075); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.25); transform: translateY(0); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .live-stream-card:hover, .live-stream-card:focus-within { transform: translateY(-4px); border-color: rgba(243, 213, 138, 0.55); box-shadow: 0 24px 56px rgba(0, 0, 0, 0.34); } .live-card-hitbox { position: absolute; inset: 0; z-index: 3; appearance: none; border: 0; background: transparent; cursor: pointer; } .live-card-thumbnail { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(10, 7, 12, 0.74)), var(--live-thumb, radial-gradient(circle at 30% 20%, rgba(231, 196, 118, 0.45), transparent 28%), linear-gradient(135deg, #4d2034, #1d4944)); background-size: cover; background-position: center; } .live-now-badge, .live-card-category { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .live-now-badge { top: 12px; left: 12px; padding: 8px 10px; color: #fff; background: linear-gradient(135deg, #c31f32, #84233b); box-shadow: 0 10px 24px rgba(195, 31, 50, 0.38); } .live-pulse { width: 8px; height: 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.72); animation: livePulse 1.8s infinite; } @keyframes livePulse { 70% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .live-card-category { right: 12px; bottom: 12px; padding: 7px 9px; border: 1px solid rgba(255, 247, 215, 0.74); color: #071018 !important; background: #f3d36f; text-shadow: none; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24); } .live-card-body { display: grid; gap: 14px; padding: 16px; min-width: 0; overflow: hidden; } .live-card-body h3 { margin: 0; color: #fffaf0; font-family: var(--serif); font-size: clamp(18px, 1.8vw, 22px); line-height: 1.08; } .live-card-rabbi-row, .live-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .live-card-rabbi-row { justify-content: flex-start; } .live-card-avatar { width: 42px; height: 42px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 50%; border: 2px solid rgba(243, 213, 138, 0.8); background: linear-gradient(135deg, #7c2b41, #d8ae5b); color: #fff; font-weight: 900; } .live-card-avatar.has-photo { background: var(--avatar) center/cover; } .live-card-rabbi-row strong, .live-card-rabbi-row span, .live-viewer-count { display: block; color: rgba(255, 250, 240, 0.76); font-size: 13px; } .live-card-rabbi-row strong { color: #fffaf0; } .live-viewer-count { display: inline-flex; align-items: center; gap: 7px; } .live-card-join { position: relative; z-index: 4; white-space: nowrap; flex-shrink: 0; } .live-viewer-count { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .premium-booking-steps ol { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 8px 0 0; list-style: none; } .premium-booking-steps li, .tier-rule-summary { display: inline-flex !important; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 8px; background: rgba(183, 139, 63, 0.12); color: var(--burgundy) !important; font-weight: 800; } .premium-tier-option { align-items: flex-start; gap: 12px; } .premium-tier-option small i { margin-right: 5px; } .professional-tier-row { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; } .professional-tier-row .wide-field { grid-column: 1 / -1; } @media (max-width: 980px) { .live-stream-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .professional-tier-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .live-stream-grid, .professional-tier-row { grid-template-columns: 1fr; } .live-card-footer { align-items: stretch; flex-direction: column; } } /* ─── Support Section (wide, horizontal, minimal) ─────────────────────────── */ .support-section { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 18px; } .support-intro { flex: 0 0 auto; min-width: 150px; } .support-intro h2 { margin: 0 0 4px; font-size: 18px; font-weight: 800; } .support-intro p { margin: 0; font-size: 13px; color: var(--muted); } .support-fields { display: flex; align-items: center; gap: 10px; flex: 1; flex-wrap: wrap; } .support-amounts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Override 2x2 grid -> single row of 4 inside the wide support section */ .support-section .amount-grid { grid-template-columns: repeat(4, auto); margin-bottom: 0; gap: 6px; } .support-section .amount-grid button { height: 38px; padding: 0 14px; white-space: nowrap; } .support-custom-input { height: 38px; width: 110px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-strong, #fffdf8); color: var(--ink); font-size: 14px; font-weight: 700; } .support-custom-input:focus { outline: 2px solid var(--gold); outline-offset: 1px; } .support-details { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; min-width: 0; } .support-details select, .support-details input[type="text"] { height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-strong, #fffdf8); color: var(--ink); font-size: 14px; font-weight: 600; } .support-details select { flex: 0 0 auto; cursor: pointer; } .support-details input[type="text"] { flex: 1; min-width: 150px; } .support-details select:focus, .support-details input[type="text"]:focus { outline: 2px solid var(--gold); outline-offset: 1px; } /* Shrink button a little when inline */ .support-section .support-button { flex: 0 0 auto; width: auto; padding: 0 22px; height: 38px; line-height: 38px; white-space: nowrap; } /* Dark mode */ :root[data-theme="dark"] .support-custom-input, :root[data-theme="dark"] .support-details select, :root[data-theme="dark"] .support-details input[type="text"] { background: rgba(255, 253, 248, 0.06); border-color: rgba(255, 255, 255, 0.12); color: var(--ink); } :root[data-theme="dark"] .support-custom-input:focus, :root[data-theme="dark"] .support-details select:focus, :root[data-theme="dark"] .support-details input[type="text"]:focus { outline-color: var(--gold); } /* ── Responsive ── */ /* Tablet: wrap amounts below intro */ @media (max-width: 900px) { .support-section { flex-direction: column; align-items: stretch; gap: 16px; } .support-fields { flex-direction: column; align-items: stretch; gap: 10px; } .support-amounts { flex-wrap: wrap; } .support-details { flex-wrap: wrap; } .support-details select { flex: 1 1 auto; width: 100%; } .support-details input[type="text"] { width: 100%; } .support-section .support-button { width: 100%; text-align: center; } } /* Mobile: amounts back to 2x2 */ @media (max-width: 560px) { .support-section .amount-grid { grid-template-columns: repeat(2, 1fr); width: 100%; } .support-custom-input { width: 100%; } .support-section .amount-grid button { padding: 0 8px; } } /* ═══════════════════════════════════════════════════════════════════════════ SCHEDULING SYSTEM v2 - Tier cards - Slot picker - Booking form - Sidebar ═══════════════════════════════════════════════════════════════════════════ */ /* ── Booking card 3-column layout ── */ /* ════════════════════════════════════════════════════════════════════ SCHEDULING CARD - unified 2026 panel design No nested boxes. One card, internal structural dividers. ════════════════════════════════════════════════════════════════════ */ .office-booking-card { --sched-accent: var(--cyan); display: grid; grid-template-areas: "date date" "copy form"; grid-template-columns: 0.44fr 0.56fr; grid-template-rows: auto auto; gap: 0; padding: 0; border: 1.5px solid color-mix(in srgb, var(--sched-accent) 26%, var(--line)); border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: 0 2px 28px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.06); position: relative; } /* Subtle glow - top right corner */ .office-booking-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 220px 140px at 100% 0%, color-mix(in srgb, var(--sched-accent) 12%, transparent), transparent); pointer-events: none; z-index: 0; border-radius: 20px; } /* ── Row 1: Wide header strip ── */ .office-booking-date { grid-area: date; display: flex; flex-direction: row; align-items: stretch; gap: 0; padding: 22px 26px; background: color-mix(in srgb, var(--surface-strong, rgba(255,253,248,0.95)) 80%, var(--sched-accent) 2%); border-bottom: 1px solid var(--line); position: relative; z-index: 1; } /* Hebrew date: left column with vertical divider */ .office-booking-date .hebrew-date-stack { flex-shrink: 0; width: 130px; padding: 4px 24px 4px 0; margin-right: 24px; border: none; border-right: 1px solid var(--line); background: transparent; display: flex; flex-direction: column; justify-content: center; } .office-booking-date .hebrew-date-primary { font-size: clamp(18px, 1.8vw, 26px); line-height: 1.1; } /* Right side of the header: meeting details */ .office-date-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; justify-content: center; } .office-date-details h3 { margin: 3px 0 4px; font-size: clamp(18px, 1.5vw, 24px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); } /* Calendar becomes a subtle inline text link, not a full-width button */ .office-date-details .slot-cal-link { display: inline-flex; align-self: flex-start; width: auto; padding: 3px 0; background: transparent !important; border: none !important; box-shadow: none !important; font-size: 12px; font-weight: 600; color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--cyan) 40%, transparent); margin-top: 5px; transition: color 0.15s, text-decoration-color 0.15s; } .office-date-details .slot-cal-link:hover { color: var(--gold); text-decoration-color: color-mix(in srgb, var(--gold) 60%, transparent); } /* ── Row 2 col A: Tier chooser ── */ .office-booking-copy { grid-area: copy; } .office-slot-meta-row { display: flex; flex-direction: column; gap: 5px; } .office-slot-meta-row span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; } .office-slot-meta-row .slot-meta-open { color: var(--cyan); } .office-public-links { display: flex; flex-direction: column; gap: 6px; } .office-public-links .ghost-button { font-size: 12px; padding: 6px 10px; justify-content: center; } /* ── Row 2 col A: Session chooser ── */ .office-booking-copy { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 20px 22px; border-right: 1px solid var(--line); position: relative; z-index: 1; } .office-copy-heading { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); } /* Fix tier name - allow wrapping so text never truncates */ .tier-name { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; word-break: break-word; } .office-booking-copy-head { display: grid; gap: 5px; } .office-booking-copy-head h3 { margin: 0; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.08; } .office-viewer-time { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); } .office-local-time { color: var(--muted); font-size: 12px; } /* ── Session chooser header ── */ .sched-tier-section, .sched-picker-section { display: grid; gap: 10px; } .sched-section-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: 0.07em; } /* ── Tier cards ── */ .office-tiers-list { display: grid; gap: 8px; } .sched-tier-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--gold) 26%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--surface) 94%, var(--gold) 3%); cursor: pointer; transition: border-color 160ms, background 160ms, box-shadow 160ms; } .sched-tier-card input[type="radio"] { flex-shrink: 0; accent-color: var(--cyan); width: 16px; height: 16px; } .sched-tier-card:hover:not(.sched-tier-ineligible) { border-color: color-mix(in srgb, var(--cyan) 42%, var(--gold)); background: color-mix(in srgb, var(--surface) 88%, var(--cyan) 5%); } .sched-tier-card.selected { border-color: color-mix(in srgb, var(--cyan) 68%, var(--gold)); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 36%), color-mix(in srgb, var(--surface) 85%, var(--cyan) 8%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 22%, transparent); } .sched-tier-ineligible { opacity: 0.54; cursor: not-allowed; } .sched-tier-body { display: grid; gap: 3px; min-width: 0; } .sched-tier-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .sched-tier-name { font-size: 14px; font-weight: 900; line-height: 1.2; } .sched-tier-duration { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--line) 60%, transparent); color: var(--muted); font-size: 11px; font-weight: 800; white-space: nowrap; } .sched-tier-desc { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; } /* Rule badges */ .sched-tier-rule { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; width: fit-content; } .tier-rule-first { background: color-mix(in srgb, var(--cyan) 14%, transparent); color: var(--cyan); } .tier-rule-limited { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-bright); } .tier-rule-yearly { background: color-mix(in srgb, #a78bfa 14%, transparent); color: #a78bfa; } .tier-rule-cooldown{ background: color-mix(in srgb, #fb923c 14%, transparent); color: #fb923c; } .tier-rule-blocked { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); } /* Price column */ .sched-tier-price { text-align: right; white-space: nowrap; } .sched-tier-price em { font-size: 18px; font-weight: 950; font-style: normal; color: var(--gold-bright); } .sched-tier-price-free .sched-tier-mitzvah { font-size: 10px; font-weight: 900; text-align: center; line-height: 1.25; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.04em; } /* Guest tier preview */ .sched-tiers-guest { display: grid; gap: 6px; } .sched-tier-preview { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--muted); } /* ── Column 3: Booking form ── */ .office-booking-form { display: grid; gap: 14px; padding: clamp(14px, 1.8vw, 20px); border: 1px solid color-mix(in srgb, var(--cyan) 46%, var(--line)); border-radius: 22px; background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 28%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 30%), linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 90%, var(--cyan) 6%), color-mix(in srgb, var(--surface) 94%, var(--gold) 3%)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 14px 36px rgba(0,0,0,0.14); } /* Step indicator */ .sched-form-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sched-form-header small { color: var(--muted); font-size: 11px; font-weight: 800; white-space: nowrap; } .sched-steps { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .sched-step { display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; font-weight: 800; color: var(--muted); transition: all 160ms; } .sched-step em { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--line); color: var(--muted); font-size: 10px; font-style: normal; font-weight: 950; } .sched-step.active { border-color: color-mix(in srgb, var(--cyan) 64%, transparent); color: var(--cyan); } .sched-step.active em { background: var(--cyan); color: #fff; } .sched-step.done { border-color: color-mix(in srgb, var(--gold) 48%, transparent); color: var(--gold-bright); } .sched-step.done em { background: var(--gold); color: #fff; } /* Status badge (when already booked) */ .sched-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 900; text-transform: capitalize; background: color-mix(in srgb, var(--cyan) 16%, transparent); color: var(--cyan); border: 1px solid color-mix(in srgb, var(--cyan) 32%, transparent); } .sched-status-accepted { background: color-mix(in srgb, #4ade80 16%, transparent); color: #4ade80; border-color: color-mix(in srgb, #4ade80 32%, transparent); } .sched-status-completed { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-bright); border-color: color-mix(in srgb, var(--gold) 32%, transparent); } .sched-status-declined, .sched-status-cancelled { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); border-color: color-mix(in srgb, var(--muted) 28%, transparent); } /* ── Time slot grid ── */ .sched-picker { display: grid; gap: 0; } .sched-slots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; } .sched-slot { display: grid; gap: 1px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--surface) 92%, var(--cyan) 4%); cursor: pointer; transition: border-color 140ms, background 140ms, box-shadow 140ms; min-height: 0; } .sched-slot input[type="radio"] { display: none; } .sched-slot-time { font-size: 13px; font-weight: 900; line-height: 1.1; color: var(--text); } .sched-slot-range { font-size: 11px; font-weight: 700; color: var(--muted); } .sched-slot-status { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cyan); } .sched-slot-dur { font-size: 10px; color: var(--muted); font-weight: 700; } .sched-slot:hover:not([class*="booked"]):not([class*="closed"]) { border-color: color-mix(in srgb, var(--cyan) 56%, transparent); background: color-mix(in srgb, var(--surface) 84%, var(--cyan) 9%); } .sched-slot.selected { border-color: color-mix(in srgb, var(--cyan) 76%, var(--gold)); background: color-mix(in srgb, var(--surface) 78%, var(--cyan) 14%); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--cyan) 28%, transparent); } .sched-slot.selected .sched-slot-status { color: var(--cyan); } .sched-slot-booked, .sched-slot-closed { opacity: 0.5; cursor: not-allowed; background: color-mix(in srgb, var(--surface) 88%, var(--muted) 8%); border-color: var(--line); } .sched-slot-booked .sched-slot-status, .sched-slot-closed .sched-slot-status { color: var(--muted); } .sched-slot-yours { border-color: color-mix(in srgb, var(--gold) 52%, var(--line)); background: color-mix(in srgb, var(--surface) 84%, var(--gold) 10%); } .sched-slot-yours .sched-slot-status { color: var(--gold-bright); } .sched-slot-bbb { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--cyan); font-size: 11px; font-weight: 800; text-decoration: none; } .sched-empty-slots { padding: 12px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; font-weight: 700; } /* Login fallback */ .office-booking-login { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; align-content: start; } /* Note field */ .office-note-field { display: grid; gap: 6px; } .office-note-field > span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: 0.06em; } .office-note-field textarea { min-height: 80px; width: 100%; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--cyan) 34%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--surface) 90%, var(--cyan) 4%); color: var(--text); font-size: 13px; resize: vertical; } .office-book-button { width: 100%; min-height: 46px; font-size: 14px; transition: opacity 180ms; } .office-book-button:disabled { opacity: 0.5; cursor: not-allowed; } /* Readonly picker (guest view) */ .sched-picker-readonly .sched-slot { cursor: default; pointer-events: none; } /* ── Sidebar scheduling card ── */ .minimal-schedule-card { display: grid; gap: 12px; padding: 16px; border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--line)); border-radius: 18px; background: radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 30%), color-mix(in srgb, var(--surface-strong) 92%, var(--cyan) 3%); } .minimal-schedule-head { display: flex; align-items: center; gap: 10px; } .minimal-schedule-head i { font-size: 22px; color: var(--cyan); flex-shrink: 0; } .minimal-schedule-head strong { display: block; font-size: 14px; font-weight: 900; } .minimal-schedule-head span { font-size: 12px; color: var(--muted); font-weight: 700; } .sched-sidebar-tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .sched-sidebar-tiers li { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 700; gap: 8px; } .sched-sidebar-tiers li span:first-child { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sched-sidebar-tiers li span:last-child { color: var(--muted); white-space: nowrap; flex-shrink: 0; } .sched-sidebar-tier-locked { opacity: 0.55; } .minimal-schedule-action { width: 100%; text-align: center; } /* ── Dark mode overrides ── */ :root[data-theme="dark"] .sched-tier-card { background: rgba(255, 253, 248, 0.04); border-color: rgba(255, 255, 255, 0.09); } :root[data-theme="dark"] .sched-tier-card.selected { background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--cyan) 16%, transparent), transparent 38%), rgba(255, 253, 248, 0.06); border-color: color-mix(in srgb, var(--cyan) 54%, transparent); } :root[data-theme="dark"] .sched-tier-duration { background: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .sched-tier-preview { background: rgba(255, 253, 248, 0.04); border-color: rgba(255, 255, 255, 0.09); } :root[data-theme="dark"] .sched-slot { background: rgba(255, 253, 248, 0.04); border-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .sched-slot.selected { background: color-mix(in srgb, var(--surface) 72%, var(--cyan) 18%); } :root[data-theme="dark"] .sched-slot-booked, :root[data-theme="dark"] .sched-slot-closed { background: rgba(255, 255, 255, 0.03); } :root[data-theme="dark"] .office-booking-date { background: rgba(255, 253, 248, 0.04); border-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .office-booking-form { background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 28%), rgba(255, 253, 248, 0.04); border-color: color-mix(in srgb, var(--cyan) 32%, rgba(255,255,255,0.08)); } :root[data-theme="dark"] .minimal-schedule-card { background: rgba(255, 253, 248, 0.04); border-color: color-mix(in srgb, var(--cyan) 24%, rgba(255,255,255,0.08)); } :root[data-theme="dark"] .sched-sidebar-tiers li { background: rgba(255, 253, 248, 0.03); border-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .office-note-field textarea { background: rgba(255, 253, 248, 0.04); border-color: color-mix(in srgb, var(--cyan) 24%, rgba(255,255,255,0.08)); } /* ── Row 2 col B: Booking form / post-booking panel ── */ .office-booking-form, .office-booking-login, .pbp-shell { grid-area: form; padding: 20px 22px; position: relative; z-index: 1; } /* pbp-shell loses its own box - lives inside the card panel now */ .pbp-shell { display: grid; gap: 12px; } /* Status card - tighter, flush design */ .pbp-status { border-radius: 12px; padding: 13px 15px; gap: 12px; } .pbp-status i { font-size: 18px; } .pbp-status-copy strong { font-size: 13px; margin-bottom: 3px; } .pbp-status-copy p { font-size: 12px; line-height: 1.45; } /* Summary card - tighter rows */ .pbp-booking-summary { border-radius: 10px; } .pbp-summary-row { padding: 8px 12px; gap: 10px; } .pbp-summary-row i { font-size: 12px; } .pbp-summary-label { font-size: 9px; letter-spacing: 0.08em; } .pbp-summary-row strong { font-size: 12px; } /* Action buttons row - compact */ .pbp-secondary { gap: 6px; } .pbp-secondary > * { font-size: 11px; padding: 7px 10px; } :root[data-theme="dark"] .office-booking-card { background: rgba(3, 9, 20, 0.96); border-color: color-mix(in srgb, var(--sched-accent) 22%, rgba(255,255,255,0.08)); } :root[data-theme="dark"] .office-booking-date { background: rgba(255, 253, 248, 0.025); border-color: rgba(255, 255, 255, 0.07); } :root[data-theme="dark"] .office-booking-date .hebrew-date-stack { border-color: rgba(255, 255, 255, 0.07); } :root[data-theme="dark"] .office-booking-copy { border-color: rgba(255, 255, 255, 0.07); } /* ── Responsive - collapse to single column below 680px ── */ @media (max-width: 680px) { .office-booking-card { grid-template-areas: "date" "copy" "form"; grid-template-columns: 1fr; border-radius: 16px; } .office-booking-date { flex-direction: column; gap: 16px; padding: 18px 20px; } .office-booking-date .hebrew-date-stack { width: auto; border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 14px; margin-right: 0; margin-bottom: 0; } .office-booking-copy { border-right: none; border-bottom: 1px solid var(--line); padding: 18px 20px; } .office-booking-form, .office-booking-login, .pbp-shell { padding: 18px 20px; } } /* ═══════════════════════════════════════════════════════════════════════════ OFFICE ROOM PAGE (office-room.html) ═══════════════════════════════════════════════════════════════════════════ */ /* Shell */ .or-shell { display: flex; flex-direction: column; min-height: 100vh; } /* ── Hero header ── */ .or-hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 60px) clamp(36px, 5vw, 64px); background: radial-gradient(ellipse at 80% 0%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 52%), radial-gradient(ellipse at 0% 60%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 48%), radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--burgundy) 8%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--surface) 80%, #030914 20%), #030914 90%); border-bottom: 1px solid color-mix(in srgb, var(--cyan) 18%, var(--line)); } /* Decorative aleph watermark */ .or-hero::before { content: "א"; position: absolute; right: clamp(20px, 6vw, 80px); top: 50%; transform: translateY(-50%); font-size: clamp(180px, 22vw, 340px); font-family: var(--serif); color: color-mix(in srgb, var(--gold) 6%, transparent); pointer-events: none; user-select: none; line-height: 1; } .or-hero-inner { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; max-width: 1280px; margin: 0 auto; flex-wrap: wrap; } .or-hero-copy { display: grid; gap: 10px; max-width: 680px; } .or-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cyan) 36%, transparent); background: color-mix(in srgb, var(--cyan) 10%, transparent); color: var(--cyan); font-size: 11px; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; width: fit-content; } .or-title { margin: 0; font-size: clamp(36px, 5.5vw, 72px); font-family: var(--serif); line-height: 1.02; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.4); } .or-participants { display: flex; align-items: center; gap: 8px; margin: 0; color: color-mix(in srgb, #fff 62%, transparent); font-size: 15px; font-weight: 700; } .or-participants i { color: color-mix(in srgb, var(--gold) 72%, transparent); } .or-hero-time { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; color: color-mix(in srgb, #fff 55%, transparent); font-size: 14px; font-weight: 700; flex-wrap: wrap; } .or-hero-time i { color: color-mix(in srgb, var(--cyan) 80%, transparent); } .or-hero-clock { display: inline-flex; align-items: center; gap: 6px; } /* Status badge in hero */ .or-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 950; letter-spacing: 0.04em; text-transform: capitalize; border: 1px solid; backdrop-filter: blur(12px); flex-shrink: 0; margin-top: 6px; } .room-status-accepted { color: #4ade80; border-color: color-mix(in srgb,#4ade80 38%,transparent); background: color-mix(in srgb,#4ade80 12%,transparent); } .room-status-completed { color: var(--gold-bright); border-color: color-mix(in srgb,var(--gold) 38%,transparent); background: color-mix(in srgb,var(--gold) 12%,transparent); } .room-status-requested { color: var(--cyan); border-color: color-mix(in srgb,var(--cyan) 38%,transparent); background: color-mix(in srgb,var(--cyan) 12%,transparent); } .room-status-declined, .room-status-cancelled { color: #f87171; border-color: color-mix(in srgb,#f87171 38%,transparent); background: color-mix(in srgb,#f87171 12%,transparent); } /* ── Main content layout ── */ .or-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(16px, 2vw, 28px); align-items: start; padding-top: clamp(20px, 3vw, 36px); padding-bottom: clamp(32px, 5vw, 64px); } .or-content { display: grid; gap: 16px; min-width: 0; } /* ── Alert cards ── */ .or-alert { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-radius: 16px; border: 1px solid; font-size: 14px; } .or-alert i { font-size: 20px; flex-shrink: 0; margin-top: 2px; } .or-alert strong { display: block; font-size: 15px; font-weight: 900; margin-bottom: 4px; } .or-alert p { margin: 0; opacity: 0.8; line-height: 1.5; } .or-alert-ready { color: #4ade80; border-color: color-mix(in srgb, #4ade80 34%, transparent); background: color-mix(in srgb, #4ade80 8%, var(--surface)); } .or-alert-warning { color: #fb923c; border-color: color-mix(in srgb, #fb923c 34%, transparent); background: color-mix(in srgb, #fb923c 8%, var(--surface)); } .or-alert-pending { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 32%, transparent); background: color-mix(in srgb, var(--cyan) 8%, var(--surface)); } /* ── live video frame ── */ .or-bbb-frame { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ border-radius: 20px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--line)); box-shadow: 0 20px 60px rgba(0,0,0,0.28); } .or-bbb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Empty / not-ready state */ .or-bbb-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 320px; border-radius: 20px; border: 1px dashed color-mix(in srgb, var(--line) 80%, var(--cyan) 20%); background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 60%), var(--surface); text-align: center; padding: 40px 32px; } .or-bbb-empty i { font-size: 48px; color: color-mix(in srgb, var(--muted) 60%, transparent); } .or-bbb-empty strong { font-size: 18px; font-weight: 900; color: var(--text); } .or-bbb-empty p { max-width: 380px; color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; } /* ── Sidebar ── */ .or-sidebar { display: grid; gap: 14px; position: sticky; top: 90px; } .or-meta-card, .or-actions, .or-note-card { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface-strong, rgba(255,253,248,0.9)); box-shadow: var(--shadow-soft); } .or-meta-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; color: var(--muted); font-size: 11px; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; } .or-meta-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); font-size: 13px; font-weight: 700; color: var(--text); } .or-meta-row:last-child { border-bottom: 0; } .or-meta-row i { flex-shrink: 0; width: 14px; color: var(--cyan); margin-top: 2px; font-size: 12px; } /* Actions */ .or-actions { display: grid; gap: 8px; } .or-action-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-size: 13px; } /* Note card */ .or-note-card p { margin: 6px 0 0; font-size: 14px; color: var(--text); line-height: 1.55; font-style: italic; } /* ── Not-found / error state ── */ .or-not-found { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 50vh; text-align: center; padding: 40px 24px; } .or-not-found i { font-size: 52px; color: color-mix(in srgb, var(--muted) 60%, transparent); } .or-not-found h1 { margin: 0; font-size: clamp(24px, 4vw, 38px); } .or-not-found p { color: var(--muted); max-width: 400px; margin: 0; } /* ── Dark mode ── */ :root[data-theme="dark"] .or-meta-card, :root[data-theme="dark"] .or-actions, :root[data-theme="dark"] .or-note-card { background: rgba(255, 253, 248, 0.04); border-color: rgba(255, 255, 255, 0.09); } :root[data-theme="dark"] .or-bbb-empty { background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 58%), rgba(255, 253, 248, 0.03); } :root[data-theme="dark"] .or-alert-ready { background: color-mix(in srgb, #4ade80 6%, #030914); } :root[data-theme="dark"] .or-alert-warning { background: color-mix(in srgb, #fb923c 6%, #030914); } :root[data-theme="dark"] .or-alert-pending { background: color-mix(in srgb, var(--cyan) 6%, #030914); } /* ── Responsive ── */ @media (max-width: 860px) { .or-main { grid-template-columns: 1fr; } .or-sidebar { position: static; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .or-hero { padding-bottom: clamp(28px, 4vw, 44px); } .or-hero::before { opacity: 0.5; } } @media (max-width: 560px) { .or-sidebar { grid-template-columns: 1fr; } .or-bbb-empty { min-height: 200px; padding: 28px 20px; } .or-bbb-empty i { font-size: 36px; } } /* ═══════════════════════════════════════════════════════════════════════════ POST-BOOKING PANEL (.pbp-*) Shown in column 3 when the user already has a request on this slot. ═══════════════════════════════════════════════════════════════════════════ */ .pbp-shell { display: grid; gap: 14px; } /* ── Status card ── */ .pbp-status { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid; } .pbp-status i { font-size: 22px; flex-shrink: 0; margin-top: 1px; } .pbp-status-copy strong { display: block; font-size: 14px; font-weight: 900; margin-bottom: 5px; } .pbp-status-copy p { margin: 0; font-size: 13px; line-height: 1.5; opacity: 0.85; } /* Status color variants */ .pbp-status-requested { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 30%, transparent); background: color-mix(in srgb, var(--cyan) 8%, var(--surface)); } .pbp-status-accepted { color: #4ade80; border-color: color-mix(in srgb, #4ade80 30%, transparent); background: color-mix(in srgb, #4ade80 8%, var(--surface)); } .pbp-status-completed { color: var(--gold-bright); border-color: color-mix(in srgb, var(--gold) 30%, transparent); background: color-mix(in srgb, var(--gold) 8%, var(--surface)); } .pbp-status-declined, .pbp-status-cancelled { color: var(--muted); border-color: color-mix(in srgb, var(--muted) 26%, transparent); background: color-mix(in srgb, var(--muted) 6%, var(--surface)); } /* Payment-pending state gets a warm urgent tint */ .pbp-needs-payment { color: #fb923c; border-color: color-mix(in srgb, #fb923c 34%, transparent); background: color-mix(in srgb, #fb923c 10%, var(--surface)); } /* ── Booking summary card ── */ .pbp-booking-summary { display: grid; gap: 0; padding: 4px 0; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-strong, rgba(255,253,248,0.92)); overflow: hidden; } .pbp-summary-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); } .pbp-summary-row:last-child { border-bottom: 0; } .pbp-summary-row i { flex-shrink: 0; width: 14px; text-align: center; color: var(--cyan); font-size: 13px; } .pbp-summary-row > div { display: grid; gap: 1px; } .pbp-summary-label { font-size: 10px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .pbp-summary-row strong { font-size: 13px; font-weight: 800; color: var(--text); } .pbp-price-paid { color: var(--gold-bright); } .pbp-price-free { color: var(--cyan); } /* Payment warning strip */ .pbp-payment-warning { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; background: color-mix(in srgb, #fb923c 10%, var(--surface)); color: #fb923c; font-size: 12px; font-weight: 700; line-height: 1.45; } .pbp-payment-warning i { flex-shrink: 0; margin-top: 1px; } /* ── Primary CTA buttons ── */ .pbp-pay-btn, .pbp-room-btn { width: 100%; min-height: 48px; font-size: 14px; font-weight: 900; justify-content: center; } .pbp-pay-form { display: grid; } /* ── Secondary row ── */ .pbp-rebook-btn { cursor: pointer; } .pbp-edit-btn { cursor: pointer; } .office-edit-note { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 750; line-height: 1.35; } .office-edit-note i { color: var(--cyan); } .pbp-secondary { display: flex; gap: 8px; flex-wrap: wrap; } .pbp-secondary > * { flex: 1; justify-content: center; font-size: 12px; min-width: 120px; } /* ── Dark mode ── */ :root[data-theme="dark"] .pbp-booking-summary { background: rgba(255, 253, 248, 0.04); border-color: rgba(255, 255, 255, 0.09); } :root[data-theme="dark"] .pbp-summary-row { border-color: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .pbp-status-accepted { background: color-mix(in srgb, #4ade80 6%, #030914); } :root[data-theme="dark"] .pbp-status-requested { background: color-mix(in srgb, var(--cyan) 6%, #030914); } :root[data-theme="dark"] .pbp-status-completed { background: color-mix(in srgb, var(--gold) 6%, #030914); } :root[data-theme="dark"] .pbp-needs-payment { background: color-mix(in srgb, #fb923c 8%, #030914); } /* ════════════════════════════════════════════════════════════════════ MINIMAL SCHEDULING - tier list + time-slot grid (v20260524) ════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ SCHEDULING CONTROLS - 2026 STYLE Tier selection cards + time-slot chips, no visible browser radio ════════════════════════════════════════════════════════════════════ */ /* ── Tier list ── */ .tier-list { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; } .tier-row { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 10px; border: 1.5px solid var(--line); cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; position: relative; background: var(--surface); user-select: none; -webkit-tap-highlight-color: transparent; } /* Hide the browser radio entirely */ .tier-row input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* Custom left indicator dot */ .tier-row::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); background: transparent; transition: border-color 0.18s, background 0.18s, box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .tier-row:hover:not(.tier-locked)::before { border-color: var(--gold); } .tier-row.sel::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); scale: 1.15; } .tier-row:hover:not(.tier-locked) { border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 3%, var(--surface)); transform: translateY(-1px); box-shadow: 0 3px 12px color-mix(in srgb, var(--gold) 10%, transparent); } .tier-row.sel { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 5%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 12%, transparent), 0 4px 16px color-mix(in srgb, var(--gold) 12%, transparent); } .tier-row.tier-locked { opacity: 0.52; cursor: not-allowed; } .tier-row.tier-locked::before { border-color: var(--muted); } .tier-name { flex: 1; font-size: 13px; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; } .tier-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .tier-dur { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); } .tier-price { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .tier-price.tier-free { color: #34d399; } /* Rule badge */ .tr-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--muted); background: color-mix(in srgb, var(--gold) 8%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); border-radius: 100px; padding: 2px 8px; white-space: nowrap; flex-shrink: 0; letter-spacing: 0.01em; } .tr-badge-blocked { color: color-mix(in srgb, #fb923c 90%, var(--ink)); background: color-mix(in srgb, #fb923c 9%, transparent); border-color: color-mix(in srgb, #fb923c 28%, transparent); } /* ============================================================ Leader profile page - wide banner + admin-style tabs (2026) ============================================================ */ .leader-profile-shell { position: relative; padding-top: 0 !important; overflow: hidden; isolation: isolate; } .leader-profile-shell .back-link { position: absolute; top: 18px; left: 22px; z-index: 4; background: rgba(8, 14, 24, 0.42); color: #fff; padding: 6px 14px; border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-weight: 700; text-decoration: none; } .leader-profile-shell .back-link:hover { background: rgba(8, 14, 24, 0.62); } .leader-wide-banner { position: relative; width: calc(100% + 6rem); margin: -2.5rem -3rem 0 -3rem; height: clamp(180px, 28vw, 340px); overflow: hidden; border-radius: 0 0 28px 28px; } .leader-wide-banner-stage { position: absolute; inset: 0; background-image: var(--rabbi-banner, linear-gradient(135deg, var(--rabbi-start, #0077a8), var(--rabbi-end, #d7b65f))); background-size: cover; background-position: center; filter: saturate(1.05); transform: scale(1.02); } .leader-wide-banner-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 14, 24, 0) 35%, rgba(8, 14, 24, 0.55) 100%), linear-gradient(90deg, rgba(8, 14, 24, 0.45) 0%, rgba(8, 14, 24, 0) 50%); } .leader-banner-header { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 2.6vw, 2rem); align-items: end; padding: 1.4rem 0 1.6rem 0; margin-top: clamp(-90px, -9vw, -60px); z-index: 2; } .leader-banner-header .rabbi-hero-avatar { width: clamp(110px, 14vw, 168px); height: clamp(110px, 14vw, 168px); border-radius: 22px; border: 4px solid var(--panel, #fff); box-shadow: 0 18px 44px rgba(8, 14, 24, 0.28); /* --avatar is `url("...") center/cover` for photos, or a gradient for fallback - use the shorthand so both forms work. */ background: var(--avatar, linear-gradient(135deg, var(--rabbi-start, #0077a8), var(--rabbi-end, #d7b65f))) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; flex-shrink: 0; /* Kill the decorative pseudo-elements from the legacy circular-avatar styles */ } .leader-banner-header .rabbi-hero-avatar::before, .leader-banner-header .rabbi-hero-avatar::after { display: none !important; content: none !important; } .leader-banner-copy { min-width: 0; display: grid; gap: 0.55rem; } .leader-banner-copy .profile-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } /* Color-scheme name bubble next to the leader name */ .leader-theme-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.8rem 0.35rem 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 4px 16px rgba(8, 14, 24, 0.18); } .leader-theme-chip-swatch { width: 18px; height: 18px; border-radius: 999px; background: linear-gradient(135deg, var(--theme-start, #0077a8) 0%, var(--theme-accent, #18b7d9) 50%, var(--theme-end, #d7b65f) 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); flex-shrink: 0; } :root[data-theme="light"] .leader-theme-chip { background: rgba(8, 14, 24, 0.78); border-color: rgba(255, 255, 255, 0.18); color: #fff; } .leader-banner-copy h1 { margin: 0; font-size: clamp(1.55rem, 2.8vw, 2.3rem); line-height: 1.1; } .leader-banner-copy .rabbi-hero-meta { margin: 0; font-weight: 700; color: var(--muted, #5b6470); } .leader-banner-copy .rabbi-hero-note { margin: 0; max-width: 64ch; color: var(--text, #1f2933); } .leader-banner-copy .rabbi-profile-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; } /* Admin-style tab bar on the leader profile */ .leader-profile-tabs { margin-top: 1.4rem; } .leader-profile-tabs > .profile-tab-list.rabbi-console-tabs { position: sticky; top: 70px; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; margin: 0 0 1.2rem 0; border-radius: 18px; border: 1px solid var(--line, rgba(63, 127, 159, 0.16)); background: color-mix(in srgb, var(--panel, #fff) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 30px rgba(8, 14, 24, 0.06); } .leader-profile-tabs .profile-tab-button { flex: 0 1 auto; min-height: 38px; padding: 9px 16px; border-radius: 999px; font-weight: 800; border: 1px solid transparent; background: color-mix(in srgb, var(--surface, #eef4f2) 88%, transparent); color: var(--text, #1f2933); cursor: pointer; } .leader-profile-tabs .profile-tab-button:hover { border-color: var(--line, rgba(63, 127, 159, 0.28)); background: var(--panel, #fff); } .leader-profile-tabs .profile-tab-button.active { color: #fff; background: linear-gradient(135deg, var(--rabbi-start, var(--accent, #0077a8)), var(--rabbi-end, var(--accent-2, #d7b65f))); border-color: transparent; box-shadow: 0 10px 24px rgba(8, 14, 24, 0.14); } .leader-profile-tabs .tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); color: inherit; font-size: 0.75rem; font-weight: 800; } .leader-profile-tabs .profile-tab-panel { display: none; gap: 1.4rem; } .leader-profile-tabs .profile-tab-panel.active { display: grid; } /* Dark mode tints */ :root[data-theme="dark"] .leader-profile-tabs > .profile-tab-list.rabbi-console-tabs { background: rgba(17, 20, 15, 0.78); border-color: rgba(220, 232, 207, 0.14); } :root[data-theme="dark"] .leader-profile-tabs .profile-tab-button { background: rgba(220, 232, 207, 0.08); color: #dce8cf; border-color: rgba(220, 232, 207, 0.14); } :root[data-theme="dark"] .leader-profile-tabs .profile-tab-button:hover { background: rgba(220, 232, 207, 0.16); color: #fff; } :root[data-theme="dark"] .leader-banner-header .rabbi-hero-avatar { border-color: #11141a; } /* Hide the old sidebar / sections layout if any stale markup ships */ .leader-profile-shell .rabbi-profile-layout, .leader-profile-shell .rabbi-profile-sidebar { display: none !important; } /* Responsive */ @media (max-width: 720px) { .leader-wide-banner { width: calc(100% + 2rem); margin: -1.5rem -1rem 0 -1rem; border-radius: 0 0 18px 18px; height: clamp(150px, 38vw, 220px); } .leader-banner-header { grid-template-columns: 1fr; margin-top: -52px; text-align: left; } .leader-banner-header .rabbi-hero-avatar { width: 96px; height: 96px; border-radius: 22px; } .leader-profile-tabs > .profile-tab-list.rabbi-console-tabs { top: 60px; padding: 8px; overflow-x: auto; flex-wrap: nowrap; } .leader-profile-tabs .profile-tab-button { flex: 0 0 auto; white-space: nowrap; } } /* ============================================================ Tzedakah Bucks - wallet card, zone panel, modals (2026) ============================================================ */ .tzedakah-account-card { display: grid; gap: 1.1rem; padding: 1.3rem 1.3rem 1.6rem; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #0077a8) 8%, var(--panel, #fff)) 0%, var(--panel, #fff) 80%); box-shadow: 0 12px 32px rgba(8, 14, 24, 0.06); margin-bottom: 2.4rem; } .tzedakah-account-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; } .tzedakah-account-card-head .eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.72; } .tzedakah-account-card-head h3 { margin: 0.2rem 0 0.45rem; font-size: 1.2rem; } .tzedakah-account-card-head .orthodox-note { margin: 0; max-width: 52ch; } .tzedakah-balance-pill { display: grid; justify-items: end; gap: 0.2rem; padding: 0.7rem 1.1rem; border-radius: 16px; border: 1px solid var(--line); background: var(--surface, rgba(255, 255, 255, 0.7)); text-align: right; } .tzedakah-balance-pill small { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; } .tzedakah-balance-pill strong { font-size: 1.2rem; font-weight: 900; } .tzedakah-account-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; } .tzedakah-buy-trigger, .tzedakah-how-trigger { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.65rem 1.2rem; } .tzedakah-account-card-actions .link-button { margin-left: auto; font-weight: 700; color: var(--accent, #0077a8); text-decoration: none; background: none; border: none; cursor: pointer; } /* --- Tzedakah Zone tab content --- */ .tzedakah-zone-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 1.6rem; } @media (max-width: 820px) { .tzedakah-zone-grid { grid-template-columns: 1fr; } } .tzedakah-balance-card, .tzedakah-stat-card { padding: 1.3rem; border-radius: 20px; border: 1px solid var(--line); background: var(--panel, #fff); display: grid; gap: 0.5rem; align-content: start; } .tzedakah-balance-card { background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #0077a8) 14%, var(--panel, #fff)) 0%, var(--panel, #fff) 75%); box-shadow: 0 14px 36px rgba(8, 14, 24, 0.1); } .tzedakah-balance-card .eyebrow, .tzedakah-stat-card .eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.72; } .tzedakah-big-balance { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; line-height: 1.1; } .tzedakah-stat-value { font-size: 1.4rem; font-weight: 900; } .tzedakah-balance-card .primary-button { justify-self: start; margin-top: 0.6rem; } /* --- Transaction history --- */ .tzedakah-history-block { display: grid; gap: 0.8rem; } .tzedakah-history-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; } .tzedakah-history-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; padding: 0.85rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel, #fff); } .tzedakah-history-icon { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent, #0077a8) 10%, transparent); color: var(--accent, #0077a8); } .tzedakah-history-row.is-gift .tzedakah-history-icon { background: color-mix(in srgb, #d97757 12%, transparent); color: #d97757; } .tzedakah-history-body { min-width: 0; display: grid; gap: 0.15rem; } .tzedakah-history-body strong { font-weight: 800; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tzedakah-history-body small { opacity: 0.7; font-size: 0.78rem; } .tzedakah-history-amount { font-weight: 900; font-size: 1rem; } .tzedakah-history-amount.positive { color: #2f9e44; } .tzedakah-history-amount.negative { color: #d97757; } .tzedakah-history-empty { padding: 1rem 1.2rem; border: 1px dashed var(--line); border-radius: 14px; opacity: 0.75; text-align: center; list-style: none; } /* --- Modals --- */ .tzedakah-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; } .tzedakah-modal[hidden] { display: none; } .tzedakah-modal-scrim { position: absolute; inset: 0; background: rgba(8, 14, 24, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .tzedakah-modal-shell { position: relative; z-index: 1; width: min(620px, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.6rem; border-radius: 22px; background: var(--panel, #fff); box-shadow: 0 30px 60px rgba(8, 14, 24, 0.35); display: grid; gap: 1.2rem; } .tzedakah-modal-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: start; } .tzedakah-modal-head h2 { margin: 0.2rem 0; font-size: 1.4rem; } .tzedakah-modal-head .eyebrow { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; } .tzedakah-modal-head .icon-only { width: 38px; height: 38px; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } /* Buy grid */ .tzedakah-buy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; } .tzedakah-buy-option { display: grid; gap: 0.25rem; padding: 1.1rem 1.2rem; border-radius: 18px; border: 1.5px solid var(--line); background: var(--panel, #fff); text-align: left; cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; } .tzedakah-buy-option:hover { border-color: var(--accent, #0077a8); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(8, 14, 24, 0.12); } .tzedakah-buy-option.featured { border-color: var(--accent, #0077a8); background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #0077a8) 14%, var(--panel, #fff)) 0%, var(--panel, #fff) 80%); } .tzedakah-buy-dollars { font-size: 1.7rem; font-weight: 900; } .tzedakah-buy-bucks { font-weight: 700; opacity: 0.85; } .tzedakah-buy-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent, #0077a8); } .tzedakah-buy-foot { margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; opacity: 0.8; } /* How it works */ .tzedakah-how-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; } @media (max-width: 560px) { .tzedakah-how-steps, .tzedakah-buy-grid { grid-template-columns: 1fr; } } .tzedakah-how-steps article { padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid var(--line); background: var(--surface, color-mix(in srgb, var(--panel, #fff) 92%, transparent)); display: grid; gap: 0.35rem; } .tzedakah-how-icon { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent, #0077a8) 12%, transparent); color: var(--accent, #0077a8); font-size: 1.1rem; } .tzedakah-how-steps article h3 { margin: 0.2rem 0 0.1rem; font-size: 1rem; } .tzedakah-how-steps article p { margin: 0; font-size: 0.9rem; opacity: 0.85; } .tzedakah-how-foot { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: flex-end; } /* Dark mode tweaks */ :root[data-theme="dark"] .tzedakah-account-card, :root[data-theme="dark"] .tzedakah-balance-card, :root[data-theme="dark"] .tzedakah-stat-card, :root[data-theme="dark"] .tzedakah-history-row, :root[data-theme="dark"] .tzedakah-buy-option, :root[data-theme="dark"] .tzedakah-modal-shell, :root[data-theme="dark"] .tzedakah-how-steps article { background: rgba(17, 20, 15, 0.92); border-color: rgba(220, 232, 207, 0.14); } :root[data-theme="dark"] .tzedakah-balance-pill { background: rgba(220, 232, 207, 0.06); border-color: rgba(220, 232, 207, 0.14); } /* ── Time-slot chip grid ── */ .ts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-top: 14px; } .ts-grid.ts-readonly { pointer-events: none; } /* Base chip */ .ts-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 9px 6px 8px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease; position: relative; text-align: center; user-select: none; -webkit-tap-highlight-color: transparent; min-height: 58px; } /* Hide browser radio */ .ts-slot input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* Open state */ .ts-slot.ts-open { cursor: pointer; } .ts-slot.ts-open:hover { border-color: color-mix(in srgb, var(--gold) 60%, transparent); background: color-mix(in srgb, var(--gold) 4%, var(--surface)); transform: translateY(-2px); box-shadow: 0 4px 14px color-mix(in srgb, var(--gold) 14%, transparent); } /* Selected open */ .ts-slot.ts-open.sel { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent), 0 4px 18px color-mix(in srgb, var(--gold) 16%, transparent); transform: translateY(-2px); } /* Subtle selected tick in top-right corner */ .ts-slot.ts-open.sel::after { content: ""; position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 25%, transparent); } /* Booked / closed */ .ts-slot.ts-booked, .ts-slot.ts-closed { opacity: 0.35; cursor: not-allowed; filter: grayscale(0.4); } /* Yours */ .ts-slot.ts-yours { border-color: color-mix(in srgb, var(--cyan) 55%, transparent); background: color-mix(in srgb, var(--cyan) 6%, var(--surface)); cursor: default; } .ts-time { font-size: 13px; font-weight: 750; color: var(--ink); line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .ts-end { font-size: 10px; color: var(--muted); margin-top: 0; font-variant-numeric: tabular-nums; } /* Yours badge inside chip */ span.ts-yours { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; color: var(--cyan); margin-top: 3px; letter-spacing: 0.03em; text-transform: uppercase; } .ts-room { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--gold); margin-top: 4px; text-decoration: none; } .ts-room:hover { text-decoration: underline; } .ts-empty { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 14px 0 4px; } /* ── Left column quick-meta ── */ .slot-quick-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 12px; color: var(--muted); } .sqm-open { color: #34d399; font-weight: 700; } .slot-cal-link { margin-top: 10px; font-size: 12px; } /* ── Note optional label ── */ .note-optional { font-style: normal; font-weight: 400; font-size: 11px; color: var(--muted); margin-left: 4px; } /* ── Dark mode overrides ── */ :root[data-theme="dark"] .tier-row { background: rgba(255, 253, 248, 0.03); border-color: rgba(255, 255, 255, 0.09); } :root[data-theme="dark"] .tier-row:hover:not(.tier-locked), :root[data-theme="dark"] .tier-row.sel { background: color-mix(in srgb, var(--gold) 8%, #030914); } :root[data-theme="dark"] .ts-slot { background: rgba(255, 253, 248, 0.025); border-color: rgba(255, 255, 255, 0.09); } :root[data-theme="dark"] .ts-slot.ts-open:hover, :root[data-theme="dark"] .ts-slot.ts-open.sel { background: color-mix(in srgb, var(--gold) 9%, #030914); } :root[data-theme="dark"] .ts-slot.ts-yours { background: color-mix(in srgb, var(--cyan) 7%, #030914); } :root[data-theme="dark"] .tr-badge { background: color-mix(in srgb, var(--gold) 11%, #030914); } /* ── Responsive ── */ @media (max-width: 500px) { .ts-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; } .ts-slot { min-height: 52px; } .tier-row { flex-wrap: wrap; gap: 6px; } .tr-badge { font-size: 9px; } } /* Public rabbi booking cards: keep every rabbi on the same stable tier layout. */ .office-booking-card .tier-list { gap: 8px; margin-top: 0; min-width: 0; } .office-booking-card .tier-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-areas: "mark name meta" ". badge badge"; align-items: center; gap: 5px 9px; min-width: 0; overflow: hidden; } .office-booking-card .tier-row::before { grid-area: mark; width: 16px; height: 16px; } .office-booking-card .tier-name { grid-area: name; min-width: 0; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; word-break: normal; line-height: 1.2; } .office-booking-card .tier-meta { grid-area: meta; min-width: max-content; gap: 8px; } .office-booking-card .tr-badge { grid-area: badge; justify-self: start; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 620px) { .office-booking-card .tier-row { grid-template-columns: 18px minmax(0, 1fr); grid-template-areas: "mark name" ". meta" ". badge"; } .office-booking-card .tier-meta { justify-self: start; } } /* ════════════════════════════════════════════════════════════════════ RANK / REWARD SYSTEM (v20260524) ════════════════════════════════════════════════════════════════════ */ /* ── Nav rank dot (topMegaMenu) ── */ .nav-user-avatar-wrap { position: relative; display: inline-flex; align-items: center; } .nav-rank-dot { position: absolute; bottom: -3px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--rank-color, #888); border: 2px solid var(--surface, #fff); display: flex; align-items: center; justify-content: center; font-size: 7px; color: #fff; z-index: 25; box-shadow: 0 1px 4px rgba(0,0,0,0.3); transition: transform 0.2s; } .nav-rank-dot:hover { transform: scale(1.25); cursor: default; } .nav-rank-dot i { font-size: 7px; } /* ── Sidebar rank badge (me.js) ── */ .zone-sidebar-avatar-wrap { position: relative; display: inline-flex; align-items: center; } .zone-sidebar-rank-dot { position: absolute; bottom: -2px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--rank-color, #888); border: 2.5px solid var(--surface); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .zone-sidebar-rank-label { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--rank-color, var(--gold)); letter-spacing: 0.01em; margin-top: 2px; } /* ── Rank hero card ── */ .rank-hero { display: flex; align-items: flex-start; gap: 20px; padding: 24px; border-radius: 16px; border: 2px solid var(--rank-color, var(--gold)); background: color-mix(in srgb, var(--rank-color, var(--gold)) 6%, var(--surface)); margin-bottom: 20px; position: relative; overflow: hidden; } .rank-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--rank-color, var(--gold)) 15%, transparent) 0%, transparent 60%); pointer-events: none; } .rank-hero-orb { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; background: var(--rank-color, var(--gold)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--rank-color, var(--gold)) 20%, transparent), 0 8px 28px color-mix(in srgb, var(--rank-color, var(--gold)) 35%, transparent); } .rank-hero-orb i { font-size: 24px; } .rank-hero-num { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; opacity: 0.88; } .rank-hero-copy { flex: 1; min-width: 0; } .rank-hero-tier { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rank-color, var(--gold)); margin-bottom: 4px; } .rank-hero-name { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin: 0 0 2px; line-height: 1.1; } .rank-hero-hebrew { font-size: 18px; color: var(--muted); margin-bottom: 8px; font-family: serif; } .rank-hero-desc { font-size: 13px; color: var(--text); line-height: 1.6; margin-bottom: 14px; } .rank-xp-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; } .rank-xp-label { font-size: 18px; font-weight: 800; color: var(--rank-color, var(--gold)); font-variant-numeric: tabular-nums; } .rank-xp-next, .rank-xp-max { font-size: 12px; color: var(--muted); } .rank-xp-next strong { color: var(--ink); } .rank-xp-bar-wrap { height: 6px; border-radius: 100px; background: color-mix(in srgb, var(--rank-color, var(--gold)) 18%, var(--line)); overflow: hidden; } .rank-xp-bar { height: 100%; width: var(--pct, 0%); border-radius: 100px; background: var(--rank-color, var(--gold)); transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 0 8px color-mix(in srgb, var(--rank-color, var(--gold)) 50%, transparent); } /* ── XP breakdown card ── */ .rank-breakdown { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 20px; } .rank-breakdown-title { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 12px; display: flex; align-items: center; gap: 7px; } .rank-breakdown-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .rank-breakdown-list li { display: grid; grid-template-columns: 18px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .rank-breakdown-list li:last-child { border-bottom: none; } .rank-breakdown-list i { font-size: 13px; flex-shrink: 0; } .rbd-label { color: var(--text); } .rbd-value { color: var(--muted); font-size: 12px; } .rbd-xp { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .rbd-xp-dim { font-weight: 400; color: var(--muted); font-style: italic; } .rank-breakdown-total { margin: 12px 0 0; font-size: 13px; color: var(--muted); text-align: right; } .rank-breakdown-total strong { color: var(--ink); font-size: 15px; } /* ── Awards section divider ── */ .rank-awards-divider { display: flex; align-items: center; gap: 10px; margin: 24px 0 14px; } .rank-awards-divider::before, .rank-awards-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .rank-awards-divider span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); white-space: nowrap; display: flex; align-items: center; gap: 6px; } /* Award card update - icon + text */ .award-card { display: flex; align-items: flex-start; gap: 12px; } .award-card i { font-size: 18px; color: var(--gold); flex-shrink: 0; margin-top: 2px; } .award-card div { min-width: 0; } /* ── Journey grid ── */ .rank-journey { margin-bottom: 24px; } .rank-journey-title { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 14px; display: flex; align-items: center; gap: 7px; } .rj-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } /* Tier section header inside the list */ li.rj-tier-label { display: flex; align-items: center; gap: 8px; padding: 16px 0 6px; } li.rj-tier-label:first-child { padding-top: 0; } li.rj-tier-label span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); white-space: nowrap; } li.rj-tier-label::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* Level cell */ li.rj-cell { display: grid; grid-template-columns: 36px 28px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); transition: border-color 0.15s, background 0.15s; position: relative; } /* Reached */ li.rj-cell.rj-reached { border-color: color-mix(in srgb, var(--rank-color, #888) 30%, var(--line)); } /* Current */ li.rj-cell.rj-current { border-color: var(--rank-color, var(--gold)); background: color-mix(in srgb, var(--rank-color, var(--gold)) 6%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rank-color, var(--gold)) 14%, transparent), 0 4px 16px color-mix(in srgb, var(--rank-color, var(--gold)) 14%, transparent); } /* Locked */ li.rj-cell.rj-locked { opacity: 0.45; filter: grayscale(0.5); } /* Max (36) */ li.rj-cell.rj-max { border-color: var(--rank-color, #f59e0b); background: color-mix(in srgb, #f59e0b 8%, var(--surface)); } .rj-orb { width: 36px; height: 36px; border-radius: 50%; background: var(--rank-color, #888); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; box-shadow: 0 2px 8px color-mix(in srgb, var(--rank-color, #888) 35%, transparent); } li.rj-cell.rj-locked .rj-orb { background: var(--line); box-shadow: none; } .rj-orb i { font-size: 14px; } .rj-num { font-size: 11px; font-weight: 800; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; } li.rj-cell.rj-reached .rj-num, li.rj-cell.rj-current .rj-num { color: var(--rank-color, var(--gold)); } .rj-name { font-size: 13px; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rj-hebrew { font-size: 13px; color: var(--muted); font-family: serif; text-align: right; white-space: nowrap; } .rj-you { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rank-color, var(--gold)); white-space: nowrap; background: color-mix(in srgb, var(--rank-color, var(--gold)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--rank-color, var(--gold)) 30%, transparent); border-radius: 100px; padding: 2px 8px; } .rj-xp { font-size: 10px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } /* ── Tier color classes (applied to outer wrappers) ── */ .rank-tier-copper { --rank-color: #b87333; } .rank-tier-silver { --rank-color: #94a3b8; } .rank-tier-gold { --rank-color: #d4af37; } .rank-tier-emerald { --rank-color: #10b981; } .rank-tier-sapphire { --rank-color: #3b82f6; } .rank-tier-amethyst { --rank-color: #8b5cf6; } .rank-tier-hidden { --rank-color: #f59e0b; } /* ── Compact inline rank badge (nav + elsewhere) ── */ .rank-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 5px; border-radius: 100px; background: color-mix(in srgb, var(--rank-color, #888) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--rank-color, #888) 30%, transparent); font-size: 11px; font-weight: 700; color: var(--rank-color, #888); white-space: nowrap; text-decoration: none; } .rank-badge i { font-size: 11px; } .rank-badge-lvl { opacity: 0.75; font-size: 10px; } /* ── Dark mode ── */ :root[data-theme="dark"] .rank-hero { background: color-mix(in srgb, var(--rank-color, var(--gold)) 7%, #030914); border-color: color-mix(in srgb, var(--rank-color, var(--gold)) 55%, transparent); } :root[data-theme="dark"] .rank-breakdown, :root[data-theme="dark"] li.rj-cell { background: rgba(255, 253, 248, 0.03); border-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] li.rj-cell.rj-reached { border-color: color-mix(in srgb, var(--rank-color, #888) 35%, rgba(255,255,255,0.08)); } :root[data-theme="dark"] li.rj-cell.rj-current { background: color-mix(in srgb, var(--rank-color, var(--gold)) 8%, #030914); border-color: var(--rank-color, var(--gold)); } :root[data-theme="dark"] li.rj-cell.rj-max { background: color-mix(in srgb, #f59e0b 9%, #030914); } :root[data-theme="dark"] .nav-rank-dot { border-color: #030914; } :root[data-theme="dark"] .zone-sidebar-rank-dot { border-color: #030914; } /* ── Responsive ── */ @media (max-width: 640px) { .rank-hero { flex-direction: column; align-items: center; text-align: center; } .rank-hero-orb { width: 68px; height: 68px; } .rank-hero-orb i { font-size: 20px; } .rank-hero-name { font-size: 22px; } .rank-xp-row { justify-content: center; } .rj-cell { grid-template-columns: 30px 24px 1fr auto; } .rj-hebrew { display: none; } .rank-breakdown-list li { grid-template-columns: 16px 1fr auto; } .rbd-value { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ PERSONAL ZONE - INBOX / LIBRARY / AWARDS EXPLAINER ═══════════════════════════════════════════════════════════════════════════ */ /* Shared section divider header used in Inbox and Library */ .inbox-section-header { display: flex; align-items: center; gap: 10px; margin: 28px 0 6px; padding-bottom: 10px; border-bottom: 1.5px solid var(--line); } .inbox-section-header h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; display: flex; align-items: center; gap: 7px; flex: 1; } .inbox-section-header h3 i { color: var(--cyan); font-size: 14px; } .inbox-section-header .metric { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-strong); border: 1px solid var(--line); border-radius: 20px; padding: 2px 10px; } .inbox-section-divider { margin-top: 40px; padding-top: 12px; border-top: 1.5px solid var(--line); } .inbox-sub-note { margin: 0 0 12px; font-size: 13px; } .inbox-notif-list { margin-bottom: 0; } .inbox-messages-note { margin-bottom: 12px; } /* Account interests section */ .account-interests-header { margin-top: 36px; } .account-interests-form { margin-top: 8px; max-width: 560px; } /* Awards explainer card */ .awards-explainer-card { background: var(--surface-strong); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; margin: 20px 0; } .awards-explainer-card h3 { font-size: 15px; font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; color: var(--ink); } .awards-explainer-card h3 i { color: var(--cyan); font-size: 15px; } .awards-explainer-card > p { font-size: 13.5px; color: var(--muted); margin: 0 0 18px; line-height: 1.55; } /* XP source grid inside explainer */ .awards-xp-source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .awards-xp-source { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; } .awards-xp-source > i { color: var(--cyan); font-size: 16px; margin-top: 2px; flex-shrink: 0; width: 18px; text-align: center; } .awards-xp-source > div { display: flex; flex-direction: column; gap: 2px; } .awards-xp-source strong { font-size: 13px; font-weight: 700; color: var(--ink); } .awards-xp-source span { font-size: 12.5px; color: var(--muted); } .awards-xp-source small { font-size: 11.5px; color: var(--soft); margin-top: 3px; line-height: 1.4; } /* Tier explainer list */ .awards-tiers-explainer { margin-top: 0; } .awards-tier-explainer-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .awards-tier-row { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 15px; border-left: 4px solid var(--rank-color, var(--line)); } .awards-tier-swatch { width: 12px; height: 12px; border-radius: 50%; background: var(--rank-color, var(--muted)); flex-shrink: 0; margin-top: 4px; } .awards-tier-row > div { display: flex; flex-direction: column; gap: 3px; } .awards-tier-row strong { font-size: 13px; font-weight: 700; color: var(--ink); } .awards-tier-row p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.45; } /* Tier color vars for row borders */ .awards-tier-row.rank-tier-copper { --rank-color: #b87333; } .awards-tier-row.rank-tier-silver { --rank-color: #9ca3af; } .awards-tier-row.rank-tier-gold { --rank-color: #d97706; } .awards-tier-row.rank-tier-emerald { --rank-color: #10b981; } .awards-tier-row.rank-tier-sapphire { --rank-color: #3b82f6; } .awards-tier-row.rank-tier-amethyst { --rank-color: #8b5cf6; } .awards-tier-row.rank-tier-hidden { --rank-color: #f59e0b; } /* Dark mode adjustments */ :root[data-theme="dark"] .awards-explainer-card { background: color-mix(in srgb, var(--surface) 60%, #030914); } :root[data-theme="dark"] .awards-xp-source, :root[data-theme="dark"] .awards-tier-row { background: color-mix(in srgb, var(--surface) 40%, #030914); } /* ── Zone card theme picker extras ─────────────────────────────────────── */ .zone-theme-header .zone-theme-current-name { font-size: 12px; font-weight: 700; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--cyan) 25%, var(--line)); border-radius: 20px; padding: 2px 10px; white-space: nowrap; } .zone-card-theme-form { margin-top: 10px; } .zone-theme-save-row { margin-top: 14px; align-items: center; gap: 14px; } .zone-theme-save-row .orthodox-note { margin: 0; font-size: 12px; } .theme-selected-preview small { font-size: 12px; color: var(--muted); line-height: 1.35; display: block; margin-top: 1px; } @media (max-width: 640px) { .awards-xp-source-grid { grid-template-columns: 1fr; } .inbox-section-header { flex-wrap: wrap; } } .search input, .search input:focus, .search input:focus-visible, .admin-list-controls .admin-rabbi-search input, .admin-list-controls .admin-rabbi-search input:focus, .recorded-search input, .recorded-search input:focus, .rabbi-search input, .rabbi-search input:focus, .zone-message-search input, .zone-message-search input:focus { border: 0 !important; box-shadow: none !important; background: transparent !important; outline: 0 !important; } /* ============================================================ PAYMENT DASHBOARD - 2026 design ============================================================ */ /* Tab */ .payments-panel { display: flex; flex-direction: column; gap: 28px; } /* ── Connect banner ─────────────────────────────────────────── */ .pay-connect-banner { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding: 28px 32px; border: 1px solid color-mix(in srgb, var(--cyan) 50%, var(--gold)); border-radius: 18px; background: radial-gradient(ellipse 80% 120% at 0% 50%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 70%), var(--surface); overflow: hidden; } .pay-connect-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 6%, transparent), transparent 60%); pointer-events: none; } .pay-connect-glow { position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 20%, transparent), transparent 70%); pointer-events: none; } .pay-connect-meta { position: relative; z-index: 1; } .pay-connect-meta h3 { font-size: 18px; font-weight: 900; letter-spacing: -.3px; margin: 0 0 6px; } .pay-connect-meta p { color: var(--muted); font-size: 13px; margin: 0; max-width: 520px; } .pay-connect-actions { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .pay-connect-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 950; letter-spacing: .4px; text-transform: uppercase; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); } .pay-status-not-connected { color: var(--muted); background: color-mix(in srgb, var(--surface) 60%, var(--border)); } .pay-status-pending { color: #f59e0b; background: color-mix(in srgb, #f59e0b 10%, var(--surface)); } .pay-status-active { color: #22c55e; background: color-mix(in srgb, #22c55e 10%, var(--surface)); } .pay-status-restricted { color: #ef4444; background: color-mix(in srgb, #ef4444 10%, var(--surface)); } .pay-connect-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 12px; font-size: 13px; font-weight: 900; letter-spacing: -.2px; background: linear-gradient(135deg, var(--cyan), color-mix(in srgb, var(--cyan) 60%, var(--gold))); color: #030914; border: 0; cursor: pointer; transition: opacity .15s, transform .15s; white-space: nowrap; } .pay-connect-btn:hover { opacity: .88; transform: translateY(-1px); } .pay-connect-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .pay-connect-note { font-size: 11px; color: var(--muted); font-weight: 700; } /* ── Summary stats ──────────────────────────────────────────── */ .pay-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 900px) { .pay-stats-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .pay-stats-row { grid-template-columns: 1fr; } } .pay-stat-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; transition: border-color .2s; } .pay-stat-card:hover { border-color: color-mix(in srgb, var(--cyan) 40%, var(--border)); } .pay-stat-icon { font-size: 20px; color: var(--cyan); margin-bottom: 4px; } .pay-stat-icon.gold { color: var(--gold); } .pay-stat-icon.green { color: #22c55e; } .pay-stat-icon.amber { color: #f59e0b; } .pay-stat-amount { font-size: 26px; font-weight: 950; letter-spacing: -1px; line-height: 1; } .pay-stat-label { font-size: 11px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; } .pay-stat-sub { font-size: 11px; color: var(--muted); } .pay-stat-accent { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; border-radius: 0 0 16px 16px; background: var(--cyan); } .pay-stat-accent.gold { background: var(--gold); } .pay-stat-accent.green { background: #22c55e; } .pay-stat-accent.amber { background: #f59e0b; } /* ── Hold notice ────────────────────────────────────────────── */ .pay-hold-notice { display: flex; align-items: flex-start; gap: 16px; padding: 18px 22px; border: 1px solid color-mix(in srgb, #f59e0b 40%, var(--border)); border-radius: 14px; background: color-mix(in srgb, #f59e0b 6%, var(--surface)); font-size: 13px; line-height: 1.6; } .pay-hold-icon { font-size: 18px; color: #f59e0b; flex-shrink: 0; margin-top: 2px; } .pay-hold-text strong { color: var(--text); font-weight: 900; display: block; margin-bottom: 3px; } .pay-hold-text p { margin: 0; color: var(--muted); } /* ── Cancellation policy ────────────────────────────────────── */ .pay-policy-card { padding: 20px 24px; border: 1px solid color-mix(in srgb, #ef4444 30%, var(--border)); border-radius: 14px; background: color-mix(in srgb, #ef4444 4%, var(--surface)); } .pay-policy-card h4 { margin: 0 0 8px; font-size: 14px; font-weight: 900; display: flex; align-items: center; gap: 8px; } .pay-policy-card h4 i { color: #ef4444; } .pay-policy-list { margin: 0; padding-left: 20px; color: var(--muted); font-size: 12.5px; line-height: 1.8; } .pay-policy-list li strong { color: var(--text); } /* ── Transaction list ───────────────────────────────────────── */ .pay-tx-section h3 { font-size: 15px; font-weight: 900; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; } .pay-tx-section h3 .pay-tx-count { font-size: 11px; font-weight: 950; background: color-mix(in srgb, var(--cyan) 15%, var(--surface)); color: var(--cyan); padding: 3px 8px; border-radius: 999px; } .pay-tx-empty { padding: 32px 24px; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: 14px; font-size: 13px; } .pay-tx-list { display: flex; flex-direction: column; gap: 10px; } .pay-tx-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); transition: border-color .15s, background .15s; } .pay-tx-row:hover { border-color: color-mix(in srgb, var(--cyan) 30%, var(--border)); background: color-mix(in srgb, var(--cyan) 3%, var(--surface)); } .pay-tx-type-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .pay-tx-type-donation { background: color-mix(in srgb, var(--gold) 14%, var(--surface)); color: var(--gold); } .pay-tx-type-office { background: color-mix(in srgb, var(--cyan) 14%, var(--surface)); color: var(--cyan); } .pay-tx-type-recurring { background: color-mix(in srgb, #a855f7 14%, var(--surface)); color: #a855f7; } .pay-tx-body { min-width: 0; } .pay-tx-title { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pay-tx-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } .pay-tx-amount { font-size: 15px; font-weight: 950; letter-spacing: -.5px; white-space: nowrap; } .pay-tx-amount.positive { color: #22c55e; } .pay-tx-badge { font-size: 10px; font-weight: 950; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; } .pay-tx-badge-held { background: color-mix(in srgb, #f59e0b 16%, var(--surface)); color: #f59e0b; border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent); } .pay-tx-badge-available { background: color-mix(in srgb, #22c55e 16%, var(--surface)); color: #22c55e; border: 1px solid color-mix(in srgb, #22c55e 30%, transparent); } .pay-tx-badge-pending { background: color-mix(in srgb, var(--cyan) 16%, var(--surface)); color: var(--cyan); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); } .pay-tx-badge-refunded { background: color-mix(in srgb, #ef4444 16%, var(--surface)); color: #ef4444; border: 1px solid color-mix(in srgb, #ef4444 30%, transparent); } /* ── Legal agreement modal ──────────────────────────────────── */ .pay-legal-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(3, 9, 20, .82); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(6px); } .pay-legal-modal { position: relative; width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column; border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--gold)); border-radius: 22px; background: var(--card); overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.6); } .pay-legal-header { padding: 28px 32px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .pay-legal-header h2 { margin: 0 0 6px; font-size: 20px; font-weight: 950; letter-spacing: -.4px; display: flex; align-items: center; gap: 10px; } .pay-legal-header h2 i { color: var(--cyan); } .pay-legal-header p { margin: 0; color: var(--muted); font-size: 13px; } .pay-legal-body { padding: 24px 32px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; } .pay-legal-section { padding: 16px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .pay-legal-section h4 { margin: 0 0 8px; font-size: 13px; font-weight: 900; display: flex; align-items: center; gap: 8px; } .pay-legal-section h4 i { color: var(--cyan); font-size: 12px; } .pay-legal-section p, .pay-legal-section ul { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.7; } .pay-legal-section ul { padding-left: 18px; } .pay-legal-section ul li { margin-bottom: 4px; } .pay-legal-section ul li strong { color: var(--text); } .pay-legal-checklist { display: flex; flex-direction: column; gap: 10px; } .pay-legal-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 12.5px; color: var(--muted); line-height: 1.5; } .pay-legal-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--cyan); flex-shrink: 0; margin-top: 1px; cursor: pointer; } .pay-legal-check strong { color: var(--text); display: block; font-size: 12px; font-weight: 900; } .pay-legal-footer { padding: 20px 32px 28px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .pay-legal-footer .primary-button { flex: 1; justify-content: center; } .pay-legal-footer .ghost-button { white-space: nowrap; } .pay-legal-stripe-badge { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--cyan) 25%, var(--border)); border-radius: 10px; font-size: 11px; font-weight: 900; color: var(--muted); white-space: nowrap; } .pay-legal-stripe-badge i { color: #635bff; font-size: 13px; } /* ── Fee transparency ───────────────────────────────────────── */ .pay-fee-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 12.5px; border-bottom: 1px solid var(--border); } .pay-fee-row:last-child { border-bottom: 0; } .pay-fee-row .muted { color: var(--muted); } .pay-fee-row strong { font-weight: 900; } .pay-fee-you { color: #22c55e; font-weight: 950; } /* ── Next payout countdown ──────────────────────────────────── */ .pay-next-payout { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border: 1px solid color-mix(in srgb, #22c55e 30%, var(--border)); border-radius: 12px; background: color-mix(in srgb, #22c55e 5%, var(--surface)); font-size: 13px; } .pay-next-payout i { color: #22c55e; font-size: 16px; flex-shrink: 0; } .pay-next-payout strong { font-weight: 900; } .pay-next-payout span { color: var(--muted); font-size: 12px; } :root[data-theme="light"] .pay-connect-banner { background: radial-gradient(ellipse 80% 120% at 0% 50%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 70%), #f8fafc; } /* Light-mode contrast repair for dark-first live and daily widgets. */ :root[data-theme="light"] .live-streaming-panel, :root[data-theme="light"] .on-table-full-page { opacity: 1 !important; color: var(--ink) !important; background: linear-gradient(135deg, rgba(255, 255, 252, 0.97), rgba(247, 252, 255, 0.94)), radial-gradient(circle at 16% 0%, rgba(217, 180, 90, 0.18), transparent 30%), radial-gradient(circle at 86% 8%, rgba(0, 191, 232, 0.12), transparent 32%) !important; border-color: color-mix(in srgb, var(--gold) 44%, var(--line)) !important; } :root[data-theme="light"] .live-streaming-panel .live-streaming-heading h1, :root[data-theme="light"] .live-streaming-panel .section-title-row h2 { color: var(--ink) !important; text-shadow: none !important; } :root[data-theme="light"] .live-streaming-panel .live-streaming-heading p, :root[data-theme="light"] .live-streaming-panel .row-meta { color: var(--muted) !important; } :root[data-theme="light"] .live-streaming-panel .eyebrow { color: var(--gold) !important; } :root[data-theme="light"] .live-stream-card { background: rgba(255, 255, 252, 0.98) !important; border-color: rgba(168, 128, 45, 0.22) !important; box-shadow: 0 18px 42px rgba(7, 17, 27, 0.14) !important; } :root[data-theme="light"] .live-card-thumbnail { background: linear-gradient(180deg, rgba(4, 7, 14, 0.06), rgba(4, 7, 14, 0.72)), var(--live-thumb, radial-gradient(circle at 30% 20%, rgba(217, 180, 90, 0.42), transparent 28%), linear-gradient(135deg, #4d2034, #143b3c)) !important; background-size: cover !important; background-position: center !important; } :root[data-theme="light"] .live-card-body { background: linear-gradient(180deg, rgba(255, 255, 252, 0.99), rgba(246, 250, 251, 0.96)) !important; color: var(--ink) !important; } :root[data-theme="light"] .live-card-body h3, :root[data-theme="light"] .live-card-rabbi-row strong { color: var(--ink) !important; text-shadow: none !important; } :root[data-theme="light"] .live-card-rabbi-row span, :root[data-theme="light"] .live-viewer-count { color: var(--muted) !important; } :root[data-theme="light"] .live-card-avatar { color: #fff !important; border-color: color-mix(in srgb, var(--gold) 78%, white 18%) !important; } :root[data-theme="light"] .open-table-cta { color: var(--ink) !important; background: linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(248, 241, 219, 0.92)) !important; border-color: rgba(185, 147, 66, 0.34) !important; box-shadow: 0 14px 34px rgba(7, 17, 27, 0.12) !important; } :root[data-theme="light"] .open-table-cta i, :root[data-theme="light"] .open-table-cta strong { color: color-mix(in srgb, var(--gold) 84%, #5c430f) !important; } :root[data-theme="light"] .open-table-cta span { color: var(--muted) !important; } :root[data-theme="light"] .daily-dashboard-card { background: rgba(255, 255, 252, 0.94) !important; border-color: color-mix(in srgb, var(--gold) 30%, var(--line)) !important; color: var(--ink) !important; box-shadow: 0 18px 46px rgba(7, 17, 27, 0.12) !important; } :root[data-theme="light"] .daily-dashboard-card:hover { box-shadow: 0 22px 54px rgba(7, 17, 27, 0.15) !important; } :root[data-theme="light"] .daily-dashboard-card .card-header, :root[data-theme="light"] .daily-dashboard-card .card-footer { border-color: rgba(168, 128, 45, 0.18) !important; } :root[data-theme="light"] .daily-dashboard-card .card-header h3, :root[data-theme="light"] .daily-location-bar strong, :root[data-theme="light"] .parasha-name, :root[data-theme="light"] .study-title { color: var(--ink) !important; } :root[data-theme="light"] .card-drag-handle, :root[data-theme="light"] .daily-fav-btn, :root[data-theme="light"] .dz-edit-btn { color: rgba(7, 17, 27, 0.48) !important; } :root[data-theme="light"] .card-drag-handle:hover, :root[data-theme="light"] .daily-fav-btn:hover, :root[data-theme="light"] .dz-edit-btn:hover { color: var(--gold) !important; background: rgba(168, 128, 45, 0.08) !important; } :root[data-theme="light"] .shabbat-pill, :root[data-theme="light"] .shabbat-parasha-row, :root[data-theme="light"] .study-track-box, :root[data-theme="light"] .zman-row, :root[data-theme="light"] .daily-location-form .form-input-group input { background: rgba(7, 17, 27, 0.035) !important; border-color: rgba(7, 17, 27, 0.08) !important; } :root[data-theme="light"] .zman-row:hover, :root[data-theme="light"] .study-track-box:hover { background: rgba(0, 191, 232, 0.08) !important; border-color: rgba(0, 191, 232, 0.16) !important; } :root[data-theme="light"] .shabbat-pill small, :root[data-theme="light"] .zman-label, :root[data-theme="light"] .study-hebrew, :root[data-theme="light"] .daily-location-status, :root[data-theme="light"] .daily-location-bar { color: var(--muted) !important; } :root[data-theme="light"] .shabbat-pill strong, :root[data-theme="light"] .zman-time, :root[data-theme="light"] .daily-location-form .form-input-group input { color: var(--ink) !important; } :root[data-theme="light"] .candle-pill strong, :root[data-theme="light"] .parasha-badge, :root[data-theme="light"] .parasha-label, :root[data-theme="light"] .study-track-header strong { color: color-mix(in srgb, var(--gold) 86%, #6b4d12) !important; } :root[data-theme="light"] .havdalah-pill strong, :root[data-theme="light"] .zman-group-label, :root[data-theme="light"] .track-cyan .study-track-header strong, :root[data-theme="light"] .track-teal .study-track-header strong { color: color-mix(in srgb, var(--cyan) 80%, #006b80) !important; } :root[data-theme="light"] .shabbat-holiday-chip, :root[data-theme="light"] .announce-chip { background: rgba(185, 147, 66, 0.12) !important; border-color: rgba(185, 147, 66, 0.24) !important; color: color-mix(in srgb, var(--gold) 80%, #5c430f) !important; box-shadow: 0 8px 22px rgba(7, 17, 27, 0.08) !important; } /* ── Live Question Block (user side, rabbi.js) ──────────────────────────── */ .live-question-area { margin-top: 1rem; } /* submission form - reuse .chat-compose styles but with a label */ .live-q-label { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--accent-2, #a78bfa); margin-bottom: .5rem; } /* Queued / answered / dismissed block wrapper */ .live-q-block { border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 14px; padding: 1rem 1.25rem; margin-top: .75rem; background: var(--card-bg, rgba(255,255,255,.03)); } .live-q-status-row { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; margin-bottom: .6rem; } .live-q-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .75rem; border-radius: 99px; font-size: .78rem; font-weight: 700; letter-spacing: .03em; } .live-q-badge-queued { background: rgba(234,179,8,.12); color: #facc15; border: 1px solid rgba(234,179,8,.25); } .live-q-badge-answered { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.25); } .live-q-badge-dismissed { background: rgba(148,163,184,.08); color: var(--muted, #94a3b8); border: 1px solid rgba(148,163,184,.15); } .live-q-meta { font-size: .78rem; color: var(--muted, #94a3b8); } .live-q-body { font-size: .95rem; line-height: 1.55; margin: 0 0 .75rem; color: var(--text, #e2e8f0); } .live-q-answered .live-q-body { color: var(--muted, #94a3b8); font-style: italic; } .live-q-answered { border-color: rgba(34,197,94,.18); background: rgba(34,197,94,.04); } .live-q-queued .live-question-edit-form { margin-top: .5rem; } /* ── Leader Live Queue Popup (rabbi-admin.js) ───────────────────────────── */ #liveQPopupContainer { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; width: 380px; max-width: calc(100vw - 2rem); font-size: .9rem; } .lq-popup { background: #0e1628; border: 1px solid rgba(139,92,246,.3); border-radius: 18px; box-shadow: 0 8px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(139,92,246,.15); overflow: hidden; transition: box-shadow .25s; } .lq-popup:hover { box-shadow: 0 12px 48px rgba(0,0,0,.75), 0 0 0 1px rgba(139,92,246,.3); } .lq-popup-header { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; background: linear-gradient(90deg, rgba(139,92,246,.18) 0%, rgba(59,130,246,.12) 100%); cursor: pointer; user-select: none; border-bottom: 1px solid rgba(255,255,255,.06); } .lq-popup-icon { display: flex; align-items: center; gap: .4rem; color: #a78bfa; font-size: 1rem; } .lq-popup-title { font-weight: 700; font-size: .88rem; color: #e2e8f0; flex: 1; } .lq-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; background: #8b5cf6; color: #fff; font-size: .75rem; font-weight: 800; border-radius: 99px; transition: transform .2s, background .2s; } .lq-badge-flash { animation: lqFlash .7s ease 2; } @keyframes lqFlash { 0%,100% { background: #8b5cf6; transform: scale(1); } 50% { background: #22c55e; transform: scale(1.25); } } .lq-popup-toggle { background: none; border: none; color: var(--muted, #94a3b8); cursor: pointer; padding: .2rem .3rem; font-size: .85rem; border-radius: 6px; transition: color .15s, background .15s; } .lq-popup-toggle:hover { color: #e2e8f0; background: rgba(255,255,255,.07); } .lq-popup-body { max-height: 420px; overflow-y: auto; transition: max-height .3s ease, opacity .3s ease; } .lq-popup.lq-collapsed .lq-popup-body { max-height: 0; opacity: 0; pointer-events: none; } .lq-list { padding: .5rem; display: flex; flex-direction: column; gap: .5rem; } .lq-item { padding: .8rem 1rem; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); transition: border-color .2s, background .2s; } .lq-item.lq-pinned { border-color: rgba(251,191,36,.25); background: rgba(251,191,36,.04); } .lq-item.lq-status-answered { opacity: .65; } .lq-item.lq-status-dismissed { opacity: .4; } .lq-item-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; flex-wrap: wrap; } .lq-learner { font-size: .82rem; color: #e2e8f0; flex: 1; } .lq-status-chip { font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; } .lq-chip-queued { background: rgba(234,179,8,.15); color: #facc15; } .lq-chip-answered { background: rgba(34,197,94,.15); color: #4ade80; } .lq-chip-dismissed{ background: rgba(148,163,184,.1); color: #94a3b8; } .lq-pin-chip { color: #fbbf24; font-size: .75rem; } .lq-body { font-size: .88rem; line-height: 1.5; color: #e2e8f0; margin: 0 0 .35rem; word-break: break-word; } .lq-meta { font-size: .72rem; color: var(--muted, #94a3b8); display: block; margin-bottom: .5rem; } .lq-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; } .lq-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 8px; font-size: .78rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, opacity .15s; } .lq-btn:disabled { opacity: .45; cursor: not-allowed; } .lq-btn-answer { background: rgba(34,197,94,.12); color: #4ade80; border-color: rgba(34,197,94,.25); } .lq-btn-answer:hover:not(:disabled) { background: rgba(34,197,94,.22); border-color: rgba(34,197,94,.4); } .lq-btn-pin { background: rgba(251,191,36,.1); color: #fbbf24; border-color: rgba(251,191,36,.2); } .lq-btn-pin:hover:not(:disabled) { background: rgba(251,191,36,.2); border-color: rgba(251,191,36,.35); } .lq-btn-reopen { background: rgba(148,163,184,.08); color: #94a3b8; border-color: rgba(148,163,184,.15); } .lq-btn-dismiss { background: rgba(239,68,68,.08); color: #f87171; border-color: rgba(239,68,68,.15); margin-left: auto; } .lq-btn-dismiss:hover:not(:disabled) { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.3); } .lq-empty { padding: 1.25rem 1rem; color: var(--muted, #94a3b8); font-size: .85rem; text-align: center; } .lq-popup-footer { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; border-top: 1px solid rgba(255,255,255,.05); background: rgba(0,0,0,.15); gap: .5rem; flex-wrap: wrap; } .lq-footer-meta { font-size: .72rem; color: var(--muted, #94a3b8); } .lq-refresh-btn { font-size: .75rem; padding: .25rem .6rem; } @media (max-width: 500px) { #liveQPopupContainer { width: calc(100vw - 2rem); right: 1rem; bottom: 1rem; } .lq-popup-body { max-height: 320px; } } /* ── Davening page ── */ .davening-hero { text-align: center; padding-bottom: 1rem; } .davening-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1rem; } .davening-card { background: var(--surface2, rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; } .davening-card-head { display: flex; align-items: center; gap: .5rem; } .davening-type-tag { font-size: .72rem; padding: 2px 8px; border-radius: 20px; background: rgba(200, 153, 58, .14); color: var(--gold, #c8993a); font-weight: 600; } .davening-intention { font-style: italic; opacity: .75; font-size: .88rem; } .davening-card-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; } .davening-types-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; margin-top: 1rem; } .davening-type-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .25rem; } .davening-empty { text-align: center; padding: 2rem; opacity: .6; } .davening-standalone-request { max-width: 520px; } .davening-host-section { border-top: 1px solid rgba(255,255,255,.07); } /* ── Tzedakah Wallet ── */ .wallet-card { background: linear-gradient(135deg, rgba(200,153,58,.12), rgba(0,191,232,.08)); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 14px; padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .wallet-balance { font-size: 2rem; font-weight: 800; color: var(--gold); line-height: 1; } .wallet-balance small { font-size: .8rem; font-weight: 400; opacity: .7; display: block; margin-top: .2rem; } .wallet-give-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .75rem; } .wallet-give-btn { font-size: .8rem; padding: .35rem .8rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: rgba(200,153,58,.1); color: var(--gold); cursor: pointer; transition: background .15s; } .wallet-give-btn:hover { background: rgba(200,153,58,.2); } /* ── Mitzvah Challenges ── */ .mitzvah-challenge-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .4rem; } .mitzvah-challenge-type { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gold); font-weight: 700; } .challenge-status-submitted { color: var(--muted); } .challenge-status-verified { color: #4caf6e; } .challenge-status-rejected { color: #e53e3e; } /* ── Admin: Manage Leaders collapsed list ── */ .admin-rabbi-collapsed .admin-rabbi-summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; border-radius: 8px; transition: background .15s; } .admin-rabbi-collapsed .admin-rabbi-summary:hover { background: rgba(0,191,232,.07); } .admin-rabbi-summary-info { flex: 1; min-width: 0; } .admin-rabbi-summary-info strong { display: block; font-size: .95rem; } .admin-rabbi-status-pill { font-size: .72rem; padding: 2px 8px; border-radius: 20px; font-weight: 600; text-transform: capitalize; background: rgba(255,255,255,.08); } .admin-rabbi-status-active { color: #4caf6e; background: rgba(76,175,80,.12); } .admin-rabbi-status-suspended { color: #f5a623; background: rgba(245,166,35,.12); } .admin-rabbi-status-blocked { color: #e53e3e; background: rgba(229,62,62,.12); } .admin-rabbi-expand-icon { font-size: .85rem; opacity: .5; transition: transform .2s; } .admin-rabbi-expanded .admin-rabbi-expand-icon { transform: rotate(90deg); } .admin-rabbi-detail { padding: 12px 14px 14px; border-top: 1px solid rgba(255,255,255,.06); } .avatar-sm { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; } /* ── Calendar: Shabbat/Yom Tov gold dates ── */ .office-date-choice.is-shabbat, .office-date-choice.is-yom-tov { border-color: color-mix(in srgb, var(--gold) 60%, transparent) !important; background: color-mix(in srgb, var(--gold) 8%, transparent) !important; color: var(--gold) !important; } .office-date-choice.is-shabbat .office-date-status, .office-date-choice.is-yom-tov .office-date-status { color: var(--gold) !important; } .calendar-day-header.is-shabbat-header { color: var(--gold); } /* ── Hebrew letter background animation ── */ .hebrew-bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; opacity: .045; } .hebrew-bg-letter { position: absolute; font-family: var(--serif, serif); font-size: clamp(48px, 8vw, 120px); font-weight: 700; color: var(--gold, #c8993a); user-select: none; animation: hebrewFloat linear infinite; will-change: transform, opacity; } @keyframes hebrewFloat { 0% { transform: translateY(0) rotate(0deg); opacity: .6; } 33% { transform: translateY(-18px) rotate(3deg); opacity: 1; } 66% { transform: translateY(10px) rotate(-2deg); opacity: .7; } 100% { transform: translateY(0) rotate(0deg); opacity: .6; } } /* ── Calendar month navigation ── */ .office-calendar-month-nav { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 10px; gap: 8px; } .office-calendar-month-nav strong { font-size: .95rem; flex: 1; text-align: center; } .office-calendar-month-btn { background: none; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: .85rem; color: inherit; transition: background .15s; } .office-calendar-month-btn:hover { background: rgba(0,191,232,.1); } /* ── Calendar multi-select ── */ .office-date-choice[aria-pressed="true"] { border-color: var(--cyan, #00c7ff) !important; background: rgba(0,199,255,.15) !important; color: var(--cyan, #00c7ff) !important; box-shadow: 0 0 0 2px rgba(0,199,255,.3); } .office-calendar-multi-hint { font-size: .75rem; opacity: .6; margin: 4px 0 0; } /* ── Hebrew/English date balance ── */ .office-date-choice > span { font-size: .9rem; font-weight: 600; display: block; line-height: 1.2; } .office-date-choice .office-date-hebrew { font-size: .72rem; opacity: .75; display: block; line-height: 1.2; margin-top: 1px; } /* ============================================================ Leader profile - v2 (sidebar layout, refined radii, million-$) .lv2-* namespace. Coexists with the old leader-* block above. ============================================================ */ .lv2-main { --lv2-radius-lg: 14px; --lv2-radius-md: 10px; --lv2-radius-sm: 8px; --lv2-radius-xs: 6px; --lv2-line: color-mix(in srgb, var(--text, #1f2933) 12%, transparent); --lv2-line-strong: color-mix(in srgb, var(--text, #1f2933) 22%, transparent); --lv2-shadow-card: 0 10px 36px rgba(8, 14, 24, 0.08); --lv2-shadow-hover: 0 14px 40px rgba(8, 14, 24, 0.14); --lv2-banner-h: clamp(180px, 26vw, 300px); --lv2-sidebar-w: 248px; } .lv2-shell { position: relative; margin: 0 auto; padding: 0 0 2.6rem 0 !important; max-width: 1280px; border-radius: var(--lv2-radius-lg); background: var(--panel, #fff); border: 1px solid var(--lv2-line); box-shadow: var(--lv2-shadow-card); overflow: hidden; isolation: isolate; } /* Back link */ .lv2-back { position: absolute; top: 16px; left: 18px; z-index: 4; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem; border-radius: var(--lv2-radius-sm); background: rgba(8, 14, 24, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-weight: 700; font-size: 0.85rem; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.16); transition: background 0.15s ease, transform 0.15s ease; } .lv2-back:hover { background: rgba(8, 14, 24, 0.78); transform: translateX(-2px); } /* Banner */ .lv2-banner { position: relative; width: 100%; height: var(--lv2-banner-h); overflow: hidden; } .lv2-banner-image { position: absolute; inset: 0; background-image: var(--rabbi-banner, linear-gradient(135deg, var(--rabbi-start, #1f3a5f), var(--rabbi-accent, #2a8aac), var(--rabbi-end, #d7b65f))); background-size: cover; background-position: center; filter: saturate(1.04) contrast(1.02); } .lv2-banner-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 14, 24, 0) 50%, rgba(8, 14, 24, 0.45) 100%), linear-gradient(90deg, rgba(8, 14, 24, 0.32) 0%, rgba(8, 14, 24, 0) 55%); } /* Head block: avatar + identity */ .lv2-head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 1.8rem); align-items: end; padding: 0 clamp(1.2rem, 2.6vw, 2.2rem); margin-top: calc(var(--lv2-banner-h) * -0.32); z-index: 2; } .lv2-avatar-wrap .rabbi-hero-avatar { width: clamp(112px, 12vw, 156px) !important; height: clamp(112px, 12vw, 156px) !important; border-radius: var(--lv2-radius-md) !important; border: 4px solid var(--panel, #fff) !important; box-shadow: 0 18px 44px rgba(8, 14, 24, 0.28) !important; background: var(--avatar, linear-gradient(135deg, var(--rabbi-start, #1f3a5f), var(--rabbi-end, #d7b65f))) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; display: block; } .lv2-avatar-wrap .rabbi-hero-avatar::before, .lv2-avatar-wrap .rabbi-hero-avatar::after { display: none !important; content: none !important; } .lv2-identity { min-width: 0; padding-bottom: 6px; display: grid; gap: 0.6rem; } .lv2-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 0.9rem; } .lv2-name-row h1 { margin: 0; font-size: clamp(1.45rem, 2.5vw, 2rem); font-weight: 900; letter-spacing: -0.012em; line-height: 1.05; color: #fff; text-shadow: 0 2px 18px rgba(8, 14, 24, 0.45); } .lv2-pill-row { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; } /* ----- Matched pills: Live now + Theme chip ----- */ .lv2-pill { display: inline-flex; align-items: center; gap: 0.4rem; height: 28px; padding: 0 0.7rem 0 0.5rem; border-radius: var(--lv2-radius-xs); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(8, 14, 24, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; cursor: default; box-shadow: 0 6px 18px rgba(8, 14, 24, 0.22); } .lv2-pill-label { display: inline-block; line-height: 1; } .lv2-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5d5d; box-shadow: 0 0 0 4px rgba(255, 93, 93, 0.22); animation: lv2-pulse 1.6s ease-in-out infinite; flex-shrink: 0; } @keyframes lv2-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 93, 93, 0.22); } 50% { box-shadow: 0 0 0 8px rgba(255, 93, 93, 0); } } .lv2-pill-swatch { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, var(--theme-start, #1f3a5f) 0%, var(--theme-accent, #2a8aac) 50%, var(--theme-end, #d7b65f) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); flex-shrink: 0; } /* Theme pill tooltip on hover */ .lv2-pill-theme { position: relative; cursor: help; } .lv2-pill-theme::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-4px); background: #11161e; color: #f3f6fb; border: 1px solid rgba(255, 255, 255, 0.12); padding: 8px 12px; border-radius: var(--lv2-radius-sm); font-size: 0.78rem; font-weight: 600; letter-spacing: 0; line-height: 1.35; white-space: normal; max-width: 240px; width: max-content; text-align: center; box-shadow: 0 16px 36px rgba(8, 14, 24, 0.42); opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 10; } .lv2-pill-theme::before { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #11161e; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 11; } .lv2-pill-theme:hover::after, .lv2-pill-theme:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); } .lv2-pill-theme:hover::before, .lv2-pill-theme:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); } /* Meta + note */ .lv2-meta { margin: 0; color: rgba(255, 255, 255, 0.88); font-weight: 700; font-size: 0.92rem; text-shadow: 0 2px 8px rgba(8, 14, 24, 0.4); } .lv2-note { margin: 0; color: rgba(255, 255, 255, 0.95); font-size: 0.96rem; max-width: 60ch; text-shadow: 0 2px 8px rgba(8, 14, 24, 0.4); } .lv2-head .public-link-row { margin-top: 0.2rem; } /* Layout: sidebar + content */ .lv2-layout { display: grid; grid-template-columns: var(--lv2-sidebar-w) minmax(0, 1fr); gap: 1.8rem; padding: 1.8rem clamp(1.2rem, 2.6vw, 2.2rem) 0; } /* Sidebar */ .lv2-sidebar { display: flex; flex-direction: column; gap: 0.4rem; position: sticky; top: 78px; align-self: start; padding: 0.6rem; border: 1px solid var(--lv2-line); border-radius: var(--lv2-radius-md); background: var(--panel, #fff); box-shadow: 0 4px 14px rgba(8, 14, 24, 0.04); } .lv2-nav { display: flex; flex-direction: column; gap: 0.2rem; } .lv2-nav-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; width: 100%; padding: 0.6rem 0.8rem; border-radius: var(--lv2-radius-sm); background: transparent; border: 1px solid transparent; color: var(--text, #1f2933); font-size: 0.92rem; font-weight: 700; text-align: left; cursor: pointer; transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease; } .lv2-nav-icon { font-size: 0.95rem; opacity: 0.75; width: 22px; text-align: center; } .lv2-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lv2-nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--rabbi-accent, var(--accent, #2a8aac)) 22%, transparent); color: var(--rabbi-accent, var(--accent, #2a8aac)); font-size: 0.72rem; font-weight: 800; } .lv2-nav-item:hover { background: color-mix(in srgb, var(--text, #1f2933) 5%, transparent); } .lv2-nav-item.active { background: linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, #1f3a5f) 92%, white 0%), color-mix(in srgb, var(--rabbi-accent, #2a8aac) 92%, white 0%)); color: #fff; border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--rabbi-start, #1f3a5f) 30%, transparent); } .lv2-nav-item.active .lv2-nav-icon { opacity: 1; color: #fff; } .lv2-nav-item.active .lv2-nav-badge { background: rgba(255, 255, 255, 0.22); color: #fff; } /* Sidebar action buttons */ .lv2-sidebar-actions { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.5rem; padding-top: 0.8rem; border-top: 1px solid var(--lv2-line); } .lv2-action-button { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.8rem; border-radius: var(--lv2-radius-sm); border: 1px solid var(--lv2-line); background: var(--surface, color-mix(in srgb, var(--panel, #fff) 95%, var(--text, #1f2933) 5%)); color: var(--text, #1f2933); font-size: 0.88rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease; } .lv2-action-button:hover { background: color-mix(in srgb, var(--text, #1f2933) 5%, var(--surface, #f5f7fa)); border-color: var(--lv2-line-strong); transform: translateY(-1px); } .lv2-action-button i { width: 18px; text-align: center; opacity: 0.8; } .lv2-action-button.is-active { background: color-mix(in srgb, var(--rabbi-accent, var(--accent, #2a8aac)) 14%, var(--panel, #fff)); border-color: color-mix(in srgb, var(--rabbi-accent, var(--accent, #2a8aac)) 40%, transparent); color: var(--text, #1f2933); } .lv2-action-button.lv2-action-support { background: linear-gradient(135deg, var(--rabbi-start, #1f3a5f), var(--rabbi-end, #d7b65f)); border-color: transparent; color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--rabbi-end, #d7b65f) 32%, transparent); } .lv2-action-button.lv2-action-support:hover { filter: brightness(1.05); box-shadow: 0 12px 28px color-mix(in srgb, var(--rabbi-end, #d7b65f) 40%, transparent); } /* Content area */ .lv2-content { min-width: 0; } .lv2-content [data-profile-tab-panel] { display: none; flex-direction: column; gap: 1.2rem; } .lv2-content [data-profile-tab-panel].active { display: grid; gap: 1.2rem; } /* Tighten content section corners to match the language */ .lv2-content .profile-section, .lv2-content .live-row, .lv2-content .recorded-session, .lv2-content .public-link-row { border-radius: var(--lv2-radius-md) !important; } /* Responsive */ @media (max-width: 960px) { .lv2-layout { grid-template-columns: 1fr; } .lv2-sidebar { position: static; flex-direction: column; } .lv2-nav { flex-direction: row; flex-wrap: wrap; /* wrap into a tidy bar instead of a scroll strip */ overflow-x: visible; /* kills the ugly horizontal scrollbar */ gap: 0.45rem; justify-content: center; padding-bottom: 0.2rem; } .lv2-nav-item { width: auto; /* was inheriting width:100% → 4600px overflow */ grid-template-columns: auto auto auto; flex: 0 1 auto; white-space: nowrap; border: 1px solid var(--lv2-line); padding: 0.5rem 0.9rem; } .lv2-sidebar-actions { flex-direction: row; flex-wrap: wrap; border-top: 1px solid var(--lv2-line); } .lv2-action-button { flex: 1 1 calc(50% - 0.3rem); } } @media (max-width: 640px) { .lv2-head { grid-template-columns: 1fr; margin-top: calc(var(--lv2-banner-h) * -0.45); text-align: left; } .lv2-name-row h1 { font-size: 1.4rem; } .lv2-action-button { flex: 1 1 100%; } } /* Dark mode */ :root[data-theme="dark"] .lv2-shell { background: #0e1116; border-color: rgba(220, 232, 207, 0.1); } :root[data-theme="dark"] .lv2-sidebar { background: #11151c; border-color: rgba(220, 232, 207, 0.1); } :root[data-theme="dark"] .lv2-action-button { background: #161b24; border-color: rgba(220, 232, 207, 0.1); color: #e9eef6; } :root[data-theme="dark"] .lv2-action-button:hover { background: #1a2030; } :root[data-theme="dark"] .lv2-nav-item { color: #e9eef6; } :root[data-theme="dark"] .lv2-nav-item:hover { background: rgba(255, 255, 255, 0.05); } :root[data-theme="dark"] .lv2-avatar-wrap .rabbi-hero-avatar { border-color: #0e1116 !important; } /* Keep the OLD horizontal pill tabs and old banner stage out of the v2 page */ .lv2-shell .profile-tab-list, .lv2-shell .rabbi-console-tabs, .lv2-shell .leader-profile-tabs, .lv2-shell .leader-wide-banner, .lv2-shell .leader-banner-header, .lv2-shell .rabbi-profile-layout, .lv2-shell .rabbi-profile-sidebar { display: none !important; } /* ============================================================ Donate page - center H1, floating Selected Amount card (2026) ============================================================ */ /* Force the donation page intro to be perfectly centered */ .donation-page .page-intro, .donation-page .donate-intro { text-align: center !important; } .donation-page .page-intro h1, .donation-page .donate-intro h1 { margin-left: auto !important; margin-right: auto !important; text-align: center !important; width: 100%; max-width: 820px; } .donation-page .page-intro p, .donation-page .donate-intro p { margin-left: auto !important; margin-right: auto !important; text-align: center !important; } .donation-page .page-intro .eyebrow, .donation-page .donate-intro .eyebrow { display: inline-flex; justify-content: center; } /* Float the Selected Amount as a bottom-right "drawer" chip. Bottom-right keeps it out of the page header and always in view while the user fills the form. */ .donation-page .donation-summary { position: fixed !important; bottom: 24px; right: 24px; top: auto !important; left: auto !important; z-index: 60; display: inline-flex !important; align-items: center !important; gap: 14px !important; min-width: 0; padding: 12px 18px 12px 16px !important; border-radius: 14px !important; background: linear-gradient(135deg, rgba(8, 21, 37, 0.96), rgba(4, 12, 23, 0.92)) !important; border: 1px solid rgba(217, 180, 90, 0.45) !important; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 191, 232, 0.12) inset !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); text-align: left; transition: transform 0.18s ease, box-shadow 0.18s ease; pointer-events: auto; } .donation-page .donation-summary::before { content: "\f4c0"; /* fa-hand-holding-heart */ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.25rem; color: color-mix(in srgb, var(--gold, #d7b65f) 70%, #fff8e0); line-height: 1; flex-shrink: 0; } .donation-page .donation-summary:hover { transform: translateY(-3px); box-shadow: 0 28px 56px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(0, 191, 232, 0.22) inset !important; } .donation-page .donation-summary span { display: block; color: color-mix(in srgb, var(--gold, #d7b65f) 80%, white 18%); font-size: 0.62rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.86; margin: 0 !important; } .donation-page .donation-summary strong { display: block; margin-top: 2px; font-family: var(--serif, "Cormorant Garamond", Georgia, serif); font-size: 1.7rem; line-height: 1; color: #ffe9b3; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); } /* Light mode - keep the floating card readable */ :root[data-theme="light"] .donation-page .donation-summary { background: linear-gradient(135deg, #1a2540, #0d1830) !important; border-color: rgba(217, 180, 90, 0.6) !important; } /* Responsive: shrink to a bottom-center pill on mobile */ @media (max-width: 720px) { .donation-page .donation-summary { bottom: 14px; right: 14px; left: 14px; padding: 10px 14px !important; border-radius: 12px !important; justify-content: center; } .donation-page .donation-summary strong { font-size: 1.45rem; } } /* "X slots open" status chip - clearly a badge, not a control */ .office-open-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.32rem 0.7rem; border-radius: 8px; background: color-mix(in srgb, #2f9e44 14%, transparent); color: #2f9e44; border: 1px solid color-mix(in srgb, #2f9e44 32%, transparent); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap; cursor: default; } .office-open-badge i { font-size: 0.88rem; } :root[data-theme="dark"] .office-open-badge { background: color-mix(in srgb, #2f9e44 22%, transparent); color: #6ed583; border-color: color-mix(in srgb, #2f9e44 48%, transparent); } /* Cancel button - subtle red accent so the learner can see it's destructive */ .pbp-cancel-btn { color: #c93434 !important; border-color: color-mix(in srgb, #c93434 32%, var(--line, rgba(0,0,0,0.16))) !important; } .pbp-cancel-btn:hover { background: color-mix(in srgb, #c93434 10%, transparent) !important; border-color: color-mix(in srgb, #c93434 56%, transparent) !important; } :root[data-theme="dark"] .pbp-cancel-btn { color: #ff8a8a !important; border-color: color-mix(in srgb, #ff8a8a 30%, transparent) !important; } /* ============================================================ Admin SEO panel (2026) ============================================================ */ .seo-admin-form { display: grid; gap: 1.2rem; max-width: 920px; } .seo-fieldset { display: grid; gap: 0.7rem; padding: 1.2rem 1.4rem 1.4rem; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel, #fff) 96%, var(--accent, #0077a8) 4%); } .seo-fieldset legend { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.25rem 0.75rem; border-radius: 8px; background: var(--panel, #fff); border: 1px solid var(--line); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.01em; color: var(--accent, #0077a8); } .seo-fieldset legend i { font-size: 0.95rem; opacity: 0.85; } .seo-fieldset > label { display: grid; gap: 0.3rem; font-size: 0.86rem; font-weight: 700; color: var(--text, #1f2933); } .seo-fieldset > label input, .seo-fieldset > label textarea { padding: 0.55rem 0.75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, #fff); color: var(--text, #1f2933); font: inherit; } .seo-fieldset > label input:focus, .seo-fieldset > label textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent, #0077a8) 35%, transparent); outline-offset: 1px; border-color: var(--accent, #0077a8); } .seo-fieldset > label textarea { resize: vertical; min-height: 96px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85rem; } .seo-fieldset .orthodox-note { font-size: 0.82rem; margin: -0.1rem 0 0.2rem; } .seo-form-actions { display: inline-flex; align-items: center; gap: 1rem; margin-top: 0.4rem; } .seo-form-actions button { display: inline-flex; align-items: center; gap: 0.5rem; } .seo-form-actions #seoSaveStatus { font-size: 0.82rem; color: #2f9e44; font-weight: 700; } .seo-helper-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); } .seo-helper-grid article { padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel, #fff); } .seo-helper-grid h3 { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem; font-size: 1rem; } .seo-helper-grid h3 i { color: var(--accent, #0077a8); } .seo-helper-grid p { margin: 0; font-size: 0.86rem; line-height: 1.55; } .seo-helper-grid code { padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--accent, #0077a8) 10%, transparent); font-size: 0.84em; } :root[data-theme="dark"] .seo-fieldset { background: rgba(220, 232, 207, 0.04); border-color: rgba(220, 232, 207, 0.12); } :root[data-theme="dark"] .seo-fieldset legend { background: rgba(220, 232, 207, 0.08); color: #dce8cf; border-color: rgba(220, 232, 207, 0.16); } :root[data-theme="dark"] .seo-helper-grid article { background: rgba(17, 20, 15, 0.78); border-color: rgba(220, 232, 207, 0.12); } /* ============================================================ Home-page CTA cards (Open Table + Recorded Torah) - same size + aligned ============================================================ */ .home-cta-card { display: inline-flex !important; align-items: center !important; gap: 12px !important; min-width: 200px !important; height: 64px; padding: 10px 16px !important; border-radius: var(--radius, 12px); text-decoration: none; box-sizing: border-box; } .home-cta-card .home-cta-icon { width: 32px !important; height: 32px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; margin: 0 !important; flex-shrink: 0; border-radius: 8px; background: rgba(243, 213, 138, 0.12); } .home-cta-card .home-cta-text { display: flex !important; flex-direction: column !important; gap: 1px !important; text-align: left; } .home-cta-card .home-cta-text span { font-size: 11px; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; } .home-cta-card .home-cta-text strong { font-size: 14px; font-weight: 800; line-height: 1.1; } .recorded-cta.home-cta-card .home-cta-icon { color: var(--burgundy, #9d2637); background: rgba(157, 38, 55, 0.10); } .open-table-cta.home-cta-card .home-cta-icon { color: #f3d58a; } /* ============================================================ Leader profile v2 - follower stat strip + deeper theme bleed ============================================================ */ /* Stat strip (followers / recordings / hours) under the name */ .lv2-stat-strip { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 0.1rem; } .lv2-stat { display: inline-flex; align-items: center; gap: 0.45rem; height: 28px; padding: 0 0.75rem; border-radius: 6px; background: rgba(8, 14, 24, 0.5); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; cursor: default; box-shadow: 0 4px 14px rgba(8, 14, 24, 0.2); } .lv2-stat i { font-size: 0.82rem; color: var(--rabbi-end, #d7b65f); } .lv2-stat strong { font-weight: 900; color: #fff; } .lv2-stat span { opacity: 0.85; font-weight: 600; } /* === DEEPER THEME COLOR BLEED - leader's palette now drives the page === */ /* Outer shell tinted strongly with the rabbi gradient */ .lv2-shell { background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--rabbi-start, #1f3a5f) 38%, transparent), transparent 55%), radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--rabbi-end, #d7b65f) 30%, transparent), transparent 60%), radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rabbi-accent, #2a8aac) 18%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--rabbi-start, #1f3a5f) 8%, var(--panel, #fff)) 0%, var(--panel, #fff) 70%) !important; border-color: color-mix(in srgb, var(--rabbi-accent, var(--rabbi-end, #d7b65f)) 38%, var(--lv2-line, rgba(0,0,0,0.12))) !important; box-shadow: 0 24px 64px color-mix(in srgb, var(--rabbi-start, #1f3a5f) 22%, rgba(8, 14, 24, 0.16)), inset 0 2px 0 color-mix(in srgb, var(--rabbi-end, #d7b65f) 28%, transparent) !important; } /* Sidebar with strong gradient + accent left edge in the leader's color */ .lv2-sidebar { position: sticky; top: 78px; background: linear-gradient(180deg, color-mix(in srgb, var(--rabbi-start, #1f3a5f) 22%, var(--panel, #fff)) 0%, color-mix(in srgb, var(--rabbi-accent, #2a8aac) 8%, var(--panel, #fff)) 60%, var(--panel, #fff) 100%) !important; border-color: color-mix(in srgb, var(--rabbi-accent, var(--rabbi-end, #d7b65f)) 38%, var(--lv2-line, rgba(0,0,0,0.12))) !important; box-shadow: 0 14px 36px color-mix(in srgb, var(--rabbi-start, #1f3a5f) 22%, rgba(8, 14, 24, 0.08)), inset 4px 0 0 var(--rabbi-accent, var(--rabbi-end, #d7b65f)) !important; } /* Active nav item already uses --rabbi-start / --rabbi-accent - strengthen the glow */ .lv2-nav-item.active { background: linear-gradient(135deg, var(--rabbi-start, #1f3a5f), var(--rabbi-accent, #2a8aac)) !important; box-shadow: 0 10px 26px color-mix(in srgb, var(--rabbi-start, #1f3a5f) 38%, transparent), inset 0 1px 0 color-mix(in srgb, var(--rabbi-end, #d7b65f) 24%, transparent) !important; } .lv2-nav-badge { background: color-mix(in srgb, var(--rabbi-accent, var(--rabbi-end, #d7b65f)) 24%, transparent) !important; color: var(--rabbi-accent, var(--rabbi-end, #d7b65f)) !important; } /* Sidebar action buttons - Follow Leader is the primary CTA with full theme gradient */ .lv2-action-button { font-weight: 800 !important; letter-spacing: 0.01em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); } .lv2-action-button:hover { border-color: color-mix(in srgb, var(--rabbi-accent, var(--rabbi-end, #d7b65f)) 70%, transparent) !important; background: color-mix(in srgb, var(--rabbi-start, #1f3a5f) 10%, var(--surface, #f5f7fa)) !important; } /* Follow Leader (default, not yet followed) - solid gradient, white text */ .lv2-action-button[data-follow-rabbi]:not(.is-active) { background: linear-gradient(135deg, var(--rabbi-start, #1f3a5f), var(--rabbi-accent, #2a8aac)) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 10px 26px color-mix(in srgb, var(--rabbi-start, #1f3a5f) 42%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } .lv2-action-button[data-follow-rabbi]:not(.is-active) i { color: #fff !important; opacity: 1 !important; } .lv2-action-button[data-follow-rabbi]:not(.is-active):hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 14px 32px color-mix(in srgb, var(--rabbi-start, #1f3a5f) 56%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important; } /* Following (already active) - gold-tinted check */ .lv2-action-button.is-active { background: color-mix(in srgb, var(--rabbi-end, #d7b65f) 28%, var(--panel, #fff)) !important; border-color: var(--rabbi-end, #d7b65f) !important; color: var(--text, #1f2933) !important; } .lv2-action-button.is-active i { color: var(--rabbi-end, #d7b65f) !important; opacity: 1 !important; } /* Support Leader (donation) - full gradient with deep glow */ .lv2-action-button.lv2-action-support { background: linear-gradient(135deg, var(--rabbi-accent, #2a8aac), var(--rabbi-end, #d7b65f)) !important; color: #ffffff !important; border-color: transparent !important; font-weight: 900 !important; text-shadow: 0 1px 2px rgba(8, 14, 24, 0.35); box-shadow: 0 12px 30px color-mix(in srgb, var(--rabbi-end, #d7b65f) 48%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important; } .lv2-action-button.lv2-action-support i { color: #fff !important; opacity: 1 !important; text-shadow: 0 1px 2px rgba(8, 14, 24, 0.35); } .lv2-action-button.lv2-action-support:hover { filter: brightness(1.08); transform: translateY(-2px); } /* Content panels: strongly themed border + tinted gradient bg + accent top edge */ .lv2-content .profile-section { position: relative; border: 1px solid color-mix(in srgb, var(--rabbi-accent, var(--rabbi-end, #d7b65f)) 36%, var(--lv2-line, rgba(0,0,0,0.12))) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, #1f3a5f) 10%, var(--panel, #fff)) 0%, color-mix(in srgb, var(--rabbi-accent, #2a8aac) 4%, var(--panel, #fff)) 60%, var(--panel, #fff) 100%) !important; box-shadow: 0 8px 28px color-mix(in srgb, var(--rabbi-start, #1f3a5f) 14%, transparent), inset 0 2px 0 color-mix(in srgb, var(--rabbi-end, #d7b65f) 32%, transparent) !important; } .lv2-content .profile-section h2, .lv2-content .profile-section h3 { color: color-mix(in srgb, var(--rabbi-accent, #2a8aac) 82%, var(--text, #1f2933)) !important; } /* Tab title row + eyebrows pick up the gold accent */ .lv2-content .section-title-row .eyebrow, .lv2-content .section-eyebrow { color: var(--rabbi-end, #d7b65f) !important; } /* Buttons inside content panels theme themselves */ .lv2-content .primary-button { background: linear-gradient(135deg, var(--rabbi-start, #1f3a5f), var(--rabbi-accent, #2a8aac)) !important; border-color: transparent !important; box-shadow: 0 10px 24px color-mix(in srgb, var(--rabbi-start, #1f3a5f) 38%, transparent) !important; } .lv2-content .ghost-button { border-color: color-mix(in srgb, var(--rabbi-accent, #2a8aac) 38%, var(--lv2-line, rgba(0,0,0,0.12))) !important; } .lv2-content .ghost-button:hover { background: color-mix(in srgb, var(--rabbi-start, #1f3a5f) 8%, var(--surface, #f5f7fa)) !important; } /* Live pill on the leader page picks up the live red, theme pill picks up leader's gradient */ .lv2-pill-live { background: linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, #1f3a5f) 75%, #b91c1c 25%), color-mix(in srgb, var(--rabbi-end, #d7b65f) 30%, #b91c1c 70%)) !important; border-color: rgba(255, 255, 255, 0.32) !important; } .lv2-pill-theme { background: linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, #1f3a5f) 90%, transparent), color-mix(in srgb, var(--rabbi-accent, #2a8aac) 80%, transparent)) !important; border-color: color-mix(in srgb, var(--rabbi-end, #d7b65f) 55%, transparent) !important; } /* Dark mode - much stronger theme presence */ :root[data-theme="dark"] .lv2-shell { background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--rabbi-start, #1f3a5f) 56%, transparent), transparent 55%), radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--rabbi-end, #d7b65f) 32%, transparent), transparent 60%), radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rabbi-accent, #2a8aac) 30%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--rabbi-start, #1f3a5f) 24%, #0e1116) 0%, #0e1116 70%) !important; border-color: color-mix(in srgb, var(--rabbi-accent, var(--rabbi-end, #d7b65f)) 44%, rgba(220, 232, 207, 0.12)) !important; box-shadow: 0 28px 70px color-mix(in srgb, var(--rabbi-start, #1f3a5f) 50%, rgba(0, 0, 0, 0.4)), inset 0 2px 0 color-mix(in srgb, var(--rabbi-end, #d7b65f) 38%, transparent) !important; } :root[data-theme="dark"] .lv2-sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--rabbi-start, #1f3a5f) 42%, #11151c) 0%, color-mix(in srgb, var(--rabbi-accent, #2a8aac) 18%, #11151c) 60%, #11151c 100%) !important; border-color: color-mix(in srgb, var(--rabbi-accent, var(--rabbi-end, #d7b65f)) 36%, rgba(220, 232, 207, 0.12)) !important; box-shadow: inset 4px 0 0 var(--rabbi-accent, var(--rabbi-end, #d7b65f)) !important; } :root[data-theme="dark"] .lv2-content .profile-section { background: linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, #1f3a5f) 26%, #11151c) 0%, color-mix(in srgb, var(--rabbi-accent, #2a8aac) 10%, #11151c) 60%, #11151c 100%) !important; border-color: color-mix(in srgb, var(--rabbi-accent, var(--rabbi-end, #d7b65f)) 36%, rgba(220, 232, 207, 0.12)) !important; box-shadow: 0 10px 32px color-mix(in srgb, var(--rabbi-start, #1f3a5f) 36%, transparent), inset 0 2px 0 color-mix(in srgb, var(--rabbi-end, #d7b65f) 40%, transparent) !important; } :root[data-theme="dark"] .lv2-action-button { background: color-mix(in srgb, var(--rabbi-start, #1f3a5f) 16%, #161b24) !important; border-color: color-mix(in srgb, var(--rabbi-accent, var(--rabbi-end, #d7b65f)) 24%, rgba(220, 232, 207, 0.12)) !important; color: #f3f6fb !important; } :root[data-theme="dark"] .lv2-action-button:hover { background: color-mix(in srgb, var(--rabbi-start, #1f3a5f) 28%, #161b24) !important; } /* ============================================================ Office-hours Quick Calendar - 2026 redesign ============================================================ */ [data-office-calendar-picker] { --cal-accent: var(--cyan, #18b7d9); --cal-gold: var(--gold, #d7b65f); --cal-line: color-mix(in srgb, var(--text, #1f2933) 14%, transparent); --cal-surface: var(--panel, #fff); --cal-surface-soft: color-mix(in srgb, var(--panel, #fff) 90%, var(--surface, #f5f7fa)); padding: 1.4rem 1.4rem 1.2rem !important; border-radius: 14px !important; border: 1px solid var(--cal-line) !important; background: var(--cal-surface) !important; box-shadow: 0 8px 28px rgba(8, 14, 24, 0.06) !important; } .office-calendar-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.6rem !important; border: 0 !important; background: transparent !important; } .office-calendar-picker-head strong { font-size: 1rem; font-weight: 800; } .office-calendar-picker-head + p, .office-calendar-picker-head ~ p { font-size: 0.8rem; opacity: 0.7; margin: 0 0 0.85rem; } .office-calendar-month-nav { display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; gap: 0.8rem; margin: 0.4rem 0 0.9rem !important; } .office-calendar-month-nav [data-office-month-label] { text-align: center; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.01em; } .office-calendar-month-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.9rem !important; border: 1px solid var(--cal-line) !important; border-radius: 8px !important; background: var(--cal-surface) !important; color: var(--text, #1f2933) !important; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease; } .office-calendar-month-btn:hover { background: var(--cal-surface-soft) !important; border-color: color-mix(in srgb, var(--cal-accent) 50%, var(--cal-line)) !important; transform: translateY(-1px); } /* The grid */ .office-calendar-days { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 6px !important; max-height: none !important; overflow: visible !important; padding: 0 !important; } /* Weekday header row */ .calendar-day-header { position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 28px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: color-mix(in srgb, var(--text, #1f2933) 55%, transparent) !important; font-size: 0.7rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; box-shadow: none !important; } .calendar-day-header.is-shabbat-header { color: var(--cal-gold) !important; } .calendar-day-header.is-friday-header { color: color-mix(in srgb, var(--cal-gold) 70%, var(--text, #1f2933)) !important; } /* Out-of-month (greyed) cells */ .calendar-filler.is-outside-month { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 78px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--cal-line) 70%, transparent); background: color-mix(in srgb, var(--cal-line) 8%, transparent); color: color-mix(in srgb, var(--text, #1f2933) 30%, transparent); font-size: 0.85rem; font-weight: 700; cursor: default; } /* In-month date button */ .calendar-day-cell { position: relative; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: space-between !important; gap: 4px !important; min-height: 78px; padding: 8px 10px 8px !important; border-radius: 10px !important; border: 1.5px solid var(--cal-line) !important; background: var(--cal-surface) !important; color: var(--text, #1f2933) !important; cursor: pointer; transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease; text-align: left !important; } .calendar-day-cell:hover:not(.is-past) { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cal-accent) 50%, var(--cal-line)) !important; box-shadow: 0 8px 22px color-mix(in srgb, var(--cal-accent) 14%, transparent); } .calendar-day-num { font-size: 1.05rem !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: -0.01em; } .calendar-day-cell .office-date-hebrew { font-size: 0.66rem !important; font-weight: 700; opacity: 0.72; font-style: normal; letter-spacing: 0.01em; } .calendar-day-cell .office-date-status { display: inline-flex !important; align-items: center !important; padding: 3px 9px !important; border-radius: 999px !important; background: color-mix(in srgb, var(--cal-accent) 14%, transparent) !important; color: color-mix(in srgb, var(--cal-accent) 90%, var(--text, #1f2933)) !important; font-size: 0.66rem !important; font-weight: 800 !important; letter-spacing: 0.02em; margin: 0 !important; border: 0 !important; } /* Hide any leftover icons inside status pills - labels only now */ .calendar-day-cell .office-date-status i { display: none !important; } /* States */ .calendar-day-cell.is-today { border-color: var(--cal-accent) !important; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--cal-accent) 35%, transparent) inset; } /* Today pill removed - the border highlight is enough indication */ .calendar-today-pill { display: none !important; } /* POSTED day - GREEN pill to mark active office hours days */ .calendar-day-cell.has-posted-slot { background: color-mix(in srgb, #2f9e44 10%, var(--cal-surface)) !important; border-color: color-mix(in srgb, #2f9e44 56%, var(--cal-line)) !important; } .calendar-day-cell.has-posted-slot .office-date-status { background: #2f9e44 !important; color: #ffffff !important; font-weight: 900 !important; box-shadow: 0 2px 6px color-mix(in srgb, #2f9e44 32%, transparent); } .calendar-day-cell.is-shabbat { background: color-mix(in srgb, var(--cal-gold) 8%, var(--cal-surface)) !important; border-color: color-mix(in srgb, var(--cal-gold) 38%, var(--cal-line)) !important; } .calendar-day-cell.is-shabbat .office-date-status { background: color-mix(in srgb, var(--cal-gold) 20%, transparent) !important; color: color-mix(in srgb, var(--cal-gold) 80%, var(--text, #1f2933)) !important; } .calendar-day-cell.is-erev-shabbat .office-date-status { background: color-mix(in srgb, var(--cal-gold) 14%, transparent) !important; color: color-mix(in srgb, var(--cal-gold) 72%, var(--text, #1f2933)) !important; } .calendar-day-cell.is-yom-tov { background: color-mix(in srgb, #8b5cf6 8%, var(--cal-surface)) !important; border-color: color-mix(in srgb, #8b5cf6 36%, var(--cal-line)) !important; } .calendar-day-cell.is-yom-tov .office-date-status { background: color-mix(in srgb, #8b5cf6 22%, transparent) !important; color: color-mix(in srgb, #8b5cf6 80%, var(--text, #1f2933)) !important; } .calendar-day-cell.is-sunday .calendar-day-num { color: color-mix(in srgb, var(--cal-accent) 70%, var(--text, #1f2933)) !important; } .calendar-day-cell.is-past { opacity: 0.42; cursor: not-allowed; filter: grayscale(0.4); } .calendar-day-cell.is-selected, .calendar-day-cell[aria-pressed="true"] { background: linear-gradient(135deg, color-mix(in srgb, var(--cal-accent) 20%, var(--cal-surface)), color-mix(in srgb, var(--cal-accent) 8%, var(--cal-surface))) !important; border-color: var(--cal-accent) !important; box-shadow: 0 12px 30px color-mix(in srgb, var(--cal-accent) 28%, transparent); } .office-calendar-multi-hint { margin-top: 0.9rem !important; font-size: 0.78rem; opacity: 0.65; } /* Dark mode */ :root[data-theme="dark"] [data-office-calendar-picker] { background: #11151c !important; border-color: rgba(220, 232, 207, 0.12) !important; } :root[data-theme="dark"] .calendar-day-cell { background: rgba(220, 232, 207, 0.04) !important; border-color: rgba(220, 232, 207, 0.14) !important; color: #dce8cf !important; } :root[data-theme="dark"] .calendar-day-cell:hover:not(.is-past) { background: rgba(220, 232, 207, 0.08) !important; } :root[data-theme="dark"] .calendar-filler.is-outside-month { background: rgba(220, 232, 207, 0.03); border-color: rgba(220, 232, 207, 0.12); color: rgba(220, 232, 207, 0.32); } :root[data-theme="dark"] .office-calendar-month-btn { background: rgba(220, 232, 207, 0.06) !important; border-color: rgba(220, 232, 207, 0.14) !important; color: #dce8cf !important; } :root[data-theme="dark"] .office-calendar-month-btn:hover { background: rgba(220, 232, 207, 0.12) !important; } /* ============================================================ Office-hour Templates bar + multi-date indicator (admin form) ============================================================ */ .office-template-bar { padding: 1rem 1.1rem; border: 1px solid color-mix(in srgb, var(--cyan, #18b7d9) 28%, var(--line, rgba(0,0,0,0.14))); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--cyan, #18b7d9) 8%, var(--panel, #fff)), var(--panel, #fff)); display: grid; gap: 0.65rem; margin-bottom: 1rem; } .office-template-bar-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; } .office-template-bar-head strong { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; color: color-mix(in srgb, var(--cyan, #18b7d9) 90%, var(--text, #1f2933)); } .office-template-bar-head small { font-size: 0.78rem; opacity: 0.78; } .office-template-bar-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .office-template-bar-controls > .office-template-select { flex: 1 1 200px; min-width: 0; padding: 0.5rem 0.7rem; border: 1px solid var(--line, rgba(0,0,0,0.14)); border-radius: 8px; background: var(--panel, #fff); color: var(--text, #1f2933); font: inherit; } .office-template-bar-controls .ghost-button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem; font-size: 0.85rem; } .office-template-bar-controls .office-template-delete { color: #c93434; border-color: color-mix(in srgb, #c93434 36%, var(--line)); } .office-template-bar-controls .office-template-delete:hover { background: color-mix(in srgb, #c93434 10%, transparent); } .office-multi-date-indicator { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.9rem; border-radius: 999px; background: color-mix(in srgb, var(--gold, #d7b65f) 18%, transparent); color: color-mix(in srgb, var(--gold, #d7b65f) 90%, var(--text, #1f2933)); border: 1px solid color-mix(in srgb, var(--gold, #d7b65f) 45%, transparent); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.005em; } .office-multi-date-indicator[hidden] { display: none; } .office-multi-date-indicator i { font-size: 0.95rem; } .office-multi-date-indicator span[data-office-multi-count] { font-size: 1.05rem; font-weight: 900; color: var(--text, #1f2933); } :root[data-theme="dark"] .office-template-bar { background: linear-gradient(135deg, color-mix(in srgb, var(--cyan, #18b7d9) 18%, #11151c), #11151c); border-color: color-mix(in srgb, var(--cyan, #18b7d9) 40%, rgba(220, 232, 207, 0.14)); } :root[data-theme="dark"] .office-template-bar-controls > .office-template-select { background: rgba(220, 232, 207, 0.06); color: #e9eef6; border-color: rgba(220, 232, 207, 0.12); } /* ============================================================ Live Show / Concert mode for office hours ============================================================ */ .slot-mode-fieldset { margin: 0.5rem 0 0.5rem; padding: 0.85rem 1rem 1rem; border: 1px dashed color-mix(in srgb, #b85a76 56%, var(--line, rgba(0,0,0,0.14))); border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, #b85a76 6%, var(--panel, #fff)), var(--panel, #fff)); } .slot-mode-fieldset legend { padding: 0.2rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, #b85a76 18%, transparent); color: color-mix(in srgb, #b85a76 90%, var(--text, #1f2933)); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.04em; } .slot-mode-toggle { display: flex; align-items: flex-start; gap: 0.55rem; cursor: pointer; font-size: 0.92rem; margin: 0.3rem 0 0.65rem; } .slot-mode-toggle input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: #b85a76; cursor: pointer; } .slot-mode-concert-fields { display: grid; gap: 0.5rem; } .slot-mode-concert-fields[hidden] { display: none; } .office-live-show-badge { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.4rem; padding: 0.2rem 0.65rem; border-radius: 999px; background: linear-gradient(135deg, #b85a76, #d97757); color: #fff; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; } .office-slot-concert { border: 1px solid color-mix(in srgb, #b85a76 28%, var(--line, rgba(0,0,0,0.14))) !important; background: linear-gradient(135deg, color-mix(in srgb, #b85a76 5%, var(--panel, #fff)), var(--panel, #fff)) !important; } .office-concert-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.5rem; margin: 0.6rem 0; padding: 0.7rem 0.9rem; border-radius: 10px; background: color-mix(in srgb, #b85a76 8%, transparent); border: 1px solid color-mix(in srgb, #b85a76 24%, transparent); } .office-concert-row { display: grid; gap: 0.15rem; } .office-concert-row .eyebrow { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; } .office-concert-row strong { font-size: 1rem; font-weight: 900; } :root[data-theme="dark"] .slot-mode-fieldset { background: linear-gradient(135deg, color-mix(in srgb, #b85a76 18%, #11151c), #11151c); border-color: color-mix(in srgb, #b85a76 56%, rgba(220, 232, 207, 0.14)); } :root[data-theme="dark"] .office-slot-concert { background: linear-gradient(135deg, color-mix(in srgb, #b85a76 14%, #11151c), #11151c) !important; } /* Responsive - phones */ @media (max-width: 600px) { .office-calendar-days { gap: 4px !important; } .calendar-day-cell { min-height: 62px; padding: 6px 6px !important; } .calendar-day-num { font-size: 0.95rem !important; } .calendar-day-cell .office-date-hebrew { display: none; } .calendar-day-cell .office-date-status { padding: 1px 5px !important; font-size: 0.58rem !important; } .calendar-day-cell .office-date-status i { display: none; } .calendar-filler.is-outside-month { min-height: 62px; } } /* ============================================================ Calendar Opener - popover chooser (Google / Apple / Outlook / etc.) ============================================================ */ .calendar-opener-trigger { cursor: pointer; } .calendar-opener-popover { position: absolute; width: 280px; padding: 0.5rem; border-radius: 12px; background: var(--panel, #fff); border: 1px solid var(--line, rgba(0, 0, 0, 0.14)); box-shadow: 0 18px 44px rgba(8, 14, 24, 0.32); z-index: 9999; animation: cal-opener-fade 0.14s ease-out; } @keyframes cal-opener-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .calendar-opener-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.4rem 0.6rem 0.55rem; border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.1)); } .calendar-opener-head strong { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.01em; } .calendar-opener-close { width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; font-size: 0.85rem; color: var(--text, #1f2933); } .calendar-opener-close:hover { background: color-mix(in srgb, var(--text, #1f2933) 6%, transparent); } .calendar-opener-event { padding: 0.5rem 0.6rem 0.4rem; font-size: 0.82rem; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .calendar-opener-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .calendar-opener-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.65rem; border-radius: 8px; text-decoration: none; color: var(--text, #1f2933); font-weight: 700; font-size: 0.9rem; transition: background 0.12s ease; } .calendar-opener-item i { width: 18px; text-align: center; font-size: 1rem; } .calendar-opener-item:hover { background: color-mix(in srgb, var(--accent, #0077a8) 10%, transparent); } .calendar-opener-item small { margin-left: auto; font-size: 0.7rem; opacity: 0.55; font-weight: 600; } .calendar-opener-item.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* Brand colors on the icons */ .calendar-opener-item .fa-google { color: #4285f4; } .calendar-opener-item .fa-apple { color: #6b6b6b; } .calendar-opener-item .fa-microsoft { color: #00a4ef; } .calendar-opener-item .fa-briefcase { color: #ea3e23; } .calendar-opener-item .fa-yahoo { color: #6001d2; } .calendar-opener-item .fa-file-arrow-down { color: var(--accent, #0077a8); } /* Dark mode */ :root[data-theme="dark"] .calendar-opener-popover { background: #11151c; border-color: rgba(220, 232, 207, 0.14); box-shadow: 0 22px 52px rgba(0, 0, 0, 0.5); } :root[data-theme="dark"] .calendar-opener-head { border-bottom-color: rgba(220, 232, 207, 0.12); } :root[data-theme="dark"] .calendar-opener-close { color: #dce8cf; } :root[data-theme="dark"] .calendar-opener-close:hover { background: rgba(220, 232, 207, 0.1); } :root[data-theme="dark"] .calendar-opener-item { color: #e9eef6; } :root[data-theme="dark"] .calendar-opener-item:hover { background: rgba(220, 232, 207, 0.08); } :root[data-theme="dark"] .calendar-opener-item .fa-apple { color: #f3f6fb; } /* Mobile - full-width sheet from the bottom */ @media (max-width: 560px) { .calendar-opener-popover { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; width: 100% !important; border-radius: 16px 16px 0 0; padding: 0.7rem 0.7rem 1rem; animation: cal-opener-slide-up 0.18s ease-out; } } @keyframes cal-opener-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } /* ============================================================ Chavrusa "Confirm your gender" modal - 2026 redesign Overrides the legacy .modal-overlay / .gender-modal styling. ============================================================ */ .modal-overlay:has(.gender-modal), .modal-overlay.chav-gender-overlay { position: fixed !important; inset: 0 !important; z-index: 1000 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 1rem !important; background: rgba(8, 14, 24, 0.6) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; animation: chav-gender-fade 0.2s ease-out; } @keyframes chav-gender-fade { from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } to { opacity: 1; } } .modal-box.gender-modal { position: relative !important; width: min(620px, calc(100vw - 2rem)) !important; max-width: 620px !important; max-height: calc(100vh - 2rem) !important; overflow-y: auto !important; padding: 2.4rem 2rem 1.8rem !important; border-radius: 20px !important; background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, #2a8aac 30%, transparent), transparent 55%), radial-gradient(ellipse at 100% 100%, color-mix(in srgb, #d7b65f 26%, transparent), transparent 55%), radial-gradient(circle at 50% 0%, color-mix(in srgb, #18b7d9 18%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, #18b7d9 6%, var(--panel, #fff)) 0%, var(--panel, #fff) 80%) !important; border: 1.5px solid color-mix(in srgb, var(--gold, #d7b65f) 55%, var(--line, rgba(0,0,0,0.14))) !important; box-shadow: 0 40px 80px rgba(8, 14, 24, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.06) inset, inset 0 2px 0 color-mix(in srgb, var(--gold, #d7b65f) 50%, transparent) !important; animation: chav-gender-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2); } @keyframes chav-gender-pop { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Close X - top-right floating circle */ .gender-modal .modal-close-btn { position: absolute !important; top: 14px; right: 14px; left: auto !important; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; border-radius: 999px !important; border: 1px solid var(--line, rgba(0, 0, 0, 0.16)) !important; background: var(--panel, #fff) !important; color: var(--text, #1f2933) !important; font-size: 1.1rem !important; cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease; } .gender-modal .modal-close-btn:hover { background: color-mix(in srgb, var(--text, #1f2933) 8%, var(--panel, #fff)) !important; transform: scale(1.05); } /* Eyebrow */ .gender-modal .eyebrow { display: inline-block !important; margin-bottom: 0.45rem !important; padding: 0.2rem 0.7rem !important; border-radius: 999px !important; background: color-mix(in srgb, var(--gold, #d7b65f) 16%, transparent); color: color-mix(in srgb, var(--gold, #d7b65f) 80%, var(--text, #1f2933)); font-size: 0.68rem !important; font-weight: 900 !important; letter-spacing: 0.1em; text-transform: uppercase; } /* Title */ .gender-modal h2 { margin: 0.3rem 0 0.6rem !important; font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important; font-weight: 900 !important; letter-spacing: -0.02em !important; line-height: 1.05 !important; font-family: var(--serif, "Cormorant Garamond", Georgia, serif) !important; background: linear-gradient(135deg, color-mix(in srgb, #2a8aac 80%, var(--text, #1f2933)), color-mix(in srgb, var(--gold, #d7b65f) 80%, var(--text, #1f2933))) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Description */ .gender-modal .orthodox-note { margin: 0 0 1.2rem !important; font-size: 0.95rem; color: color-mix(in srgb, var(--text, #1f2933) 75%, transparent); line-height: 1.5; max-width: 46ch; } /* Choice grid */ .gender-modal .gender-choice-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.9rem !important; margin: 0 0 1.1rem 0 !important; } @media (max-width: 480px) { .gender-modal .gender-choice-row { grid-template-columns: 1fr !important; } } /* Each choice card */ .gender-modal .gender-choice-btn { position: relative; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.7rem !important; padding: 1.8rem 1.2rem 1.4rem !important; min-height: 180px; border-radius: 16px !important; border: 2px solid var(--line, rgba(0, 0, 0, 0.14)) !important; background: var(--panel, #fff) !important; color: var(--text, #1f2933) !important; cursor: pointer; font-weight: 800; letter-spacing: 0.005em; text-align: center; overflow: hidden; transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2), border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .gender-modal .gender-choice-btn::before { content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; background: linear-gradient(135deg, transparent, transparent); opacity: 0; transition: opacity 0.16s ease; } .gender-modal .gender-choice-btn:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gold, #d7b65f) 50%, var(--line, rgba(0,0,0,0.14))) !important; box-shadow: 0 14px 32px rgba(8, 14, 24, 0.12); } .gender-modal .gender-choice-btn .gender-icon { font-size: 3.6rem !important; line-height: 1 !important; font-weight: 400 !important; margin: 0 !important; color: color-mix(in srgb, var(--gold, #d7b65f) 72%, var(--text, #1f2933)); text-shadow: 0 2px 0 rgba(8, 14, 24, 0.06); display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 22px; background: color-mix(in srgb, var(--gold, #d7b65f) 10%, transparent); } .gender-modal .gender-choice-btn[data-gender="men"] .gender-icon { color: #fff !important; background: linear-gradient(135deg, #2a8aac, #1488a4) !important; box-shadow: 0 10px 24px color-mix(in srgb, #2a8aac 40%, transparent) !important; } .gender-modal .gender-choice-btn[data-gender="women"] .gender-icon { color: #fff !important; background: linear-gradient(135deg, #c8798f, #a85878) !important; box-shadow: 0 10px 24px color-mix(in srgb, #c8798f 40%, transparent) !important; } .gender-modal .gender-choice-btn > span:not(.gender-icon):not(.gender-check) { font-size: 1.05rem !important; font-weight: 900 !important; line-height: 1.2; letter-spacing: -0.005em; } .gender-modal .gender-choice-btn .gender-check { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: transparent; border: 1.5px solid var(--line, rgba(0, 0, 0, 0.18)); color: transparent; font-size: 0.85rem; font-weight: 900; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.18s ease; } /* Selected state */ .gender-modal .gender-choice-btn.selected { border-color: var(--gold, #d7b65f) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--gold, #d7b65f) 18%, var(--panel, #fff)), color-mix(in srgb, var(--gold, #d7b65f) 6%, var(--panel, #fff))) !important; box-shadow: 0 18px 38px rgba(8, 14, 24, 0.18), 0 0 0 4px color-mix(in srgb, var(--gold, #d7b65f) 22%, transparent) !important; } .gender-modal .gender-choice-btn.selected .gender-check { background: var(--gold, #d7b65f); border-color: var(--gold, #d7b65f); color: #11161e; transform: scale(1.05); } .gender-modal .gender-choice-btn[data-gender="men"].selected { border-color: #2a8aac !important; background: linear-gradient(135deg, color-mix(in srgb, #2a8aac 18%, var(--panel, #fff)), color-mix(in srgb, #2a8aac 4%, var(--panel, #fff))) !important; box-shadow: 0 18px 38px rgba(8, 14, 24, 0.2), 0 0 0 4px color-mix(in srgb, #2a8aac 26%, transparent) !important; } .gender-modal .gender-choice-btn[data-gender="men"].selected .gender-check { background: #2a8aac; border-color: #2a8aac; color: #fff; } .gender-modal .gender-choice-btn[data-gender="women"].selected { border-color: #c8798f !important; background: linear-gradient(135deg, color-mix(in srgb, #c8798f 16%, var(--panel, #fff)), color-mix(in srgb, #c8798f 4%, var(--panel, #fff))) !important; box-shadow: 0 18px 38px rgba(8, 14, 24, 0.2), 0 0 0 4px color-mix(in srgb, #c8798f 26%, transparent) !important; } .gender-modal .gender-choice-btn[data-gender="women"].selected .gender-check { background: #c8798f; border-color: #c8798f; color: #fff; } /* Fineprint */ .gender-modal .chav-gender-fineprint { margin: 0 0 1.1rem !important; padding: 0.55rem 0.8rem; border-radius: 10px; background: color-mix(in srgb, var(--text, #1f2933) 5%, transparent); font-size: 0.82rem !important; color: color-mix(in srgb, var(--text, #1f2933) 70%, transparent) !important; text-align: center; } /* Continue button row */ .gender-modal .gender-continue-row { display: flex !important; justify-content: flex-end !important; gap: 0.6rem; } .gender-modal .gender-continue-btn { display: inline-flex !important; align-items: center !important; gap: 0.55rem !important; padding: 0.75rem 1.5rem !important; border-radius: 10px !important; border: 0 !important; background: color-mix(in srgb, var(--text, #1f2933) 10%, transparent) !important; color: color-mix(in srgb, var(--text, #1f2933) 50%, transparent) !important; font-size: 0.95rem !important; font-weight: 900 !important; letter-spacing: 0.01em; cursor: not-allowed; transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; } .gender-modal .gender-continue-btn.ready, .gender-modal .gender-continue-btn:not([disabled]) { background: linear-gradient(135deg, var(--gold, #d7b65f), color-mix(in srgb, var(--gold, #d7b65f) 60%, #b78b3f)) !important; color: #11161e !important; cursor: pointer; box-shadow: 0 12px 28px color-mix(in srgb, var(--gold, #d7b65f) 38%, transparent); } .gender-modal .gender-continue-btn.ready:hover, .gender-modal .gender-continue-btn:not([disabled]):hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 36px color-mix(in srgb, var(--gold, #d7b65f) 52%, transparent); } /* Dark mode */ :root[data-theme="dark"] .modal-box.gender-modal { background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, #2a8aac 30%, transparent), transparent 60%), radial-gradient(ellipse at 100% 100%, color-mix(in srgb, #d7b65f 22%, transparent), transparent 60%), #11151c !important; border-color: color-mix(in srgb, var(--gold, #d7b65f) 50%, rgba(220, 232, 207, 0.14)) !important; } :root[data-theme="dark"] .gender-modal .modal-close-btn { background: rgba(17, 21, 28, 0.92) !important; border-color: rgba(220, 232, 207, 0.16) !important; color: #f3f6fb !important; } :root[data-theme="dark"] .gender-modal .modal-close-btn:hover { background: rgba(34, 41, 52, 0.94) !important; } :root[data-theme="dark"] .gender-modal .gender-choice-btn { background: rgba(17, 21, 28, 0.84) !important; border-color: rgba(220, 232, 207, 0.14) !important; color: #e9eef6 !important; } :root[data-theme="dark"] .gender-modal .gender-choice-btn:hover { background: rgba(28, 34, 44, 0.92) !important; } :root[data-theme="dark"] .gender-modal .chav-gender-fineprint { background: rgba(220, 232, 207, 0.06); color: rgba(220, 232, 207, 0.78) !important; } :root[data-theme="dark"] .gender-modal .gender-continue-btn { background: rgba(220, 232, 207, 0.08) !important; color: rgba(220, 232, 207, 0.4) !important; } :root[data-theme="dark"] .gender-modal .gender-continue-btn.ready, :root[data-theme="dark"] .gender-modal .gender-continue-btn:not([disabled]) { background: linear-gradient(135deg, var(--gold, #d7b65f), #b78b3f) !important; color: #11161e !important; } /* ============================================================ Kill the animated decorative corner-line pseudo-elements that draw across all wide sections (gold + cyan L-shaped lines with tfSacredSweep animation). Site-wide override. ============================================================ */ .wide-section::before, .stack-section::before, .topics-panel::before, .zone-panel::before, .rabbi-console-panel::before, .admin-panel::before, .donation-card::before, .profile-section::before, .live-panel::before, .live-panel::after { content: none !important; display: none !important; background: none !important; animation: none !important; opacity: 0 !important; } /* ============================================================ Leader profile - "Jump to another section" row at the bottom of each tab panel. Lists all OTHER tabs (not the active one). ============================================================ */ .lv2-section-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.4rem; padding: 0.9rem 1rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--rabbi-accent, var(--rabbi-end, #d7b65f)) 24%, var(--lv2-line, rgba(0,0,0,0.14))); background: linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, #1f3a5f) 6%, var(--panel, #fff)), var(--panel, #fff)); } .lv2-section-jump-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--rabbi-end, #d7b65f) 70%, var(--text, #1f2933)); margin-right: 0.4rem; white-space: nowrap; } .lv2-section-jump-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem; border-radius: 8px; border: 1px solid var(--lv2-line, rgba(0, 0, 0, 0.14)); background: var(--surface, color-mix(in srgb, var(--panel, #fff) 96%, var(--text, #1f2933) 4%)); color: var(--text, #1f2933); font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease; white-space: nowrap; } .lv2-section-jump-btn i { font-size: 0.85rem; opacity: 0.75; } .lv2-section-jump-btn:hover { background: color-mix(in srgb, var(--rabbi-start, #1f3a5f) 8%, var(--surface, #f5f7fa)); border-color: color-mix(in srgb, var(--rabbi-accent, var(--rabbi-end, #d7b65f)) 50%, transparent); transform: translateY(-1px); } .lv2-section-jump-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--rabbi-accent, var(--rabbi-end, #d7b65f)) 22%, transparent); color: color-mix(in srgb, var(--rabbi-accent, var(--rabbi-end, #d7b65f)) 90%, var(--text, #1f2933)); font-size: 0.66rem; font-weight: 800; } :root[data-theme="dark"] .lv2-section-jump { background: linear-gradient(135deg, color-mix(in srgb, var(--rabbi-start, #1f3a5f) 18%, #11151c), #11151c); border-color: color-mix(in srgb, var(--rabbi-accent, var(--rabbi-end, #d7b65f)) 28%, rgba(220, 232, 207, 0.12)); } :root[data-theme="dark"] .lv2-section-jump-btn { background: rgba(220, 232, 207, 0.06); border-color: rgba(220, 232, 207, 0.12); color: #e9eef6; } :root[data-theme="dark"] .lv2-section-jump-btn:hover { background: rgba(220, 232, 207, 0.12); } /* Mobile + Tablet (≤960px) - premium bottom navigation bar. ICON-ONLY buttons (like Instagram/Twitter/native iOS) - no text labels crammed into a phone width. The label appears only on hover (desktop has it inline). Sticky to viewport bottom with safe-area inset support. */ @media (max-width: 960px) { .lv2-section-jump { /* Truly fixed to the viewport bottom, full width, symmetric padding. The flex group of buttons is centered within the bar; each button is a flex item with `flex: 1 1 0` so they share the row equally AND each button's own contents (icon stacked over label) are centered too. */ position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: 0 auto !important; width: 100% !important; max-width: 100% !important; border-radius: 18px 18px 0 0 !important; border-top: 1px solid color-mix(in srgb, var(--rabbi-accent, var(--rabbi-end, #d7b65f)) 36%, var(--lv2-line, rgba(0,0,0,0.18))); border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; background: color-mix(in srgb, var(--panel, #fff) 94%, transparent); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 -14px 40px rgba(8, 14, 24, 0.22); padding-top: 0.5rem !important; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important; padding-left: max(env(safe-area-inset-left, 12px), 12px) !important; padding-right: max(env(safe-area-inset-right, 12px), 12px) !important; z-index: 90; display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; gap: 0.25rem !important; overflow: hidden !important; box-sizing: border-box !important; text-align: center !important; } /* Hide the "Also see:" label on mobile - no room */ .lv2-section-jump-label { display: none !important; } /* Each button is an icon + small caption underneath (stacked + centered) */ .lv2-section-jump-btn { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; padding: 0.55rem 0.25rem !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.25rem !important; border-radius: 12px !important; background: transparent !important; border: 1px solid transparent !important; font-size: 0.6rem !important; font-weight: 700 !important; color: color-mix(in srgb, var(--text, #1f2933) 72%, transparent) !important; line-height: 1.1 !important; text-align: center !important; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /* Reset any user-agent button alignment that would left-align contents */ text-indent: 0 !important; } .lv2-section-jump-btn i { font-size: 1.25rem !important; line-height: 1 !important; color: var(--text, #1f2933); opacity: 0.88; } .lv2-section-jump-btn .lv2-section-jump-label-inline, .lv2-section-jump-btn span:not(.lv2-section-jump-badge):not([class*="badge"]) { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.6rem !important; } .lv2-section-jump-btn:hover, .lv2-section-jump-btn:active { background: color-mix(in srgb, var(--rabbi-accent, var(--rabbi-end, #d7b65f)) 14%, transparent) !important; color: var(--text, #1f2933) !important; } .lv2-section-jump-btn:hover i, .lv2-section-jump-btn:active i { color: var(--rabbi-accent, var(--rabbi-end, #d7b65f)); opacity: 1; transform: translateY(-1px); } /* Badge: small pill anchored to the top of the button, just right of the icon. Positioned using LEFT (not right) anchored to the button's center so the button itself stays visually centered regardless of badge presence. */ .lv2-section-jump-badge { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 16px !important; height: 16px !important; padding: 0 4px !important; font-size: 0.6rem !important; line-height: 1 !important; border-radius: 999px !important; background: var(--rabbi-accent, #d97757) !important; color: #fff !important; box-shadow: 0 0 0 2px var(--panel, #fff); display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } :root[data-theme="dark"] .lv2-section-jump-badge { box-shadow: 0 0 0 2px #11151c; } /* Push content above the fixed bar so last items aren't hidden */ .lv2-content { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; } /* Dark mode */ :root[data-theme="dark"] .lv2-section-jump { background: rgba(17, 21, 28, 0.92); border-top-color: color-mix(in srgb, var(--rabbi-accent, var(--rabbi-end, #d7b65f)) 40%, rgba(220, 232, 207, 0.18)); } :root[data-theme="dark"] .lv2-section-jump-btn { color: #c8d0db !important; } :root[data-theme="dark"] .lv2-section-jump-btn i { color: #e9eef6; } :root[data-theme="dark"] .lv2-section-jump-badge { box-shadow: 0 0 0 2px #11151c; } } /* ============================================================ NUCLEAR HIDE: reCAPTCHA v3 badge sitewide (allowed by Google as long as reCAPTCHA terms are referenced in the page footer) Multiple selectors + offscreen positioning so Google's inline styles can't beat us. ============================================================ */ .grecaptcha-badge, .grecaptcha-badge *, .grecaptcha-logo, iframe[src*="recaptcha"], iframe[src*="google.com/recaptcha"], iframe[title*="reCAPTCHA"], iframe[title*="recaptcha"], div[class*="grecaptcha"] { display: none !important; visibility: hidden !important; opacity: 0 !important; position: fixed !important; left: -99999px !important; top: -99999px !important; bottom: auto !important; right: auto !important; width: 0 !important; height: 0 !important; pointer-events: none !important; z-index: -1 !important; transform: scale(0) !important; overflow: hidden !important; } /* ============================================================ Retire the Sefer HaMitzvot daily-learning chip. Its daily ref (e.g. "N216") doesn't resolve to readable text on Sefaria, so the button only ever linked off-site. Belt-and-suspenders kill that works regardless of which cached megaMenuZmanim.js is running. ============================================================ */ [data-sefaria-key="sefer_hamitzvot"] { display: none !important; } /* ============================================================ Mobile centering + overflow safety for leader profile + admin Forces every page to stay perfectly centered with no horizontal tilt or overflow on small screens. ============================================================ */ @media (max-width: 720px) { html, body { overflow-x: hidden !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; } /* Belt-and-suspenders: nothing on mobile can exceed viewport width. Scoped to the leader profile shell to avoid breaking horizontally scrolling components elsewhere. */ .lv2-shell *, .lv2-shell *::before, .lv2-shell *::after { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* Sticky section-jump bar - let its children flex to equal widths and allow horizontal scroll when total content exceeds the viewport */ .lv2-section-jump { max-width: none !important; } .lv2-section-jump .lv2-section-jump-btn { max-width: none !important; flex: 1 1 0 !important; } .page-main, .main.page-main { padding-left: 0.5rem !important; padding-right: 0.5rem !important; margin: 0 auto !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; } /* Leader v2 shell - centered, no horizontal scroll */ .lv2-shell { margin: 0 auto !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; padding-left: 0 !important; padding-right: 0 !important; border-radius: 14px !important; } .lv2-layout { padding-left: 0.5rem !important; padding-right: 0.5rem !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; gap: 0.8rem !important; } .lv2-content { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } .lv2-content > * { max-width: 100% !important; box-sizing: border-box !important; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; } .lv2-head { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .lv2-banner { width: 100% !important; margin: 0 !important; border-radius: 0 !important; } /* Office booking card - stack to a single column on mobile */ .office-booking-card { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 0.8rem !important; margin-left: 0 !important; margin-right: 0 !important; } .office-booking-card > * { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-wrap: break-word; word-wrap: break-word; } .office-booking-date, .office-date-details, .pbp-shell, .pbp-status, .pbp-booking-summary, .pbp-summary-row, .office-booking-copy { display: block !important; width: 100% !important; max-width: 100% !important; grid-template-columns: 1fr !important; } .office-slot-note, .office-viewer-time, .pbp-status-copy p, .pbp-status-copy h3 { overflow-wrap: break-word !important; word-wrap: break-word !important; word-break: break-word; } /* Post-booking secondary actions - wrap, never overflow */ .pbp-secondary, .pbp-shell .row-actions, .pbp-shell { flex-wrap: wrap !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .pbp-secondary > *, .pbp-shell > * { flex: 1 1 auto !important; max-width: 100% !important; white-space: normal !important; word-break: break-word; } /* Tier chooser + time slots - wrap and shrink */ .sched-tiers-guest, .office-tier-cards, .ts-grid { grid-template-columns: 1fr !important; gap: 0.5rem !important; width: 100% !important; } .ts-slot { flex: 1 1 calc(50% - 0.3rem) !important; min-width: 0 !important; } /* Forms - never overflow */ .office-hour-request-form, .office-booking-form, .admin-form { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .office-hour-request-form > *, .admin-form > * { max-width: 100% !important; box-sizing: border-box !important; } /* Inputs / textareas / selects */ input, textarea, select { max-width: 100% !important; box-sizing: border-box !important; } /* Buttons */ .ghost-button, .primary-button, .lv2-action-button { max-width: 100% !important; box-sizing: border-box; } } /* ============================================================ Chavrusa - audio room block + public consent UI (2026) ============================================================ */ .chav-match-row { border: 1px solid var(--line, rgba(0,0,0,0.14)); border-radius: 14px; background: var(--panel, #fff); padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 0.7rem; } .chav-match-header { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; } .chav-match-row .chav-avatar { width: 48px; height: 48px; border-radius: 999px; background-size: cover; background-position: center; background-color: color-mix(in srgb, var(--accent, #0077a8) 18%, transparent); display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; } .chav-room-block { margin-top: 0.6rem; padding: 1rem 1.1rem; border: 1px solid color-mix(in srgb, #18b7d9 32%, var(--line, rgba(0,0,0,0.14))); border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, #18b7d9 8%, var(--panel, #fff)), color-mix(in srgb, #d7b65f 4%, var(--panel, #fff))); display: grid; gap: 0.8rem; } .chav-room-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; } .chav-room-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, #18b7d9 16%, transparent); color: color-mix(in srgb, #18b7d9 88%, var(--text, #1f2933)); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; } .chav-room-public-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: #2f9e44; color: #fff; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.02em; } .chav-room-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; } .chav-room-start, .chav-room-join { display: inline-flex !important; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem !important; background: linear-gradient(135deg, #18b7d9, #1488a4) !important; border: 0 !important; color: #fff !important; font-weight: 900 !important; border-radius: 10px !important; text-decoration: none; box-shadow: 0 8px 20px color-mix(in srgb, #18b7d9 36%, transparent); } .chav-room-start:hover, .chav-room-join:hover { filter: brightness(1.05); transform: translateY(-1px); } .chav-room-password { font-family: ui-monospace, Menlo, Consolas, monospace; opacity: 0.85; } .chav-room-consent { display: grid; gap: 0.45rem; padding: 0.85rem 1rem; border-radius: 10px; border: 1px dashed color-mix(in srgb, #d7b65f 50%, transparent); background: color-mix(in srgb, #d7b65f 5%, transparent); } .chav-room-consent > strong { font-size: 0.95rem; font-weight: 800; } .chav-room-consent .orthodox-note { margin: 0; font-size: 0.82rem; opacity: 0.78; } .chav-consent-toggle { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none; font-weight: 700; font-size: 0.92rem; padding: 0.4rem 0.2rem; } .chav-consent-toggle input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: #18b7d9; } .chav-consent-partner { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; padding: 0.3rem 0.55rem; border-radius: 8px; background: color-mix(in srgb, var(--text, #1f2933) 4%, transparent); } .chav-consent-partner i.is-yes { color: #2f9e44; } .chav-consent-partner i.is-no { color: #b08a3a; opacity: 0.65; } :root[data-theme="dark"] .chav-match-row { background: #11151c; border-color: rgba(220, 232, 207, 0.12); } :root[data-theme="dark"] .chav-room-block { background: linear-gradient(135deg, color-mix(in srgb, #18b7d9 14%, #11151c), color-mix(in srgb, #d7b65f 8%, #11151c)); } :root[data-theme="dark"] .chav-room-consent { background: rgba(215, 182, 95, 0.06); } :root[data-theme="dark"] .chav-consent-partner { background: rgba(220, 232, 207, 0.06); } /* ============================================================ Chavrusa - inline gender audience selector (replaces popup) + matching "Learning audience" card in Account panel ============================================================ */ /* Inline pill shown when gender IS already set (header context) */ .chav-gender-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 999px; background: color-mix(in srgb, #18b7d9 14%, transparent); color: color-mix(in srgb, #18b7d9 88%, var(--text, #1f2933)); border: 1px solid color-mix(in srgb, #18b7d9 32%, transparent); font-size: 0.85rem; font-weight: 800; margin-top: 0.8rem; } /* ------------------------------------------------------------------ 2026 design - centered "Set your learning audience" notice Shown when a user has no gender saved yet on the chavrusa page. ------------------------------------------------------------------ */ .chav-gender-needed { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.85rem; max-width: 640px; margin: 1.6rem auto 0; padding: 1.6rem 1.8rem; border-radius: 22px; background: radial-gradient(ellipse at 0% 0%, rgba(42, 138, 172, 0.10), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(215, 182, 95, 0.18), transparent 55%), linear-gradient(180deg, #fff9ec 0%, #fdf2d8 100%); border: 1px solid rgba(215, 182, 95, 0.55); box-shadow: 0 18px 44px rgba(8, 14, 24, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(215, 182, 95, 0.18); color: #1f2933 !important; overflow: hidden; isolation: isolate; } .chav-gender-needed::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #2a8aac 0%, #d7b65f 50%, #b1263d 100%); opacity: 0.85; z-index: 0; } .chav-gender-needed > * { position: relative; z-index: 1; } .chav-gender-needed i, .chav-gender-needed > i.fa-solid, .chav-gender-needed > .fa-solid { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, #d7b65f 0%, #b58a2a 100%); color: #fff !important; font-size: 1.4rem !important; box-shadow: 0 10px 22px rgba(181, 138, 42, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.6); margin-top: 0 !important; } .chav-gender-needed > div { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; } .chav-gender-needed strong { display: block; font-size: 1.1rem !important; font-weight: 850; line-height: 1.3; color: #1f2933 !important; margin: 0 !important; letter-spacing: -0.005em; } .chav-gender-needed p, .chav-gender-needed .orthodox-note { margin: 0 !important; font-size: 0.92rem !important; line-height: 1.55; color: #4a5564 !important; max-width: 460px; } .chav-gender-needed a { color: #2a8aac !important; font-weight: 800; text-decoration: none; border-bottom: 2px solid rgba(42, 138, 172, 0.35); padding-bottom: 1px; transition: color 160ms ease, border-color 160ms ease, transform 160ms ease; } .chav-gender-needed a:hover, .chav-gender-needed a:focus-visible { color: #b58a2a !important; border-bottom-color: #b58a2a; } /* Dark theme: keep the cream card but enrich shadows/borders */ :root[data-theme="dark"] .chav-gender-needed { box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(215, 182, 95, 0.24); border-color: rgba(215, 182, 95, 0.6); } @media (max-width: 520px) { .chav-gender-needed { margin: 1.2rem 0.5rem 0; padding: 1.35rem 1.1rem; border-radius: 18px; } .chav-gender-needed strong { font-size: 1rem !important; } .chav-gender-needed p, .chav-gender-needed .orthodox-note { font-size: 0.87rem !important; } } .chav-gender-pill i { color: var(--gold, #d7b65f); } /* Inline gender selector section (replaces the popup) */ .chav-gender-inline-setup { margin: 1.4rem 0; padding: 2rem clamp(1rem, 3vw, 2rem); border-radius: 22px; border: 1.5px solid color-mix(in srgb, var(--gold, #d7b65f) 50%, var(--line, rgba(0,0,0,0.14))); background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, #2a8aac 28%, transparent), transparent 55%), radial-gradient(ellipse at 100% 100%, color-mix(in srgb, #d7b65f 24%, transparent), transparent 55%), var(--panel, #fff); box-shadow: 0 20px 50px rgba(8, 14, 24, 0.18), inset 0 2px 0 color-mix(in srgb, var(--gold, #d7b65f) 38%, transparent); } .chav-gender-inline-head { text-align: center; margin-bottom: 1.4rem; } .chav-gender-inline-head .eyebrow { display: inline-block; padding: 0.25rem 0.85rem; border-radius: 999px; background: color-mix(in srgb, var(--gold, #d7b65f) 18%, transparent); color: color-mix(in srgb, var(--gold, #d7b65f) 80%, var(--text, #1f2933)); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .chav-gender-inline-head h2 { margin: 0.6rem 0 0.5rem; font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; font-family: var(--serif, "Cormorant Garamond", Georgia, serif); background: linear-gradient(135deg, color-mix(in srgb, #2a8aac 80%, var(--text, #1f2933)), color-mix(in srgb, var(--gold, #d7b65f) 80%, var(--text, #1f2933))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .chav-gender-inline-head p { margin: 0; max-width: 60ch; margin-left: auto; margin-right: auto; color: color-mix(in srgb, var(--text, #1f2933) 75%, transparent); font-size: 0.95rem; } .chav-gender-inline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 720px; margin: 0 auto; } @media (max-width: 520px) { .chav-gender-inline-grid { grid-template-columns: 1fr; } } .chav-gender-inline-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; padding: 1.8rem 1.2rem 1.4rem; min-height: 220px; border-radius: 18px; border: 2px solid var(--line, rgba(0, 0, 0, 0.14)); background: var(--panel, #fff); color: var(--text, #1f2933); cursor: pointer; font-weight: 800; transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2), border-color 0.18s ease, box-shadow 0.22s ease, background 0.18s ease; overflow: hidden; } .chav-gender-inline-card:hover { transform: translateY(-4px); border-color: var(--gold, #d7b65f); box-shadow: 0 24px 50px rgba(8, 14, 24, 0.2); } .chav-gender-inline-card.is-loading { pointer-events: none; opacity: 0.7; } .chav-gender-inline-emblem { display: inline-flex; align-items: center; justify-content: center; width: 92px; height: 92px; border-radius: 24px; font-size: 4.2rem; line-height: 1; font-weight: 400; color: #fff; box-shadow: 0 14px 30px rgba(8, 14, 24, 0.18); } .chav-gender-inline-emblem-men { background: linear-gradient(135deg, #2a8aac, #1488a4); box-shadow: 0 14px 30px color-mix(in srgb, #2a8aac 50%, transparent); } .chav-gender-inline-emblem-women { background: linear-gradient(135deg, #c8798f, #a85878); box-shadow: 0 14px 30px color-mix(in srgb, #c8798f 50%, transparent); } .chav-gender-inline-title { font-size: 1.15rem; font-weight: 900; letter-spacing: -0.005em; } .chav-gender-inline-sub { font-size: 0.88rem; font-weight: 600; opacity: 0.78; } .chav-gender-inline-cta { margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.95rem; border-radius: 999px; background: color-mix(in srgb, var(--gold, #d7b65f) 22%, transparent); color: color-mix(in srgb, var(--gold, #d7b65f) 80%, var(--text, #1f2933)); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; } /* Account panel - "Learning audience" card (matches inline aesthetic) */ .learning-audience-card { margin: 0 0 1.6rem; padding: 1.2rem 1.4rem; border: 1px solid var(--line, rgba(0,0,0,0.14)); border-radius: 16px; background: var(--panel, #fff); box-shadow: 0 10px 28px rgba(8, 14, 24, 0.06); } .learning-audience-card.is-men { background: linear-gradient(135deg, color-mix(in srgb, #2a8aac 8%, var(--panel, #fff)), var(--panel, #fff)); border-color: color-mix(in srgb, #2a8aac 36%, var(--line)); } .learning-audience-card.is-women { background: linear-gradient(135deg, color-mix(in srgb, #c8798f 8%, var(--panel, #fff)), var(--panel, #fff)); border-color: color-mix(in srgb, #c8798f 36%, var(--line)); } .learning-audience-head { display: grid; grid-template-columns: 56px 1fr; gap: 0.9rem; align-items: center; margin-bottom: 0.4rem; } .learning-audience-head .eyebrow { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; display: block; margin-bottom: 0.1rem; } .learning-audience-head strong { font-size: 1.1rem; font-weight: 900; } .learning-audience-emblem { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; font-size: 2.2rem; line-height: 1; color: #fff; } .learning-audience-emblem-men { background: linear-gradient(135deg, #2a8aac, #1488a4); box-shadow: 0 8px 18px color-mix(in srgb, #2a8aac 38%, transparent); } .learning-audience-emblem-women { background: linear-gradient(135deg, #c8798f, #a85878); box-shadow: 0 8px 18px color-mix(in srgb, #c8798f 38%, transparent); } .learning-audience-card-pick { padding: 1.4rem 1.4rem 1.6rem; } .learning-audience-pick-head { text-align: center; margin-bottom: 1rem; } .learning-audience-pick-head .eyebrow { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--gold, #d7b65f) 18%, transparent); color: color-mix(in srgb, var(--gold, #d7b65f) 80%, var(--text, #1f2933)); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .learning-audience-pick-head h3 { margin: 0.5rem 0 0.3rem; font-size: 1.3rem; font-weight: 900; letter-spacing: -0.01em; } .learning-audience-pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; } @media (max-width: 520px) { .learning-audience-pick-grid { grid-template-columns: 1fr; } } .learning-audience-pick-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 1.2rem 1rem; border-radius: 14px; border: 2px solid var(--line, rgba(0, 0, 0, 0.14)); background: var(--panel, #fff); color: var(--text, #1f2933); cursor: pointer; font-weight: 800; transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2), border-color 0.18s ease, box-shadow 0.18s ease; } .learning-audience-pick-card:hover { transform: translateY(-2px); border-color: var(--gold, #d7b65f); box-shadow: 0 14px 28px rgba(8, 14, 24, 0.12); } .learning-audience-pick-card.is-saving { opacity: 0.6; pointer-events: none; } .learning-audience-pick-emblem { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 18px; font-size: 2.8rem; line-height: 1; color: #fff; box-shadow: 0 10px 22px rgba(8, 14, 24, 0.18); } .learning-audience-pick-title { font-size: 1rem; font-weight: 900; } .learning-audience-pick-sub { font-size: 0.82rem; opacity: 0.74; font-weight: 600; } :root[data-theme="dark"] .chav-gender-inline-setup { background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, #2a8aac 38%, transparent), transparent 55%), radial-gradient(ellipse at 100% 100%, color-mix(in srgb, #d7b65f 28%, transparent), transparent 55%), #11151c; border-color: color-mix(in srgb, var(--gold, #d7b65f) 50%, rgba(220, 232, 207, 0.14)); } :root[data-theme="dark"] .chav-gender-inline-card, :root[data-theme="dark"] .learning-audience-pick-card, :root[data-theme="dark"] .learning-audience-card { background: #11151c; border-color: rgba(220, 232, 207, 0.14); color: #e9eef6; } :root[data-theme="dark"] .learning-audience-card.is-men { background: linear-gradient(135deg, color-mix(in srgb, #2a8aac 22%, #11151c), #11151c); } :root[data-theme="dark"] .learning-audience-card.is-women { background: linear-gradient(135deg, color-mix(in srgb, #c8798f 22%, #11151c), #11151c); } /* Onboarding pulse - draws attention when user lands from login */ .learning-audience-pulse { animation: learning-audience-pulse 1.4s ease-in-out 3; border-color: var(--gold, #d7b65f) !important; } /* Live Questions - reply form + existing reply display */ .lq-existing-reply { margin: 0.5rem 0; padding: 0.55rem 0.75rem; border-left: 3px solid var(--cyan, #18b7d9); border-radius: 8px; background: color-mix(in srgb, var(--cyan, #18b7d9) 12%, transparent); } .lq-existing-reply-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in srgb, var(--cyan, #18b7d9) 90%, var(--text, #1f2933)); margin-bottom: 0.2rem; } .lq-existing-reply p { margin: 0; font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; } .lq-reply-form { display: grid; gap: 0.5rem; margin-top: 0.5rem; padding: 0.6rem; border-radius: 8px; border: 1px solid var(--line, rgba(0,0,0,0.14)); background: color-mix(in srgb, var(--panel, #fff) 96%, var(--text, #1f2933) 4%); } .lq-reply-form[hidden] { display: none; } .lq-reply-form textarea { width: 100%; resize: vertical; min-height: 60px; padding: 0.55rem 0.7rem; border: 1px solid var(--line, rgba(0,0,0,0.14)); border-radius: 6px; background: var(--panel, #fff); font: inherit; font-size: 0.88rem; box-sizing: border-box; } .lq-reply-form-actions { display: flex; justify-content: flex-end; gap: 0.4rem; } .lq-reply-form-actions button { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; padding: 0.45rem 0.85rem; } .lq-reply-form-actions .primary-button { background: linear-gradient(135deg, var(--cyan, #18b7d9), #1488a4) !important; border: 0 !important; color: #fff !important; } .lq-item.lq-has-reply { background: color-mix(in srgb, var(--cyan, #18b7d9) 6%, transparent); } .lq-btn-reply-toggle { background: var(--cyan, #18b7d9) !important; color: #fff !important; border: 0 !important; } :root[data-theme="dark"] .lq-reply-form { background: rgba(220, 232, 207, 0.04); border-color: rgba(220, 232, 207, 0.12); } :root[data-theme="dark"] .lq-reply-form textarea { background: rgba(17, 21, 28, 0.92); color: #e9eef6; } /* ============================================================ Stripe Connect agreement - single master checkbox ============================================================ */ .pay-legal-summary { list-style: none; padding: 0.9rem 1.1rem; margin: 0.6rem 0 1rem; border: 1px solid var(--line, rgba(0, 0, 0, 0.14)); border-radius: 12px; background: color-mix(in srgb, var(--text, #1f2933) 4%, transparent); display: grid; gap: 0.55rem; } .pay-legal-summary li { position: relative; padding-left: 1.4rem; font-size: 0.88rem; line-height: 1.5; } .pay-legal-summary li::before { content: "\f00c"; /* fa-check */ font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 0.15rem; color: #2f9e44; font-size: 0.8rem; } .pay-legal-check.pay-legal-check-master { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.85rem 1rem; border: 1.5px solid color-mix(in srgb, var(--cyan, #18b7d9) 36%, var(--line, rgba(0,0,0,0.14))); border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--cyan, #18b7d9) 10%, var(--panel, #fff)), var(--panel, #fff)); cursor: pointer; transition: border-color 0.16s ease, background 0.16s ease; } .pay-legal-check.pay-legal-check-master:hover { border-color: var(--cyan, #18b7d9); } .pay-legal-check.pay-legal-check-master input[type="checkbox"] { width: 22px; height: 22px; margin-top: 1px; cursor: pointer; accent-color: var(--cyan, #18b7d9); flex-shrink: 0; } .pay-legal-check.pay-legal-check-master span { font-size: 0.9rem; line-height: 1.5; } .pay-legal-check.pay-legal-check-master input:checked ~ span strong { color: var(--cyan, #18b7d9); } :root[data-theme="dark"] .pay-legal-summary { background: rgba(220, 232, 207, 0.04); border-color: rgba(220, 232, 207, 0.12); } :root[data-theme="dark"] .pay-legal-check.pay-legal-check-master { background: linear-gradient(135deg, color-mix(in srgb, var(--cyan, #18b7d9) 18%, #11151c), #11151c); border-color: color-mix(in srgb, var(--cyan, #18b7d9) 50%, rgba(220, 232, 207, 0.16)); } /* Non-profit status badge in the Stripe agreement header */ .pay-legal-nonprofit { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0.6rem 0 0 !important; padding: 0.65rem 0.85rem; border-radius: 10px; border: 1px solid color-mix(in srgb, #2f9e44 36%, transparent); background: color-mix(in srgb, #2f9e44 8%, transparent); color: color-mix(in srgb, #2f9e44 80%, var(--text, #1f2933)); font-size: 0.85rem !important; line-height: 1.5; } .pay-legal-nonprofit i { color: #2f9e44; font-size: 1rem; margin-top: 1px; } :root[data-theme="dark"] .pay-legal-nonprofit { background: color-mix(in srgb, #2f9e44 16%, transparent); color: #6ed583; } .footer-nonprofit { display: block; margin-top: 0.3rem; font-size: 0.72rem; opacity: 0.65; letter-spacing: 0.02em; } /* ============================================================ Davening page - global gaps between sections + centered form ============================================================ */ /* Generous, consistent gap between every wide-section on the davening page */ body .main.page-main > section + section, .page-main > .wide-section + .wide-section { margin-top: clamp(1.4rem, 3vw, 2.4rem); } /* Submit a Name for Tefillah - centered + 2-column 2026 form */ .davening-request-section .page-intro { text-align: center; max-width: 720px; margin: 0 auto clamp(1.4rem, 2.6vw, 2.2rem); } .davening-request-section .page-intro h2 { margin: 0.35rem auto 0.45rem; } .davening-request-section .page-intro p { margin: 0 auto; max-width: 60ch; } .davening-request-section .davening-standalone-request { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem 1.2rem; max-width: 720px; margin: 0 auto !important; padding: 1.6rem 1.4rem 1.5rem !important; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--gold, #d7b65f) 32%, var(--line, rgba(0,0,0,0.14))) !important; background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, #b85a76 14%, transparent), transparent 60%), radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--gold, #d7b65f) 16%, transparent), transparent 60%), color-mix(in srgb, var(--panel, #fff) 96%, transparent) !important; box-shadow: 0 18px 44px rgba(8, 14, 24, 0.16) !important; } .davening-request-section .davening-standalone-request label { display: grid; gap: 0.35rem; font-weight: 700; font-size: 0.9rem; } .davening-request-section .davening-standalone-request label .field-hint { font-weight: 500; opacity: 0.7; font-size: 0.8rem; } .davening-request-section .davening-standalone-request label input, .davening-request-section .davening-standalone-request label select, .davening-request-section .davening-standalone-request label textarea { padding: 0.65rem 0.85rem !important; border-radius: 10px !important; border: 1px solid var(--line, rgba(0, 0, 0, 0.16)) !important; background: var(--panel, #fff) !important; font: inherit; font-size: 0.92rem; box-sizing: border-box; } .davening-request-section .davening-standalone-request label.wide-field { grid-column: 1 / -1; } .davening-request-section .davening-standalone-request label textarea { resize: vertical; min-height: 110px; } .davening-request-section .davening-standalone-request .checkbox-line { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.9rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--cyan, #18b7d9) 30%, var(--line)); background: color-mix(in srgb, var(--cyan, #18b7d9) 8%, transparent); font-weight: 700; font-size: 0.88rem; cursor: pointer; } .davening-request-section .davening-standalone-request .checkbox-line input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--cyan, #18b7d9); cursor: pointer; } .davening-request-section .davening-standalone-request .primary-button { grid-column: 1 / -1; justify-self: center; min-width: 260px; padding: 0.85rem 2rem !important; font-weight: 900 !important; font-size: 0.95rem !important; background: linear-gradient(135deg, var(--cyan, #18b7d9), #1488a4) !important; border: 0 !important; color: #fff !important; border-radius: 12px !important; box-shadow: 0 12px 30px color-mix(in srgb, var(--cyan, #18b7d9) 36%, transparent); } .davening-request-section .davening-standalone-request .primary-button:hover { transform: translateY(-2px); filter: brightness(1.05); } @media (max-width: 640px) { .davening-request-section .davening-standalone-request { grid-template-columns: 1fr !important; } } :root[data-theme="dark"] .davening-request-section .davening-standalone-request { background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, #b85a76 22%, transparent), transparent 60%), radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--gold, #d7b65f) 22%, transparent), transparent 60%), rgba(17, 21, 28, 0.92) !important; } :root[data-theme="dark"] .davening-request-section .davening-standalone-request label input, :root[data-theme="dark"] .davening-request-section .davening-standalone-request label select, :root[data-theme="dark"] .davening-request-section .davening-standalone-request label textarea { background: rgba(220, 232, 207, 0.06) !important; color: #e9eef6 !important; border-color: rgba(220, 232, 207, 0.14) !important; } /* ============================================================ Leader profile page (v2): ROUND avatar ============================================================ */ .lv2-avatar-wrap .rabbi-hero-avatar, .lv2-head .rabbi-hero-avatar { border-radius: 50% !important; aspect-ratio: 1 / 1; width: clamp(128px, 14vw, 180px) !important; height: clamp(128px, 14vw, 180px) !important; border: 5px solid var(--panel, #fff) !important; box-shadow: 0 22px 50px rgba(8, 14, 24, 0.32), 0 0 0 1px color-mix(in srgb, var(--rabbi-end, #d7b65f) 36%, transparent) !important; background: var(--avatar, linear-gradient(135deg, var(--rabbi-start, #1f3a5f), var(--rabbi-end, #d7b65f))) !important; background-size: cover !important; background-position: center !important; } :root[data-theme="dark"] .lv2-avatar-wrap .rabbi-hero-avatar { border-color: #11151c !important; } /* ============================================================ Leader cards in the directory: bigger, beautifully formatted avatar ============================================================ */ .rabbi-card .rabbi-top { align-items: center !important; gap: 1rem !important; margin-bottom: 0.95rem !important; } .rabbi-card .rabbi-top .avatar { width: 76px !important; height: 76px !important; flex-shrink: 0 !important; border-radius: 50% !important; border: 3px solid var(--panel, #fff) !important; box-shadow: 0 10px 24px rgba(8, 14, 24, 0.18), 0 0 0 2px color-mix(in srgb, var(--rabbi-end, #d7b65f) 38%, transparent), 0 0 0 6px color-mix(in srgb, var(--rabbi-start, #0077a8) 14%, transparent); background: var(--avatar, linear-gradient(135deg, var(--rabbi-start, #0077a8), var(--rabbi-end, #d7b65f))) !important; background-size: cover !important; background-position: center !important; background-color: color-mix(in srgb, var(--rabbi-start, #0077a8) 18%, transparent); transition: transform 0.25s ease, box-shadow 0.25s ease; } .rabbi-card:hover .rabbi-top .avatar { transform: scale(1.04); box-shadow: 0 14px 34px rgba(8, 14, 24, 0.28), 0 0 0 2px var(--rabbi-end, #d7b65f), 0 0 0 8px color-mix(in srgb, var(--rabbi-start, #0077a8) 22%, transparent); } /* Hide the silhouette pseudo-elements ONLY when a real photo is present */ .rabbi-card .rabbi-top .avatar.has-photo::before, .rabbi-card .rabbi-top .avatar.has-photo::after { display: none !important; content: none !important; } /* Name + meta block beside the bigger avatar gets more room */ .rabbi-card .rabbi-top > :not(.avatar) { min-width: 0; flex: 1 1 auto; } .rabbi-card .rabbi-top h3 { font-size: 1.05rem !important; margin-bottom: 0.2rem !important; line-height: 1.2; } :root[data-theme="dark"] .rabbi-card .rabbi-top .avatar { border-color: #11151c !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 0 2px color-mix(in srgb, var(--rabbi-end, #d7b65f) 38%, transparent), 0 0 0 6px color-mix(in srgb, var(--rabbi-start, #0077a8) 22%, transparent); } /* Mobile - keep the avatar prominent but slightly smaller so the name still fits */ @media (max-width: 480px) { .rabbi-card .rabbi-top .avatar { width: 64px !important; height: 64px !important; } } @keyframes learning-audience-pulse { 0%, 100% { box-shadow: 0 10px 28px rgba(8, 14, 24, 0.06); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold, #d7b65f) 24%, transparent), 0 18px 44px color-mix(in srgb, var(--gold, #d7b65f) 26%, transparent); } } /* ============================================================ Gender-pick warning block (chavrusa inline + Account panel) ============================================================ */ .gender-warning-block { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0.9rem; align-items: start; margin: 0 0 1.2rem; padding: 0.95rem 1.1rem; border-radius: 14px; border: 1.5px solid color-mix(in srgb, #d97757 50%, transparent); background: linear-gradient(135deg, color-mix(in srgb, #d97757 14%, var(--panel, #fff)), color-mix(in srgb, #b08a3a 6%, var(--panel, #fff))); box-shadow: 0 6px 18px color-mix(in srgb, #d97757 18%, transparent); } .gender-warning-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(135deg, #d97757, #c93434); color: #fff; font-size: 1.3rem; box-shadow: 0 6px 14px color-mix(in srgb, #d97757 40%, transparent); flex-shrink: 0; } .gender-warning-body { min-width: 0; } .gender-warning-body strong { display: block; font-size: 0.95rem; font-weight: 900; margin-bottom: 0.35rem; color: color-mix(in srgb, #c93434 78%, var(--text, #1f2933)); letter-spacing: 0.005em; } .gender-warning-body ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; } .gender-warning-body li { font-size: 0.86rem; line-height: 1.5; color: color-mix(in srgb, var(--text, #1f2933) 85%, transparent); } .gender-warning-body li strong { display: inline; margin: 0; font-weight: 900; color: color-mix(in srgb, #c93434 70%, var(--text, #1f2933)); } /* Dark mode */ :root[data-theme="dark"] .gender-warning-block { background: linear-gradient(135deg, color-mix(in srgb, #d97757 28%, #11151c), color-mix(in srgb, #b08a3a 12%, #11151c)); border-color: color-mix(in srgb, #d97757 55%, rgba(220, 232, 207, 0.18)); } :root[data-theme="dark"] .gender-warning-body strong { color: #ff9b6e; } :root[data-theme="dark"] .gender-warning-body li { color: #e9eef6; } :root[data-theme="dark"] .gender-warning-body li strong { color: #ff9b6e; } @media (max-width: 520px) { .gender-warning-block { grid-template-columns: 36px minmax(0, 1fr); gap: 0.7rem; padding: 0.8rem 0.9rem; } .gender-warning-icon { width: 36px; height: 36px; font-size: 1.1rem; border-radius: 10px; } .gender-warning-body strong { font-size: 0.9rem; } .gender-warning-body li { font-size: 0.8rem; } } /* ======================================================================== Clean Rabbi Card v3 (2026-05-27) Fixed-circle avatar on the left, title text on the right. No action buttons, no social icons, no hover popup. ======================================================================== */ /* Disable the global hover card popup site-wide */ .rabbi-hover-card { display: none !important; } /* Cards using the new clean layout */ .rabbi-card.rabbi-card--clean { padding: 16px; display: block; } .rabbi-card.rabbi-card--clean .rabbi-card-link { display: block; text-decoration: none; color: inherit; } .rabbi-card.rabbi-card--clean .rabbi-card-link:hover, .rabbi-card.rabbi-card--clean .rabbi-card-link:focus-visible { text-decoration: none; } .rabbi-card.rabbi-card--clean .rabbi-top { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; } /* Fixed-circle avatar. --avatar already contains the full background shorthand (e.g. "url(photo.jpg) center/cover"), so we MUST NOT append center/cover again or the declaration becomes invalid and the browser drops it. */ .rabbi-card.rabbi-card--clean .avatar { flex: 0 0 76px; width: 76px !important; height: 76px !important; min-width: 76px; min-height: 76px; border-radius: 50% !important; background: var(--avatar); background-repeat: no-repeat; background-position: center; background-size: cover; border: 3px solid color-mix(in srgb, var(--rabbi-end, var(--gold, #d7b65f)) 62%, #ffffff) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--rabbi-start, var(--cyan, #2a8aac)) 70%, transparent), 0 12px 28px color-mix(in srgb, var(--rabbi-start, var(--cyan, #2a8aac)) 22%, transparent) !important; display: block; } /* Title block moves to the right of the avatar */ .rabbi-card.rabbi-card--clean .rabbi-card-headline { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .rabbi-card.rabbi-card--clean .rabbi-card-headline h3 { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 800; } .rabbi-card.rabbi-card--clean .rabbi-card-headline h3 a { color: color-mix(in srgb, var(--rabbi-start, var(--cyan, #2a8aac)) 28%, var(--ink, #1f2933)) !important; text-decoration: none; } .rabbi-card.rabbi-card--clean .rabbi-card-headline .row-meta { font-size: 12.5px; color: var(--muted, #6b7280); } .rabbi-card.rabbi-card--clean .live-card-badge--inline { margin: 6px 0 0; padding: 4px 10px; font-size: 10.5px; align-self: flex-start; } /* Bio paragraph */ .rabbi-card.rabbi-card--clean .rabbi-card-bio { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted, #6b7280); min-height: 0; } /* Cursor pointer on whole card */ .rabbi-card.rabbi-card--clean { cursor: pointer; } .rabbi-card.rabbi-card--clean:hover { transform: translateY(-1px); transition: transform 0.18s ease; } /* Dark mode: keep text readable */ :root[data-theme="dark"] .rabbi-card.rabbi-card--clean .rabbi-card-headline h3 a { color: #f4ecd6 !important; } :root[data-theme="dark"] .rabbi-card.rabbi-card--clean .rabbi-card-headline .row-meta, :root[data-theme="dark"] .rabbi-card.rabbi-card--clean .rabbi-card-bio { color: #c9c1a8; } /* Mobile: keep avatar circle the same size, just tighten gap */ @media (max-width: 520px) { .rabbi-card.rabbi-card--clean .avatar { flex: 0 0 64px; width: 64px !important; height: 64px !important; min-width: 64px; min-height: 64px; } .rabbi-card.rabbi-card--clean .rabbi-top { gap: 12px; } .rabbi-card.rabbi-card--clean .rabbi-card-headline h3 { font-size: 16px; } } /* Card bio note in admin: dual hint (90 on card, full on profile) */ .rabbi-card-bio-hint { display: block; margin-top: 0.25rem; font-size: 0.78rem; color: var(--muted, #6b7280); } .rabbi-card-bio-hint strong { color: var(--gold, #d7b65f); } .rabbi-card-bio-hint .over-90 { color: #b1263d; font-weight: 800; } /* Personal-topic chip as a single button (clicking the whole pill adds to interests) */ button.personal-topic-chip-wrap.personal-topic-chip-btn { font: inherit; color: inherit; appearance: none; cursor: pointer; text-align: left; } button.personal-topic-chip-wrap.personal-topic-chip-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--cyan, #2a8aac) 60%, transparent); outline-offset: 2px; } button.personal-topic-chip-wrap.personal-topic-chip-btn[disabled] { opacity: 0.55; cursor: progress; } /* ============================================================ Torah Shorts ecosystem (2026-05-27) - Homepage horizontal rails - Per-rabbi rail - Vertical-swipe player - Educator admin Shorts panel ============================================================ */ /* ── Shorts rail (homepage + rabbi profile) ────────────────── */ .shorts-section { margin-block: 1.4rem; } .shorts-section .section-title-row .eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan, #2a8aac); margin-bottom: 0.2rem; } .shorts-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 170px; gap: 0.9rem; padding: 0.6rem 0.2rem 0.85rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .shorts-rail::-webkit-scrollbar { height: 6px; } .shorts-rail::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--cyan, #2a8aac) 40%, transparent); border-radius: 999px; } .short-card { display: flex; flex-direction: column; gap: 0.45rem; scroll-snap-align: start; text-decoration: none; color: inherit; border-radius: 14px; overflow: hidden; transition: transform 180ms ease, box-shadow 180ms ease; } .short-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px color-mix(in srgb, var(--cyan, #2a8aac) 18%, transparent); } .short-card-thumb { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; background-color: #0d1422; background-size: cover; background-position: center; overflow: hidden; isolation: isolate; } .short-card-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.6) 100%); z-index: 1; } .short-card-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: rgba(255, 255, 255, 0.92); text-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); z-index: 2; pointer-events: none; opacity: 0; transition: opacity 200ms ease; } .short-card:hover .short-card-play { opacity: 1; } .short-card-duration { position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 2px 7px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, 0.62); border-radius: 999px; backdrop-filter: blur(4px); } .short-card-tag { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 2px 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: #1f2933; background: rgba(255, 248, 220, 0.92); border-radius: 999px; } .short-card-meta { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; } .short-card-title { font-size: 13px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .short-card-rabbi { font-size: 11.5px; color: var(--muted, #6b7280); } .short-card-views { font-size: 11px; color: color-mix(in srgb, var(--muted, #6b7280) 70%, transparent); } @media (max-width: 640px) { .shorts-rail { grid-auto-columns: 140px; gap: 0.7rem; } .short-card-title { font-size: 12.5px; } } /* ── Shorts vertical-swipe player (mobile-first) ───────────── */ body.shorts-body { overflow: hidden; } body.shorts-body .shorts-main { height: 100dvh; height: calc(100vh - env(safe-area-inset-top)); margin: 0; padding: 0; background: #02060d; overflow: hidden; } .shorts-main--empty { height: auto; overflow: auto; padding: 5vh 2rem; } .shorts-empty { max-width: 480px; margin: 0 auto; text-align: center; color: #f4ecd6; } .shorts-empty h1 { font-size: 2rem; margin-bottom: 1rem; } .shorts-empty p { color: #c9c1a8; margin-bottom: 1.5rem; } .shorts-feed { position: fixed; inset: 0; height: 100dvh; overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .shorts-feed::-webkit-scrollbar { display: none; } .short-slide { position: relative; scroll-snap-align: start; scroll-snap-stop: always; height: 100dvh; width: 100vw; display: flex; align-items: center; justify-content: center; background: #02060d; } .short-video-wrap { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .short-video { width: 100%; height: 100%; border: 0; display: block; background: #000; } @media (min-width: 720px) { .short-video-wrap { width: min(100%, calc(100dvh * 9 / 16)); border-radius: 22px; overflow: hidden; } .short-slide { padding: 1.4rem 0; } } /* Overlay UI */ .short-overlay { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: flex-end; z-index: 5; } .short-overlay > * { pointer-events: auto; } .short-overlay-bottom { flex: 1; padding: 1.2rem 1.1rem calc(1.6rem + env(safe-area-inset-bottom)); color: #fff; background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%); display: flex; flex-direction: column; gap: 0.55rem; } .short-rabbi-pill { display: inline-flex; align-items: center; gap: 0.5rem; width: max-content; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; text-decoration: none; backdrop-filter: blur(8px); font-weight: 800; font-size: 13px; } .short-rabbi-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #2a8aac, #d7b65f); background-size: cover; background-position: center; border: 2px solid rgba(255, 255, 255, 0.85); } .short-title { font-size: 1.05rem; font-weight: 850; line-height: 1.3; margin: 0; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } .short-desc { font-size: 0.9rem; line-height: 1.4; margin: 0; color: rgba(255, 255, 255, 0.88); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .short-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .short-tag { padding: 3px 9px; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: #fff; backdrop-filter: blur(8px); } /* Action column on the right */ .short-actions { position: absolute; right: 0.8rem; bottom: calc(2rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 0.85rem; align-items: center; } .short-action { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 50px; background: transparent; border: 0; color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; cursor: pointer; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); } .short-action i { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, 0.5); font-size: 1.2rem; backdrop-filter: blur(6px); transition: transform 160ms ease, background 160ms ease; } .short-action:hover i { transform: scale(1.08); background: rgba(42, 138, 172, 0.7); } @media (min-width: 720px) { .short-actions { right: calc(50% - min(45vw, calc(50dvh * 9 / 16)) - 80px); } .short-overlay-bottom { max-width: min(100%, calc(100dvh * 9 / 16)); margin-inline: auto; } } /* ── Rabbi admin Shorts panel ─────────────────────────────── */ .rabbi-shorts-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem 1rem; padding: 1rem 0; } .rabbi-shorts-form .wide-field { grid-column: 1 / -1; } .rabbi-shorts-list { display: flex; flex-direction: column; gap: 0.7rem; } .rabbi-short-row { display: grid; grid-template-columns: 78px 1fr auto; gap: 0.85rem; align-items: center; padding: 0.7rem 0.85rem; border-radius: 14px; border: 1px solid var(--line, rgba(0, 0, 0, 0.14)); background: color-mix(in srgb, var(--surface-strong, #fff) 92%, transparent); } .short-row-thumb { width: 78px; height: 110px; border-radius: 10px; background-color: #0d1422; background-size: cover; background-position: center; position: relative; } .short-row-duration { position: absolute; right: 4px; bottom: 4px; padding: 1px 6px; font-size: 10px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, 0.65); border-radius: 6px; } .short-row-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .short-row-meta strong { font-size: 0.95rem; } .short-row-meta small { color: var(--muted, #6b7280); font-size: 0.78rem; } .short-row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .short-row-tags .metric { padding: 2px 8px; font-size: 11px; border-radius: 999px; background: color-mix(in srgb, var(--cyan, #2a8aac) 14%, transparent); color: var(--cyan, #2a8aac); } .short-row-actions { display: flex; flex-direction: column; gap: 0.4rem; align-items: stretch; } .short-row-actions .compact { padding: 6px 12px; font-size: 12px; } @media (max-width: 520px) { .rabbi-short-row { grid-template-columns: 64px 1fr; grid-template-rows: auto auto; gap: 0.6rem; } .short-row-thumb { width: 64px; height: 90px; } .short-row-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; } } /* ========================================================== Notification bell + tour engine (2026-05-27) ========================================================== */ /* Bell trigger in top nav */ .nav-notif-slot { display: inline-flex; align-items: center; margin-right: 0.4rem; } .notif-bell { position: relative; } .notif-bell-trigger { position: relative; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--line, rgba(255,255,255,0.18)) 100%, transparent); background: rgba(255, 255, 255, 0.05); color: var(--ink, #f4ecd6); cursor: pointer; transition: background 160ms ease, transform 160ms ease; } .notif-bell-trigger:hover { background: rgba(42, 138, 172, 0.15); transform: translateY(-1px); } .notif-bell-trigger i { font-size: 1rem; } .notif-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #b1263d; color: #fff; font-size: 10px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--surface, #0d1422); } /* Dropdown panel ────────────── Uses position:fixed (NOT absolute) so it escapes any stacking context created by the mega-menu's backdrop-filter / sticky position. Without `fixed`, the dropdown is trapped inside the header's compositing layer and gets hidden behind the page content. JS sets top/right on open from the bell's bounding rect (see bindNotificationBell). */ .notif-panel { position: fixed; top: 64px; /* default fallback; JS overrides on open */ right: 16px; width: min(360px, calc(100vw - 24px)); max-height: min(72vh, 540px); border-radius: 18px; background: var(--surface-strong, #0f1a2a); border: 1px solid color-mix(in srgb, var(--gold, #d7b65f) 22%, var(--line, rgba(255,255,255,0.12))); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); overflow: hidden; z-index: 10000; /* above mega-menu (20), modals (9999), pwa banner (9000) */ display: flex; flex-direction: column; } .notif-panel[hidden] { display: none; } .notif-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--line, rgba(255,255,255,0.12)) 100%, transparent); } .notif-panel-head strong { font-size: 0.95rem; } .notif-panel-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; } .notif-panel-actions .link-button { font-size: 0.8rem; } .notif-panel-actions .notif-clear-link { color: var(--danger, #e07c7c); } .notif-panel-actions .notif-clear-link:hover { color: var(--danger-strong, #ff5a5a); text-decoration: underline; } .notif-panel-actions .link-button:disabled { opacity: 0.55; cursor: progress; } .notif-list { list-style: none; margin: 0; padding: 0.3rem 0; overflow-y: auto; flex: 1; } .notif-item { border-bottom: 1px solid color-mix(in srgb, var(--line, rgba(255,255,255,0.12)) 50%, transparent); } .notif-item:last-child { border-bottom: 0; } .notif-item.unread { background: color-mix(in srgb, var(--cyan, #2a8aac) 10%, transparent); } .notif-link { display: grid; grid-template-columns: 32px 1fr; gap: 0.7rem; padding: 0.7rem 1rem; text-decoration: none; color: inherit; } .notif-link:hover { background: color-mix(in srgb, var(--cyan, #2a8aac) 14%, transparent); } .notif-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--cyan, #2a8aac) 22%, transparent); color: var(--cyan, #2a8aac); } .notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .notif-body strong { font-size: 0.9rem; line-height: 1.3; } .notif-detail { font-size: 0.8rem; color: var(--muted, #c9c1a8); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .notif-time { font-size: 0.72rem; color: color-mix(in srgb, var(--muted, #c9c1a8) 70%, transparent); } .notif-empty { padding: 1.2rem 1rem; color: var(--muted, #c9c1a8); font-size: 0.88rem; text-align: center; list-style: none; } /* Notification preferences card (My Zone) */ .notif-settings-card { margin: 1rem 0 1.6rem; padding: 1.2rem 1.25rem; border-radius: 16px; background: color-mix(in srgb, var(--cyan, #2a8aac) 8%, var(--surface-strong, #0f1a2a)); border: 1px solid color-mix(in srgb, var(--gold, #d7b65f) 18%, var(--line, rgba(255,255,255,0.12))); } .notif-settings-card header h3 { font-size: 1.05rem; margin: 0 0 0.25rem; } .notif-settings-card header .orthodox-note { font-size: 0.85rem; } .notif-prefs-form { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.85rem; } .notif-pref-row { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: rgba(255, 255, 255, 0.03); cursor: pointer; transition: background 140ms ease; } .notif-pref-row:hover { background: rgba(42, 138, 172, 0.12); } .notif-pref-row input { margin-top: 3px; } .notif-pref-row strong { font-weight: 800; } .notif-pref-row span { font-size: 0.88rem; line-height: 1.4; } .notif-divider { border: 0; border-top: 1px solid color-mix(in srgb, var(--line, rgba(255,255,255,0.12)) 100%, transparent); margin: 0.5rem 0; } .notif-mute-row { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem 0.7rem; border-radius: 10px; background: rgba(255, 255, 255, 0.03); } .notif-mute-options { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .notif-history-title { font-size: 0.95rem; font-weight: 800; margin: 1rem 0 0.6rem; color: var(--muted, #c9c1a8); text-transform: uppercase; letter-spacing: 0.06em; } /* ── Tour overlay & spotlight ───────────────────────────── */ .tf-tour-root { position: fixed; inset: 0; z-index: 9999; pointer-events: none; } .tf-tour-root.active { pointer-events: auto; } .tf-tour-overlay { position: absolute; inset: 0; background: rgba(2, 6, 13, 0.72); opacity: 0; transition: opacity 240ms ease; pointer-events: none; } .tf-tour-overlay.visible { opacity: 1; pointer-events: auto; } .tf-tour-spotlight { position: absolute; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(2, 6, 13, 0.72), 0 0 0 3px color-mix(in srgb, var(--gold, #d7b65f) 70%, transparent), 0 0 22px color-mix(in srgb, var(--gold, #d7b65f) 50%, transparent); pointer-events: none; transition: top 240ms ease, left 240ms ease, width 240ms ease, height 240ms ease, opacity 240ms ease; animation: tfTourPulse 2.4s ease-in-out infinite; } @keyframes tfTourPulse { 0%, 100% { box-shadow: 0 0 0 9999px rgba(2, 6, 13, 0.72), 0 0 0 3px color-mix(in srgb, var(--gold, #d7b65f) 70%, transparent), 0 0 18px color-mix(in srgb, var(--gold, #d7b65f) 50%, transparent); } 50% { box-shadow: 0 0 0 9999px rgba(2, 6, 13, 0.72), 0 0 0 3px color-mix(in srgb, var(--gold, #d7b65f) 90%, transparent), 0 0 28px color-mix(in srgb, var(--gold, #d7b65f) 80%, transparent); } } .tf-tour-card { position: absolute; width: 360px; max-width: calc(100vw - 24px); border-radius: 20px; background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--cyan, #2a8aac) 22%, transparent), transparent 55%), var(--surface-strong, #0f1a2a); border: 1px solid color-mix(in srgb, var(--gold, #d7b65f) 28%, var(--line, rgba(255,255,255,0.15))); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55); color: var(--ink, #f4ecd6); padding: 1.2rem 1.25rem; transition: top 240ms ease, left 240ms ease, opacity 240ms ease; z-index: 10001; } .tf-tour-card-inner { display: flex; flex-direction: column; gap: 0.6rem; } .tf-tour-step-count { display: inline-block; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan, #2a8aac); } .tf-tour-title { font-size: 1.15rem; font-weight: 850; margin: 0; line-height: 1.3; } .tf-tour-body { font-size: 0.92rem; line-height: 1.55; color: color-mix(in srgb, var(--muted, #c9c1a8) 100%, transparent); margin: 0; } .tf-tour-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; margin-top: 0.3rem; } .tf-tour-skip { background: none; border: 0; color: color-mix(in srgb, var(--muted, #c9c1a8) 80%, transparent); cursor: pointer; font-size: 0.85rem; padding: 0.5rem 0.6rem; } .tf-tour-skip:hover { color: var(--ink, #f4ecd6); } .tf-tour-next { background: linear-gradient(135deg, var(--cyan, #2a8aac), color-mix(in srgb, var(--cyan, #2a8aac) 60%, var(--gold, #d7b65f))); color: #fff; border: 0; border-radius: 999px; padding: 0.55rem 1.4rem; font-weight: 800; cursor: pointer; box-shadow: 0 10px 24px color-mix(in srgb, var(--cyan, #2a8aac) 36%, transparent); transition: transform 140ms ease, box-shadow 140ms ease; } .tf-tour-next:hover { transform: translateY(-1px); box-shadow: 0 14px 30px color-mix(in srgb, var(--cyan, #2a8aac) 46%, transparent); } @media (max-width: 520px) { .tf-tour-card { padding: 1rem 1.05rem; border-radius: 16px; } .tf-tour-title { font-size: 1.05rem; } .tf-tour-body { font-size: 0.88rem; } } /* ============================================================ TagPicker (2026-05-27) - selectable chip group replacing free text inputs for site-wide Torah taxonomy. ============================================================ */ .tag-picker { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.85rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--surface-strong, #0f1a2a) 96%, transparent); border: 1px solid color-mix(in srgb, var(--line, rgba(255,255,255,0.14)) 100%, transparent); } .tag-picker-label { font-weight: 800; font-size: 0.95rem; color: var(--ink, #f4ecd6); margin: 0; } .tag-required { color: #b1263d; } .tag-picker-hint { font-size: 0.82rem; margin: 0; color: var(--muted, #c9c1a8); line-height: 1.45; } .tag-picker-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.4rem 0; } .tag-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1.5px solid color-mix(in srgb, var(--line, rgba(255,255,255,0.18)) 100%, transparent); color: var(--ink, #f4ecd6); font-size: 0.84rem; font-weight: 700; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, color 140ms ease; white-space: nowrap; } .tag-chip:hover { background: rgba(42, 138, 172, 0.18); border-color: color-mix(in srgb, var(--cyan, #2a8aac) 50%, transparent); transform: translateY(-1px); } .tag-chip.active { background: linear-gradient(135deg, var(--cyan, #2a8aac), color-mix(in srgb, var(--cyan, #2a8aac) 50%, var(--gold, #d7b65f))); border-color: transparent; color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--cyan, #2a8aac) 30%, transparent); } .tag-chip.is-custom { background: linear-gradient(135deg, color-mix(in srgb, var(--gold, #d7b65f) 60%, transparent), color-mix(in srgb, var(--gold, #d7b65f) 40%, transparent)); color: #1f2933; } .tag-chip.is-custom span { font-weight: 900; padding-left: 2px; } .tag-picker-add { display: flex; gap: 0.5rem; align-items: center; } .tag-picker-add-input { flex: 1; min-width: 0; padding: 7px 12px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--line, rgba(255,255,255,0.18)) 100%, transparent); background: rgba(255, 255, 255, 0.04); color: var(--ink, #f4ecd6); font-size: 0.85rem; } .tag-picker-add-input:focus { outline: none; border-color: color-mix(in srgb, var(--cyan, #2a8aac) 70%, transparent); } .tag-picker-counter { font-size: 0.74rem; color: var(--muted, #c9c1a8); align-self: flex-end; } .tag-picker-counter.tag-picker-max-flash { color: #b1263d; animation: tagPickerFlash 0.5s ease; } @keyframes tagPickerFlash { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* Profile "Advanced" accordion (details-on-demand pattern) */ .profile-advanced { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, 0.025); border: 1px dashed color-mix(in srgb, var(--line, rgba(255,255,255,0.18)) 100%, transparent); } .profile-advanced > summary { font-weight: 800; font-size: 0.9rem; cursor: pointer; color: var(--muted, #c9c1a8); list-style: none; display: flex; align-items: center; gap: 0.5rem; } .profile-advanced > summary::before { content: "▸"; display: inline-block; font-size: 0.7rem; color: var(--gold, #d7b65f); transition: transform 180ms ease; } .profile-advanced[open] > summary::before { transform: rotate(90deg); } .profile-advanced-body { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.06); display: grid; gap: 0.7rem; } @media (max-width: 520px) { .tag-picker { padding: 0.7rem 0.85rem; } .tag-chip { padding: 5px 11px; font-size: 0.8rem; } } /* ============================================================ AI Polish (Phase I - Content Pipeline foundation) ============================================================ */ .ai-polish-button { display: inline-flex; align-items: center; gap: 0.45rem; padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: 0.85rem; cursor: pointer; border: 0; color: #1f2933; background: linear-gradient(135deg, #ffe9a8 0%, #d7b65f 60%, #b58a2a 100%); box-shadow: 0 8px 20px rgba(181, 138, 42, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.6); transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease; } .ai-polish-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(181, 138, 42, 0.4); filter: brightness(1.06); } .ai-polish-button:disabled { cursor: progress; opacity: 0.75; } .ai-polish-spinner { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(31, 41, 51, 0.3); border-top-color: #1f2933; animation: aiPolishSpin 0.9s linear infinite; margin-right: 4px; vertical-align: -2px; } @keyframes aiPolishSpin { to { transform: rotate(360deg); } } /* Modal */ .ai-polish-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1.2rem; animation: aiPolishFade 220ms ease; } @keyframes aiPolishFade { from { opacity: 0; } to { opacity: 1; } } .ai-polish-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 13, 0.78); backdrop-filter: blur(8px); } .ai-polish-card { position: relative; width: min(620px, 100%); max-height: 86vh; overflow-y: auto; border-radius: 22px; background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--gold, #d7b65f) 22%, transparent), transparent 55%), radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--cyan, #2a8aac) 22%, transparent), transparent 55%), var(--surface-strong, #0f1a2a); border: 1px solid color-mix(in srgb, var(--gold, #d7b65f) 30%, var(--line, rgba(255,255,255,0.15))); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); color: var(--ink, #f4ecd6); padding: 1.6rem 1.7rem 1.3rem; } .ai-polish-head { margin-bottom: 0.85rem; } .ai-polish-eyebrow { display: inline-block; padding: 4px 12px; border-radius: 999px; background: linear-gradient(135deg, #ffe9a8, #d7b65f); color: #1f2933; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.45rem; } .ai-polish-head h2 { font-size: 1.35rem; margin: 0.2rem 0 0.35rem; letter-spacing: -0.01em; } .ai-polish-head p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--muted, #c9c1a8); } .ai-polish-section { margin-top: 1.1rem; } .ai-polish-section h3 { font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan, #2a8aac); margin: 0 0 0.55rem; } .ai-polish-section--keywords h3 { color: var(--gold, #d7b65f); } .ai-polish-pick { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; padding: 0.85rem 1rem; margin-bottom: 0.45rem; background: rgba(255, 255, 255, 0.05); border: 1.5px solid color-mix(in srgb, var(--line, rgba(255,255,255,0.18)) 100%, transparent); border-radius: 14px; color: var(--ink, #f4ecd6); font-size: 0.92rem; line-height: 1.45; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; } .ai-polish-pick:hover { background: rgba(42, 138, 172, 0.12); border-color: color-mix(in srgb, var(--cyan, #2a8aac) 50%, transparent); transform: translateY(-1px); } .ai-polish-pick.applied { background: linear-gradient(135deg, rgba(42, 138, 172, 0.25), rgba(215, 182, 95, 0.18)); border-color: var(--gold, #d7b65f); cursor: default; } .ai-polish-pick--block { white-space: normal; } .ai-polish-pick--full { font-weight: 800; } .ai-polish-pick-action { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--cyan, #2a8aac) 35%, transparent); color: #fff; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .ai-polish-pick.applied .ai-polish-pick-action { background: var(--gold, #d7b65f); color: #1f2933; } .ai-polish-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.5rem; } .ai-polish-tag-chip { padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--cyan, #2a8aac), color-mix(in srgb, var(--cyan, #2a8aac) 60%, var(--gold, #d7b65f))); color: #fff; font-size: 0.8rem; font-weight: 800; } .ai-polish-tag-chip.is-soft { background: rgba(215, 182, 95, 0.18); color: var(--gold, #d7b65f); border: 1px solid color-mix(in srgb, var(--gold, #d7b65f) 36%, transparent); } .ai-polish-keyword-hint { font-size: 0.8rem; color: var(--muted, #c9c1a8); margin: 0 0 0.4rem; line-height: 1.5; } .ai-polish-foot { display: flex; justify-content: flex-end; gap: 0.7rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } body.modal-open { overflow: hidden; } @media (max-width: 520px) { .ai-polish-card { padding: 1.2rem 1.15rem; border-radius: 18px; } .ai-polish-head h2 { font-size: 1.15rem; } .ai-polish-pick { font-size: 0.88rem; padding: 0.7rem 0.85rem; } } /* ============================================================ HOTFIX 2026-05-27: chavrusa banner text visibility + CTA gap ============================================================ */ /* CTA buttons in the chavrusa hero - centered like the rest of the hero block */ .chavrusa-cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.4rem; margin-bottom: 1.4rem; align-items: center; justify-content: center; } /* ULTRA-SPECIFIC override for invisible-text bug. Some parent rule must be forcing color: white on strong/p inside .chavrusa-hero. Override with max specificity + -webkit-text-fill-color (the strongest possible color override - wins even over parent gradient-text tricks). */ main .chav-gender-needed, main .chav-gender-needed strong, main .chav-gender-needed p, main .chav-gender-needed .orthodox-note, main .chav-gender-needed .orthodox-note *, .chavrusa-hero .chav-gender-needed strong, .chavrusa-hero .chav-gender-needed p, .chavrusa-hero .chav-gender-needed .orthodox-note { color: #1f2933 !important; -webkit-text-fill-color: #1f2933 !important; text-shadow: none !important; opacity: 1 !important; filter: none !important; } main .chav-gender-needed > div > strong, .chavrusa-hero .chav-gender-needed strong { color: #0d1422 !important; -webkit-text-fill-color: #0d1422 !important; font-weight: 850 !important; font-size: 1.15rem !important; } main .chav-gender-needed a, .chavrusa-hero .chav-gender-needed a { color: #2a8aac !important; -webkit-text-fill-color: #2a8aac !important; font-weight: 800; text-decoration: underline; } main .chav-gender-needed a:hover, .chavrusa-hero .chav-gender-needed a:hover { color: #b58a2a !important; -webkit-text-fill-color: #b58a2a !important; } /* ============================================================ Admin Members panel (gender override + search) ============================================================ */ .admin-member-search { width: min(360px, 100%); padding: 9px 14px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--line, rgba(255,255,255,0.18)) 100%, transparent); background: rgba(255, 255, 255, 0.04); color: var(--ink, #f4ecd6); font-size: 0.88rem; } .admin-member-search:focus { outline: none; border-color: color-mix(in srgb, var(--cyan, #2a8aac) 70%, transparent); } .admin-member-table { display: flex; flex-direction: column; gap: 6px; margin-top: 0.8rem; } .admin-member-row { display: grid; grid-template-columns: 1.4fr 1.4fr 0.8fr 0.8fr 0.7fr auto; gap: 0.7rem; padding: 0.6rem 0.85rem; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid color-mix(in srgb, var(--line, rgba(255,255,255,0.10)) 100%, transparent); align-items: center; font-size: 0.85rem; } .admin-member-row--head { background: transparent; border: 0; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #c9c1a8); padding-bottom: 0.2rem; } .admin-member-name { display: flex; align-items: center; gap: 6px; min-width: 0; } .admin-member-name strong { font-weight: 800; } .admin-member-email { color: var(--muted, #c9c1a8); overflow: hidden; text-overflow: ellipsis; } .admin-member-meta { color: var(--muted, #c9c1a8); font-size: 0.78rem; } .gender-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; } .gender-pill.men { background: color-mix(in srgb, #2a8aac 28%, transparent); color: #6cd6ff; border: 1px solid #2a8aac; } .gender-pill.women { background: color-mix(in srgb, #b1263d 22%, transparent); color: #ffb3c1; border: 1px solid #b1263d; } .gender-pill.empty { background: rgba(255, 255, 255, 0.05); color: var(--muted, #c9c1a8); border: 1px dashed rgba(255,255,255,0.25); } .admin-member-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .admin-member-actions .compact { padding: 4px 10px; font-size: 0.74rem; } .admin-member-footnote { margin-top: 1rem; font-size: 0.78rem; } @media (max-width: 720px) { .admin-member-row { grid-template-columns: 1fr; gap: 0.4rem; } .admin-member-row--head { display: none; } .admin-member-actions { justify-content: flex-start; } } /* ============================================================ HOTFIX: Native in dark mode to use dark color-scheme so the OS draws a dark popup with light text. 2) Force explicit colors on