/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ /* ============================================================================ Agency-themable brand utilities ---------------------------------------------------------------------------- These small classes pull their colour from CSS variables emitted onto by `AgencyStyleHelper#agency_style_attribute`. The default fallback is brand teal `var(--agency-primary, #003A3A)`; an agency that has set a custom `primary_color` on their AgencyAppearance record gets that colour wherever these classes appear. Same HUE is used in light + dark mode (per product decision) — but dark mode swaps to `--agency-primary-bright` (HSL +30% lightness) so the chrome stays readable against the dark background. The fallback in the `.dark` rule mirrors the original Tailwind mint (`teal-400`) so an unstyled page degrades to the same look as before. ========================================================================= */ .text-brand { color: var(--agency-primary, #003A3A); } .bg-brand { background-color: var(--agency-primary, #003A3A); } .bg-brand-soft { background-color: var(--agency-primary-soft, rgba(0, 58, 58, 0.08)); } .bg-brand-hover { background-color: var(--agency-primary-hover, #003434); } .border-brand { border-color: var(--agency-primary, #003A3A); } .border-brand-soft { border-color: var(--agency-primary-border, rgba(0, 58, 58, 0.20)); } .text-on-brand { color: var(--agency-on-primary, #ffffff); } .ring-brand { --tw-ring-color: var(--agency-primary, #003A3A); } /* Dark-mode adaptive variants — same class, brighter shade so icons and outlines still pop against the dark surface. Used everywhere the previous code wrote `dark:text-teal-300` / `dark:border-teal-400`. */ .dark .text-brand { color: var(--agency-primary-bright, #2dd4bf); } .dark .bg-brand-soft { background-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); } .dark .border-brand { border-color: var(--agency-primary-bright, #2dd4bf); } .dark .border-brand-soft { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.35); } /* Explicit bright variants — for places that want the dark-mode shade in light mode too (orb glows, gradient mid-tones). Same value in both modes so no `.dark` override needed. */ .text-brand-bright { color: var(--agency-primary-bright, #2dd4bf); } .bg-brand-bright { background-color: var(--agency-primary-bright, #2dd4bf); } .bg-brand-bright-soft { background-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); } .border-brand-bright { border-color: var(--agency-primary-bright, #2dd4bf); } /* `dark:` variants — Tailwind doesn't know these classes exist so we author them by hand with the escaped colon. Match Tailwind's `dark:` semantics (only apply when `.dark` is on a parent) so ERB markup can stay idiomatic: `class="text-brand dark:text-brand-bright"`. Replace the old `dark:text-teal-300` / `dark:border-teal-400` literals. */ .dark .dark\:text-brand { color: var(--agency-primary, #003A3A); } .dark .dark\:text-brand-bright { color: var(--agency-primary-bright, #2dd4bf); } .dark .dark\:bg-brand-bright { background-color: var(--agency-primary-bright, #2dd4bf); } .dark .dark\:bg-brand-bright-soft { background-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); } .dark .dark\:border-brand-bright { border-color: var(--agency-primary-bright, #2dd4bf); } .dark .dark\:hover\:bg-brand-bright-soft:hover { background-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); } .dark .dark\:hover\:border-brand-bright:hover { border-color: var(--agency-primary-bright, #2dd4bf); } .dark .dark\:hover\:text-brand-bright:hover { color: var(--agency-primary-bright, #2dd4bf); } /* Hover variants — for elements that should pick up the brand tint on interaction without needing the full Tailwind `hover:` plugin compilation. Keep these in sync with the base classes above. */ .hover\:bg-brand-soft:hover { background-color: var(--agency-primary-soft, rgba(0, 58, 58, 0.08)); } .hover\:border-brand:hover { border-color: var(--agency-primary, #003A3A); } .hover\:text-brand:hover { color: var(--agency-primary, #003A3A); } .group:hover .group-hover\:text-brand { color: var(--agency-primary, #003A3A); } .dark .hover\:bg-brand-soft:hover { background-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); } .dark .hover\:border-brand:hover { border-color: var(--agency-primary-bright, #2dd4bf); } .dark .hover\:text-brand:hover { color: var(--agency-primary-bright, #2dd4bf); } .dark .group:hover .group-hover\:text-brand { color: var(--agency-primary-bright, #2dd4bf); } /* Focus variants — Tailwind's `focus:` plugin doesn't know our custom classes, so author them by hand with the escaped colon. Use these on inputs / buttons that previously used `focus:ring-green-500` etc. */ .focus\:ring-brand:focus { --tw-ring-color: var(--agency-primary, #003A3A); } .focus\:border-brand:focus { border-color: var(--agency-primary, #003A3A); } .dark .focus\:ring-brand:focus { --tw-ring-color: var(--agency-primary-bright, #2dd4bf); } .dark .focus\:border-brand:focus { border-color: var(--agency-primary-bright, #2dd4bf); } /* Linear-gradient helpers — for the avatar gradients and CTA pills. `from`/`to` aren't separately themed; the gradient just uses the primary plus a slightly-lighter / slightly-darker derivative. */ .bg-brand-gradient { background: linear-gradient(135deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-hover, #003434) 100%); } /* ============================================================================ Business · Locations index Component-scoped styles for app/views/business/locations/index.html.erb. All custom classes are prefixed `bl-` so they can't collide with Tailwind or other component styles. Brand accent is the deep-teal var(--agency-primary, #003A3A); dark-mode variants use Tailwind's `.dark` class selector since darkMode is set to 'class' in tailwind.config.js. ========================================================================= */ /* --- Hero band ------------------------------------------------------------- Solid deep-teal slab. The brand color owns the whole header instead of fading out to white (which made the right side look washed-out and made the subtitle unreadable). A soft white glow in the top-left adds depth without breaking the saturation; a subtle diagonal-line pattern gives the surface texture without being noisy. */ .bl-hero { position: relative; background: linear-gradient(135deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-dark, #002424) 100%); border: 1px solid var(--agency-primary, #003A3A); color: #ffffff; box-shadow: 0 10px 32px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18); } .bl-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 0% 0%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 55%); pointer-events: none; } .dark .bl-hero { background: linear-gradient(135deg, var(--agency-primary, #003A3A) 0%, #001818 100%); border-color: #002020; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); } .dark .bl-hero::before { background: radial-gradient(60% 90% at 0% 0%, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.10) 0%, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0) 55%); } .bl-hero-pattern { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 22px); mask-image: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 80%); } .bl-hero-title { color: #ffffff; letter-spacing: -0.01em; } .bl-hero-sub { color: rgba(255,255,255,0.85); } /* Inline hero stat chip — small pill showing slot usage on the right side of the header, paired with the Add button for visual weight. */ .bl-hero-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.75rem; border-radius: 9999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.92); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; backdrop-filter: blur(8px); } .bl-hero-chip .dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--agency-primary-bright, #2dd4bf); box-shadow: 0 0 8px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.6); } /* --- Primary CTA pill ------------------------------------------------------ The "Add location" button. Filled deep teal in light mode, slightly lifted shadow with a soft inner highlight. */ .bl-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; color: #ffffff; background: linear-gradient(135deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-mid, #005454) 100%); border: 1px solid rgba(var(--agency-primary-rgb, 0, 58, 58), 0.7); box-shadow: 0 4px 14px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25), inset 0 1px 0 rgba(255,255,255,0.08); transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease; white-space: nowrap; } .bl-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.32); filter: brightness(1.05); } .bl-btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); } .bl-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 0.95rem; border-radius: 0.75rem; font-size: 0.8125rem; font-weight: 600; color: var(--agency-primary, #003A3A); background: #ffffff; border: 1px solid #d1d5db; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .bl-btn-secondary:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); border-color: var(--agency-primary, #003A3A); color: var(--agency-primary, #003A3A); } .dark .bl-btn-secondary { color: var(--agency-primary-bright, #6ee7b7); background: #1f2937; border-color: #374151; } .dark .bl-btn-secondary:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); border-color: var(--agency-primary-bright, #2dd4bf); color: var(--agency-primary-bright, #99f6e4); } /* --- Plan strip ------------------------------------------------------------ The slim row beneath the hero showing slot usage + free auto-replies. */ .bl-plan-strip { background: #ffffff; border: 1px solid #e5e7eb; } .dark .bl-plan-strip { background: #1f2937; border-color: #374151; } .bl-capacity-meter { display: inline-flex; gap: 4px; } .bl-capacity-meter span { display: block; width: 22px; height: 8px; border-radius: 4px; background: #e5e7eb; transition: background 0.2s ease; } .bl-capacity-meter span.filled { background: linear-gradient(90deg, var(--agency-primary, #003A3A), var(--agency-primary-bright, #2dd4bf)); box-shadow: 0 0 8px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); } .dark .bl-capacity-meter span { background: #374151; } .dark .bl-capacity-meter span.filled { background: linear-gradient(90deg, var(--agency-primary-bright, #2dd4bf), var(--agency-primary-mid, #5eead4)); box-shadow: 0 0 10px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); } /* --- Location card --------------------------------------------------------- Light surface with a subtle left rail and a hover lift. */ .bl-card { position: relative; display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 1.25rem; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease; opacity: 0; transform: translateY(12px); animation: blFadeUp 0.45s ease-out forwards; } .dark .bl-card { background: #1f2937; border-color: #374151; } .bl-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.10), 0 4px 12px rgba(0,0,0,0.04); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); } .dark .bl-card:hover { box-shadow: 0 18px 40px rgba(0,0,0,0.4), 0 4px 12px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.35); } /* Left status rail */ .bl-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #d1d5db; } .bl-rail-success { background: linear-gradient(180deg, #22c55e, #15803d); } .bl-rail-attention { background: linear-gradient(180deg, #f59e0b, #d97706); animation: blShimmer 3s ease-in-out infinite; } .bl-rail-issue { background: linear-gradient(180deg, #ef4444, #b91c1c); animation: blShimmer 3s ease-in-out infinite; } .dark .bl-rail-success { background: linear-gradient(180deg, #4ade80, #16a34a); } .dark .bl-rail-attention { background: linear-gradient(180deg, #fbbf24, #f59e0b); } .dark .bl-rail-issue { background: linear-gradient(180deg, #f87171, #dc2626); } /* Plan badge */ .bl-plan-badge { display: inline-flex; align-items: center; gap: 4px; padding: 0.2rem 0.65rem; border-radius: 9999px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .bl-plan-premium { background: var(--agency-primary, #003A3A); color: #ffffff; box-shadow: 0 2px 6px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); } .bl-plan-business { background: #ccfbf1; color: #134e4a; } .bl-plan-free { background: #f3f4f6; color: #6b7280; } .dark .bl-plan-premium { background: var(--agency-primary-bright, #2dd4bf); color: #0f172a; } .dark .bl-plan-business { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); color: var(--agency-primary-bright, #5eead4); } .dark .bl-plan-free { background: #374151; color: #d1d5db; } /* Status chip (text + dot) */ .bl-status-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; border: 1px solid transparent; } .bl-status-chip .dot { width: 7px; height: 7px; border-radius: 9999px; flex-shrink: 0; } .bl-status-success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; } .bl-status-success .dot { background: #22c55e; } .bl-status-attention { background: #fffbeb; color: #92400e; border-color: #fde68a; animation: blBreathe 2.4s ease-in-out infinite; } .bl-status-attention .dot { background: #f59e0b; } .bl-status-issue { background: #fef2f2; color: #b91c1c; border-color: #fecaca; animation: blBreathe 2.4s ease-in-out infinite; } .bl-status-issue .dot { background: #ef4444; } .dark .bl-status-success { background: rgba(34,197,94,0.18); color: #86efac; border-color: rgba(34,197,94,0.35); } .dark .bl-status-attention { background: rgba(245,158,11,0.18); color: #fcd34d; border-color: rgba(245,158,11,0.35); } .dark .bl-status-issue { background: rgba(239,68,68,0.18); color: #fca5a5; border-color: rgba(239,68,68,0.35); } /* AI-reply chip */ .bl-ai-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.18rem 0.55rem; border-radius: 9999px; font-size: 0.68rem; font-weight: 600; } .bl-ai-on { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); color: var(--agency-primary, #003A3A); } .bl-ai-off { background: #f3f4f6; color: #9ca3af; } .dark .bl-ai-on { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); color: var(--agency-primary-bright, #5eead4); } .dark .bl-ai-off { background: #374151; color: #6b7280; } /* Rating visualizer: number + 5-dot bar */ .bl-rating { display: inline-flex; align-items: center; gap: 0.55rem; } .bl-rating-num { font-size: 1.5rem; font-weight: 700; color: #0f172a; line-height: 1; } .dark .bl-rating-num { color: #f9fafb; } .bl-rating-bar { display: inline-flex; gap: 3px; } .bl-rating-bar span { width: 7px; height: 7px; border-radius: 9999px; background: #e5e7eb; } .bl-rating-bar span.filled { background: linear-gradient(135deg, #fbbf24, #f59e0b); } .dark .bl-rating-bar span { background: #374151; } /* Card meta line (review counts etc.) */ .bl-meta-num { font-weight: 700; color: #0f172a; } .dark .bl-meta-num { color: #f9fafb; } /* --- Add-another tile ------------------------------------------------------ */ .bl-add-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; padding: 2rem; border: 2px dashed #d1d5db; border-radius: 1.25rem; color: #6b7280; text-align: center; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease; background: transparent; } .bl-add-tile:hover { border-color: var(--agency-primary, #003A3A); border-style: solid; background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04); color: var(--agency-primary, #003A3A); transform: translateY(-3px); } .dark .bl-add-tile { border-color: #374151; color: #6b7280; } .dark .bl-add-tile:hover { border-color: var(--agency-primary-bright, #2dd4bf); background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.06); color: var(--agency-primary-bright, #5eead4); } .bl-add-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); margin-bottom: 0.75rem; transition: transform 0.2s ease, background 0.2s ease; } .bl-add-tile:hover .bl-add-icon { transform: scale(1.1); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18); } .dark .bl-add-icon { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.12); } .dark .bl-add-tile:hover .bl-add-icon { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.22); } /* --- Empty state ---------------------------------------------------------- When the agency has no connected locations yet, show a richer onboarding panel: top section keeps the "no locations" headline + CTA, bottom section is a 3-up feature grid that previews what the page will do once a location is connected. Gives the page real substance instead of one small icon floating in white space. */ .bl-empty { position: relative; padding: 3rem 2rem 2.5rem; border-radius: 1.5rem; background: #ffffff; border: 1px solid #e5e7eb; text-align: center; overflow: hidden; } .dark .bl-empty { background: #1f2937; border-color: #374151; } .bl-empty::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04) 0 1px, transparent 1px 22px); animation: blDrift 24s linear infinite; pointer-events: none; } .dark .bl-empty::before { background-image: repeating-linear-gradient(45deg, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.05) 0 1px, transparent 1px 22px); } .bl-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 1.25rem; background: linear-gradient(135deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-mid, #005454) 100%); box-shadow: 0 8px 24px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.22), inset 0 1px 0 rgba(255,255,255,0.1); color: #ffffff; margin-bottom: 1.25rem; } .dark .bl-empty-icon { box-shadow: 0 8px 24px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.4); } /* Value-prop feature tiles inside the empty state */ .bl-feature-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0.75rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #f3f4f6; } @media (min-width: 768px) { .bl-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .dark .bl-feature-grid { border-top-color: #374151; } .bl-feature { padding: 1.25rem 1rem; border-radius: 1rem; background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.03); border: 1px solid rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); text-align: left; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .bl-feature:hover { transform: translateY(-2px); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18); } .dark .bl-feature { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.05); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.15); } .dark .bl-feature:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.08); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); } .bl-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 0.625rem; background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.1); color: var(--agency-primary, #003A3A); margin-bottom: 0.5rem; } .dark .bl-feature-icon { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.15); color: var(--agency-primary-bright, #5eead4); } .bl-feature-title { font-size: 0.875rem; font-weight: 700; color: #0f172a; margin-bottom: 0.25rem; } .bl-feature-desc { font-size: 0.75rem; color: #6b7280; line-height: 1.5; } .dark .bl-feature-title { color: #f9fafb; } .dark .bl-feature-desc { color: #9ca3af; } /* --- GBP status bar (V2) — persistent connection + slot context ------------ */ .bl-gbp-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; background: #ffffff; border: 1px solid #eef0f2; border-radius: 1rem; padding: 1rem 1.25rem; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); } .dark .bl-gbp-status { background: #1f2937; border-color: #374151; } .bl-gbp-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; background: #ecfdf5; border: 1px solid #d1fae5; color: #059669; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .dark .bl-gbp-icon { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.3); color: #6ee7b7; } .bl-gbp-divider { width: 1px; align-self: stretch; min-height: 2.25rem; background: #e5e7eb; } .dark .bl-gbp-divider { background: #374151; } .bl-gbp-chip { display: inline-flex; align-items: center; padding: 0.0625rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; background: #ecfdf5; color: #047857; } .dark .bl-gbp-chip { background: rgba(16,185,129,0.18); color: #6ee7b7; } /* --- Per-card report stats (V2) -------------------------------------------- */ .bl-report-stats { margin-top: 1.25rem; border-radius: 0.75rem; background: #f9fafb; border: 1px solid #f1f2f4; padding: 0.75rem; } .dark .bl-report-stats { background: rgba(255,255,255,0.03); border-color: #374151; } .bl-report-stats-label { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; margin-bottom: 0.5rem; } .bl-report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; text-align: center; } .bl-report-grid > div:nth-child(2) { border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; } .dark .bl-report-grid > div:nth-child(2) { border-color: #374151; } .bl-report-num { font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #111827; } .dark .bl-report-num { color: #f3f4f6; } .bl-report-num.is-review { color: #d97706; } .bl-report-num.is-removed { color: #059669; } .dark .bl-report-num.is-review { color: #fbbf24; } .dark .bl-report-num.is-removed { color: #34d399; } .bl-report-cap { font-size: 0.625rem; color: #6b7280; } .dark .bl-report-cap { color: #9ca3af; } .bl-report-footnote { font-size: 0.625rem; color: #9ca3af; margin-top: 0.5rem; } /* --- Card KI status + secondary action (V2) -------------------------------- */ .bl-card-actions { display: flex; gap: 0.5rem; } .bl-plan-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 0.75rem; border-radius: 0.75rem; border: 1px solid #e5e7eb; font-size: 0.8125rem; font-weight: 600; color: #374151; transition: border-color 0.15s ease, color 0.15s ease; } .bl-plan-btn:hover { border-color: var(--agency-primary, #003A3A); color: var(--agency-primary, #003A3A); } .dark .bl-plan-btn { border-color: #374151; color: #d1d5db; } .dark .bl-plan-btn:hover { border-color: var(--agency-primary-bright, #2dd4bf); color: var(--agency-primary-bright, #5eead4); } .bl-ai-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.6875rem; font-weight: 600; color: var(--agency-primary, #003A3A); } .dark .bl-ai-chip { color: var(--agency-primary-bright, #5eead4); } .bl-ai-upsell { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.6875rem; font-weight: 600; color: #9ca3af; transition: color 0.15s ease; } .bl-ai-upsell:hover { color: var(--agency-primary, #003A3A); } .dark .bl-ai-upsell:hover { color: var(--agency-primary-bright, #5eead4); } /* --- Keyframes ------------------------------------------------------------- */ @keyframes blFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Used by the flash-notification toast (shared/_notification.html.erb) to shrink the bottom progress bar from full-width to zero over the toast's auto-dismiss duration. The previous markup referenced a `toast-shrink` keyframe that was never defined — the bar wasn't actually animating. */ @keyframes toastShrink { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes blShimmer { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } } @keyframes blBreathe { 0%, 100% { border-color: var(--breathe-from, currentColor); box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 0 4px transparent; } } @keyframes blDrift { from { background-position: 0 0; } to { background-position: 240px 240px; } } /* ============================================================================ Business · Locations — inner pages (lighter treatment) The bold var(--agency-primary, #003A3A) hero stays only on the locations index. Inner pages (Available / Show / Reviews) use these lighter components so the brand color is still present without dominating every screen. ========================================================================= */ /* Page header — back arrow + title + thin teal accent underline */ .bl-page-header { margin-bottom: 1.5rem; } .bl-page-back { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; color: #6b7280; background: #f9fafb; border: 1px solid #e5e7eb; transition: all 0.15s ease; flex-shrink: 0; } .bl-page-back:hover { color: var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.2); transform: translateX(-2px); } .dark .bl-page-back { color: #9ca3af; background: #1f2937; border-color: #374151; } .dark .bl-page-back:hover { color: var(--agency-primary-bright, #5eead4); background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.1); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); } .bl-page-title { font-size: 1.75rem; font-weight: 700; color: #0f172a; letter-spacing: -0.01em; line-height: 1.2; } @media (min-width: 640px) { .bl-page-title { font-size: 2rem; } } .dark .bl-page-title { color: #f9fafb; } .bl-page-title-accent { display: block; width: 40px; height: 3px; background: linear-gradient(90deg, var(--agency-primary, #003A3A), var(--agency-primary-bright, #2dd4bf)); border-radius: 2px; margin-top: 0.625rem; } .bl-page-subtitle { color: #6b7280; font-size: 0.875rem; margin-top: 0.625rem; } .dark .bl-page-subtitle { color: #9ca3af; } /* Slot pill — soft teal, used in inner-page headers */ .bl-slot-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border-radius: 9999px; background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); border: 1px solid rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18); color: var(--agency-primary, #003A3A); font-size: 0.75rem; font-weight: 600; } .bl-slot-pill strong { font-weight: 800; } .bl-slot-pill .dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--agency-primary, #003A3A); } .dark .bl-slot-pill { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.1); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); color: var(--agency-primary-bright, #5eead4); } .dark .bl-slot-pill .dot { background: var(--agency-primary-bright, #5eead4); } /* Connect-card — used on the Available page for Google Business locations */ .bl-connect-card { position: relative; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 1rem; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease; opacity: 0; transform: translateY(10px); animation: blFadeUp 0.45s ease-out forwards; } .bl-connect-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.10), 0 4px 12px rgba(0,0,0,0.03); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); } .bl-connect-card.is-connected { background: linear-gradient(135deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.03), transparent); } .bl-connect-card.is-connected:hover { transform: none; box-shadow: none; border-color: #e5e7eb; } .dark .bl-connect-card { background: #1f2937; border-color: #374151; } .dark .bl-connect-card:hover { box-shadow: 0 14px 30px rgba(0,0,0,0.4), 0 4px 12px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.2); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.35); } .dark .bl-connect-card.is-connected { background: linear-gradient(135deg, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.04), transparent); } .bl-connected-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.6rem; border-radius: 9999px; background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.1); color: var(--agency-primary, #003A3A); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .dark .bl-connected-badge { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.15); color: var(--agency-primary-bright, #5eead4); } /* Review-detail card with a thin gradient strip across the top */ .bl-review-card { position: relative; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 1.25rem; overflow: hidden; } .bl-review-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--agency-primary, #003A3A), var(--agency-primary-bright, #2dd4bf)); } .dark .bl-review-card { background: #1f2937; border-color: #374151; } /* Owner-reply panel inside a review card */ .bl-owner-reply { border-left: 3px solid var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04); border-radius: 0.625rem; padding: 1rem; } .dark .bl-owner-reply { border-left-color: var(--agency-primary-bright, #2dd4bf); background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.06); } /* Inputs with teal focus ring */ .bl-input { width: 100%; padding: 0.75rem 1rem; border: 1px solid #d1d5db; border-radius: 0.625rem; background: #ffffff; color: #0f172a; font-size: 0.875rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .bl-input:focus { outline: none; border-color: var(--agency-primary, #003A3A); box-shadow: 0 0 0 3px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.15); } .dark .bl-input { background: #111827; color: #f9fafb; border-color: #374151; } .dark .bl-input:focus { border-color: var(--agency-primary-bright, #2dd4bf); box-shadow: 0 0 0 3px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.2); } /* Compact labelled filter control — a tiny uppercase caption stacked above a select/input. Used in the page filter bars so the controls read clearly on mobile without cramped inline labels. */ .bl-filter-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .bl-filter-field-label { padding-left: 0.15rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #9ca3af; } .dark .bl-filter-field-label { color: #6b7280; } /* Live result-count badge for filter bars. */ .bl-filter-count { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.15rem 0.6rem; border-radius: 9999px; background: #f3f4f6; color: #6b7280; font-size: 0.72rem; font-weight: 600; white-space: nowrap; } .bl-filter-count strong { color: var(--agency-primary, #003A3A); font-weight: 800; } .dark .bl-filter-count { background: #374151; color: #9ca3af; } .dark .bl-filter-count strong { color: var(--agency-primary-bright, #5eead4); } /* Modal panel + backdrop */ .bl-modal-backdrop { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(4px); } .bl-modal-panel { background: #ffffff; border-radius: 1.25rem; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18); border: 1px solid #e5e7eb; } .dark .bl-modal-panel { background: #1f2937; border-color: #374151; } /* "Danger" outlined button (delete reply etc.) */ .bl-btn-danger-outline { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.9rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 600; color: #b91c1c; background: transparent; border: 1px solid #fecaca; transition: background 0.15s ease, border-color 0.15s ease; } .bl-btn-danger-outline:hover { background: #fef2f2; border-color: #ef4444; } .dark .bl-btn-danger-outline { color: #fca5a5; border-color: rgba(239,68,68,0.4); } .dark .bl-btn-danger-outline:hover { background: rgba(239,68,68,0.1); border-color: #ef4444; } /* ============================================================================ Business · AI Reply pages Shared component classes used across AI Reply Dashboard / Settings / Templates so the trio reads as one coordinated section instead of three pages with mismatched colour palettes (was: purple + green + teal). ========================================================================= */ /* ============================================================================ Rich-hero adornments Layered on top of the base .bl-hero to give it more visual depth without replacing it. Adds floating teal "orbs" in the background, an icon tile with a pulsing live dot, and a sliding gradient accent stripe at the bottom edge. Used on the AI Reply section header — composable with the existing .bl-hero / .bl-hero-pattern classes. ========================================================================= */ /* Soft floating blurred orbs in the hero background */ .bl-hero-orb { position: absolute; border-radius: 9999px; filter: blur(38px); pointer-events: none; opacity: 0.5; animation: blHeroOrbFloat 14s ease-in-out infinite; } .bl-hero-orb-1 { width: 200px; height: 200px; background: radial-gradient(circle, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.55), transparent 70%); top: -70px; right: 8%; animation-delay: 0s; } .bl-hero-orb-2 { width: 150px; height: 150px; background: radial-gradient(circle, rgba(var(--agency-primary-bright-rgb, 94, 234, 212), 0.4), transparent 70%); bottom: -45px; right: 25%; animation-delay: -5s; } .bl-hero-orb-3 { width: 110px; height: 110px; background: radial-gradient(circle, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3), transparent 70%); top: 35%; right: 4%; animation-delay: -9s; } @keyframes blHeroOrbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-22px, 10px) scale(1.06); } 66% { transform: translate(16px, -8px) scale(0.94); } } /* Icon tile inside the hero — frosted-glass look with a pulsing glow */ .bl-hero-icon-tile { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 0.875rem; background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.28) 100%); color: #ffffff; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 6px 20px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.22), 0 0 24px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: blHeroIconGlow 3.6s ease-in-out infinite; } /* Hero icon glyph — steps down with the tile on small phones. */ .bl-hero-icon-svg { width: 26px; height: 26px; } @media (max-width: 480px) { .bl-hero-icon-tile { width: 48px; height: 48px; } .bl-hero-icon-svg { width: 22px; height: 22px; } } @keyframes blHeroIconGlow { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 6px 20px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.22), 0 0 24px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.12); } 50% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), 0 10px 30px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.4), 0 0 40px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.22); } } /* Live pulse dot on the icon corner */ .bl-hero-icon-tile::after { content: ""; position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 9999px; background: linear-gradient(135deg, #5eead4, #ffffff); box-shadow: 0 0 0 3px var(--agency-primary, #003A3A), 0 0 0 0 rgba(var(--agency-primary-bright-rgb, 94, 234, 212), 0.7); animation: blHeroLiveDot 1.8s ease-in-out infinite; } @keyframes blHeroLiveDot { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px var(--agency-primary, #003A3A), 0 0 0 0 rgba(var(--agency-primary-bright-rgb, 94, 234, 212), 0.7); } 50% { transform: scale(1.18); box-shadow: 0 0 0 3px var(--agency-primary, #003A3A), 0 0 0 8px rgba(var(--agency-primary-bright-rgb, 94, 234, 212), 0); } } /* Animated accent stripe at the bottom edge of the hero */ .bl-hero-accent { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.7) 30%, rgba(var(--agency-primary-bright-rgb, 94, 234, 212), 0.95) 50%, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.7) 70%, transparent 100%); background-size: 200% 100%; animation: blHeroAccentSlide 5s linear infinite; } @keyframes blHeroAccentSlide { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* Soft, refined header card — white surface with teal accents: a diagonal-line background pattern, radial watermark in the top-right, a gradient icon tile with a pulsing live dot, and a thin gradient accent line under the title. Used on the AI Reply section so the header has plenty of personality and animation without resorting to a full-teal slab like .bl-hero. */ .bl-soft-header { position: relative; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.5rem 1.75rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); transition: box-shadow 0.4s ease, border-color 0.3s ease; } .bl-soft-header:hover { box-shadow: 0 4px 14px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.07); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18); } .dark .bl-soft-header { background: #1f2937; border-color: #374151; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .dark .bl-soft-header:hover { box-shadow: 0 4px 14px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.15); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); } /* Layer 1 — diagonal-line background pattern, faded from top-left */ .bl-soft-header::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( 135deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04) 0 1px, transparent 1px 22px ); -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.15) 75%); mask-image: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.15) 75%); pointer-events: none; } .dark .bl-soft-header::before { background-image: repeating-linear-gradient( 135deg, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.05) 0 1px, transparent 1px 22px ); } /* Layer 2 — radial teal watermark in the top-right corner */ .bl-soft-header::after { content: ""; position: absolute; top: -40%; right: -8%; width: 45%; height: 220%; background: radial-gradient(ellipse at center, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08) 0%, rgba(var(--agency-primary-rgb, 0, 58, 58), 0) 60%); pointer-events: none; } .dark .bl-soft-header::after { background: radial-gradient(ellipse at center, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.1) 0%, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0) 60%); } /* Icon tile — gradient + pulsing glow animation */ .bl-soft-header-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 0.75rem; background: linear-gradient(135deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.1) 0%, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.22) 100%); color: var(--agency-primary, #003A3A); flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.15), 0 4px 12px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); animation: blSoftIconPulse 3.2s ease-in-out infinite; } .dark .bl-soft-header-icon { background: linear-gradient(135deg, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18) 0%, rgba(var(--agency-primary-bright-rgb, 94, 234, 212), 0.28) 100%); color: var(--agency-primary-bright, #5eead4); box-shadow: inset 0 0 0 1px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3), 0 4px 12px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.15); } @keyframes blSoftIconPulse { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.15), 0 4px 12px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); } 50% { box-shadow: inset 0 0 0 1px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.3), 0 8px 24px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18); } } /* Live status dot — mint pulse on the icon corner */ .bl-soft-header-icon::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 9999px; background: linear-gradient(135deg, var(--agency-primary-bright, #2dd4bf), #5eead4); box-shadow: 0 0 0 2px #ffffff, 0 0 8px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.55); animation: blLiveDot 1.6s ease-in-out infinite; } .dark .bl-soft-header-icon::after { box-shadow: 0 0 0 2px #1f2937, 0 0 8px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.7); } @keyframes blLiveDot { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px #ffffff, 0 0 0 0 rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.6); } 50% { transform: scale(1.1); box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0); } } /* Title — kept on a single line, dark text (no teal) */ .bl-soft-header-title { font-size: 1.5rem; font-weight: 700; color: #0f172a; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; position: relative; display: inline-block; } @media (min-width: 640px) { .bl-soft-header-title { font-size: 1.75rem; } } .dark .bl-soft-header-title { color: #f9fafb; } /* Thin gradient accent line that grows under the title on hover of the header card — a subtle "wake-up" interaction that's noticeable but not distracting. */ .bl-soft-header-title::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 32px; height: 2px; background: linear-gradient(90deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-bright, #2dd4bf) 100%); border-radius: 2px; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .bl-soft-header:hover .bl-soft-header-title::after { width: 80px; } .bl-soft-header-sub { font-size: 0.875rem; color: #6b7280; margin-top: 0.75rem; line-height: 1.55; max-width: 42rem; } .dark .bl-soft-header-sub { color: #9ca3af; } /* Tab pills row at the top of every AI Reply page. `display` is intentionally NOT set here — leaving it free for Tailwind's `lg:hidden` / `flex` / `inline-flex` utilities to take over. Setting it here previously caused the mobile pill bar to keep rendering at lg+, squashing the main column inside the AI Reply sidebar layout. */ .bl-tabs { align-items: center; gap: 0.25rem; padding: 0.25rem; border-radius: 0.625rem; background: #f3f4f6; border: 1px solid #e5e7eb; } .dark .bl-tabs { background: #111827; border-color: #1f2937; } .bl-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border-radius: 0.45rem; font-size: 0.78rem; font-weight: 600; color: #6b7280; background: transparent; transition: color 0.15s ease, background 0.15s ease; white-space: nowrap; } .bl-tab:hover { color: var(--agency-primary, #003A3A); } .bl-tab-active { background: #ffffff; color: var(--agency-primary, #003A3A); box-shadow: 0 1px 2px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); } .dark .bl-tab { color: #9ca3af; } .dark .bl-tab:hover { color: var(--agency-primary-bright, #5eead4); } .dark .bl-tab-active { background: #1f2937; color: var(--agency-primary-bright, #5eead4); box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.2); } /* --- Scrollbar-hide utility ----------------------------------------- Used on horizontally-scrolling tab rows (e.g. the Reputation Health tabs on mobile) so the scroll behaviour is preserved but the scrollbar doesn't sit visibly under the pills. */ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } /* --- Sidebar collapsible section toggle ---------------------------- Drop-in replacement for the old static `

` group labels. Wraps the label text + a chevron in a clickable button; the chevron auto-rotates based on whether the adjacent `data-dropdown-target="menu"` div is hidden, via :has(). */ .bl-nav-section-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.25rem 0.5rem; border: 0; background: transparent; cursor: pointer; color: #9ca3af; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 0.375rem; transition: background-color 0.15s ease, color 0.15s ease; } .bl-nav-section-toggle:hover { background: #f9fafb; color: #6b7280; } .dark .bl-nav-section-toggle { color: #6b7280; } .dark .bl-nav-section-toggle:hover { background: rgba(255, 255, 255, 0.04); color: #9ca3af; } .bl-nav-section-chevron { width: 11px; height: 11px; flex-shrink: 0; transition: transform 0.18s ease; /* Default = section is expanded → chevron points down */ } /* When the sibling menu has .hidden, point the chevron right. */ .bl-nav-section:has([data-dropdown-target="menu"].hidden) .bl-nav-section-chevron { transform: rotate(-90deg); } /* --- User-profile trigger button (footer dropdown) ----------------- Sits at the very bottom of the business sidebar. Click toggles the panel above it (Notifications · Settings · Help · Sign Out). Avatar + name + chevron, with a tiny red dot when there are unread notifications. */ .bl-user-profile-btn { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.5rem 0.5rem; border: 0; background: transparent; border-radius: 0.5rem; cursor: pointer; transition: background-color 0.15s ease; } .bl-user-profile-btn:hover { background: #f9fafb; } .dark .bl-user-profile-btn:hover { background: rgba(255, 255, 255, 0.04); } .bl-user-profile-avatar { position: relative; flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: linear-gradient(135deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-mid, #0a6e6e) 100%); } .bl-user-profile-initials { font-size: 11px; font-weight: 700; color: #ffffff; letter-spacing: 0.02em; } .bl-user-profile-badge { position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-radius: 9999px; background: #ef4444; border: 2px solid #ffffff; } .dark .bl-user-profile-badge { border-color: #111827; } .bl-user-profile-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; text-align: left; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dark .bl-user-profile-name { color: #f3f4f6; } .bl-user-profile-chevron { width: 12px; height: 12px; flex-shrink: 0; color: #9ca3af; transition: transform 0.18s ease; } /* Chevron points UP when menu is expanded (panel sits ABOVE the button), DOWN when collapsed. Default state = menu hidden = down. */ [data-controller~="dropdown"]:has([data-dropdown-target="menu"]:not(.hidden)) .bl-user-profile-chevron { transform: rotate(180deg); } /* Stat tile — small dashboard counter */ .bl-stat-tile { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 0.875rem; padding: 1rem 1.25rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; /* Long values ("Manuelle Meldungen mit Credits") must never widen the grid column past the viewport on phones. */ min-width: 0; overflow-wrap: break-word; } .bl-stat-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.2); } .dark .bl-stat-tile { background: #1f2937; border-color: #374151; } .dark .bl-stat-tile:hover { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); box-shadow: 0 8px 18px rgba(0,0,0,0.4); } /* Clickable variant — used when the tile is an . Strips link defaults and lets the same base hover lift fire. */ .bl-stat-tile-link { display: block; text-decoration: none; color: inherit; cursor: pointer; } .bl-stat-tile-link:hover { text-decoration: none; } /* Stat row — a swipe carousel showing two tiles per view on mobile (a sliver of the next tile signals there's more) that becomes a 5-up grid from md up. Apply to the row container; the .bl-stat-tile children need no extra class. */ .bl-stat-scroller { display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ padding-bottom: 0.25rem; } .bl-stat-scroller::-webkit-scrollbar { display: none; } /* WebKit */ .bl-stat-scroller > * { flex: 0 0 auto; width: 46%; /* two tiles per view + a slim peek */ min-width: 150px; scroll-snap-align: start; } @media (min-width: 768px) { .bl-stat-scroller { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; } .bl-stat-scroller > * { width: auto; min-width: 0; } /* 4-Kachel-Variante (Proposals ohne Credit-Guthaben-Kachel) */ .bl-stat-scroller--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Overview-card row — for richer, taller cards (e.g. the reviews page rating + stat cards). One card per view on mobile with a peek of the next; a 3-up grid from lg up. */ .bl-overview-scroller { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ padding-bottom: 0.25rem; } .bl-overview-scroller::-webkit-scrollbar { display: none; } /* WebKit */ .bl-overview-scroller > * { flex: 0 0 auto; width: 88%; /* one card per view + a peek */ scroll-snap-align: start; } @media (min-width: 1024px) { .bl-overview-scroller { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; } .bl-overview-scroller > * { width: auto; } } /* Guard for full pages: prevents any stray child from making the page horizontally scrollable on phones. `clip` avoids creating a scroll container; `hidden` is the fallback for older browsers. */ .bl-page-x-guard { overflow-x: hidden; overflow-x: clip; } .bl-stat-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; } .bl-stat-value { font-size: 1.75rem; font-weight: 700; color: #0f172a; margin-top: 0.25rem; line-height: 1; } .bl-stat-value-accent { color: var(--agency-primary, #003A3A); } .bl-stat-value-success { color: #15803d; } .bl-stat-value-warning { color: #b45309; } .bl-stat-value-danger { color: #dc2626; } .dark .bl-stat-label { color: #9ca3af; } .dark .bl-stat-value { color: #f9fafb; } .dark .bl-stat-value-accent { color: var(--agency-primary-bright, #5eead4); } .dark .bl-stat-value-success { color: #86efac; } .dark .bl-stat-value-warning { color: #fcd34d; } .dark .bl-stat-value-danger { color: #f87171; } /* Staggered fade-up entrance delays for stat-tile grids — replaces inline `style="animation:blFadeUp …"` so a strict CSP can drop inline styles. */ .bl-stat-tile--delay-1 { animation: blFadeUp 0.4s ease-out 0.05s both; } .bl-stat-tile--delay-2 { animation: blFadeUp 0.4s ease-out 0.1s both; } .bl-stat-tile--delay-3 { animation: blFadeUp 0.4s ease-out 0.15s both; } .bl-stat-tile--delay-4 { animation: blFadeUp 0.4s ease-out 0.2s both; } /* Agency-brand text colour utility (whitelabel-safe). */ .text-agency { color: var(--agency-primary, #003A3A); } /* Staggered fade-up entrance for list cards. The per-item delay is supplied via the `animation-delay` inline value (a dynamic value, not a static style), keeping the animation definition itself in CSS. */ .bl-list-card--enter { animation: blFadeUp 0.35s ease-out both; } /* Inline icon sizes (replaces inline `style="width:..;height:.."` on SVGs). */ .bl-icon-sm { width: 14px; height: 14px; } .bl-icon-lg { width: 28px; height: 28px; } /* Auto-width input (replaces inline `style="width:auto;padding:.."`). */ .bl-input--auto { width: auto; padding: 0.5rem 0.85rem; } /* Section card with header band — used by edit forms */ .bl-section { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 1rem; overflow: hidden; margin-bottom: 1.5rem; } .dark .bl-section { background: #1f2937; border-color: #374151; } /* Danger-zone variant of .bl-section — replaces the inline #fecaca/#fee2e2/ #b91c1c styles on account-delete + POA-revoke cards so a later CSP can drop inline styles. Red is danger semantics (not whitelabel), so it stays a fixed colour rather than an --agency-* var. */ .bl-danger-zone { border-color: #fecaca; } .bl-danger-zone .bl-section-head { border-bottom-color: #fee2e2; } .bl-danger-zone .bl-section-title { color: #b91c1c; } .dark .bl-danger-zone { border-color: #7f1d1d; } .dark .bl-danger-zone .bl-section-head { border-bottom-color: #7f1d1d; } .dark .bl-danger-zone .bl-section-title { color: #f87171; } .bl-section-head { /* Flex so a sibling action button (Edit, View all, etc.) sits to the right of the icon+title group on desktop instead of stacking below. `flex-wrap: wrap` lets the button drop to its own row on narrow screens, with `gap` providing breathing room from the title above instead of stacking flush against the underline. Every settings card using `.bl-section-head` inherits this. */ display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 1.25rem; border-bottom: 1px solid #f3f4f6; background: linear-gradient(180deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.025) 0%, transparent 100%); } .dark .bl-section-head { border-bottom-color: #374151; background: linear-gradient(180deg, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.04) 0%, transparent 100%); } .bl-section-title { font-size: 1rem; font-weight: 700; color: #0f172a; } .bl-section-hint { font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem; } .dark .bl-section-title { color: #f9fafb; } .dark .bl-section-hint { color: #9ca3af; } .bl-section-body { padding: 1.25rem; } /* Table row — soft teal hover. Used on table rows inside `.bl-section`. */ .bl-row { transition: background 0.15s ease; } .bl-row:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.035); } .dark .bl-row:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.05); } /* List-card (history items, location list rows) */ .bl-list-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 0.875rem; padding: 1rem 1.25rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .bl-list-card:hover { border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); box-shadow: 0 8px 18px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); } .dark .bl-list-card { background: #1f2937; border-color: #374151; } .dark .bl-list-card:hover { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); box-shadow: 0 8px 18px rgba(0,0,0,0.35); } /* Status pill variants */ .bl-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.6rem; border-radius: 9999px; font-size: 0.68rem; font-weight: 600; border: 1px solid transparent; } .bl-pill-neutral { background: #f3f4f6; color: #6b7280; } .bl-pill-success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; } .bl-pill-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; } .bl-pill-error { background: #fef2f2; color: #b91c1c; border-color: #fecaca; } .bl-pill-info { background: rgba(59,130,246,0.08); color: #1d4ed8; border-color: rgba(59,130,246,0.2); } .bl-pill-brand { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); color: var(--agency-primary, #003A3A); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18); } .dark .bl-pill-neutral { background: #374151; color: #d1d5db; } .dark .bl-pill-success { background: rgba(34,197,94,0.18); color: #86efac; border-color: rgba(34,197,94,0.3); } .dark .bl-pill-warning { background: rgba(245,158,11,0.18); color: #fcd34d; border-color: rgba(245,158,11,0.3); } .dark .bl-pill-error { background: rgba(239,68,68,0.18); color: #fca5a5; border-color: rgba(239,68,68,0.3); } .dark .bl-pill-info { background: rgba(59,130,246,0.18); color: #93c5fd; border-color: rgba(59,130,246,0.3); } .dark .bl-pill-brand { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.15); color: var(--agency-primary-bright, #5eead4); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); } /* Radio-card option (tone/length/category selectable cards) */ .bl-radio-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.7rem 1rem; border: 1px solid #e5e7eb; border-radius: 0.625rem; background: #ffffff; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; text-align: center; } .bl-radio-card:hover { border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.4); } .bl-radio-card-active { border-color: var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.05); box-shadow: 0 0 0 3px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.12); } .bl-radio-card-active .bl-radio-card-label { color: var(--agency-primary, #003A3A); font-weight: 700; } .dark .bl-radio-card { background: #1f2937; border-color: #374151; } .dark .bl-radio-card:hover { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.45); } .dark .bl-radio-card-active { border-color: var(--agency-primary-bright, #2dd4bf); background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.08); box-shadow: 0 0 0 3px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); } .dark .bl-radio-card-active .bl-radio-card-label { color: var(--agency-primary-bright, #5eead4); } .bl-radio-card-label { font-size: 0.875rem; font-weight: 600; color: #374151; } .bl-radio-card-hint { font-size: 0.7rem; color: #6b7280; margin-top: 0.15rem; } .dark .bl-radio-card-label { color: #d1d5db; } .dark .bl-radio-card-hint { color: #9ca3af; } /* Stacked variant — left-aligned with multi-line hint underneath. Used for the auto-reply mode cards where each option has a longer description that wraps. */ .bl-radio-card-stacked { align-items: flex-start; text-align: left; padding: 0.85rem 1rem; } .bl-radio-card-stacked .bl-radio-card-hint { margin-top: 0.3rem; line-height: 1.35; } /* Banner box (info / warning / brand) */ .bl-banner { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: 0.875rem; border: 1px solid; } .bl-banner-brand { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18); color: var(--agency-primary, #003A3A); } .bl-banner-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; } .dark .bl-banner-brand { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.06); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); color: var(--agency-primary-bright, #5eead4); } .dark .bl-banner-warning { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.3); color: #fcd34d; } /* --- Structured header card ------------------------------------------------ Lighter alternative to the bold .bl-hero. Matches the sub_agencies page pattern: a 3px teal→mint gradient stripe across the top, a white surface, icon tile + title on the left, action area on the right, and an optional second row below a divider for stats / search. Sits on every "main" page inside the business namespace where we want the brand colour present but not dominating. */ .bl-header-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .bl-header-card::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-mid, #0a6e6e) 50%, var(--agency-primary-bright, #2dd4bf) 100%); } .dark .bl-header-card { background: #1f2937; border-color: #374151; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .bl-header-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 0.75rem; background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); color: var(--agency-primary, #003A3A); flex-shrink: 0; } .dark .bl-header-icon { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.12); color: var(--agency-primary-bright, #5eead4); } .bl-header-title { font-size: 1.25rem; font-weight: 700; color: var(--agency-primary, #003A3A); letter-spacing: -0.005em; } .bl-header-sub { font-size: 0.72rem; color: #6b7280; margin-top: 2px; } .dark .bl-header-title { color: var(--agency-primary-bright, #5eead4); } .dark .bl-header-sub { color: #9ca3af; } .bl-header-divider { border-top: 1px solid #f3f4f6; margin-top: 1rem; padding-top: 1rem; } .dark .bl-header-divider { border-top-color: rgba(255, 255, 255, 0.06); } /* Stat pill — small chip used inside the header's bottom row */ .bl-stat-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap; } .bl-stat-pill strong { font-weight: 800; } .bl-stat-pill-brand { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); color: var(--agency-primary, #003A3A); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18); } .bl-stat-pill-success { background: rgba(34, 197, 94, 0.08); color: #15803d; border-color: rgba(34, 197, 94, 0.28); } .bl-stat-pill-warning { background: rgba(245, 158, 11, 0.08);color: #92400e; border-color: rgba(245, 158, 11, 0.3); } .bl-stat-pill-neutral { background: #f9fafb; color: #6b7280; border-color: #e5e7eb; } .dark .bl-stat-pill-brand { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.14); color: var(--agency-primary-bright, #5eead4); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); } .dark .bl-stat-pill-success { background: rgba(34, 197, 94, 0.16); color: #86efac; border-color: rgba(34, 197, 94, 0.3); } .dark .bl-stat-pill-warning { background: rgba(245, 158, 11, 0.16); color: #fcd34d; border-color: rgba(245, 158, 11, 0.3); } .dark .bl-stat-pill-neutral { background: #111827; color: #d1d5db; border-color: #374151; } /* Capacity meter (horizontal bar used in the header for slot usage) */ .bl-capacity-bar { position: relative; height: 6px; width: 84px; background: #e5e7eb; border-radius: 9999px; overflow: hidden; flex-shrink: 0; } .bl-capacity-bar-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--agency-primary, #003A3A), var(--agency-primary-bright, #2dd4bf)); border-radius: 9999px; transition: width 0.6s ease; } .dark .bl-capacity-bar { background: #374151; } .dark .bl-capacity-bar-fill { background: linear-gradient(90deg, #2dd4bf, #5eead4); } /* ============================================================================ Business · AI Reply sidebar (Settings / Templates / History) Collapsible vertical nav, controlled by ai_sidebar_controller.js. The sidebar lives at lg+; on smaller viewports the partial falls back to a horizontal pill row using `lg:hidden` / `hidden lg:block`. ========================================================================= */ .bl-ai-sidebar { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1rem 0.75rem; width: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .dark .bl-ai-sidebar { background: #1f2937; border-color: #374151; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } /* Decorative gradient stripe on the LEFT edge of the sidebar — distinct from sub_agencies' top stripe, gives the sidebar a vertical "spine". */ .bl-ai-sidebar::before { content: ""; position: absolute; left: 0; top: 1.25rem; bottom: 1.25rem; width: 3px; background: linear-gradient(180deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-mid, #0a6e6e) 50%, var(--agency-primary-bright, #2dd4bf) 100%); border-radius: 0 4px 4px 0; opacity: 0.55; transition: opacity 0.3s ease; } .bl-ai-sidebar:hover::before { opacity: 0.85; } @media (min-width: 1024px) { .bl-ai-sidebar { width: 14rem; flex-shrink: 0; } .bl-ai-sidebar.is-collapsed { width: 4.5rem; padding: 1rem 0.5rem; } } /* Section label — "AI Reply" header at the top of the sidebar */ .bl-ai-sidebar-label { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: #6b7280; padding: 0.25rem 0.5rem 0.75rem 0.85rem; display: flex; align-items: center; gap: 0.5rem; transition: padding 0.3s ease; } .dark .bl-ai-sidebar-label { color: #9ca3af; } .bl-ai-sidebar-label-text { transition: opacity 0.2s ease, width 0.2s ease; } .bl-ai-sidebar.is-collapsed .bl-ai-sidebar-label { justify-content: center; padding: 0.25rem 0 0.75rem 0; } .bl-ai-sidebar.is-collapsed .bl-ai-sidebar-label-text { opacity: 0; width: 0; overflow: hidden; } .bl-ai-sidebar-label-dot { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; background: linear-gradient(135deg, var(--agency-primary, #003A3A), var(--agency-primary-bright, #2dd4bf)); box-shadow: 0 0 0 3px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.1); flex-shrink: 0; } .dark .bl-ai-sidebar-label-dot { box-shadow: 0 0 0 3px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); } .bl-ai-sidebar-divider { border-top: 1px solid #f3f4f6; margin: 0.5rem 0; } .dark .bl-ai-sidebar-divider { border-top-color: #374151; } /* Nav item — flex row with icon tile + label */ .bl-ai-sidebar-item { position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; border-radius: 0.625rem; color: #6b7280; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease; margin-bottom: 2px; } .bl-ai-sidebar-item:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04); color: var(--agency-primary, #003A3A); transform: translateX(2px); } .dark .bl-ai-sidebar-item { color: #9ca3af; } .dark .bl-ai-sidebar-item:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.06); color: var(--agency-primary-bright, #5eead4); } /* Active item — tinted background + vertical accent rail on the left */ .bl-ai-sidebar-item-active { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); color: var(--agency-primary, #003A3A); box-shadow: inset 0 0 0 1px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); } .bl-ai-sidebar-item-active:hover { transform: none; background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.1); } .bl-ai-sidebar-item-active::before { content: ""; position: absolute; left: -0.75rem; top: 0.625rem; bottom: 0.625rem; width: 3px; background: linear-gradient(180deg, var(--agency-primary, #003A3A), var(--agency-primary-bright, #2dd4bf)); border-radius: 0 4px 4px 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .dark .bl-ai-sidebar-item-active { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.1); color: var(--agency-primary-bright, #5eead4); box-shadow: inset 0 0 0 1px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); } .dark .bl-ai-sidebar-item-active::before { background: linear-gradient(180deg, var(--agency-primary-bright, #2dd4bf), #5eead4); } .bl-ai-sidebar.is-collapsed .bl-ai-sidebar-item-active::before { left: -0.5rem; } /* Icon tile inside each item */ .bl-ai-sidebar-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 0.5rem; background: #f3f4f6; color: #6b7280; flex-shrink: 0; transition: background 0.18s ease, color 0.18s ease; } .bl-ai-sidebar-item:hover .bl-ai-sidebar-icon { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.1); color: var(--agency-primary, #003A3A); } .bl-ai-sidebar-item-active .bl-ai-sidebar-icon { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.14); color: var(--agency-primary, #003A3A); box-shadow: 0 2px 6px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.12); } .dark .bl-ai-sidebar-icon { background: #374151; color: #9ca3af; } .dark .bl-ai-sidebar-item:hover .bl-ai-sidebar-icon, .dark .bl-ai-sidebar-item-active .bl-ai-sidebar-icon { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.15); color: var(--agency-primary-bright, #5eead4); } /* Label text — fades to zero width when collapsed */ .bl-ai-sidebar-item-text { transition: opacity 0.2s ease, width 0.2s ease; flex: 1; } .bl-ai-sidebar.is-collapsed .bl-ai-sidebar-item { justify-content: center; padding: 0.55rem; gap: 0; } .bl-ai-sidebar.is-collapsed .bl-ai-sidebar-item-text { opacity: 0; width: 0; overflow: hidden; } /* Active dot indicator on the right when expanded — replaces the chevron that would otherwise feel cluttered */ .bl-ai-sidebar-item-dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--agency-primary, #003A3A); flex-shrink: 0; box-shadow: 0 0 8px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.4); transition: opacity 0.2s ease, transform 0.2s ease; } .bl-ai-sidebar.is-collapsed .bl-ai-sidebar-item-dot { opacity: 0; transform: scale(0); } .dark .bl-ai-sidebar-item-dot { background: var(--agency-primary-bright, #5eead4); box-shadow: 0 0 8px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.5); } /* Toggle button at the bottom */ .bl-ai-sidebar-toggle { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem; border-radius: 0.625rem; background: #f9fafb; color: #6b7280; font-size: 0.7rem; font-weight: 600; border: 1px solid #e5e7eb; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .bl-ai-sidebar-toggle:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.05); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.2); color: var(--agency-primary, #003A3A); } .dark .bl-ai-sidebar-toggle { background: #111827; border-color: #374151; color: #9ca3af; } .dark .bl-ai-sidebar-toggle:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.07); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); color: var(--agency-primary-bright, #5eead4); } .bl-ai-sidebar-toggle-icon { flex-shrink: 0; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .bl-ai-sidebar.is-collapsed .bl-ai-sidebar-toggle-icon { transform: rotate(180deg); } /* ============================================================================ Business · Plans & Pricing Outlined upgrade button with a multi-step hover animation (gradient fill-up + diagonal shimmer + lift + halo glow + arrow slide) and plan cards with a spring lift curve + animated premium ribbon. ========================================================================= */ /* --- Outlined upgrade button --------------------------------------------- */ .bl-upgrade-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.7rem 1.5rem; border-radius: 9999px; background: transparent; color: var(--agency-primary, #003A3A); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.01em; border: 2px solid var(--agency-primary, #003A3A); overflow: hidden; cursor: pointer; z-index: 0; transition: color 0.35s ease, border-color 0.35s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease; } .dark .bl-upgrade-btn { color: var(--agency-primary-bright, #5eead4); border-color: var(--agency-primary-bright, #2dd4bf); } /* Fill-up gradient that slides in from the bottom on hover */ .bl-upgrade-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-mid, #0a6e6e) 50%, var(--agency-primary-bright, #2dd4bf) 100%); transform: translateY(101%); transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); z-index: -1; } .dark .bl-upgrade-btn::before { background: linear-gradient(135deg, #2dd4bf 0%, #5eead4 100%); } /* Diagonal shimmer sweep that crosses the button on hover */ .bl-upgrade-btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-22deg); transition: left 0.85s ease; pointer-events: none; } .bl-upgrade-btn:hover { color: #ffffff; border-color: transparent; transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 32px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.32), 0 0 0 5px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.1); } .bl-upgrade-btn:hover::before { transform: translateY(0); } .bl-upgrade-btn:hover::after { left: 150%; } .bl-upgrade-btn:active { transform: translateY(-1px) scale(0.99); } .dark .bl-upgrade-btn:hover { color: #0f172a; box-shadow: 0 14px 32px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.45), 0 0 0 5px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.15); } /* Arrow icon — slides right on hover */ .bl-upgrade-btn-arrow { transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); } .bl-upgrade-btn:hover .bl-upgrade-btn-arrow { transform: translateX(4px); } /* Bestseller "Buy" CTA — a hover shine sweep + spring lift + arrow nudge layered on top of .bl-btn-primary, so the filled bestseller button on the credit packs index animates as richly as the outlined .bl-upgrade-btn CTAs beside it. The ::after highlight stays parked off-screen until hover. */ .bl-buy-btn { position: relative; overflow: hidden; isolation: isolate; } .bl-buy-btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-22deg); transition: left 0.6s ease; pointer-events: none; } .bl-buy-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 30px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.4); filter: brightness(1.06); } .bl-buy-btn:hover::after { left: 150%; } .bl-buy-btn:active { transform: translateY(0) scale(0.99); } .bl-buy-btn-arrow { transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); } .bl-buy-btn:hover .bl-buy-btn-arrow { transform: translateX(4px); } /* --- Plan card ----------------------------------------------------------- */ .bl-plan-card { position: relative; /* Flex column so the card body can push its CTA to the bottom — keeps every "Buy" button aligned on the same row even when the bestseller's ribbon makes that card taller. */ display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 1.25rem; overflow: hidden; opacity: 0; transform: translateY(14px); animation: blFadeUp 0.5s ease-out forwards; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.3s ease; } .dark .bl-plan-card { background: #1f2937; border-color: #374151; } .bl-plan-card:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 24px 48px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.14), 0 8px 20px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.3); } .dark .bl-plan-card:hover { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.35); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.4); } /* Premium plan gets a permanent subtle glow + slightly stronger border */ .bl-plan-card-premium { border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.4); box-shadow: 0 8px 24px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.1); } .dark .bl-plan-card-premium { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.4); box-shadow: 0 8px 24px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); } /* Explicit hover for the bestseller — same lift as the others but a slightly stronger shadow + border so it still reads as premium. */ .bl-plan-card-premium:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 28px 54px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.22), 0 10px 24px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.12); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.55); } .dark .bl-plan-card-premium:hover { box-shadow: 0 28px 54px rgba(0, 0, 0, 0.6), 0 10px 24px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.4); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.6); } /* Plan ribbon — Premium has an auto-shimmer that loops every 3s */ .bl-plan-ribbon { position: relative; display: block; text-align: center; padding: 0.55rem 1rem; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; overflow: hidden; } .bl-plan-ribbon-premium { background: linear-gradient(135deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-mid, #0a6e6e) 50%, var(--agency-primary-bright, #2dd4bf) 100%); color: #ffffff; } .bl-plan-ribbon-premium::before { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-25deg); animation: blRibbonShimmer 3.5s ease-in-out infinite; } .bl-plan-ribbon-business { background: linear-gradient(135deg, #1e40af, #3b82f6); color: #ffffff; } @keyframes blRibbonShimmer { 0%, 100% { left: -100%; } 50% { left: 150%; } } /* "Popular" pulse badge */ .bl-plan-badge-pulse { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.6rem; border-radius: 9999px; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #ffffff; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); animation: blPulse 2.4s ease-in-out infinite; } .bl-plan-badge-pulse::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: #ffffff; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); animation: blPulseDot 1.4s ease-in-out infinite; } @keyframes blPulse { 0%, 100% { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); } 50% { box-shadow: 0 4px 18px rgba(245, 158, 11, 0.65); } } @keyframes blPulseDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); } 50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); } } /* Savings badge — used on credit packs index when a pack has a better per-credit rate than the smallest pack. Floats top-right, mint gradient with subtle pulse so the eye lands on the savings cue. */ .bl-save-badge { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.65rem; border-radius: 9999px; background: linear-gradient(135deg, var(--agency-primary-bright, #2dd4bf), #14b8a6); color: #ffffff; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; box-shadow: 0 4px 14px rgba(20, 184, 166, 0.4); animation: blSavePulse 2.6s ease-in-out infinite; } .dark .bl-save-badge { background: linear-gradient(135deg, var(--agency-primary-bright, #2dd4bf), var(--agency-primary-mid, #0d9488)); box-shadow: 0 4px 14px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.35); } @keyframes blSavePulse { 0%, 100% { box-shadow: 0 4px 14px rgba(20, 184, 166, 0.4); } 50% { box-shadow: 0 6px 20px rgba(20, 184, 166, 0.65); } } /* Credit ring — the big gradient halo around the pack credits number on the credit pack show page. Conic-gradient border in brand teal with a slow rotation; inner white disc holds the count-up number + label. */ .bl-credit-ring { position: relative; width: 200px; height: 200px; border-radius: 9999px; padding: 6px; background: conic-gradient(from 180deg at 50% 50%, var(--agency-primary, #003A3A) 0deg, var(--agency-primary-bright, #2dd4bf) 120deg, #5eead4 240deg, var(--agency-primary, #003A3A) 360deg); animation: blCreditRingSpin 14s linear infinite; box-shadow: 0 18px 40px -18px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.45), 0 0 0 1px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.15) inset; } .bl-credit-ring-inner { width: 100%; height: 100%; border-radius: 9999px; background: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: blCreditRingSpin 14s linear infinite reverse; } .bl-credit-ring-number { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--agency-primary, #003A3A); } .bl-credit-ring-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #6b7280; margin-top: 0.4rem; } .dark .bl-credit-ring-inner { background: #111827; } .dark .bl-credit-ring-number { color: var(--agency-primary-bright, #5eead4); } .dark .bl-credit-ring-label { color: #9ca3af; } @keyframes blCreditRingSpin { to { transform: rotate(360deg); } } /* Pack switcher chip — small clickable card showing credits + price for one pack, used in the "Compare packs" strip on the show page. Active state gets a filled deep-teal background. */ .bl-pack-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0.75rem 0.5rem; border-radius: 0.85rem; background: #ffffff; border: 1px solid #e5e7eb; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; text-decoration: none; } .bl-pack-chip:hover { transform: translateY(-2px); border-color: var(--agency-primary-bright, #2dd4bf); box-shadow: 0 8px 20px -10px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); } .bl-pack-chip-credits { font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--agency-primary, #003A3A); } .bl-pack-chip-label { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.12em; color: #9ca3af; font-weight: 700; margin-top: 0.15rem; } .bl-pack-chip-price { font-size: 0.85rem; font-weight: 700; color: #111827; margin-top: 0.4rem; } .bl-pack-chip-per { font-size: 0.65rem; color: #6b7280; margin-top: 0.1rem; } .bl-pack-chip-active { background: linear-gradient(135deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-mid, #0a6e6e) 100%); border-color: var(--agency-primary, #003A3A); box-shadow: 0 8px 20px -8px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.5); } .bl-pack-chip-active .bl-pack-chip-credits, .bl-pack-chip-active .bl-pack-chip-price { color: #ffffff; } .bl-pack-chip-active .bl-pack-chip-label { color: var(--agency-primary-bright, #5eead4); } .bl-pack-chip-active .bl-pack-chip-per { color: rgba(255, 255, 255, 0.7); } .dark .bl-pack-chip { background: #1f2937; border-color: #374151; } .dark .bl-pack-chip:hover { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.4); } .dark .bl-pack-chip-credits { color: var(--agency-primary-bright, #5eead4); } .dark .bl-pack-chip-price { color: #f9fafb; } .dark .bl-pack-chip-label { color: #6b7280; } .dark .bl-pack-chip-per { color: #9ca3af; } .dark .bl-pack-chip-active { background: linear-gradient(135deg, var(--agency-primary-mid, #0a6e6e) 0%, #14b8a6 100%); border-color: var(--agency-primary-bright, #2dd4bf); } /* ============================================================ CREDIT PACK DETAIL PAGE (bcp-*) Conversion-focused purchase page: a gradient pack hero, a before/after balance preview and reassurance trust tiles. Card entry/lift reuses the shared bp-fade-up / bp-card-lift. ============================================================ */ /* Gradient pack hero — the visual centrepiece. Deep-teal diagonal gradient with two soft radial glows floating behind the content. */ .bcp-hero { position: relative; overflow: hidden; border-radius: 1.25rem; padding: 1.75rem; color: #ffffff; background: linear-gradient(135deg, var(--agency-primary, #003A3A) 0%, #0a5f5f 52%, #11968c 100%); box-shadow: 0 22px 44px -22px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.55); } .bcp-hero::before, .bcp-hero::after { content: ""; position: absolute; border-radius: 9999px; pointer-events: none; } .bcp-hero::before { width: 240px; height: 240px; top: -120px; right: -56px; background: radial-gradient(circle, rgba(var(--agency-primary-bright-rgb, 94, 234, 212), 0.45), transparent 70%); } .bcp-hero::after { width: 200px; height: 200px; bottom: -112px; left: -48px; background: radial-gradient(circle, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.30), transparent 70%); } .bcp-hero-top { position: relative; display: flex; align-items: center; gap: 1rem; } .bcp-hero-icon { flex-shrink: 0; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 1rem; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); } .bcp-hero-credits { font-size: 3.25rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; } .bcp-hero-label { margin-top: 0.3rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.72); } .bcp-hero-badge { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.34rem 0.72rem; border-radius: 9999px; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1f2937; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; box-shadow: 0 6px 16px -4px rgba(245, 158, 11, 0.6); } .bcp-hero-foot { position: relative; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, 0.16); display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; } .bcp-hero-price-cap { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.62); margin-bottom: 0.35rem; } .bcp-hero-price { font-size: 2rem; font-weight: 800; line-height: 1; } .bcp-hero-per { text-align: right; font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); } .bcp-hero-per strong { font-weight: 800; color: #ffffff; } /* Balance preview — "now" and "after" pills joined by an arrow */ .bcp-balance { display: flex; align-items: center; gap: 0.75rem; } .bcp-balance-pill { flex: 1; text-align: center; padding: 0.9rem 0.5rem; border-radius: 0.9rem; border: 1px solid #e5e7eb; background: #f9fafb; } .bcp-balance-pill-after { border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.35); background: linear-gradient(135deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06), rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.12)); } .bcp-balance-num { font-size: 1.85rem; font-weight: 800; line-height: 1; color: #111827; } .bcp-balance-pill-after .bcp-balance-num { color: var(--agency-primary, #003A3A); } .bcp-balance-cap { margin-top: 0.3rem; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #9ca3af; } .bcp-balance-arrow { flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: var(--agency-primary, #003A3A); color: #ffffff; } .dark .bcp-balance-pill { background: #111827; border-color: #374151; } .dark .bcp-balance-num { color: #f9fafb; } .dark .bcp-balance-pill-after { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.4); background: linear-gradient(135deg, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.12), rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.04)); } .dark .bcp-balance-pill-after .bcp-balance-num { color: var(--agency-primary-bright, #5eead4); } .dark .bcp-balance-arrow { background: var(--agency-primary-bright, #2dd4bf); color: #042f2e; } /* Trust tiles — small reassurance badges (secure / instant / etc.) */ .bcp-trust-tile { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.9rem; border-radius: 0.9rem; background: #ffffff; border: 1px solid #e5e7eb; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .bcp-trust-tile:hover { transform: translateY(-2px); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.5); box-shadow: 0 10px 24px -14px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.3); } .bcp-trust-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 0.6rem; background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); color: var(--agency-primary, #003A3A); } .bcp-trust-title { font-size: 0.78rem; font-weight: 700; color: #111827; } .bcp-trust-desc { font-size: 0.68rem; line-height: 1.35; color: #6b7280; } .dark .bcp-trust-tile { background: #1f2937; border-color: #374151; } .dark .bcp-trust-icon { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.14); color: var(--agency-primary-bright, #5eead4); } .dark .bcp-trust-title { color: #f9fafb; } .dark .bcp-trust-desc { color: #9ca3af; } /* Order-summary total row + secure note */ .bcp-summary-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 0.85rem; margin-top: 0.15rem; border-top: 1px solid #e5e7eb; } .dark .bcp-summary-total { border-color: #374151; } .bcp-summary-total-num { font-size: 1.85rem; font-weight: 800; line-height: 1; color: var(--agency-primary, #003A3A); } .dark .bcp-summary-total-num { color: var(--agency-primary-bright, #5eead4); } .bcp-secure-note { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.68rem; color: #6b7280; } .dark .bcp-secure-note { color: #9ca3af; } /* Connected step cards — numbered step sequence used for the "How credits work" section on the credit packs page. Each step is a card joined to the next by a short connector segment that bridges the grid gap. Stacks into a single column on mobile (no connectors); from md+ it lays out as 4 equal columns. Two-element split on purpose: the grid cell (.bl-timeline-step) carries the staggered blFadeUp entrance — whose `forwards` fill would otherwise pin `transform` and kill the hover lift — while the inner card (.bl-timeline-card) owns its own `transform` for the spring hover. */ .bl-timeline { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .bl-timeline { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } } .bl-timeline-step { position: relative; } @media (min-width: 768px) { .bl-timeline-step:not(:last-child)::after { content: ""; position: absolute; top: 37px; /* node centre: 1.25rem card pad-top + 18px half-node */ left: 100%; width: 1.5rem; /* = grid gap */ height: 2px; background: linear-gradient(to right, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.45), rgba(var(--agency-primary-rgb, 0, 58, 58), 0.12)); } } .bl-timeline-card { height: 100%; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 0.9rem; padding: 1.25rem; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .bl-timeline-card:hover { transform: translateY(-5px); box-shadow: 0 14px 28px -12px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.3); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.3); } .bl-timeline-node { width: 36px; height: 36px; margin-bottom: 0.85rem; border-radius: 9999px; background: linear-gradient(135deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-mid, #0a6e6e) 100%); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 800; box-shadow: 0 4px 12px -3px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.5); } .bl-timeline-title { font-size: 0.9rem; font-weight: 700; color: #0f172a; } .bl-timeline-desc { font-size: 0.8rem; color: #6b7280; margin-top: 0.25rem; line-height: 1.5; } .dark .bl-timeline-card { background: #1f2937; border-color: #374151; } .dark .bl-timeline-card:hover { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.35); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.6); } .dark .bl-timeline-node { box-shadow: 0 4px 12px -3px rgba(0, 0, 0, 0.6); } .dark .bl-timeline-title { color: #f9fafb; } .dark .bl-timeline-desc { color: #9ca3af; } .dark .bl-timeline-step:not(:last-child)::after { background: linear-gradient(to right, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.5), rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.12)); } /* ============ Business sidebar — nav items, labels, credit card, utility row ============ The sidebar moved off flat-gray active states onto the deep-teal system: active items get a teal tint + a short rounded accent bar at the left edge. The credit balance becomes a small teal-gradient card, and the notification bell / theme toggle live in a utility row under the logo. */ .bl-nav-item { position: relative; display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: 0.5rem; font-size: 13px; line-height: 1.2; color: #4b5563; transition: background 0.15s ease, color 0.15s ease; } .bl-nav-item:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.05); color: var(--agency-primary, #003A3A); } .bl-nav-item-active { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); color: var(--agency-primary, #003A3A); font-weight: 600; } .bl-nav-item-active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 56%; border-radius: 0 3px 3px 0; background: var(--agency-primary, #003A3A); } .dark .bl-nav-item { color: #9ca3af; } .dark .bl-nav-item:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.08); color: var(--agency-primary-bright, #5eead4); } .dark .bl-nav-item-active { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.1); color: var(--agency-primary-bright, #5eead4); } .dark .bl-nav-item-active::before { background: var(--agency-primary-bright, #2dd4bf); } .bl-nav-label { padding: 0 0.5rem 0.3rem; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #9ca3af; } .dark .bl-nav-label { color: #6b7280; } /* Credit balance card — the one "stat" in the sidebar, deep-teal gradient. */ .bl-sidebar-credit { display: flex; align-items: center; gap: 0.6rem; background: linear-gradient(135deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-mid, #0a6e6e) 100%); border-radius: 0.75rem; padding: 0.6rem 0.85rem; box-shadow: 0 6px 16px -8px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.5); } .bl-sidebar-credit-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9999px; background: rgba(255, 255, 255, 0.15); color: #ffffff; flex-shrink: 0; } .bl-sidebar-credit-label { font-size: 10px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.7); } .bl-sidebar-credit-value { font-size: 1.05rem; font-weight: 700; color: #ffffff; line-height: 1.15; } /* Utility button — notification bell + similar in the sidebar utility row. */ .bl-sidebar-util { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 0.5rem; color: #6b7280; transition: background 0.15s ease, color 0.15s ease; } .bl-sidebar-util:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); color: var(--agency-primary, #003A3A); } .dark .bl-sidebar-util { color: #9ca3af; } .dark .bl-sidebar-util:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.08); color: var(--agency-primary-bright, #5eead4); } /* --- Reduced-motion respect ------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .bl-card, .bl-connect-card, .bl-stat-tile, .bl-list-card, .bl-rail-attention, .bl-rail-issue, .bl-status-attention, .bl-status-issue, .bl-empty::before, .bl-capacity-bar-fill, .bl-ai-sidebar, .bl-ai-sidebar-item, .bl-ai-sidebar-item-text, .bl-ai-sidebar-toggle-icon, .bl-upgrade-btn, .bl-upgrade-btn::before, .bl-upgrade-btn::after, .bl-buy-btn, .bl-buy-btn::after, .bl-buy-btn-arrow, .bl-plan-card, .bl-plan-ribbon-premium::before, .bl-plan-badge-pulse, .bl-save-badge, .bl-credit-ring, .bl-credit-ring-inner, .bl-pack-chip, .bl-timeline-step, .bl-timeline-card, .bl-nav-item, .bl-sidebar-util, .bl-soft-header-icon, .bl-soft-header-icon::after, .bl-soft-header-title::after, .bl-hero-orb, .bl-hero-icon-tile, .bl-hero-icon-tile::after, .bl-hero-accent { animation: none !important; transition: none !important; opacity: 1; transform: none; } } /* ============================================================================ Business · Proposals show (Review Report detail page) Component-scoped styles for app/views/business/proposals/show.html.erb. All custom classes are prefixed `bp-` (Business Proposals) so they compose alongside the `bl-` Business Locations family without collisions. Brand accent = var(--agency-primary, #003A3A); dark-mode pair = var(--agency-primary-bright, #2dd4bf) via the `.dark` class selector. Effects are layered as opt-in classes — base `bl-section` / `bl-btn-primary` rules elsewhere are untouched. ========================================================================= */ /* --- Cascade fade-up entrance ----------------------------------------- Sections set `--bp-delay` inline (e.g. `style="--bp-delay:120ms"`) to stagger their entrance. Same shape as `blFadeUp` but driven by a variable so the timings stay in the template alongside the markup. */ @keyframes bpFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .bp-fade-up { opacity: 0; animation: bpFadeUp 0.45s ease-out forwards; animation-delay: var(--bp-delay, 0ms); } /* --- Mobile Reviews / Activity toggle -------------------------------- On phones the report detail splits behind a two-tab toggle (driven by the generic `tabs` controller). From lg+ the toggle is hidden and both panels show side by side — the desktop rule re-asserts `display` even when the controller has left `.hidden` on the inactive panel. */ .bp-view-toggle { display: flex; } .bp-view-toggle .bl-tab { flex: 1 1 0; justify-content: center; } @media (min-width: 1024px) { .bp-view-toggle { display: none; } .bp-tab-panel.hidden { display: block; } } /* --- Card hover lift + section-header underline ---------------------- Opt-in via `.bp-card-lift` on `.bl-section` and review `

`. */ .bp-card-lift { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; will-change: transform; } .bp-card-lift:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); } .dark .bp-card-lift:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); } /* Animated 2px underline drawn left → right under the section title when the header is hovered. Sits below the title text only, so the adjacent count-pill isn't underlined. */ .bp-card-lift .bp-title-text { position: relative; display: inline-block; } .bp-card-lift .bp-title-text::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--agency-primary, #003A3A); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s ease; } .dark .bp-card-lift .bp-title-text::after { background: var(--agency-primary-bright, #2dd4bf); } .bp-card-lift .bl-section-head:hover .bp-title-text::after { transform: scaleX(1); } /* --- Meta line copy-ref pill ---------------------------------------- */ .bp-meta .bp-ref { transition: background-color 0.15s ease; } .bp-meta .bp-ref:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); } .dark .bp-meta .bp-ref:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.1); } /* --- Save-as-PDF button --------------------------------------------- */ .bp-pdf-btn { transition: all 0.15s ease; } /* --- Hover-reveal arrow --------------------------------------------- Composable: lives at the right edge of a `.bp-icon-row` (or any row-style anchor) and slides in from the left on hover. */ .bp-link-arrow { display: inline-block; opacity: 0; transform: translateX(-4px); transition: opacity 0.2s ease, transform 0.2s ease; } .bp-icon-row:hover .bp-link-arrow { opacity: 0.85; transform: translateX(0); } /* --- Star fill-in stagger ------------------------------------------- Each star sets `--i` (0..4). 60ms per star is snappy but readable. */ @keyframes bpStarPop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } } .bp-star { opacity: 0; transform-origin: center; animation: bpStarPop 0.35s ease-out forwards; animation-delay: calc(var(--i, 0) * 60ms + var(--bp-delay, 0ms)); } /* --- Avatar gradient breathe ----------------------------------------- Slow hue-rotate on the green→teal gradient. 8s alternate keeps it ambient rather than distracting. */ @keyframes bpAvatarBreathe { 0% { filter: hue-rotate(0deg) saturate(1); } 100% { filter: hue-rotate(-12deg) saturate(1.1); } } .bp-avatar-breathe { animation: bpAvatarBreathe 8s ease-in-out infinite alternate; } /* --- Owner-reply slide-in ------------------------------------------ */ @keyframes bpSlideInLeft { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } .bp-owner-slide { animation: bpSlideInLeft 0.45s ease-out both; animation-delay: var(--bp-delay, 200ms); } /* --- Timeline ------------------------------------------------------- */ .bp-timeline { list-style: none; padding: 0; margin: 0; } .bp-timeline-step { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding-bottom: 14px; } /* Connector line as a separate element so we can animate its height. */ .bp-timeline-connector { position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: #e5e7eb; transform-origin: top center; animation: bpConnectorDraw 0.6s ease-out both; animation-delay: calc(var(--i, 0) * 120ms + 200ms); } .dark .bp-timeline-connector { background: #374151; } .bp-timeline-step--done .bp-timeline-connector { background: var(--agency-primary, #003A3A); } .dark .bp-timeline-step--done .bp-timeline-connector { background: var(--agency-primary-bright, #2dd4bf); } .bp-timeline-step--failed .bp-timeline-connector { background: #fecaca; } .bp-timeline-step--last .bp-timeline-connector { display: none; } @keyframes bpConnectorDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } } .bp-timeline-dot { width: 22px; height: 22px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #e5e7eb; background: #fff; color: #fff; flex-shrink: 0; position: relative; } .dark .bp-timeline-dot { border-color: #4b5563; background: #1f2937; } .bp-timeline-step--done .bp-timeline-dot { background: var(--agency-primary, #003A3A); border-color: var(--agency-primary, #003A3A); } .dark .bp-timeline-step--done .bp-timeline-dot { background: var(--agency-primary-bright, #2dd4bf); border-color: var(--agency-primary-bright, #2dd4bf); color: #064e3b; } .bp-timeline-step--current .bp-timeline-dot { border-color: var(--agency-primary, #003A3A); box-shadow: 0 0 0 4px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); animation: bpPulse 1.6s ease-in-out infinite; } .dark .bp-timeline-step--current .bp-timeline-dot { border-color: var(--agency-primary-bright, #2dd4bf); animation-name: bpPulseDark; } .bp-timeline-step--failed .bp-timeline-dot { background: #dc2626; border-color: #dc2626; } @keyframes bpPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); } 50% { box-shadow: 0 0 0 7px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.14); } } @keyframes bpPulseDark { 0%, 100% { box-shadow: 0 0 0 4px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); } 50% { box-shadow: 0 0 0 7px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.28); } } /* One-time ring expansion on completed dots when the page first loads. */ .bp-timeline-step--done .bp-timeline-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 9999px; border: 2px solid var(--agency-primary, #003A3A); animation: bpPing 1.1s ease-out 0.6s 1 both; pointer-events: none; } .dark .bp-timeline-step--done .bp-timeline-dot::after { border-color: var(--agency-primary-bright, #2dd4bf); } @keyframes bpPing { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } } .bp-timeline-label { font-size: 13px; font-weight: 600; color: #111827; line-height: 1.3; } .dark .bp-timeline-label { color: #f3f4f6; } .bp-timeline-step--pending .bp-timeline-label { color: #9ca3af; font-weight: 500; } .dark .bp-timeline-step--pending .bp-timeline-label { color: #6b7280; } .bp-timeline-step--failed .bp-timeline-label { color: #b91c1c; } .dark .bp-timeline-step--failed .bp-timeline-label { color: #fca5a5; } /* Reactivated overlay step (audit 1.12) — amber/orange to signal that a removed review came back, distinct from the green "done" state. */ .bp-timeline-step--reactivated .bp-timeline-connector { background: #fcd34d; } .bp-timeline-step--reactivated .bp-timeline-dot { background: #f59e0b; border-color: #f59e0b; color: #422006; } .bp-timeline-step--reactivated .bp-timeline-label { color: #b45309; } .dark .bp-timeline-step--reactivated .bp-timeline-label { color: #fcd34d; } .bp-timeline-ts { font-size: 11px; color: #6b7280; margin-top: 1px; } .dark .bp-timeline-ts { color: #9ca3af; } /* --- Next-steps info box -------------------------------------------- */ .bp-next-steps--info { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.15); } .dark .bp-next-steps--info { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.07); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.25); } .bp-next-steps--alert { background: #fef2f2; border-color: #fecaca; } .dark .bp-next-steps--alert { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); } /* --- Submit CTA gleam ---------------------------------------------- Layered on top of `.bl-btn-primary`. A diagonal white→transparent highlight sweeps left → right every 6s; paused on hover so the label stays still while the user reads. */ .bp-cta-gleam { position: relative; overflow: hidden; isolation: isolate; } .bp-cta-gleam::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 115deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70% ); transform: translateX(-100%); animation: bpGleam 6s ease-in-out 2s infinite; pointer-events: none; } .bp-cta-gleam:hover::before { animation-play-state: paused; } @keyframes bpGleam { 0% { transform: translateX(-100%); } 60% { transform: translateX(100%); } 100% { transform: translateX(100%); } } /* --- Sticky sidebar shadow ----------------------------------------- `.is-stuck` is toggled by the `sticky-shadow` Stimulus controller (see app/javascript/controllers/sticky_shadow_controller.js). */ .bp-sticky { transition: box-shadow 0.25s ease; border-radius: 1rem; } .bp-sticky.is-stuck { box-shadow: 0 18px 38px -18px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18); } .dark .bp-sticky.is-stuck { box-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.55); } /* --- Print stylesheet ----------------------------------------------- */ @media print { @page { margin: 14mm; } body { background: #fff !important; color: #111827 !important; } .no-print { display: none !important; } .bp-show-root { padding: 0 !important; max-width: none !important; } .lg\:sticky { position: static !important; } .bl-section, .bp-show-root article { box-shadow: none !important; border-color: #d1d5db !important; } .bp-fade-up, .bp-star, .bp-owner-slide, .bp-timeline-connector, .bp-timeline-step--current .bp-timeline-dot, .bp-timeline-step--done .bp-timeline-dot::after, .bp-cta-gleam::before, .bp-avatar-breathe, [style*="animation"] { animation: none !important; opacity: 1 !important; transform: none !important; } .bp-show-root .grid { display: block !important; } .bp-show-root aside { margin-top: 16px; } /* Print both report panels even if the mobile tabs left one hidden. */ .bp-show-root .bp-tab-panel.hidden { display: block !important; } .bp-timeline-dot { print-color-adjust: exact; -webkit-print-color-adjust: exact; } } /* --- Bolder header title accent (opt-in across business pages) ------ The default `.bl-page-title-accent` is a 40px-wide teal stripe under the title. Pages that want a more emphatic header (proposals show, notifications, …) add `bl-page-bold` to the outer container to widen the accent and apply the brand gradient. Global default is unchanged. */ .bl-page-bold .bl-page-title-accent { width: 5.5rem; background: linear-gradient(90deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-bright, #2dd4bf) 100%); opacity: 0.85; } /* Backwards-compatible alias — the proposals show page already carries `bp-show-root` for the print stylesheet, keep the bolder accent anchored to that class too so we don't have to add a second class to that single template. */ .bp-show-root .bl-page-title-accent { width: 5.5rem; background: linear-gradient(90deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-bright, #2dd4bf) 100%); opacity: 0.85; } /* --- Status tally band ------------------------------------------------ A row of small count-pills above the review list. Each tally chip is a tiny rounded pill; reportable count uses brand teal, other states use the existing email_type_badge_class palette via helpers. */ .bp-tally { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.625rem; background: linear-gradient(180deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04) 0%, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.02) 100%); border: 1px solid rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); } .dark .bp-tally { background: linear-gradient(180deg, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.07) 0%, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.03) 100%); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); } .bp-tally-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 9999px; font-size: 11px; font-weight: 600; background: #fff; color: #374151; border: 1px solid #e5e7eb; } .dark .bp-tally-chip { background: #1f2937; color: #e5e7eb; border-color: #374151; } .bp-tally-chip strong { font-weight: 800; } .bp-tally-chip--brand { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); color: var(--agency-primary, #003A3A); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18); } .bp-tally-chip--warn { background: #fffbeb; color: #92400e; border-color: #fde68a; } .bp-tally-chip--success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; } .bp-tally-chip--danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; } .dark .bp-tally-chip--brand { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); color: var(--agency-primary-bright, #5eead4); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); } .dark .bp-tally-chip--warn { background: rgba(245,158,11,0.18); color: #fcd34d; border-color: rgba(245,158,11,0.3); } .dark .bp-tally-chip--success { background: rgba(34,197,94,0.18); color: #86efac; border-color: rgba(34,197,94,0.3); } .dark .bp-tally-chip--danger { background: rgba(239,68,68,0.18); color: #fca5a5; border-color: rgba(239,68,68,0.3); } /* --- Rating impact widget -------------------------------------------- */ .bp-impact { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.625rem; padding: 0.875rem 1rem; border-radius: 0.75rem; background: linear-gradient(135deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.05) 0%, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.06) 100%); border: 1px solid rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.2); } .dark .bp-impact { background: linear-gradient(135deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18) 0%, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.1) 100%); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); } .bp-impact-cell { text-align: center; min-width: 0; } .bp-impact-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7280; white-space: nowrap; } .dark .bp-impact-label { color: #9ca3af; } .bp-impact-value { font-size: 22px; font-weight: 800; line-height: 1; color: #111827; margin-top: 2px; } .dark .bp-impact-value { color: #f3f4f6; } .bp-impact-value--projected { color: var(--agency-primary, #003A3A); } .dark .bp-impact-value--projected { color: var(--agency-primary-bright, #5eead4); } .bp-impact-arrow { color: var(--agency-primary-bright, #2dd4bf); } .bp-impact-delta { display: inline-block; margin-top: 4px; font-size: 10.5px; font-weight: 700; color: #15803d; } .dark .bp-impact-delta { color: #86efac; } /* --- Company hero (avatar + name + rating) ------------------------- Top block of the Company card. The square avatar gives the card a visual identity instead of looking like a plain form. Name and inline rating row sit to the right, mirroring a Google Places card. */ .bp-company-hero { display: flex; align-items: center; gap: 0.75rem; } .bp-company-hero-avatar { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.75rem; font-size: 15px; font-weight: 800; color: var(--agency-primary, #003A3A); background: linear-gradient(135deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18) 0%, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.22) 100%); box-shadow: inset 0 0 0 1px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); } .dark .bp-company-hero-avatar { color: var(--agency-primary-bright, #5eead4); background: linear-gradient(135deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.35) 0%, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.25) 100%); box-shadow: inset 0 0 0 1px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.2); } .bp-company-hero-name { font-size: 14px; font-weight: 700; line-height: 1.25; color: #111827; margin: 0; } .dark .bp-company-hero-name { color: #f3f4f6; } .bp-company-hero-rating { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; } .bp-company-hero-rating-num { font-size: 14px; font-weight: 800; color: var(--agency-primary, #003A3A); line-height: 1; } .dark .bp-company-hero-rating-num { color: var(--agency-primary-bright, #5eead4); } .bp-company-hero-rating-meta { font-size: 11px; color: #6b7280; } .dark .bp-company-hero-rating-meta { color: #9ca3af; } /* --- Icon-leading row (used for Address, Phone) -------------------- Three-column grid: 18px icon · value (flex-1) · 12px hover arrow. Whole row is the hover/click target. The leading icon stays the anchor for visual scanning. */ .bp-icon-row { position: relative; display: grid; grid-template-columns: 18px 1fr 14px; align-items: start; column-gap: 0.625rem; padding: 0.55rem 0.65rem; margin: 0 -0.65rem; border-radius: 0.5rem; font-size: 13px; line-height: 1.4; color: #374151; text-decoration: none; transition: background-color 0.2s ease, color 0.15s ease; } .dark .bp-icon-row { color: #d1d5db; } .bp-icon-row + .bp-icon-row { margin-top: 0.15rem; } .bp-icon-row:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.05); color: var(--agency-primary, #003A3A); } .dark .bp-icon-row:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.08); color: var(--agency-primary-bright, #5eead4); } .bp-icon-row-icon { width: 16px; height: 16px; margin-top: 1px; color: #94a3b8; transition: color 0.15s ease; } .dark .bp-icon-row-icon { color: #6b7280; } .bp-icon-row:hover .bp-icon-row-icon { color: var(--agency-primary, #003A3A); } .dark .bp-icon-row:hover .bp-icon-row-icon { color: var(--agency-primary-bright, #5eead4); } .bp-icon-row-value { min-width: 0; word-break: break-word; } /* The arrow is the existing `.bp-link-arrow` — hidden by default, slides in from the left on hover. Already styled higher up. */ /* --- Subtitle-as-link ----------------------------------------------- */ .bp-subtitle-link { transition: color 0.15s ease; text-decoration: none; } .bp-subtitle-link:hover { color: var(--agency-primary, #003A3A); text-decoration: underline; text-underline-offset: 3px; } .dark .bp-subtitle-link:hover { color: var(--agency-primary-bright, #5eead4); } /* --- Sparse-state filler -------------------------------------------- */ .bp-sparse { border: 1.5px dashed rgba(var(--agency-primary-rgb, 0, 58, 58), 0.2); border-radius: 0.875rem; padding: 1.25rem; background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.02); text-align: center; } .dark .bp-sparse { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.04); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.25); } .bp-sparse-title { font-size: 13px; font-weight: 700; color: var(--agency-primary, #003A3A); margin-bottom: 4px; } .dark .bp-sparse-title { color: var(--agency-primary-bright, #5eead4); } .bp-sparse-body { font-size: 12px; color: #6b7280; line-height: 1.5; max-width: 36ch; margin: 0 auto 12px; } .dark .bp-sparse-body { color: #9ca3af; } /* ============================================================================ Business · Support Tickets (Help & Support) Shared component styles for app/views/business/support_tickets/*.html.erb. Prefixed `bt-` (Business Tickets) so they compose alongside the `bl-*` and `bp-*` families without collisions. ========================================================================= */ /* --- Form input ----------------------------------------------------- */ .bt-input { width: 100%; border: 1px solid #e5e7eb; background: #ffffff; color: #111827; border-radius: 0.75rem; padding: 0.625rem 0.875rem; font-size: 14px; line-height: 1.4; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .bt-input::placeholder { color: #cbd5e1; } .bt-input:focus { outline: none; border-color: var(--agency-primary, #003A3A); box-shadow: 0 0 0 3px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.12); } .dark .bt-input { background: #111827; border-color: #374151; color: #e5e7eb; } .dark .bt-input::placeholder { color: #4b5563; } .dark .bt-input:focus { border-color: var(--agency-primary-bright, #2dd4bf); box-shadow: 0 0 0 3px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); } /* --- Secondary button (Cancel etc.) -------------------------------- */ .bt-btn-secondary { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1rem; border-radius: 0.75rem; font-size: 12px; font-weight: 600; color: #374151; background: #ffffff; border: 1px solid #e5e7eb; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; text-decoration: none; } .bt-btn-secondary:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.3); color: var(--agency-primary, #003A3A); } .dark .bt-btn-secondary { background: #1f2937; border-color: #374151; color: #d1d5db; } .dark .bt-btn-secondary:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.08); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.35); color: var(--agency-primary-bright, #5eead4); } /* --- Conversation bubbles ----------------------------------------- */ .bt-bubble-user { background: #f9fafb; border: 1px solid #f1f5f9; color: #374151; } .dark .bt-bubble-user { background: #111827; border-color: #1f2937; color: #e5e7eb; } .bt-bubble-admin { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); border: 1px solid rgba(var(--agency-primary-rgb, 0, 58, 58), 0.16); color: var(--agency-primary, #003A3A); } .dark .bt-bubble-admin { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.1); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.25); color: var(--agency-primary-bright, #5eead4); } .bt-avatar-user { background: #f1f5f9; color: #475569; } .dark .bt-avatar-user { background: #374151; color: #cbd5e1; } .bt-avatar-admin { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.12); color: var(--agency-primary, #003A3A); } .dark .bt-avatar-admin { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.2); color: var(--agency-primary-bright, #5eead4); } /* --- Status pill icon size override -------------------------------- The shared bl-pill family uses a single padding/size. For the small status icon prefix we want a slightly tighter wrapper. */ .bt-status-pill svg { width: 10px; height: 10px; margin-right: 4px; } /* --- Category badge (Befund 1.3) ---------------------------------- Topic chip shown in the ticket list + detail header. Brand-tinted via the whitelabel variable so agencies with a custom primary colour stay on-brand (dark mode uses the brighter variant). */ .bt-category-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 10px; font-weight: 600; line-height: 1.4; background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); border: 1px solid rgba(var(--agency-primary-rgb, 0, 58, 58), 0.16); color: var(--agency-primary, #003A3A); } .dark .bt-category-badge { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.12); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.28); color: var(--agency-primary-bright, #5eead4); } /* --- Help & Support V2 (CHAT-13) ---------------------------------- Self-help FAQ + filter chips + ticket rows on the index page. All prefixed `bt-` (Business Tickets), brand-tinted via the whitelabel variables so agencies with a custom primary colour stay on-brand. */ /* FAQ answer count pill (right of the section heading). */ .bt-faq-count { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 11px; font-weight: 600; background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); color: var(--agency-primary, #003A3A); white-space: nowrap; } .dark .bt-faq-count { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.12); color: var(--agency-primary-bright, #5eead4); } /* FAQ accordion item — a
card with a hover lift. */ .bt-faq-item { border: 1px solid #e5e7eb; border-radius: 0.9rem; background: #fff; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .bt-faq-item:hover { border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.28); } .bt-faq-item[open] { border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.35); box-shadow: 0 4px 16px -8px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); } .dark .bt-faq-item { background: #1f2937; border-color: #374151; } .dark .bt-faq-item:hover { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.35); } .dark .bt-faq-item[open] { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.45); } .bt-faq-item > summary { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1rem; cursor: pointer; list-style: none; } .bt-faq-item > summary::-webkit-details-marker { display: none; } /* Category tag inside the summary (colour tone set inline per category). */ .bt-faq-cat { display: inline-flex; align-items: center; flex-shrink: 0; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 10px; font-weight: 600; line-height: 1.4; } /* Chevron rotates when the item is open. */ .bt-faq-chev { transition: transform 0.2s ease; } .bt-faq-item[open] > summary .bt-faq-chev { transform: rotate(180deg); } /* Filter chip — shared by FAQ topic filter + ticket status filter. */ .bt-filter-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.875rem; border-radius: 9999px; border: 1px solid #e5e7eb; background: #fff; font-size: 12px; font-weight: 600; color: #4b5563; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .bt-filter-chip:hover { border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.3); color: var(--agency-primary, #003A3A); } .bt-filter-chip.is-active { background: var(--agency-primary, #003A3A); border-color: var(--agency-primary, #003A3A); color: #fff; } .dark .bt-filter-chip { background: #1f2937; border-color: #374151; color: #d1d5db; } .dark .bt-filter-chip:hover { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.4); color: var(--agency-primary-bright, #5eead4); } .dark .bt-filter-chip.is-active { background: var(--agency-primary-bright, #2dd4bf); border-color: var(--agency-primary-bright, #2dd4bf); color: #06211f; } /* Ticket list row — hover wash inside the shared bl-section card. */ .bt-ticket-row:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.03); } .dark .bt-ticket-row:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.06); } /* ============================================================================ Business · Notifications (Notifications list + show) Component-scoped styles for app/views/business/notifications/*.html.erb. Prefixed `bn-` (Business Notifications) so they compose alongside the `bl-*`, `bp-*`, and `bt-*` families. Reuses `bl-pill-*` for badges, so only the row chrome + type-icon palette lives here. ========================================================================= */ /* --- Notification cards ------------------------------------------- Each notification is a standalone card with a coloured left accent stripe (semantic per type), a spring hover-lift, and a soft teal wash for unseen items. The card entrance (blFadeUp) is carried by the wrapping
  • so the card itself keeps `transform` free for the hover lift. */ .bn-card { position: relative; padding: 1rem 1.15rem 1rem 1.4rem; border-radius: 1rem; background: #ffffff; border: 1px solid #e5e7eb; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .bn-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #9ca3af; transition: width 0.2s ease; } .bn-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -18px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.32); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.22); } .bn-card:hover::before { width: 6px; } .dark .bn-card { background: #1f2937; border-color: #374151; } .dark .bn-card:hover { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.32); box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.6); } /* Per-type accent stripe colour */ .bn-card--info::before { background: linear-gradient(180deg, var(--agency-primary, #003A3A), var(--agency-primary-mid, #0a6e6e)); } .bn-card--success::before { background: linear-gradient(180deg, #15803d, #22c55e); } .bn-card--warning::before { background: linear-gradient(180deg, #b45309, #f59e0b); } .bn-card--danger::before { background: linear-gradient(180deg, #991b1b, #ef4444); } .bn-card--neutral::before { background: linear-gradient(180deg, #6b7280, #9ca3af); } /* Unseen — soft teal wash + slightly bolder stripe */ .bn-card--unseen { background: linear-gradient(135deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.055), rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.04)); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.16); } .bn-card--unseen::before { width: 5px; } .dark .bn-card--unseen { background: linear-gradient(135deg, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.1), rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.03)); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.26); } /* Pulsing "new" dot shown next to an unseen notification's title */ .bn-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 9999px; background: var(--agency-primary-bright, #2dd4bf); box-shadow: 0 0 0 0 rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.6); animation: bnDotPulse 2s ease-in-out infinite; } @keyframes bnDotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.55); } 50% { box-shadow: 0 0 0 6px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0); } } @media (prefers-reduced-motion: reduce) { .bn-card, .bn-card::before, .bn-dot { transition: none; animation: none; } } /* --- "New" badge — brand-gradient pill ---------------------------- */ .bn-badge-new { background: linear-gradient(135deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-bright, #2dd4bf) 100%); color: #ffffff; box-shadow: 0 1px 3px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); } /* --- Row action icons --------------------------------------------- */ .bn-action-btn { color: #94a3b8; transition: background-color 0.15s ease, color 0.15s ease; } .bn-action-btn:hover { color: var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); } .dark .bn-action-btn { color: #6b7280; } .dark .bn-action-btn:hover { color: var(--agency-primary-bright, #5eead4); background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.1); } /* --- Per-type icon tile — 5 semantic kinds ----------------------- */ .bn-icon-info { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); color: var(--agency-primary, #003A3A); } .bn-icon-success { background: #f0fdf4; color: #15803d; } .bn-icon-warning { background: #fef3c7; color: #92400e; } .bn-icon-danger { background: #fee2e2; color: #991b1b; } .bn-icon-neutral { background: #f3f4f6; color: #6b7280; } .dark .bn-icon-info { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); color: var(--agency-primary-bright, #5eead4); } .dark .bn-icon-success { background: rgba(34, 197, 94, 0.18); color: #86efac; } .dark .bn-icon-warning { background: rgba(245, 158, 11, 0.18); color: #fcd34d; } .dark .bn-icon-danger { background: rgba(239, 68, 68, 0.18); color: #fca5a5; } .dark .bn-icon-neutral { background: rgba(255, 255, 255, 0.05); color: #9ca3af; } /* ============================================================================ Business · Dashboard (app/views/business/dashboard/index.html.erb) Component-scoped styles. Prefixed `bd-` (Business Dashboard). ========================================================================= */ /* --- Section/zone label (replaces the inline uppercase pattern) ----- */ .bd-zone-label { display: block; margin-bottom: 0.75rem; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7280; } .dark .bd-zone-label { color: #9ca3af; } /* --- KPI snapshot row (top of page) -------------------------------- */ .bd-kpi-row { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } @media (min-width: 640px) { .bd-kpi-row { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .bd-kpi-row { grid-template-columns: repeat(4, 1fr); } } .bd-kpi-tile { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1rem 1.125rem; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 1rem; transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease; } .dark .bd-kpi-tile { background: #1f2937; border-color: #374151; } .bd-kpi-icon { width: 38px; height: 38px; border-radius: 0.625rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .bd-kpi-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #6b7280; } .dark .bd-kpi-label { color: #9ca3af; } .bd-kpi-value { font-size: 28px; font-weight: 800; line-height: 1.05; color: var(--agency-primary, #003A3A); margin-top: 2px; } .dark .bd-kpi-value { color: var(--agency-primary-bright, #5eead4); } .bd-kpi-trend { margin-top: 4px; font-size: 11px; color: #6b7280; } .dark .bd-kpi-trend { color: #9ca3af; } .bd-kpi-trend strong { color: #15803d; font-weight: 700; } .dark .bd-kpi-trend strong { color: #86efac; } .bd-kpi-trend-label { margin-left: 0.25rem; } /* --- Stat tile (Reputation Health per-location metrics) ------------ Each metric becomes a small "pod" with leading icon, label, big number, trend/progress bar, and a tiny meta line. Composes with the existing `bn-icon-*` colour family — the metric tile inherits its icon-tile tint from that class. Hover lifts subtly. */ .bd-stat { position: relative; padding: 0.875rem 1rem 1rem; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 0.875rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .dark .bd-stat { background: #1f2937; border-color: #374151; } .bd-stat:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); } .dark .bd-stat:hover { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); } .bd-stat-icon { /* Background + color are inherited from the bn-icon-* class on the parent. We only set size + shape here. */ width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; margin-bottom: 0.625rem; background: currentColor; color: currentColor; } /* The bn-icon-* parent sets `background` + `color`. The .bd-stat-icon wants the SAME background but inverted relative to text colour, so we override: tile uses its own background, but the svg inside uses currentColor (which is the bn-icon-* text colour, e.g. var(--agency-primary, #003A3A)). */ .bd-stat.bn-icon-info .bd-stat-icon { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.1); color: var(--agency-primary, #003A3A); } .bd-stat.bn-icon-success .bd-stat-icon { background: #f0fdf4; color: #15803d; } .bd-stat.bn-icon-warning .bd-stat-icon { background: #fef3c7; color: #92400e; } .bd-stat.bn-icon-danger .bd-stat-icon { background: #fee2e2; color: #991b1b; } .bd-stat.bn-icon-neutral .bd-stat-icon { background: #f3f4f6; color: #6b7280; } .dark .bd-stat.bn-icon-info .bd-stat-icon { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); color: var(--agency-primary-bright, #5eead4); } .dark .bd-stat.bn-icon-success .bd-stat-icon { background: rgba(34, 197, 94, 0.18); color: #86efac; } .dark .bd-stat.bn-icon-warning .bd-stat-icon { background: rgba(245, 158, 11, 0.18); color: #fcd34d; } .dark .bd-stat.bn-icon-danger .bd-stat-icon { background: rgba(239, 68, 68, 0.18); color: #fca5a5; } .dark .bd-stat.bn-icon-neutral .bd-stat-icon { background: rgba(255, 255, 255, 0.05); color: #9ca3af; } /* Strip the outer bn-icon-* paint from the tile itself so it doesn't colour-cast — only its inner .bd-stat-icon should be tinted. */ .bd-stat.bn-icon-info, .bd-stat.bn-icon-success, .bd-stat.bn-icon-warning, .bd-stat.bn-icon-danger, .bd-stat.bn-icon-neutral { background: #ffffff; color: inherit; } .dark .bd-stat.bn-icon-info, .dark .bd-stat.bn-icon-success, .dark .bd-stat.bn-icon-warning, .dark .bd-stat.bn-icon-danger, .dark .bd-stat.bn-icon-neutral { background: #1f2937; color: inherit; } .bd-stat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; line-height: 1.25; } .dark .bd-stat-label { color: #9ca3af; } .bd-stat-value { margin-top: 0.25rem; font-size: 22px; font-weight: 800; line-height: 1.05; color: #111827; } .dark .bd-stat-value { color: #f3f4f6; } .bd-stat-value--danger { color: #b91c1c; } .dark .bd-stat-value--danger { color: #fca5a5; } .bd-stat-value-denom { font-size: 14px; font-weight: 600; color: #9ca3af; margin-left: 0.125rem; } .bd-stat-trend { margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 11px; font-weight: 700; } .bd-stat-trend--up { color: #15803d; } .dark .bd-stat-trend--up { color: #86efac; } .bd-stat-trend--down { color: #b91c1c; } .dark .bd-stat-trend--down { color: #fca5a5; } .bd-stat-trend-label { font-weight: 500; color: #6b7280; margin-left: 0.15rem; } .dark .bd-stat-trend-label { color: #9ca3af; } .bd-stat-meta { margin-top: 0.4rem; font-size: 11px; color: #6b7280; } .dark .bd-stat-meta { color: #9ca3af; } /* Tiny inline progress bar for ratio metrics */ .bd-stat-bar { margin-top: 0.5rem; height: 4px; border-radius: 9999px; background: #f1f5f9; overflow: hidden; } .dark .bd-stat-bar { background: #374151; } .bd-stat-bar-fill { display: block; height: 100%; border-radius: 9999px; transition: width 0.4s ease; } .bd-stat-bar-fill--success { background: linear-gradient(90deg, #15803d 0%, #22c55e 100%); } .bd-stat-bar-fill--info { background: linear-gradient(90deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-bright, #2dd4bf) 100%); } .bd-stat-bar-fill--warning { background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%); } .bd-stat-bar-fill--danger { background: linear-gradient(90deg, #b91c1c 0%, #ef4444 100%); } /* --- Location panel "health" pill --------------------------------- */ .bd-health-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 9999px; font-size: 11px; font-weight: 700; border: 1px solid; } .bd-health-pill .dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; box-shadow: 0 0 8px currentColor; } .bd-health-pill--good { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; } .bd-health-pill--warn { background: #fffbeb; color: #92400e; border-color: #fde68a; } .bd-health-pill--danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; } .bd-health-pill--neutral { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; } .dark .bd-health-pill--good { background: rgba(34, 197, 94, 0.18); color: #86efac; border-color: rgba(34, 197, 94, 0.3); } .dark .bd-health-pill--warn { background: rgba(245, 158, 11, 0.18); color: #fcd34d; border-color: rgba(245, 158, 11, 0.3); } .dark .bd-health-pill--danger { background: rgba(239, 68, 68, 0.18); color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); } .dark .bd-health-pill--neutral { background: #374151; color: #d1d5db; border-color: #4b5563; } /* --- Volume chart (bars only, range toggle) ----------------------- Container for the Chart.js bar chart rendered by combo_chart_controller.js. The canvas inside fills 100% of this wrapper, so the wrapper sets the fixed height. */ .bd-combo { position: relative; width: 100%; height: 280px; padding: 0.5rem 1.25rem 1.25rem; } .bd-combo canvas { width: 100% !important; height: 100% !important; } /* Chart card header — two rows. Row 1: title + segmented range toggle. Row 2: dynamic one-line summary (total · avg ★ · peak). Soft gradient backdrop ties the header to the chart visually. */ .bd-combo-header { padding: 1.125rem 1.25rem 1rem; border-bottom: 1px solid #f1f5f9; background: linear-gradient(180deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.025) 0%, transparent 100%); } .dark .bd-combo-header { border-bottom-color: #1f2937; background: linear-gradient(180deg, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.05) 0%, transparent 100%); } .bd-combo-header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .bd-combo-title { font-size: 15px; font-weight: 800; letter-spacing: -0.005em; color: #0f172a; } .dark .bd-combo-title { color: #f9fafb; } /* Summary row under the chart title. Three coloured stat chips (Total · Avg rating · Peak period). The `:not(.hidden)` clause makes sure Tailwind's `.hidden { display: none }` wins when the Stimulus controller hides inactive (range × location) pairs — otherwise our `display: flex` would override hidden because of source order. */ .bd-combo-summary:not(.hidden) { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.55rem; } /* Each stat chip — small icon tile + value + label. Colour family selected via the modifier class (`--brand`, `--amber`, `--info`). */ .bd-combo-stat { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.7rem 0.45rem 0.55rem; border-radius: 0.625rem; border: 1px solid; background: #ffffff; transition: transform 0.15s ease, box-shadow 0.15s ease; } .bd-combo-stat:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); } .dark .bd-combo-stat { background: #1f2937; } .dark .bd-combo-stat:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); } .bd-combo-stat-icon { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; flex-shrink: 0; } .bd-combo-stat-value { font-size: 13.5px; font-weight: 800; line-height: 1.1; color: #0f172a; } .dark .bd-combo-stat-value { color: #f3f4f6; } .bd-combo-stat-label { font-size: 10.5px; font-weight: 600; color: #6b7280; line-height: 1.2; margin-top: 1px; } .dark .bd-combo-stat-label { color: #9ca3af; } /* --- Chip variants --- */ .bd-combo-stat--brand { border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18); } .bd-combo-stat--brand .bd-combo-stat-icon { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.1); color: var(--agency-primary, #003A3A); } .dark .bd-combo-stat--brand { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); } .dark .bd-combo-stat--brand .bd-combo-stat-icon { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); color: var(--agency-primary-bright, #5eead4); } .bd-combo-stat--amber { border-color: rgba(245, 158, 11, 0.3); } .bd-combo-stat--amber .bd-combo-stat-icon { background: #fef3c7; color: #b45309; } .dark .bd-combo-stat--amber { border-color: rgba(245, 158, 11, 0.4); } .dark .bd-combo-stat--amber .bd-combo-stat-icon { background: rgba(245, 158, 11, 0.2); color: #fcd34d; } .bd-combo-stat--info { border-color: rgba(59, 130, 246, 0.25); } .bd-combo-stat--info .bd-combo-stat-icon { background: rgba(59, 130, 246, 0.1); color: #1d4ed8; } .dark .bd-combo-stat--info { border-color: rgba(59, 130, 246, 0.4); } .dark .bd-combo-stat--info .bd-combo-stat-icon { background: rgba(59, 130, 246, 0.2); color: #93c5fd; } /* Location dropdown in the chart header — subtle, brand-coloured focus ring, takes the size cue from the surrounding title row. */ .bd-combo-loc { appearance: none; -webkit-appearance: none; background-color: #ffffff; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 10px; border: 1px solid #e5e7eb; border-radius: 0.625rem; padding: 0.35rem 1.8rem 0.35rem 0.7rem; font-size: 12px; font-weight: 600; color: #111827; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; max-width: 220px; } .bd-combo-loc:hover { border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.3); } .bd-combo-loc:focus { outline: none; border-color: var(--agency-primary, #003A3A); box-shadow: 0 0 0 3px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.12); } .dark .bd-combo-loc { background-color: #1f2937; background-image: url("data:image/svg+xml;utf8,"); border-color: #374151; color: #f3f4f6; } .dark .bd-combo-loc:hover { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.35); } .dark .bd-combo-loc:focus { border-color: var(--agency-primary-bright, #2dd4bf); box-shadow: 0 0 0 3px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); } /* Range-toggle pill group — sits in the chart header. Active tab gets the brand teal fill; inactives are subtle text buttons. */ .bd-combo-tabs { display: inline-flex; padding: 3px; background: #f3f4f6; border-radius: 9999px; gap: 2px; flex-shrink: 0; } .dark .bd-combo-tabs { background: #1f2937; } .bd-combo-tab { appearance: none; border: 0; background: transparent; padding: 0.35rem 0.95rem; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: #6b7280; border-radius: 9999px; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .dark .bd-combo-tab { color: #9ca3af; } .bd-combo-tab:hover { color: var(--agency-primary, #003A3A); } .dark .bd-combo-tab:hover { color: var(--agency-primary-bright, #5eead4); } .bd-combo-tab.is-active { background: linear-gradient(135deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-mid, #005454) 100%); color: #ffffff; box-shadow: 0 2px 8px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.3); } .dark .bd-combo-tab.is-active { background: linear-gradient(135deg, var(--agency-primary-bright, #2dd4bf) 0%, #14b8a6 100%); color: #042f2e; box-shadow: 0 2px 8px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.4); } /* --- To-do action cards (Dashboard Zone 1) ------------------------- Each card pairs a coloured left-rail + an icon tile in a matching tint. Modifiers select the colour family; the rest of the card chrome is shared. */ .bd-todo-card { position: relative; /* Inherit border/background from .bl-list-card; we only add the left-rail accent + the icon-tile tint via modifiers. */ } .bd-todo-card-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.75rem; flex-shrink: 0; } .bd-todo-card--danger { border-left: 4px solid #dc2626; } .bd-todo-card--info { border-left: 4px solid var(--agency-primary, #003A3A); } .bd-todo-card--warning { border-left: 4px solid #d97706; } .bd-todo-card--success { border-left: 4px solid #059669; } .bd-todo-card--danger .bd-todo-card-icon { background: rgba(220, 38, 38, 0.1); color: #dc2626; } .bd-todo-card--info .bd-todo-card-icon { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.1); color: var(--agency-primary, #003A3A); } .bd-todo-card--warning .bd-todo-card-icon { background: rgba(217, 119, 6, 0.1); color: #d97706; } .bd-todo-card--success .bd-todo-card-icon { background: rgba(5, 150, 105, 0.1); color: #059669; } .dark .bd-todo-card--info .bd-todo-card-icon { color: var(--agency-primary-bright, #5eead4); } /* --- Referral card (Dashboard Zone 5) ----------------------------- Deep-teal gradient panel with a copy chip and translucent helper text. Pulls all the inline `style="color:rgba(255,255,255,0.x)"` etc. out of the view. */ .bd-referral { background: linear-gradient(135deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-mid, #0a6e6e) 100%); border-color: var(--agency-primary, #003A3A); } .bd-referral-text-muted { color: rgba(255, 255, 255, 0.7); } .bd-referral-text-soft { color: rgba(255, 255, 255, 0.85); } .bd-referral-code-box { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); } .bd-referral-copy-btn { background: rgba(255, 255, 255, 0.2); color: #ffffff; transition: background-color 0.15s ease; } .bd-referral-copy-btn:hover { background: rgba(255, 255, 255, 0.3); } /* Action row at the bottom of the referral card — Copy link + Share on WhatsApp. Outlined "glass" buttons on the deep-teal panel. */ .bd-referral-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 0.85rem; border-radius: 0.625rem; font-size: 12px; font-weight: 700; color: #ffffff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; cursor: pointer; } .bd-referral-action-btn:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.35); } .bd-referral-action-btn:active { transform: scale(0.98); } .bd-referral-action-btn--wa { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); border-color: transparent; } .bd-referral-action-btn--wa:hover { background: linear-gradient(135deg, #20bd5b 0%, #0f7a6e 100%); border-color: transparent; } /* --- Progress-bar grow-in ------------------------------------------- The fill div carries its final width as an inline `style="width:X%"`. Animating `transform: scaleX` from a left origin grows the visible fill from 0 → that width on first paint without needing JS. */ @keyframes bdBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .bd-bar-animate { transform-origin: left center; animation: bdBarGrow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--bp-delay, 0ms); } /* Brand-teal progress fill — deep teal → mint, used where a positive metric was previously flat green. */ .bd-fill-teal { background: linear-gradient(90deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-bright, #2dd4bf) 100%); } .dark .bd-fill-teal { background: linear-gradient(90deg, var(--agency-primary-bright, #2dd4bf) 0%, #5eead4 100%); } /* --- Hero band (Dashboard Zone 0) ----------------------------------- The hero sits on the deep-teal `.bl-hero` gradient, so its CTAs and KPI tiles use white / translucent-glass styling rather than the brand colour cast used elsewhere. */ .bd-hero-cta { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.95rem; border-radius: 0.7rem; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } .bd-hero-cta:active { transform: scale(0.98); } .bd-hero-cta--solid { background: #ffffff; color: var(--agency-primary, #003A3A); border: 1px solid #ffffff; } .bd-hero-cta--solid:hover { background: rgba(255, 255, 255, 0.9); } .bd-hero-cta--ghost { background: rgba(255, 255, 255, 0.12); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.28); } .bd-hero-cta--ghost:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); } .bd-hero-cta-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: 9999px; background: #dc2626; color: #ffffff; font-size: 11px; font-weight: 800; line-height: 1; } .bd-hero-kpi { border-radius: 0.85rem; padding: 0.85rem 1rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); } .bd-hero-kpi-value { display: flex; align-items: center; gap: 0.25rem; font-size: 22px; font-weight: 800; color: #ffffff; line-height: 1.1; } .bd-hero-kpi-star { color: #fbbf24; font-size: 16px; } .bd-hero-kpi-label { margin-top: 0.2rem; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.75); } /* --- To-do inline previews (Dashboard Zone 1) ---------------------- Small inset panel inside a to-do card holding a review / draft snippet. Sits on the white card, so uses a subtle grey inset. */ .bd-todo-preview { border-radius: 0.6rem; padding: 0.6rem 0.7rem; background: #f9fafb; border: 1px solid #f3f4f6; } .dark .bd-todo-preview { background: rgba(255, 255, 255, 0.04); border-color: #374151; } .bd-todo-preview-stars { font-size: 13px; letter-spacing: 0.05em; color: #f59e0b; } .bd-todo-preview-stars-empty { color: #e5e7eb; } .dark .bd-todo-preview-stars-empty { color: #4b5563; } .bd-removed-chip { display: inline-flex; align-items: center; padding: 0.1rem 0.45rem; border-radius: 9999px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; } .dark .bd-removed-chip { background: rgba(34, 197, 94, 0.18); color: #86efac; border-color: rgba(34, 197, 94, 0.3); } /* --- Combo-chart legend (Dashboard Zone 3) -------------------------- */ .bd-combo-legend { display: flex; flex-wrap: wrap; gap: 1rem; } .bd-combo-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 12px; font-weight: 600; color: #6b7280; } .dark .bd-combo-legend-item { color: #9ca3af; } .bd-combo-legend-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 0.25rem; } .bd-combo-legend-swatch--bar { background: var(--agency-primary, #003A3A); } .dark .bd-combo-legend-swatch--bar { background: var(--agency-primary-bright, #2dd4bf); } .bd-combo-legend-swatch--line { width: 1rem; height: 0; border-radius: 0; border-top: 3px solid #f59e0b; } /* --- Report-funnel card (Dashboard Zone 3) ------------------------- Stacked count rows with a visual-only track/fill. The fill width is a proportion of the total, NOT a success rate — no percentage text is ever shown to the user (RDG compliance). */ .bd-funnel-row { margin-bottom: 0.85rem; } .bd-funnel-row:last-child { margin-bottom: 0; } .bd-funnel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; } .bd-funnel-label { font-size: 13px; font-weight: 600; color: #374151; } .dark .bd-funnel-label { color: #d1d5db; } .bd-funnel-count { font-size: 15px; font-weight: 800; color: #111827; } .dark .bd-funnel-count { color: #f3f4f6; } .bd-funnel-track { height: 0.5rem; border-radius: 9999px; background: #f3f4f6; overflow: hidden; } .dark .bd-funnel-track { background: #374151; } .bd-funnel-fill { height: 100%; border-radius: 9999px; transform-origin: left center; animation: bdBarGrow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .bd-funnel-fill--removed { background: linear-gradient(90deg, #15803d 0%, #22c55e 100%); } .bd-funnel-fill--review { background: linear-gradient(90deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-bright, #2dd4bf) 100%); } .bd-funnel-fill--rejected { background: linear-gradient(90deg, #9ca3af 0%, #d1d5db 100%); } .bd-funnel-note { font-size: 11px; line-height: 1.5; color: #9ca3af; } .dark .bd-funnel-note { color: #6b7280; } /* --- Activity filter chips + show-older (Dashboard Zone 4) --------- */ .bd-filter-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } .bd-filter-chip { padding: 0.3rem 0.75rem; border-radius: 9999px; font-size: 12px; font-weight: 600; color: #6b7280; background: #f3f4f6; border: 1px solid transparent; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .bd-filter-chip:hover { color: var(--agency-primary, #003A3A); } .dark .bd-filter-chip { background: #1f2937; color: #9ca3af; } .dark .bd-filter-chip:hover { color: var(--agency-primary-bright, #5eead4); } .bd-filter-chip.is-active { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.1); color: var(--agency-primary, #003A3A); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.2); } .dark .bd-filter-chip.is-active { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); color: var(--agency-primary-bright, #5eead4); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); } .bd-show-older { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.9rem; border-radius: 0.6rem; font-size: 12px; font-weight: 700; color: var(--agency-primary, #003A3A); background: transparent; border: 1px solid #e5e7eb; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .bd-show-older:hover { background: #f9fafb; border-color: #d1d5db; } .dark .bd-show-older { color: var(--agency-primary-bright, #5eead4); border-color: #374151; } .dark .bd-show-older:hover { background: rgba(255, 255, 255, 0.04); border-color: #4b5563; } /* --- Referral progress bar (Dashboard Zone 5) --------------------- Sits on the deep-teal referral panel, so track + fill are white glass. Fill width is set inline from `@completed_referrals`. */ .bd-referral-progress { height: 0.5rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.15); overflow: hidden; } .bd-referral-progress-fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #fbbf24 0%, #fde68a 100%); transform-origin: left center; animation: bdBarGrow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } /* ============================================================================ Business · Location reviews — star-chip checked state The star filter chips on the reviews page wrap an `sr-only` checkbox. Filtering is client-side now, so the active look is driven by the checkbox state via `:has()` rather than a server-rendered class. ========================================================================= */ .star-chip:has(input:checked) { background: #fef9c3; color: #854d0e; border-color: #fde047; } .dark .star-chip:has(input:checked) { background: rgba(245, 158, 11, 0.2); color: #fcd34d; border-color: rgba(245, 158, 11, 0.4); } /* ============================================================================ Business · Proposal show — selectable review cards Clicking a review card swaps the sidebar Progress panel (see review_progress_controller.js). The card shows a hover affordance and a brand-ringed selected state. ========================================================================= */ .bp-review-card { transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .bp-review-card:hover { border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.3); } .dark .bp-review-card:hover { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.35); } .bp-review-card.bp-review-selected { border-color: var(--agency-primary, #003A3A); box-shadow: 0 0 0 1px var(--agency-primary, #003A3A), 0 8px 20px -8px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); /* Light teal wash so the selected review reads even without the border */ background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.12); } .dark .bp-review-card.bp-review-selected { border-color: var(--agency-primary-bright, #2dd4bf); box-shadow: 0 0 0 1px var(--agency-primary-bright, #2dd4bf), 0 8px 20px -8px rgba(0, 0, 0, 0.5); background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.14); } /* ============================================================================ Business · Proposal show — full-width Company header band Replaces the removed "Report #X" page header. Identity (avatar + name + rating) on the left, contact (address + phone) on the right. Stacks on mobile. ========================================================================= */ .bp-company-headercard .bl-section-body { padding: 1.4rem 1.5rem; } .bp-company-header { display: flex; flex-direction: column; gap: 1.25rem; } @media (min-width: 768px) { .bp-company-header { flex-direction: row; align-items: center; justify-content: space-between; } } .bp-company-header-main { display: flex; align-items: center; gap: 1rem; min-width: 0; } .bp-company-header-avatar { width: 56px; height: 56px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 1rem; font-size: 20px; font-weight: 800; color: var(--agency-primary, #003A3A); background: linear-gradient(135deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18) 0%, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.22) 100%); box-shadow: inset 0 0 0 1px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); } .dark .bp-company-header-avatar { color: var(--agency-primary-bright, #5eead4); background: linear-gradient(135deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.4) 0%, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.28) 100%); box-shadow: inset 0 0 0 1px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.2); } .bp-company-header-name { font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: #0f172a; margin: 0; } .dark .bp-company-header-name { color: #f9fafb; } .bp-company-header-contact { display: flex; flex-direction: column; gap: 0.1rem; /* On phones the block must shrink and long values (emails, URLs) must wrap instead of pushing the page wider than the viewport. */ min-width: 0; max-width: 100%; overflow-wrap: anywhere; } @media (min-width: 768px) { .bp-company-header-contact { flex-shrink: 0; max-width: 380px; min-width: 240px; } } /* Created / Updated info row in the header's right column — sits where the phone row used to be. Static (not a link), but padded to line up with the address `bp-icon-row` above it. */ .bp-company-header-datesrow { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.55rem 0.65rem; } .bp-company-header-datesrow-text { font-size: 13px; line-height: 1.4; color: #6b7280; } .dark .bp-company-header-datesrow-text { color: #9ca3af; } .bp-company-header-dates-sep { margin: 0 0.15rem; color: #cbd5e1; } .dark .bp-company-header-dates-sep { color: #4b5563; } /* "View on Google" link on each review card. */ .bp-google-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 11px; font-weight: 600; color: var(--agency-primary, #003A3A); transition: color 0.15s ease; } .bp-google-link:hover { color: var(--agency-primary-bright, #2dd4bf); text-decoration: underline; } .dark .bp-google-link { color: var(--agency-primary-bright, #5eead4); } .dark .bp-google-link:hover { color: var(--agency-primary-bright, #99f6e4); } /* "Progress for {reviewer}" line at the top of each per-review panel. */ .bp-progress-for { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.85rem; padding-bottom: 0.65rem; border-bottom: 1px dashed #e5e7eb; font-size: 12px; font-weight: 700; color: var(--agency-primary, #003A3A); } .dark .bp-progress-for { border-bottom-color: #374151; color: var(--agency-primary-bright, #5eead4); } /* ============================================================================ Business · Proposals index — status pipeline stepper (V2) Each report shows a 3-step pipeline (Submitted → Under review → Result) plus a per-review preview. Replaces the old segmented status bar with a plain-language stepper the end customer can actually read. ========================================================================= */ .bp-stepper { display: flex; align-items: flex-start; } .bp-step { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-width: 78px; flex: 0 0 auto; text-align: center; } .bp-step-dot { width: 26px; height: 26px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border: 2px solid #e5e7eb; background: #fff; color: #9ca3af; position: relative; z-index: 1; } .dark .bp-step-dot { background: #1f2937; border-color: #374151; color: #6b7280; } .bp-step-dot--done { background: var(--agency-primary, #003A3A); border-color: var(--agency-primary, #003A3A); color: #fff; } .bp-step-dot--active { border-color: var(--agency-primary-bright, #2dd4bf); color: #0f766e; background: #f0fdfa; box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.18); } .dark .bp-step-dot--active { background: rgba(45, 212, 191, 0.12); color: var(--agency-primary-bright, #2dd4bf); } .bp-step-dot--failed { background: #fef2f2; border-color: #f87171; color: #dc2626; } .dark .bp-step-dot--failed { background: rgba(220, 38, 38, 0.15); } .bp-step-label { font-size: 11px; font-weight: 600; color: #6b7280; line-height: 1.25; } .dark .bp-step-label { color: #9ca3af; } .bp-step-label--done, .bp-step-label--active { color: var(--agency-primary, #003A3A); } .dark .bp-step-label--done, .dark .bp-step-label--active { color: var(--agency-primary-bright, #2dd4bf); } .bp-step-label--failed { color: #dc2626; } .dark .bp-step-label--failed { color: #f87171; } .bp-step-sub { font-size: 10px; color: #9ca3af; line-height: 1.2; } .dark .bp-step-sub { color: #6b7280; } .bp-step-line { flex: 1 1 auto; height: 2px; background: #e5e7eb; margin-top: 12px; min-width: 14px; border-radius: 2px; } .dark .bp-step-line { background: #374151; } .bp-step-line--done { background: var(--agency-primary, #003A3A); } .bp-step-line--half { background: linear-gradient(90deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary, #003A3A) 50%, #e5e7eb 50%); } .dark .bp-step-line--half { background: linear-gradient(90deg, var(--agency-primary-bright, #2dd4bf) 0%, var(--agency-primary-bright, #2dd4bf) 50%, #374151 50%); } .bp-step-line--failed { background: #fca5a5; } /* Per-review preview rows inside a report card */ .bp-review-row { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: 0.75rem; background: #f9fafb; border: 1px solid #f3f4f6; } .dark .bp-review-row { background: rgba(31, 41, 55, 0.5); border-color: #374151; } .bp-review-row + .bp-review-row { margin-top: 0.5rem; } .bp-review-row--removed { background: #f0fdf4; border-color: #dcfce7; } .dark .bp-review-row--removed { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.25); } .bp-review-row--rejected { background: #fff7ed; border-color: #fed7aa; } .dark .bp-review-row--rejected { background: rgba(234, 88, 12, 0.08); border-color: rgba(234, 88, 12, 0.25); } .bp-review-avatar { width: 32px; height: 32px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); color: var(--agency-primary, #003A3A); } .dark .bp-review-avatar { background: rgba(45, 212, 191, 0.12); color: var(--agency-primary-bright, #2dd4bf); } .bp-review-strike { text-decoration: line-through; } /* Expectation-management banner (calm, non-alert) above the report list */ .bp-expectation { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; border-radius: 0.9rem; background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04); border: 1px solid rgba(var(--agency-primary-rgb, 0, 58, 58), 0.12); } .dark .bp-expectation { background: rgba(45, 212, 191, 0.06); border-color: rgba(45, 212, 191, 0.18); } .bp-expectation-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: var(--agency-primary, #003A3A); } .dark .bp-expectation-icon { color: var(--agency-primary-bright, #2dd4bf); } .bp-expectation-title { font-size: 13px; font-weight: 700; color: #1f2937; } .dark .bp-expectation-title { color: #e5e7eb; } .bp-expectation-body { font-size: 12px; line-height: 1.5; color: #6b7280; margin-top: 0.15rem; } .dark .bp-expectation-body { color: #9ca3af; } /* ============================================================================ Agency · Dashboard · Reseller section (app/views/dashboard/_reseller_section.html.erb) Class-based replacements for the inline cream/amber styles that didn't adapt to dark mode, plus dark-mode-aware status dots that pick up the agency's bright derivative on the dark surface. ========================================================================= */ /* --- Compact summary strip --- */ .bd-reseller-divider { border-left: 1px solid #e5e7eb; } .dark .bd-reseller-divider { border-left-color: #374151; } .bd-reseller-dot { width: 6px; height: 6px; } .bd-reseller-dot--brand { background: var(--agency-primary, #003A3A); } .bd-reseller-dot--accent { background: #f59e0b; } .bd-reseller-dot--bright { background: var(--agency-primary-bright, #2dd4bf); } /* Dark mode: switch the brand dot to the brighter derivative so the chip is legible on the dark surface (the deep primary blends in). */ .dark .bd-reseller-dot--brand { background: var(--agency-primary-bright, #5eead4); } .dark .bd-reseller-dot--accent { background: #fbbf24; } .dark .bd-reseller-dot--bright { background: var(--agency-primary-bright, #5eead4); } /* --- Pending-onboarding alert --- */ .bd-reseller-onboarding { background: #fffbeb; border: 1px solid #fef3c7; } .dark .bd-reseller-onboarding { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.3); } .bd-reseller-onboarding-title { color: #92400e; } .dark .bd-reseller-onboarding-title { color: #fcd34d; } .bd-reseller-onboarding-row { background: #ffffff; border: 1px solid #fef3c7; } .dark .bd-reseller-onboarding-row { background: rgba(255, 255, 255, 0.04); border-color: rgba(245, 158, 11, 0.25); } .bd-reseller-onboarding-avatar { background: #fef3c7; color: #92400e; } .dark .bd-reseller-onboarding-avatar { background: rgba(245, 158, 11, 0.2); color: #fcd34d; } .bd-reseller-onboarding-name { color: #111827; } .dark .bd-reseller-onboarding-name { color: #f3f4f6; } .bd-reseller-onboarding-more { color: #b45309; } .bd-reseller-onboarding-more:hover { color: #78350f; } .dark .bd-reseller-onboarding-more { color: #fcd34d; } .dark .bd-reseller-onboarding-more:hover { color: #fde68a; } /* ============================================================================ Review Analytics flow (app/views/searches/review_analytics.html.erb, app/views/searches/show_saved_analytics.html.erb, app/views/searches/_saved_analytics_card.html.erb, app/views/searches/_view.html.erb) Class-based replacements for inline light backgrounds that didn't adapt to dark mode. Light variant keeps the original look; dark variant uses translucent surfaces or the agency's bright derivative. ========================================================================= */ /* --- review_analytics: live summary rows --- */ .ra-summary-neutral { background: #fafafa; border: 1px solid #f3f4f6; } .dark .ra-summary-neutral { background: rgba(255, 255, 255, 0.04); border-color: #374151; } .ra-summary-brand { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); border: 1px solid rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18); color: var(--agency-primary, #003A3A); } .dark .ra-summary-brand { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.10); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.28); color: var(--agency-primary-bright, #5eead4); } /* --- show_saved_analytics: rating impact + cost-breakdown panels --- */ .sad-current-panel { background: #fef3c7; border: 1px solid #fde68a; } .dark .sad-current-panel { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.28); } .sad-projected-panel { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); border: 1px solid rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18); } .dark .sad-projected-panel { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.10); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.28); } .sad-neutral-box { background: #fafafa; border: 1px solid #f3f4f6; } .dark .sad-neutral-box { background: rgba(255, 255, 255, 0.04); border-color: #374151; } @keyframes sadChevron { 0%, 100% { opacity: 0.15; } 30% { opacity: 1; } 60% { opacity: 0.15; } } /* --- _saved_analytics_card: mobile card surfaces --- */ .sac-strip { background: #fafafa; border: 1px solid #f3f4f6; } .dark .sac-strip { background: rgba(255, 255, 255, 0.04); border-color: #374151; } .sac-metric { background: #fafafa; } .dark .sac-metric { background: rgba(255, 255, 255, 0.04); } .sac-metric-brand { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); color: var(--agency-primary, #003A3A); } .dark .sac-metric-brand { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.14); color: var(--agency-primary-bright, #5eead4); } /* --- _view: flash banner backgrounds --- */ .sv-flash-error { background: #fef2f2; border: 1px solid #fee2e2; } .dark .sv-flash-error { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.28); } .sv-flash-alert { background: #fffbeb; border: 1px solid #fef3c7; } .dark .sv-flash-alert { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.28); } /* --- saved_analytics + _saved_analytics_card: action buttons + dropdown menu items --- */ .sa-act { color: #9ca3af; display: inline-flex; align-items: center; transition: all 0.15s ease; } .sa-act:hover { color: var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); } .dark .sa-act { color: #6b7280; } .dark .sa-act:hover { color: #5eead4; background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.10); } .sa-act-danger { color: #9ca3af; display: inline-flex; align-items: center; } .sa-act-danger:hover { color: #dc2626; background: rgba(220, 38, 38, 0.08); } .dark .sa-act-danger { color: #6b7280; } .dark .sa-act-danger:hover { color: #f87171; background: rgba(239, 68, 68, 0.10); } .sa-menu { color: #4b5563; } .sa-menu:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); color: var(--agency-primary, #003A3A); } .dark .sa-menu { color: #d1d5db; } .dark .sa-menu:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.10); color: #5eead4; } .sa-menu-danger { color: #4b5563; } .sa-menu-danger:hover { background: rgba(220, 38, 38, 0.08); color: #b91c1c; } .dark .sa-menu-danger { color: #d1d5db; } .dark .sa-menu-danger:hover { background: rgba(239, 68, 68, 0.10); color: #fca5a5; } /* --- _view: search-pill focus + dark-mode shell --- */ .search-pill:focus-within { border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.45) !important; box-shadow: 0 10px 30px -10px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.28), 0 0 0 4px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.10) !important; } .dark .search-pill { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.25) !important; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5), 0 2px 6px -2px rgba(0, 0, 0, 0.3) !important; } .dark .search-pill:focus-within { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.6) !important; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18) !important; } /* ============================================================================ Agency Settings · shared surfaces (legacy `.set-*` namespace) ---------------------------------------------------------------------------- These rules previously lived inline in agencies/settings/_styles.html.erb, which was rendered from agencies/show.html.erb and from a handful of feature pages (agency_appearances/edit, agency_review_details/edit + form partials, power_of_attorneys/*, my_account/show, agencies/edit, agencies/settings/_pricing). These rules are now brand-aware: every green/teal accent resolves to `var(--agency-primary)` so the settings partials follow the agency's chosen primary colour just like the `bl-*` system. Surface defaults (white card, hairline divider) stay as-is. Partials can still be migrated to `bl-section` directly when touched, but until then they share this brand-aware compatibility layer instead of the old hardcoded green. ========================================================================= */ .set-card { background: #fff; border-color: #e5e7eb; } .dark .set-card { background: #1f2937; border-color: #374151; } .set-card-header { border-color: #f3f4f6; } .dark .set-card-header { border-color: #374151; } .set-chip { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); } .dark .set-chip { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.15); } .set-row-icon { background: #f9fafb; } .dark .set-row-icon { background: #111827; } .set-divide > * + * { border-top: 1px solid #f3f4f6; } .dark .set-divide > * + * { border-color: #374151; } .set-info-row { transition: background 0.15s ease; } .set-info-row:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.03); } .set-info-row-zebra { background: #fafafa; } .dark .set-info-row:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.04); } .dark .set-info-row-zebra { background: rgba(255, 255, 255, 0.02); } .set-edit-btn { background: #fff; border-color: #e5e7eb; color: #6b7280; transition: all 0.2s ease; } .set-edit-btn:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.05); border-color: var(--agency-primary, #003A3A); color: var(--agency-primary, #003A3A); } .dark .set-edit-btn { background: #111827; border-color: #374151; color: #d1d5db; } .dark .set-edit-btn:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.12); border-color: var(--agency-primary-bright, #5eead4); color: var(--agency-primary-bright, #5eead4); } .set-btn-primary { background: linear-gradient(135deg, var(--agency-primary, #003A3A), var(--agency-primary-mid, #005454)); transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.20); border: 0; } .set-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.30); } .set-btn-primary:active { transform: scale(0.98); } .set-btn-outline { background: #fff; border-color: #e5e7eb; color: #6b7280; transition: all 0.2s ease; } .set-btn-outline:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.05); border-color: var(--agency-primary, #003A3A); color: var(--agency-primary, #003A3A); } .dark .set-btn-outline { background: #111827; border-color: #374151; color: #d1d5db; } .dark .set-btn-outline:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.12); border-color: var(--agency-primary-bright, #5eead4); color: var(--agency-primary-bright, #5eead4); } .set-pill-neutral { background: #f9fafb; border-color: #e5e7eb; color: #6b7280; } .dark .set-pill-neutral { background: #111827; border-color: #374151; color: #9ca3af; } .set-code { background: #f9fafb; border-color: #f3f4f6; color: #374151; } .dark .set-code { background: #111827; border-color: #374151; color: #d1d5db; } .set-asset-frame { background: #f9fafb; border-color: #f3f4f6; } .dark .set-asset-frame { background: #111827; border-color: #374151; } .set-price-card { background: #fff; border-color: #e5e7eb; transition: all 0.2s ease; } .set-price-card:hover { border-color: var(--agency-primary, #003A3A); box-shadow: 0 2px 8px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.10); } .dark .set-price-card { background: #111827; border-color: #374151; } .dark .set-price-card:hover { border-color: var(--agency-primary-bright, #5eead4); box-shadow: 0 2px 8px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); } .set-price-divider { border-color: #f3f4f6; } .dark .set-price-divider { border-color: #374151; } .set-stat-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .set-stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .dark .set-stat-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } .set-table-row { transition: background 0.15s ease; } .set-table-row:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04) !important; } .dark .set-table-row { background: transparent !important; } .dark .set-table-row:nth-child(even) { background: rgba(255, 255, 255, 0.02) !important; } .dark .set-table-row:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.06) !important; } .set-stripe-btn { background: linear-gradient(135deg, #4338ca, #6366f1); transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25); } .set-stripe-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); } .set-btn-danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; transition: all 0.15s ease; } .set-btn-danger:hover { background: #fee2e2; border-color: #fca5a5; } .dark .set-btn-danger { background: rgba(239, 68, 68, 0.12); color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); } .dark .set-btn-danger:hover { background: rgba(239, 68, 68, 0.2); } .set-warning-callout { background: #fffbeb; border: 1px solid #fde68a; } .dark .set-warning-callout { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.3); } .set-pill-success { background: #ecfdf5; color: #15803d; border: 1px solid #bbf7d0; } .dark .set-pill-success { background: rgba(34, 197, 94, 0.15); color: #86efac; border-color: rgba(34, 197, 94, 0.3); } .set-thead-row { border-color: #f3f4f6; } .dark .set-thead-row { border-color: #374151; } /* Logo / favicon drop tile on agency_appearances/edit. Brand-tinted border + soft fill on hover so the drop target signals it's clickable. */ .app-upload-zone { background: #f9fafb; border-color: #e5e7eb; transition: background 0.2s ease, border-color 0.2s ease; position: relative; } .app-upload-zone:hover { border-color: var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.05); } .dark .app-upload-zone { background: #111827; border-color: #374151; } .dark .app-upload-zone:hover { border-color: var(--agency-primary-bright, #5eead4); background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.08); } /* ============================================================================ Agency Settings shell + Sub-Agency pages (app/views/agencies/show.html.erb, app/views/agencies/sub_agencies.html.erb, app/views/agencies/new_sub_agency.html.erb, app/views/agencies/settings/*.html.erb) All `ag-*` hooks live here. Tokens drive off --agency-primary so the agency's chosen brand colour (from settings/_styles) themes the settings UI in both light and dark mode. ========================================================================= */ /* --- Vertical tab nav (settings shell) ---------------------------- */ .ag-side-tab { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 0.75rem; margin-bottom: 0.125rem; font-size: 0.75rem; font-weight: 500; text-align: left; color: #6b7280; background: transparent; border: 0; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .ag-side-tab:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); color: var(--agency-primary, #003A3A); } .dark .ag-side-tab { color: #9ca3af; } .dark .ag-side-tab:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.10); color: var(--agency-primary-bright, #5eead4); } .ag-side-tab.is-active { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); color: var(--agency-primary, #003A3A); font-weight: 600; box-shadow: inset 3px 0 0 var(--agency-primary, #003A3A); } .dark .ag-side-tab.is-active { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.14); color: var(--agency-primary-bright, #5eead4); box-shadow: inset 3px 0 0 var(--agency-primary-bright, #2dd4bf); } .ag-side-tab-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 0.5rem; display: inline-flex; align-items: center; justify-content: center; background: #f9fafb; transition: background 0.2s ease; } .dark .ag-side-tab-icon { background: #111827; } .ag-side-tab:hover .ag-side-tab-icon { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); } .dark .ag-side-tab:hover .ag-side-tab-icon { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); } .ag-side-tab.is-active .ag-side-tab-icon { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.12); } .dark .ag-side-tab.is-active .ag-side-tab-icon { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.22); } .ag-side-tab-label { flex: 1; } /* --- Info rows + icons (used by _general, _domain_display) -------- */ .ag-info-row:hover { background: #fafafa; } .dark .ag-info-row:hover { background: rgba(255, 255, 255, 0.02); } .ag-info-icon { background: #f9fafb; transition: background 0.2s ease; } .dark .ag-info-icon { background: #111827; } /* --- Inline code chip / asset frame (used by _domain) ------------- */ .ag-code { background: #f9fafb; border: 1px solid #f3f4f6; color: #374151; } .dark .ag-code { background: #111827; border-color: #374151; color: #d1d5db; } .ag-asset-frame { background: #f9fafb; border: 1px solid #f3f4f6; } .dark .ag-asset-frame { background: #111827; border-color: #374151; } /* --- Upgrade CTA (subscription card) ------------------------------ */ .ag-upgrade-cta { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); border: 1px solid rgba(var(--agency-primary-rgb, 0, 58, 58), 0.30); color: var(--agency-primary, #003A3A); transition: all 0.2s ease; } .ag-upgrade-cta:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.10); border-color: var(--agency-primary, #003A3A); } .dark .ag-upgrade-cta { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.10); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.40); color: var(--agency-primary-bright, #5eead4); } .dark .ag-upgrade-cta:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); border-color: var(--agency-primary-bright, #2dd4bf); } /* --- Whitelabel accordion ----------------------------------------- */ .ag-wl-section button[aria-expanded="true"] .ag-wl-chevron { transform: rotate(90deg); } .ag-wl-chevron { transition: transform 0.2s ease; } /* --- Warning strip + callout (_domain "verifying" hint, DNS errors) --- */ .ag-warning-strip { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.28); color: #92400e; } .dark .ag-warning-strip { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.32); color: #fcd34d; } .ag-warning-callout { background: #fffbeb; border: 1px solid #fde68a; } .dark .ag-warning-callout { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.30); } /* --- Form inputs with a leading icon ------------------------------ Wraps a `bl-input` and overlays an SVG on the left. The descendant selector forces padding-left so the input text never overlaps the icon — `bl-input`'s `padding` shorthand otherwise wins over the `pl-10` Tailwind utility (zero specificity in v4 :where()). */ .ag-input-icon { position: relative; } .ag-input-icon > .bl-input { padding-left: 2.5rem; } .ag-input-icon-svg { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: #9ca3af; pointer-events: none; } .dark .ag-input-icon-svg { color: #6b7280; } .ag-input-icon:focus-within .ag-input-icon-svg { color: var(--agency-primary, #003A3A); } .dark .ag-input-icon:focus-within .ag-input-icon-svg { color: var(--agency-primary-bright, #5eead4); } /* --- Logo / favicon upload zone ----------------------------------- */ .ag-upload-zone { background: #f9fafb; border-color: #e5e7eb; transition: background 0.2s ease, border-color 0.2s ease; position: relative; } .ag-upload-zone:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); border-color: var(--agency-primary, #003A3A); } .dark .ag-upload-zone { background: #111827; border-color: #374151; } .dark .ag-upload-zone:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.08); border-color: var(--agency-primary-bright, #2dd4bf); } /* --- Native color picker swatch (consistent height + chip border) -- */ .ag-color-swatch { height: 2.5rem; width: 3.5rem; border-radius: 0.5rem; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; padding: 0.25rem; } .dark .ag-color-swatch { background: #111827; border-color: #374151; } /* --- Color-preview inner panel ----------------------------------- */ .ag-color-preview { background: #f9fafb; border-color: #e5e7eb; } .dark .ag-color-preview { background: rgba(255, 255, 255, 0.03); border-color: #374151; } /* --- DNS records card --------------------------------------------- */ .ag-dns-card { background: #f9fafb; border: 1px solid #f3f4f6; } .dark .ag-dns-card { background: #111827; border-color: #374151; } .ag-dns-tbody > * + * { border-top: 1px solid #e5e7eb; } .dark .ag-dns-tbody > * + * { border-color: #374151; } /* --- Stripe Connect button (purple, separate semantic) ------------ */ .ag-stripe-btn { background: linear-gradient(135deg, #4338ca, #6366f1); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25); } .ag-stripe-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); } /* --- Credit-pack hooks (agency_credit_pack_definitions) ---------- The number-badge with brand gradient, the mobile price callout, the joined € prefix + input group, and the danger variant of the shared row-action button. */ .ag-credits-badge { background: linear-gradient(135deg, var(--agency-primary, #003A3A), var(--agency-primary-mid, #005454)); box-shadow: 0 2px 6px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); } .ag-pack-price-box { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.05); border: 1px solid rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18); } .dark .ag-pack-price-box { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.08); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.25); } /* € prefix → input join: prefix gets brand-tinted bg, both halves share the same border so they read as one control; the input loses its left border to avoid the double-line. */ .ag-input-group { transition: box-shadow 0.15s ease; } .ag-input-prefix { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); border: 1px solid #d1d5db; border-right: 0; border-radius: 0.625rem 0 0 0.625rem; color: var(--agency-primary, #003A3A); } .dark .ag-input-prefix { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.10); border-color: #374151; color: var(--agency-primary-bright, #5eead4); } .ag-input-grouped { border-radius: 0 0.625rem 0.625rem 0; border-left: 0; } .ag-input-group:focus-within .ag-input-prefix { border-color: var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.10); } .dark .ag-input-group:focus-within .ag-input-prefix { border-color: var(--agency-primary-bright, #2dd4bf); background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.16); } /* --- Shared row-action button -------------------------------------- Used on agency_credit_pack_definitions/index, review_deletions/index, any future agency-side list with inline view/edit/delete actions. `.ag-act-danger` is the delete variant — same base, red on hover. */ .rdl-act { color: #9ca3af; display: inline-flex; align-items: center; } .rdl-act:hover { color: var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); } .dark .rdl-act { color: #6b7280; } .dark .rdl-act:hover { color: var(--agency-primary-bright, #5eead4); background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.10); } /* `.rdl-menu` — dropdown menu rows in the review_deletions mobile card. Moved out of an inline