/* ===== Admin Mode Toggle (Ctrl+Shift+Y) ===== * Driven by adminModeToggle.js. When a staff user presses Ctrl+Shift+Y the * gets `.admin-disabled`, and anything tagged `.admin-only` hides. * Press again (or click the re-enable pill) to bring admin chrome back. * Pure CSS, pure client-side — no logout. The "Exit admin mode" button in * the orange panel is the real-logout path; this toggle is for quick * preview without losing the session. */ body.admin-disabled .admin-only { display: none !important; } /* Persistent "Admin mode off — click to re-enable" pill, only visible when * the toggle is OFF. Rendered only for staff (template gate). */ .admin-mode-reenable { position: fixed; bottom: 1rem; right: 1rem; z-index: 9999; display: none; padding: 0.5rem 0.875rem; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.15); background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%); color: #78350f; font-size: 0.8rem; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .admin-mode-reenable:hover { filter: brightness(0.97); } body.admin-disabled .admin-mode-reenable { display: inline-flex; } /* ===== Admin-Editable Banner — premium, classical announcement region. * * Visual language: deep navy ↔ violet gradient, gold accent stripes, classical * serif heading typography, refined dropcaps and dividers. Designed to feel * like the title plate of a Chassidic publication — bold and ceremonial * without being loud. * * Drop this stylesheet on any page that uses the {% admin_editable_banner %} * inclusion tag. */ .admin-banner { position: relative; margin: 2.25rem auto; max-width: 68rem; padding: 3.25rem 3rem 3rem; background: radial-gradient(circle at 18% 22%, rgba(251, 191, 36, 0.18) 0%, transparent 45%), radial-gradient(circle at 82% 78%, rgba(167, 139, 250, 0.18) 0%, transparent 50%), linear-gradient(135deg, #0f172a 0%, #1e3a8a 30%, #3b2c70 65%, #4c1d95 100%); border: 1px solid rgba(251, 191, 36, 0.28); border-radius: 1.1rem; box-shadow: 0 24px 56px -16px rgba(15, 23, 42, 0.6), 0 6px 14px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.04); text-align: center; color: #f8fafc; overflow: hidden; isolation: isolate; } /* Decorative gold stripes — top + bottom edges. Together they frame the content like a publication title plate. */ .admin-banner::before, .admin-banner::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, rgba(251, 191, 36, 0) 0%, #fbbf24 18%, #f59e0b 50%, #fbbf24 82%, rgba(251, 191, 36, 0) 100% ); } .admin-banner::before { top: 0; } .admin-banner::after { bottom: 0; } /* Centered ornament/divider rendered above the heading. Subtle but signals "this is a special section, not just text." */ .admin-banner__body::before { content: "✦"; display: block; margin: 0 auto 1rem; font-size: 0.9rem; letter-spacing: 0.65em; color: #fcd34d; text-indent: 0.65em; opacity: 0.85; } /* Standalone banner image section on the homepage (replaces the old hardcoded review/testimonial slot). Two-level layout: .homepage-banner-image — the section, full-width with padding, text-align center to position the image-wrapping container. .homepage-banner-image__container — inline-block sized to the image itself, so the "Change image" pill (positioned absolutely) sits on the image rather than floating in empty side margin. Tall portrait posters (Shavuot flyer etc.) get max-height capped so the image takes meaningful screen space without dominating the viewport vertically. */ .homepage-banner-image { padding: 2.5rem 1rem; background: transparent; text-align: center; } .homepage-banner-image__container { position: relative; display: inline-block; max-width: 100%; } .homepage-banner-image__img, .homepage-banner-image img { display: block !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 900px !important; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); object-fit: contain; } /* Phone-width tightening: tall posters at 900px tall would dominate a short mobile viewport. Cap the height harder on smaller screens so the rest of the homepage stays visible without excessive scroll. */ @media (max-width: 700px) { .homepage-banner-image__img, .homepage-banner-image img { max-height: 560px !important; } } /* Admin-only "Change image" pill that sits on top of the rendered image. Hidden from non-staff via `.admin-only` (which the global admin-chrome toggle controls). */ .homepage-banner-image__edit { position: absolute; top: 12px; right: 12px; padding: 0.5rem 0.9rem; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.8rem; font-weight: 600; text-decoration: none; border-radius: 999px; backdrop-filter: blur(4px); transition: background-color 0.15s; } .homepage-banner-image__edit:hover { background: rgba(0, 0, 0, 0.85); color: #fff; } /* Empty state — shown only to staff when no image has been uploaded yet. A big tappable placeholder that links straight to the admin form. */ .homepage-banner-image--empty .homepage-banner-image__upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; max-width: 720px; margin: 0 auto; padding: 3.5rem 1.5rem; border: 2px dashed #cbd5e1; border-radius: 16px; background: #f8fafc; color: #475569; text-decoration: none; transition: border-color 0.15s, background-color 0.15s; } .homepage-banner-image--empty .homepage-banner-image__upload:hover { border-color: var(--blue, #2563eb); background: #eff6ff; color: var(--blue, #2563eb); } .homepage-banner-image__upload-icon { font-size: 2.5rem; line-height: 1; font-weight: 300; } .homepage-banner-image__upload-label { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.02em; } .homepage-banner-image__upload-hint { font-size: 0.8rem; opacity: 0.7; } /* Subtitle / eyebrow text above the main heading. Small caps, gold, refined. */ .admin-banner__eyebrow { font-family: "Georgia", "Cambria", "Times New Roman", serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #fcd34d; margin-bottom: 0.85rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } /* Call-to-action button row — gold pills against the dark banner. Supports 1-4 buttons in a single flex row that wraps to two rows on narrow screens. */ .admin-banner__cta-wrap { margin: 1.5rem 0 0 !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; } .admin-banner__cta { display: inline-block; padding: 0.7rem 1.6rem; background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%); color: #1e293b !important; font-family: inherit; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.03em; border-radius: 999px; text-decoration: none !important; box-shadow: 0 6px 18px rgba(251, 191, 36, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: transform 0.12s, box-shadow 0.15s; } .admin-banner__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(251, 191, 36, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55); color: #0f172a !important; } .admin-banner__cta:active { transform: translateY(0); } /* Wrapped body text from TinyMCE — preserve our refined typography but allow any markup the editor produces. */ .admin-banner__text { margin-top: 0.25rem; } .admin-banner__text :first-child { margin-top: 0; } .admin-banner__text :last-child { margin-bottom: 0; } /* "Edit" link for staff — top-right corner, gold-bordered pill. */ .admin-banner__edit-link { display: inline-block; padding: 0.4rem 0.95rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: #fff !important; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(251, 191, 36, 0.4); border-radius: 999px; text-decoration: none !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.15s, border-color 0.15s; } .admin-banner__edit-link:hover { background: rgba(251, 191, 36, 0.22); border-color: rgba(251, 191, 36, 0.7); color: #fef3c7 !important; } /* "No announcement yet" empty state — dimmed but discoverable for staff. */ .admin-banner--empty { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); border-color: rgba(148, 163, 184, 0.3); } .admin-banner--empty::before, .admin-banner--empty::after { display: none; } .admin-banner--empty .admin-banner__body::before { display: none; } .admin-banner--empty h1 { font-size: 1.6rem; color: #cbd5e1; } .admin-banner--empty a { color: #fcd34d; } .admin-banner__body { font-family: "Georgia", "Cambria", "Times New Roman", serif; font-size: 1.18rem; font-weight: 400; line-height: 1.65; color: #e2e8f0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); max-width: 54rem; margin: 0 auto; } .admin-banner__body :where(h1, h2, h3) { font-family: "Georgia", "Cambria", "Times New Roman", serif; font-weight: 700; color: #ffffff; letter-spacing: -0.012em; margin: 0 0 0.75rem; line-height: 1.18; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.32); } .admin-banner__body h1 { font-size: 2.65rem; position: relative; padding-bottom: 0.85rem; } /* Short gold underline beneath the main heading. */ .admin-banner__body h1::after { content: ""; display: block; width: 4.5rem; height: 2px; margin: 0.7rem auto 0; background: linear-gradient(90deg, transparent, #fbbf24, transparent); } .admin-banner__body h2 { font-size: 1.85rem; } .admin-banner__body h3 { font-size: 1.4rem; } .admin-banner__body p { margin: 0.4rem 0; } .admin-banner__body p + p { margin-top: 0.85rem; } .admin-banner__body strong { color: #fde68a; font-weight: 600; letter-spacing: 0.01em; } .admin-banner__body em { color: #fcd34d; font-style: italic; font-weight: 500; } .admin-banner__body a { color: #fcd34d; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 0.15s; } .admin-banner__body a:hover { color: #fef3c7; } .admin-banner__body blockquote { border-left: 3px solid #fbbf24; padding: 0.25rem 1.25rem; margin: 1rem auto; max-width: 42rem; font-style: italic; color: #fef3c7; text-align: left; } .admin-banner__body ul, .admin-banner__body ol { text-align: left; display: inline-block; margin: 0.5rem auto; padding-left: 1.5rem; } .admin-banner__body li { margin: 0.2rem 0; } /* Edit / Save / Cancel controls — top-right corner, glass-pill style. */ .admin-banner__controls { position: absolute; top: 0.85rem; right: 0.85rem; display: flex; gap: 0.35rem; z-index: 2; } .admin-banner__controls button { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.4rem 0.85rem; background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(251, 191, 36, 0.4); border-radius: 999px; cursor: pointer; font-family: inherit; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.15s, border-color 0.15s, transform 0.1s; } .admin-banner__controls button:hover { background: rgba(251, 191, 36, 0.22); border-color: rgba(251, 191, 36, 0.7); } .admin-banner__controls button:active { transform: translateY(1px); } .admin-banner__controls button[hidden] { display: none; } /* Editing state — swap the dark display for a clean white surface so the admin can read what they're typing. */ .admin-banner--editing .admin-banner__body { background: rgba(255, 255, 255, 0.97); color: #1e293b; padding: 1rem; border-radius: 0.5rem; text-align: left; min-height: 11rem; text-shadow: none; font-family: inherit; } .admin-banner--editing .admin-banner__body::before { display: none; } .admin-banner__editor { width: 100%; min-height: 10rem; padding: 0.85rem; font: inherit; font-size: 0.95rem; line-height: 1.55; color: #1e293b; background: #fff; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 0.4rem; resize: vertical; } @media (max-width: 768px) { .admin-banner { padding: 2.5rem 1.5rem 2.25rem; margin: 1.5rem 0.75rem; border-radius: 0.85rem; } .admin-banner__body h1 { font-size: 1.95rem; } .admin-banner__body h2 { font-size: 1.45rem; } .admin-banner__body { font-size: 1.05rem; } } @media (max-width: 480px) { .admin-banner__body h1 { font-size: 1.65rem; } .admin-banner__body { font-size: 1rem; } .admin-banner__controls { top: 0.5rem; right: 0.5rem; } .admin-banner__controls button { padding: 0.3rem 0.6rem; font-size: 0.72rem; } }