/* ===== 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; } /* 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 — gold pill, contrast against the dark background. */ .admin-banner__cta-wrap { margin: 1.5rem 0 0 !important; } .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; } }