/* * 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); } /* 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; } /* --- 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; } .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; } } /* 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; } } .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; } .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; } /* 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; } .bl-section-head { 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; } .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; } /* ============================================================================ 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%); } /* ============================================================================ 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; flex-shrink: 0; } @media (min-width: 768px) { .bp-company-header-contact { 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 — per-row review-status bar Each report row shows a segmented bar of its reviews' outcomes (removed / pending / rejected) + a dotted count legend. Richer than a flat row of count pills. ========================================================================= */ .bp-statbar { display: flex; height: 7px; width: 100%; max-width: 180px; border-radius: 9999px; overflow: hidden; background: #f1f5f9; } .dark .bp-statbar { background: #374151; } .bp-statbar-seg { height: 100%; transition: width 0.4s ease; } .bp-statbar-seg--removed { background: linear-gradient(90deg, var(--agency-primary, #003A3A) 0%, var(--agency-primary-bright, #2dd4bf) 100%); } .bp-statbar-seg--pending { background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%); } .bp-statbar-seg--rejected { background: linear-gradient(90deg, #b91c1c 0%, #ef4444 100%); } .bp-statlegend { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; margin-top: 0.45rem; } .bp-statlegend-item { display: inline-flex; align-items: center; gap: 0.32rem; font-size: 11px; color: #6b7280; white-space: nowrap; } .dark .bp-statlegend-item { color: #9ca3af; } .bp-statlegend-item strong { font-weight: 800; color: #0f172a; } .dark .bp-statlegend-item strong { color: #f3f4f6; } .bp-statlegend-dot { width: 7px; height: 7px; border-radius: 9999px; flex-shrink: 0; } .bp-statlegend-dot--removed { background: var(--agency-primary-bright, #2dd4bf); } .bp-statlegend-dot--pending { background: #f59e0b; } .bp-statlegend-dot--rejected { background: #ef4444; } /* ============================================================================ 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). Those files haven't been ported to the new `bl-*` / `ag-*` system yet, so the legacy rules are kept here as a compatibility layer until each gets its own upgrade. Hardcoded greens match the pre-upgrade look — DO NOT cite this block as the design system. ========================================================================= */ .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: #ecfdf5; } .dark .set-chip { background: rgba(34, 197, 94, 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: #fafafa; } .set-info-row-zebra { background: #fafafa; } .dark .set-info-row:hover { background: #111827; } .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: #f0fdf4; border-color: #86efac; color: #15803d; } .dark .set-edit-btn { background: #111827; border-color: #374151; color: #d1d5db; } .dark .set-edit-btn:hover { background: rgba(34, 197, 94, 0.12); border-color: #16a34a; color: #86efac; } .set-btn-primary { background: linear-gradient(135deg, #15803d, #16a34a); transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.2); border: 0; } .set-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3); } .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: #f0fdf4; border-color: #86efac; color: #15803d; } .dark .set-btn-outline { background: #111827; border-color: #374151; color: #d1d5db; } .dark .set-btn-outline:hover { background: rgba(34, 197, 94, 0.12); border-color: #16a34a; color: #86efac; } .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: #86efac; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.08); } .dark .set-price-card { background: #111827; border-color: #374151; } .dark .set-price-card:hover { border-color: #16a34a; box-shadow: 0 2px 8px rgba(34, 197, 94, 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: #f0fdf4 !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(34, 197, 94, 0.1) !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; } /* ============================================================================ 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); } .ag-act-danger:hover { color: #dc2626; background: rgba(220, 38, 38, 0.08); } .dark .ag-act-danger:hover { color: #f87171; background: rgba(239, 68, 68, 0.10); } /* --- Form error wrapper (sub_agency create + domain edit) --------- */ .ag-form-errors { background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.25); color: #b91c1c; } .dark .ag-form-errors { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.30); color: #fca5a5; } /* --- Empty-state icon variant (amber tint) ------------------------ */ .bl-empty-icon.ag-empty-amber { background: rgba(245, 158, 11, 0.10); color: #d97706; } .dark .bl-empty-icon.ag-empty-amber { background: rgba(245, 158, 11, 0.18); color: #fcd34d; } .bl-empty-icon.ag-upsell-icon { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.10); color: var(--agency-primary, #003A3A); } .dark .bl-empty-icon.ag-upsell-icon { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); color: var(--agency-primary-bright, #5eead4); } /* --- Sub-agency list: avatar + subdomain chip --------------------- */ .ag-sub-avatar { background: linear-gradient(135deg, var(--agency-primary, #003A3A), var(--agency-primary-mid, #0d6e6e)); } .ag-sub-subdomain { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 0.375rem; background: #f9fafb; color: #4b5563; } .dark .ag-sub-subdomain { background: #111827; color: #d1d5db; } /* --- New-sub-agency: step indicator ------------------------------- */ .ag-step-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9999px; border: 2px solid var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); color: var(--agency-primary, #003A3A); } .dark .ag-step-num { border-color: var(--agency-primary-bright, #2dd4bf); background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.14); color: var(--agency-primary-bright, #5eead4); } .ag-step-connector { width: 60px; height: 2px; background: linear-gradient(90deg, var(--agency-primary, #003A3A), var(--agency-primary-bright, #2dd4bf)); } /* --- New-sub-agency: optional-details collapsible toggle ---------- */ .ag-collapse-toggle { color: #6b7280; } .ag-collapse-toggle:hover { color: var(--agency-primary, #003A3A); } .dark .ag-collapse-toggle { color: #9ca3af; } .dark .ag-collapse-toggle:hover { color: var(--agency-primary-bright, #5eead4); } .ag-collapse-toggle[aria-expanded="true"] .ag-collapse-chevron, [data-dropdown-open="true"] .ag-collapse-chevron { transform: rotate(180deg); } .ag-collapse-chevron { transition: transform 0.2s ease; } /* --- New-sub-agency: "What happens next" timeline ----------------- */ .ag-timeline-callout { 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-timeline-callout { 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); } .ag-timeline-step { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.10); color: var(--agency-primary, #003A3A); } .dark .ag-timeline-step { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); color: var(--agency-primary-bright, #5eead4); } .ag-timeline-connector { align-items: center; margin-top: 1.25rem; flex-shrink: 0; width: 24px; height: 2px; background: linear-gradient(90deg, var(--agency-primary-bright, #5eead4), var(--agency-primary, #003A3A)); } /* --- New-sub-agency: sticky action bar ---------------------------- */ .ag-sticky-actions { background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04); } .dark .ag-sticky-actions { background: #1f2937; border-color: #374151; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4); } /* ============================================================================ Agency Credit Packs index (app/views/agency_credit_packs/index.html.erb) Two small hooks on top of the shared business design system. Everything else reuses .bl-plan-card / .bl-plan-card-premium / .bl-plan-ribbon / .bl-save-badge / .bl-buy-btn / .bl-upgrade-btn / .bl-timeline / .bl-pill. ========================================================================= */ /* Column header — the small tinted card above each pricing column. Replaces the legacy `.cp-col-header` which was emerald-only. */ .acp-col-header { 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 .acp-col-header { 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); } /* Stripe-redirect success banner — light agency-primary wash in light mode, brighter derivative in dark. */ .acp-success-banner { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.05); border: 1px solid rgba(var(--agency-primary-rgb, 0, 58, 58), 0.20); } .dark .acp-success-banner { 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); } /* --- show page: price-summary inner wrap with gradient wash --- */ .acp-price-wrap { background: linear-gradient(135deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.05) 0%, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.02) 100%); } .dark .acp-price-wrap { background: linear-gradient(135deg, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.08) 0%, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.03) 100%); } /* --- show page: feature-list checkmark bubble --- */ .acp-check { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.12); color: var(--agency-primary, #003A3A); } .dark .acp-check { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.20); color: var(--agency-primary-bright, #5eead4); } /* --- show page: current-balance pill --- */ .acp-balance-card { 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 .acp-balance-card { 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); } /* ============================================================================ Business Users (app/views/business_users/*) Avatar gradient, premium-plan pill, safe/danger action chips, and a readonly current-email box. Everything tokenised on --agency-primary. ========================================================================= */ /* Avatar circle — gradient driven by agency primary. */ .bu-avatar { 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); } .bu-avatar-lg { box-shadow: 0 4px 12px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); } /* Premium plan pill — purple, distinct from the brand-teal `bl-pill-brand`. Subscription tiers are a product-semantic axis, NOT brand-coloured. */ .bl-pill.bu-pill-premium { background: #f3e8ff; color: #7e22ce; border-color: #e9d5ff; } .dark .bl-pill.bu-pill-premium { background: rgba(168, 85, 247, 0.18); color: #d8b4fe; border-color: rgba(168, 85, 247, 0.30); } /* Inline action buttons on the profile header. Safe = unblock (success tint). Danger = block (red tint). Both share the bl-btn-secondary base height/spacing via shared selectors below. */ .bu-btn-safe, .bu-btn-danger { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.95rem; border-radius: 0.75rem; font-size: 0.8125rem; font-weight: 600; border: 1px solid transparent; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; cursor: pointer; } .bu-btn-safe { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; } .bu-btn-safe:hover { background: #dcfce7; transform: translateY(-1px); } .dark .bu-btn-safe { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.30); color: #86efac; } .dark .bu-btn-safe:hover { background: rgba(34, 197, 94, 0.16); } .bu-btn-danger { background: #fef2f2; border-color: #fecaca; color: #dc2626; } .bu-btn-danger:hover { background: #fee2e2; transform: translateY(-1px); } .dark .bu-btn-danger { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.30); color: #f87171; } .dark .bu-btn-danger:hover { background: rgba(239, 68, 68, 0.16); } /* Read-only field shown above the "new email" input. */ .bu-readonly { background: #fafafa; border: 1px solid #f3f4f6; } .dark .bu-readonly { background: rgba(255, 255, 255, 0.04); border-color: #374151; } /* ============================================================================ Inbox (app/views/inbox/*) Gmail-connection status pills, body frame for the email preview, and the hover-aware email row used across index / search / removals / by_reference. ========================================================================= */ /* Connection status icon — green when authenticated, red when not. */ .ib-status-good { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.10); color: var(--agency-primary, #003A3A); } .dark .ib-status-good { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.16); color: var(--agency-primary-bright, #5eead4); } .ib-status-bad { background: rgba(239, 68, 68, 0.10); color: #dc2626; } .dark .ib-status-bad { background: rgba(239, 68, 68, 0.16); color: #f87171; } /* Email body container — fixed-pitch frame around the raw email text. */ .ib-body-frame { background: #fafafa; border: 1px solid #f3f4f6; } .dark .ib-body-frame { background: rgba(255, 255, 255, 0.03); border-color: #374151; } /* Hoverable email row — subject + chevron tint to agency-primary on hover. Shared by index / search / removals / by_reference list views. */ .ib-email-row { transition: background 0.15s ease; } .ib-email-row:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04); } .dark .ib-email-row:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.06); } .ib-email-subject { transition: color 0.15s ease; } .ib-email-row:hover .ib-email-subject { color: var(--agency-primary, #003A3A); } .dark .ib-email-row:hover .ib-email-subject { color: var(--agency-primary-bright, #5eead4); } .ib-email-chevron { transition: transform 0.15s ease, color 0.15s ease; } .ib-email-row:hover .ib-email-chevron { transform: translateX(2px); color: var(--agency-primary, #003A3A); } .dark .ib-email-row:hover .ib-email-chevron { color: var(--agency-primary-bright, #5eead4); } /* ============================================================================ Invoices (app/views/invoices/*) Lockout banner, filter pills, brand-tinted amount-due wrap, paid/PDF semantic banners. ========================================================================= */ /* Red-tinted lockout banner with a left border accent. */ .invc-lockout { background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #ef4444; } .dark .invc-lockout { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.30); border-left-color: #ef4444; } /* Lockout "Pay oldest" CTA — solid red, urgent. */ .invc-lockout-cta { background: #dc2626; } .invc-lockout-cta:hover { background: #b91c1c; } /* Status filter pills above the invoice table — active pill uses agency-primary tint. */ .invc-filter { display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 600; background: #f3f4f6; color: #4b5563; transition: background 0.15s ease, color 0.15s ease; } .invc-filter:hover { background: #e5e7eb; color: #1f2937; } .dark .invc-filter { background: #1f2937; color: #d1d5db; } .dark .invc-filter:hover { background: #374151; color: #f3f4f6; } .invc-filter.is-active { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.10); color: var(--agency-primary, #003A3A); } .dark .invc-filter.is-active { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.14); color: var(--agency-primary-bright, #5eead4); } /* Amount-due wrap — agency-primary gradient wash inside bl-section. */ .invc-amount-wrap { background: linear-gradient(135deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.05) 0%, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.02) 100%); } .dark .invc-amount-wrap { background: linear-gradient(135deg, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.08) 0%, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.03) 100%); } /* Paid / banner pairs — green and amber semantics (NOT brand). */ .invc-paid-card { background: #f0fdf4; border: 1px solid #dcfce7; } .dark .invc-paid-card { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.25); } .invc-banner-ok { background: #f0fdf4; border: 1px solid #dcfce7; } .dark .invc-banner-ok { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.25); } .invc-banner-warn { background: #fffbeb; border: 1px solid #fde68a; } .dark .invc-banner-warn { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.30); } /* ============================================================================ Notifications (app/views/notifications/*) Hoverable list rows, unread badge + tinted background, per-type icon colours, and the success-summary stat tiles on the show page. Per-type tints are SEMANTIC (green = success, red = error, amber = warning, blue = info, indigo = AI, gray = neutral). They deliberately do NOT track the agency-primary brand colour. ========================================================================= */ /* List row — hover sets brand-tinted background + left inset. */ .n-row { transition: background 0.15s ease, box-shadow 0.15s ease; } .n-row:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04); box-shadow: inset 3px 0 0 var(--agency-primary, #003A3A); } .dark .n-row:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.06); box-shadow: inset 3px 0 0 var(--agency-primary-bright, #5eead4); } /* Unseen row — brand-tinted background pinned, deeper on hover. */ .n-row-unseen { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.05); box-shadow: inset 3px 0 0 var(--agency-primary, #003A3A); } .dark .n-row-unseen { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.08); box-shadow: inset 3px 0 0 var(--agency-primary-bright, #5eead4); } .n-row-unseen:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); } .dark .n-row-unseen:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.12); } /* "New" badge on unread rows — solid agency-primary gradient. */ .n-badge-new { background: linear-gradient(135deg, var(--agency-primary, #003A3A), var(--agency-primary-mid, #005454)); color: #fff; box-shadow: 0 1px 3px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.30); } /* Per-type icon tiles. */ .n-type-green { background: #dcfce7; color: #15803d; } .n-type-red { background: #fee2e2; color: #991b1b; } .n-type-amber { background: #fef3c7; color: #92400e; } .n-type-blue { background: #dbeafe; color: #1d4ed8; } .n-type-indigo { background: #eef2ff; color: #4338ca; } .n-type-gray { background: #f3f4f6; color: #6b7280; } .dark .n-type-green { background: rgba(34, 197, 94, 0.18); color: #86efac; } .dark .n-type-red { background: rgba(239, 68, 68, 0.18); color: #fca5a5; } .dark .n-type-amber { background: rgba(245, 158, 11, 0.18); color: #fcd34d; } .dark .n-type-blue { background: rgba(59, 130, 246, 0.18); color: #93c5fd; } .dark .n-type-indigo { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; } .dark .n-type-gray { background: rgba(255, 255, 255, 0.05); color: #9ca3af; } /* Per-type small pill labels (same palette but used at pill scale). */ .n-pill-green { background: #dcfce7; color: #15803d; } .n-pill-red { background: #fee2e2; color: #991b1b; } .n-pill-amber { background: #fef3c7; color: #92400e; } .n-pill-blue { background: #dbeafe; color: #1d4ed8; } .n-pill-indigo { background: #eef2ff; color: #4338ca; } .n-pill-gray { background: #f3f4f6; color: #6b7280; } .dark .n-pill-green { background: rgba(34, 197, 94, 0.15); color: #86efac; } .dark .n-pill-red { background: rgba(239, 68, 68, 0.15); color: #fca5a5; } .dark .n-pill-amber { background: rgba(245, 158, 11, 0.15); color: #fcd34d; } .dark .n-pill-blue { background: rgba(59, 130, 246, 0.15); color: #93c5fd; } .dark .n-pill-indigo { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; } .dark .n-pill-gray { background: rgba(255, 255, 255, 0.05); color: #9ca3af; } /* Submission-summary stat tiles (notifications/show — success / warn / neutral variants used by created/requeued/skipped). */ .n-stat-success { background: #f0fdf4; border: 1px solid #dcfce7; color: #15803d; } .dark .n-stat-success { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.28); color: #86efac; } .n-stat-warning { background: #fffbeb; border: 1px solid #fef3c7; color: #b45309; } .dark .n-stat-warning { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.30); color: #fcd34d; } .n-stat-neutral { background: #fafafa; border: 1px solid #f3f4f6; color: #4b5563; } .dark .n-stat-neutral { background: rgba(255, 255, 255, 0.04); border-color: #374151; color: #d1d5db; } /* Inline red-tinted error callout inside a skipped-review card. */ .n-error-callout { background: #fef2f2; border: 1px solid #fee2e2; } .dark .n-error-callout { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.28); } /* ============================================================================ My Account (app/views/my_account/*) Tabbed-form chrome: error/warning callouts inside form bodies, a danger- themed delete-card border, and the styled-file-input for the avatar. ========================================================================= */ /* Red-tinted error callout used inside form bodies for validation errors. */ .mya-error-callout { background: #fef2f2; border: 1px solid #fecaca; } .dark .mya-error-callout { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.30); } /* Amber callout used by the "no admins to transfer to" empty state. */ .mya-warning-callout { background: #fffbeb; border: 1px solid #fde68a; } .dark .mya-warning-callout { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.30); } /* Danger-bordered card for the Delete Account section. */ .mya-delete-card { border-color: #fecaca; } .dark .mya-delete-card { border-color: rgba(239, 68, 68, 0.30); } .mya-delete-head { border-color: #fecaca; } .dark .mya-delete-head { border-color: rgba(239, 68, 68, 0.30); } /* Styled-file-input chrome — gives the native file picker an agency- primary tint on the "Choose file" button. */ .mya-file-input::file-selector-button { margin-right: 0.75rem; padding: 0.5rem 0.75rem; border: 0; border-radius: 0.5rem; background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.10); color: var(--agency-primary, #003A3A); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .mya-file-input::file-selector-button:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.16); } .dark .mya-file-input::file-selector-button { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.16); color: var(--agency-primary-bright, #5eead4); } .dark .mya-file-input::file-selector-button:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.24); } /* ============================================================================ Team (app/views/accounts/*) Owner-avatar gradient + role pills. Role tints are SEMANTIC (owner=indigo, admin=blue, agent=gray) — distinct per role, not brand. ========================================================================= */ /* Owner-row avatar — indigo gradient to match the owner role colour. */ .t-owner-avatar { background: linear-gradient(135deg, #6366f1, #4f46e5); box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25); } /* Role pills — modifier on the .bl-pill base. */ .bl-pill.t-role-owner { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; } .dark .bl-pill.t-role-owner { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; border-color: rgba(99, 102, 241, 0.30); } .bl-pill.t-role-admin { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; } .dark .bl-pill.t-role-admin { background: rgba(59, 130, 246, 0.18); color: #93c5fd; border-color: rgba(59, 130, 246, 0.30); } .bl-pill.t-role-agent { background: #f3f4f6; color: #374151; border-color: #e5e7eb; } .dark .bl-pill.t-role-agent { background: rgba(255, 255, 255, 0.05); color: #d1d5db; border-color: #374151; } /* ============================================================================ Auth pages (app/views/devise/* + app/views/registrations/*) Shared chrome for sign-in / sign-up / password / unlock / invite flows. Semantic green/red flash banners; brand-tinted checkbox + auth-tab. ========================================================================= */ /* Flash banners — semantic green (info / success) and red (error). */ .auth-flash-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; } .dark .auth-flash-ok { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.30); color: #86efac; } .auth-flash-bad { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; } .dark .auth-flash-bad { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.30); color: #fca5a5; } /* Checkboxes inside auth forms — brand-tinted via accent-color. */ .auth-checkbox { border: 1px solid #d1d5db; accent-color: var(--agency-primary, #003A3A); } .dark .auth-checkbox { border-color: #374151; accent-color: var(--agency-primary-bright, #5eead4); } /* Tab pill row on the registrations/new page (Business / Agency). */ .auth-tabs { background: #f3f4f6; } .dark .auth-tabs { background: #1f2937; } .auth-tab { color: #6b7280; background: transparent; } .auth-tab:hover { color: #374151; } .dark .auth-tab { color: #9ca3af; } .dark .auth-tab:hover { color: #f3f4f6; } .auth-tab.is-active { background: var(--agency-primary, #003A3A); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10); } .dark .auth-tab.is-active { background: var(--agency-primary-bright, #5eead4); color: #042f2e; } /* ============================================================================ Customer-facing confirmation pages (app/views/quotes/customer_confirmation*.html.erb) Branding avatar, review list scroll area, POA block, and the spring-pop success icon. Brand-tinted check-row used by the "no contact" consent box. ========================================================================= */ /* Hash-driven brand avatar (when no whitelabel logo is set). */ .cc-brand-avatar { background: linear-gradient(135deg, var(--agency-primary, #003A3A), var(--agency-primary-mid, #005454)); box-shadow: 0 2px 8px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); } /* Scroll container for the selected-reviews list. */ .cc-reviews-list { background: #fafafa; border: 1px solid #f3f4f6; } .dark .cc-reviews-list { background: rgba(255, 255, 255, 0.04); border-color: #374151; } /* The POA-block frame around position + name + signature hint. */ .cc-poa-block { background: #fafafa; border: 1px solid #f3f4f6; } .dark .cc-poa-block { background: rgba(255, 255, 255, 0.04); border-color: #374151; } /* Existing-POA success card (when the customer already has one on file). */ .cc-existing-poa { background: #f0fdf4; border: 1px solid #bbf7d0; } .dark .cc-existing-poa { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.30); } /* Brand-tinted checkbox row — the "no contact" consent box. */ .cc-check-row { background: #ffffff; transition: background 0.15s ease, border-color 0.15s ease; } .cc-check-row:hover { border-color: var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04); } .cc-check-row:has(input:checked) { border-color: var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); } .dark .cc-check-row { background: #1f2937; } .dark .cc-check-row:hover, .dark .cc-check-row:has(input:checked) { border-color: var(--agency-primary-bright, #5eead4); background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.08); } .cc-check-row input[type="checkbox"] { accent-color: var(--agency-primary, #003A3A); border-color: #d1d5db; } .dark .cc-check-row input[type="checkbox"] { accent-color: var(--agency-primary-bright, #5eead4); } /* Confirmation-success card surfaces. */ .cs-success-icon { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #15803d; } .dark .cs-success-icon { background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.18)); color: #86efac; } .cs-details { background: #fafafa; border: 1px solid #f3f4f6; } .dark .cs-details { background: rgba(255, 255, 255, 0.04); border-color: #374151; } /* Spring-pop entrance for the success icon. */ @keyframes csPop { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } .cs-pop { animation: csPop 0.5s ease-out 0.2s both; } /* ============================================================================ Searches show + _reviews (app/views/searches/show.html.erb + _reviews.html.erb) Filter pill, review card hover, Google-link chip, checkbox. ========================================================================= */ /* Star-filter pill — agency-primary tint on hover + checked. */ .s-filter-pill { border: 1px solid #e5e7eb; background: #ffffff; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .s-filter-pill:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04); border-color: var(--agency-primary, #003A3A); } .dark .s-filter-pill { background: #1f2937; border-color: #374151; } .dark .s-filter-pill:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.08); border-color: var(--agency-primary-bright, #5eead4); } .s-filter-pill:has(input:checked) { border-color: var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); box-shadow: 0 0 0 1px var(--agency-primary, #003A3A); } .dark .s-filter-pill:has(input:checked) { border-color: var(--agency-primary-bright, #5eead4); background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.10); box-shadow: 0 0 0 1px var(--agency-primary-bright, #5eead4); } /* Review card hover lift. */ .sr-card { transition: border-color 0.2s ease, box-shadow 0.2s ease; } .sr-card:hover { border-color: var(--agency-primary, #003A3A); box-shadow: 0 1px 4px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); } .dark .sr-card:hover { border-color: var(--agency-primary-bright, #5eead4); box-shadow: 0 1px 4px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.10); } /* Round checkbox (custom-styled) used to select a review. */ .sr-checkbox { border-color: #d1d5db; background: #ffffff; transition: background 0.15s ease, border-color 0.15s ease; } .sr-checkbox:hover { border-color: var(--agency-primary, #003A3A); } .dark .sr-checkbox { background: #111827; border-color: #4b5563; } .dark .sr-checkbox:hover { border-color: var(--agency-primary-bright, #5eead4); } .sr-checkbox:has(input:checked) { background: var(--agency-primary, #003A3A); border-color: var(--agency-primary, #003A3A); } .dark .sr-checkbox:has(input:checked) { background: var(--agency-primary-bright, #5eead4); border-color: var(--agency-primary-bright, #5eead4); } .sr-checkbox:has(input:checked) .sr-checkbox-icon { display: block !important; } /* Google-link chip (the small 28×28 circle linking to the review). */ .sr-google-link { background: #f9fafb; border: 1px solid #f3f4f6; transition: background 0.2s ease, border-color 0.2s ease; } .sr-google-link:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.30); } .dark .sr-google-link { background: #111827; border-color: #374151; } .dark .sr-google-link:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.10); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.30); } /* Inline image thumbs in a review — scale on hover. */ .sr-review-img { transition: transform 0.2s ease, border-color 0.2s ease; } .sr-review-img:hover { transform: scale(1.05); border-color: var(--agency-primary, #003A3A); } .dark .sr-review-img:hover { border-color: var(--agency-primary-bright, #5eead4); } /* ============================================================================ Usage banner (app/views/shared/_usage_banner.html.erb) Top-of-page marquee that scrolls a "credits remaining / quotes used" strip across the viewport. Green by default; flips to amber via `.ub-banner-low` when usage is near the cap. `.ub-marquee-wrapper:hover` pauses the scroll so the user can read a row that catches their eye. ========================================================================= */ .ub-banner { background: linear-gradient(90deg, #f0fdf4, #ecfdf5, #f0fdf4); border-bottom: 1px solid #dcfce7; color: #15803d; padding: 6px 0; overflow: hidden; position: relative; } .dark .ub-banner { background: linear-gradient(90deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.05), rgba(34, 197, 94, 0.08)); border-bottom-color: rgba(34, 197, 94, 0.2); color: #86efac; } .ub-banner-low { background: linear-gradient(90deg, #fffbeb, #fef3c7, #fffbeb); border-bottom-color: #fde68a; color: #92400e; } .dark .ub-banner-low { background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.05), rgba(245, 158, 11, 0.08)); border-bottom-color: rgba(245, 158, 11, 0.25); color: #fcd34d; } .ub-marquee-wrapper { width: 100%; overflow: hidden; } .ub-marquee-content { display: inline-flex; align-items: center; gap: 48px; will-change: transform; animation: ubScroll 35s linear infinite; } .ub-marquee-wrapper:hover .ub-marquee-content { animation-play-state: paused; } .ub-pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; white-space: nowrap; padding: 0 4px; } .ub-text { letter-spacing: 0.01em; } @keyframes ubScroll { from { transform: translateX(0); } to { transform: translateX(-33.333%); } } @media (prefers-reduced-motion: reduce) { .ub-marquee-content { animation: none; justify-content: center; } } /* ============================================================================ Pagination nav (app/views/shared/_pagination_nav.html.erb) Pill-shaped page buttons with brand-tinted hover and a solid brand gradient on the current page. The pop-in keyframe runs once when the current page changes (navigation) to draw the eye to the new active. ========================================================================= */ @keyframes gpagFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes gpagPop { 0% { transform: scale(0.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } } .gpag-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; font-size: 12px; font-weight: 600; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; border-radius: 10px; text-decoration: none; transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .gpag-btn:hover:not(.gpag-disabled):not(.gpag-current) { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); color: var(--agency-primary, #003A3A); border-color: var(--agency-primary, #003A3A); box-shadow: 0 2px 8px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.12); transform: translateY(-1px); } .gpag-btn:active:not(.gpag-disabled):not(.gpag-current) { transform: scale(0.96); } .gpag-arrow { color: #9ca3af; } .gpag-arrow:hover:not(.gpag-disabled) { color: var(--agency-primary, #003A3A); } .gpag-current { background: linear-gradient(135deg, var(--agency-primary, #003A3A), var(--agency-primary-mid, #005454)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.30); animation: gpagPop 0.3s ease-out; } .gpag-current:hover { transform: none; } .gpag-disabled { opacity: 0.4; cursor: not-allowed; background: #fafafa; color: #d1d5db; border-color: #f3f4f6; } .gpag-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 34px; color: #d1d5db; font-size: 14px; font-weight: 600; user-select: none; } .dark .gpag-btn { background: #1f2937; color: #d1d5db; border-color: #374151; } .dark .gpag-btn:hover:not(.gpag-disabled):not(.gpag-current) { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.12); color: var(--agency-primary-bright, #5eead4); border-color: var(--agency-primary-bright, #5eead4); box-shadow: 0 2px 8px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.18); } .dark .gpag-arrow { color: #9ca3af; } .dark .gpag-arrow:hover:not(.gpag-disabled) { color: var(--agency-primary-bright, #5eead4); } .dark .gpag-disabled { background: #111827; color: #4b5563; border-color: #1f2937; } .dark .gpag-ellipsis { color: #4b5563; } .dark .gpag-current { box-shadow: 0 4px 12px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.40); } /* ============================================================================ Review-deletions detail view (app/views/review_deletions/show.html.erb) Two-pane layout: review list on the left, sticky email panel on the right. The active review row gets a brand left-border + tinted bg so you don't lose context as you scroll the email list. The email panel header uses backdrop-filter so it floats over the list as you scroll. ========================================================================= */ .rds-info-row:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04); } .dark .rds-info-row:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.06); } .rds-review-row { transition: background 0.15s ease, box-shadow 0.15s ease; border-left: 3px solid transparent; } .rds-review-row:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.02); } .rds-review-row.rds-review-active { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.05); border-left-color: var(--agency-primary, #003A3A); box-shadow: 0 4px 12px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); } .dark .rds-review-row:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.04); } .dark .rds-review-row.rds-review-active { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.07); border-left-color: var(--agency-primary-bright, #2dd4bf); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .rds-copy { color: #9ca3af; background: transparent; border: 0; cursor: pointer; } .rds-copy:hover { color: var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); } .dark .rds-copy { color: #6b7280; } .dark .rds-copy:hover { color: #5eead4; background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.10); } /* Sticky email-panel header — translucent backdrop so it floats over the list. Light variant is gray-50 @ 0.95; dark is gray-800/900 @ 0.85 so the pane reads darker than the bright white default. */ .rds-email-header { background: rgba(249, 250, 251, 0.95); backdrop-filter: blur(6px); } .dark .rds-email-header { background: rgba(17, 24, 39, 0.85); } /* ============================================================================ Quote detail page (app/views/quotes/show.html.erb) Company hero (chips + diagonal-line backdrop), per-review row accents (hover + selected), filter pill + selection checkbox, and the floating mobile bulk-action bar that slides up when reviews are picked. ========================================================================= */ /* Sticky sub-header — anchored just above the footer nav on mobile. Starts off-screen BELOW the viewport and slides UP into place. The slide direction was flipped (was -120% from top) when the bar was moved from top:0 to bottom: footer-nav + safe-area-inset. */ .sticky-subheader { transform: translateY(140%); transition: transform 0.25s ease, opacity 0.25s ease; opacity: 0; } .sticky-subheader.sticky-subheader-visible { transform: translateY(0); opacity: 1; } /* Company-header diagonal-line pattern — very faint so the surface still reads as white. Masked to fade out toward the right. */ .company-hero-pattern { background-image: repeating-linear-gradient(135deg, rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04) 0 1px, transparent 1px 16px); mask-image: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0) 100%); } .dark .company-hero-pattern { background-image: repeating-linear-gradient(135deg, rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.05) 0 1px, transparent 1px 16px); } .company-hero-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; 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.15); color: var(--agency-primary, #003A3A); font-size: 11px; font-weight: 500; } .dark .company-hero-chip { 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); color: #5eead4; } .company-hero-chip strong { font-weight: 700; } .review-row { transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; border-left: 3px solid transparent; } .review-row:hover { border-left-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.015); } .review-row.bp-review-selected { border-left-color: var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.03); box-shadow: 0 4px 12px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); } .dark .review-row:hover { border-left-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.3); background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.03); } .dark .review-row.bp-review-selected { border-left-color: var(--agency-primary-bright, #2dd4bf); background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .q-filter-pill:hover { border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.30); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.04); } .q-filter-pill:has(input:checked) { border-color: var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); box-shadow: 0 0 0 1px var(--agency-primary, #003A3A); } .dark .q-filter-pill:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.06); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.30); } .dark .q-filter-pill:has(input:checked) { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.10); border-color: var(--agency-primary-bright, #2dd4bf); box-shadow: 0 0 0 1px var(--agency-primary-bright, #2dd4bf); } .q-checkbox:has(input:checked) { background: var(--agency-primary, #003A3A); border-color: var(--agency-primary, #003A3A); } .q-checkbox:has(input:checked) .q-check-icon { display: block !important; } .q-checkbox:hover { border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.45); } .company-contact-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 9999px; background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.05); border: 1px solid rgba(var(--agency-primary-rgb, 0, 58, 58), 0.12); color: var(--agency-primary, #003A3A); font-size: 11px; font-weight: 500; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .company-contact-pill:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.10); border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.30); transform: translateY(-1px); } .dark .company-contact-pill { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.06); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.22); color: #5eead4; } .dark .company-contact-pill:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.12); border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.40); } /* Search pill — when the inner input focuses, the wrapper takes the brand-teal border + glow. Replaces inline focus-within classes that didn't compile cleanly through Tailwind's arbitrary-value handling. */ .search-pill-row > div { transition: border-color 0.15s ease, box-shadow 0.15s ease; } .search-pill-row > div:focus-within { border-color: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.45); box-shadow: 0 0 0 3px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.08); } .dark .search-pill-row > div:focus-within { border-color: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.50); box-shadow: 0 0 0 3px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.12); } .bulk-bar { transform: translate(-50%, 140%); transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; opacity: 0; max-width: 520px; width: calc(100% - 2rem); } .bulk-bar.bulk-bar-visible { transform: translate(-50%, 0); opacity: 1; } /* Bulk bar is mobile-only. On lg+ the side-panel CTA is always visible (sticky sidebar), so the floating bar is redundant. */ @media (min-width: 1024px) { [data-controller="bulk-action-bar"] { display: none; } } /* ============================================================================ Resend invitation modal (app/views/shared/_resend_invitation_modal.html.erb) Singleton dialog used from team / sub-agency lists. Amber-themed because "resend" is a cautionary, irreversible action (the previous invitation stops working). Tailwind preflight resets native centering, so we re-apply position/inset/margin and explicit max sizes here. ========================================================================= */ .rim-dialog { padding: 0; border: 0; background: transparent; max-width: 92vw; max-height: 90vh; width: 440px; margin: auto; color: inherit; } .rim-dialog[open] { animation: rimFadeIn 0.18s ease-out; } .rim-dialog::backdrop { background: rgba(0, 0, 0, 0.55); animation: rimBackdropFadeIn 0.18s ease-out; } @keyframes rimFadeIn { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes rimBackdropFadeIn { from { opacity: 0; } to { opacity: 1; } } .rim-card { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } .rim-accent { height: 3px; background: linear-gradient(90deg, #f59e0b, #d97706, #b45309); } .rim-icon-badge { background: #fffbeb; } .dark .rim-icon-badge { background: rgba(245, 158, 11, 0.15); } .rim-email-box { background: #fffbeb; border: 1px solid #fde68a; } .dark .rim-email-box { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); } .rim-cancel-btn { background: #fff; border: 1px solid #e5e7eb; color: #6b7280; transition: all 0.2s ease; } .rim-cancel-btn:hover { background: #f9fafb; border-color: #d1d5db; color: #374151; } .dark .rim-cancel-btn { background: #1f2937; border-color: #374151; color: #d1d5db; } .dark .rim-cancel-btn:hover { background: #374151; border-color: #4b5563; color: #f3f4f6; } .rim-confirm-btn { background: linear-gradient(135deg, #d97706, #f59e0b); border: 0; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25); } .rim-confirm-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35); } .rim-confirm-btn:active { transform: scale(0.98); } /* ============================================================================ Dashboard period-stat tiles (app/views/dashboard/_quotes_conversions.html.erb, plus _seen_quotes and _submitted_reviews via the same `dpc-*` class set). Four-color tile pattern (green/blue/purple/amber) for today/week/month/year. Tiles lift on hover; chip color tells you the period at a glance. ========================================================================= */ .dpc-card { background: #fff; border-color: #e5e7eb; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; transform-origin: center; } .dark .dpc-card { background: #1f2937; border-color: #374151; } .dpc-card:hover { border-color: var(--agency-primary, #003A3A); box-shadow: 0 6px 18px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.18); transform: translateY(-2px) scale(1.02); } .dark .dpc-card:hover { border-color: var(--agency-primary-bright, #5eead4); box-shadow: 0 6px 18px rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.25); } .dpc-tile-green .dpc-icon { background: #dcfce7; color: #15803d; } .dpc-tile-blue .dpc-icon { background: #dbeafe; color: #1d4ed8; } .dpc-tile-purple .dpc-icon { background: #ede9fe; color: #6d28d9; } .dpc-tile-amber .dpc-icon { background: #fef3c7; color: #a16207; } .dark .dpc-tile-green .dpc-icon { background: rgba(34, 197, 94, 0.18); color: #86efac; } .dark .dpc-tile-blue .dpc-icon { background: rgba(59, 130, 246, 0.18); color: #93c5fd; } .dark .dpc-tile-purple .dpc-icon { background: rgba(139, 92, 246, 0.18); color: #c4b5fd; } .dark .dpc-tile-amber .dpc-icon { background: rgba(234, 179, 8, 0.18); color: #fde047; } /* ============================================================================ Agency pricing module form (app/views/agency_pricing_modules/_form.html.erb) Radio-card option: hover hints at selection; the brand outline only lights up when the inner radio is :checked, so the user can see at a glance which scope they picked. */ .apm-scope-option:hover { border-color: var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.03); } .apm-scope-option:has(input:checked) { border-color: var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); box-shadow: 0 0 0 1px var(--agency-primary, #003A3A); } .dark .apm-scope-option:hover { border-color: var(--agency-primary-bright, #5eead4); background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.05); } .dark .apm-scope-option:has(input:checked) { border-color: var(--agency-primary-bright, #5eead4); background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.10); box-shadow: 0 0 0 1px var(--agency-primary-bright, #5eead4); } /* ============================================================================ Searches side panel (app/views/searches/_side_component.html.erb) Quote-builder side card: animated chevrons + projected-rating slide-in, price-module pill buttons, secondary action buttons (PDF / copy), and the mobile sticky action bar that mirrors the desktop CTA stack. Primary submit is `bl-btn-primary` (brand). Module/action buttons hover to brand tint. Improvement chevrons stay semantic green. ========================================================================= */ .sc-slide-l { animation: scSlideL 0.5s ease-out 0.25s both; } .sc-slide-r { animation: scSlideR 0.5s ease-out 0.25s both; } .sc-chevron { color: #22c55e; animation: scChevron 1.8s ease-in-out infinite; } .sc-chevron-2 { animation-delay: 0.25s; } .sc-chevron-3 { animation-delay: 0.5s; } .dark .sc-chevron { color: #4ade80; } @keyframes scSlideL { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } @keyframes scSlideR { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } @keyframes scChevron { 0% { opacity: .15; } 30% { opacity: 1; } 60% { opacity: .15; } 100% { opacity: .15; } } /* Price-module quick-pick buttons — outlined neutral by default, brand on hover/active so the agency colour shows through when a module is picked. */ .sc-module-btn { border: 1px solid #e5e7eb; background: #fff; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .sc-module-btn:hover, .sc-module-btn.active { border-color: var(--agency-primary, #003A3A); background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); } .sc-module-btn:active { transform: scale(0.98); } .dark .sc-module-btn { background: #1f2937; border-color: #374151; } .dark .sc-module-btn:hover, .dark .sc-module-btn.active { border-color: var(--agency-primary-bright, #5eead4); background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.10); } /* Secondary action buttons (PDF, copy) — outlined, brand tint on hover. */ .sc-action-btn { border: 1px solid #e5e7eb; background: #fff; color: #374151; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .sc-action-btn:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.05); border-color: var(--agency-primary, #003A3A); color: var(--agency-primary, #003A3A); } .sc-action-btn:active { transform: scale(0.98); } .dark .sc-action-btn { background: #111827; border-color: #374151; color: #d1d5db; } .dark .sc-action-btn:hover { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.10); border-color: var(--agency-primary-bright, #5eead4); color: var(--agency-primary-bright, #5eead4); } /* Mobile sticky action bar — floats just above the fixed footer-nav. Footer-nav reserves ~64px + safe-area padding; we offset bottom by that amount so both bars stack cleanly. z-35 keeps us under the footer-nav (z-40, so its More dropdown wins) but above page content. */ .ssa-bar { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 35; isolation: isolate; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } /* Toggled by sticky_actions_controller when the desktop CTA stack is in view, so we don't have two CTAs competing for attention. */ .ssa-bar.ssa-hidden { opacity: 0; transform: translateY(8px); } .ssa-bar.ssa-hidden .ssa-bar-inner { pointer-events: none; } .ssa-bar-inner { pointer-events: auto; margin: 0 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); } .dark .ssa-bar-inner { background: #1f2937; border-color: #374151; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } .ssa-icon-btn { flex-shrink: 0; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid #e5e7eb; background: #fff; color: #4b5563; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease; cursor: pointer; } .ssa-icon-btn:hover { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.06); border-color: var(--agency-primary, #003A3A); color: var(--agency-primary, #003A3A); } .ssa-icon-btn:active { transform: scale(0.96); } .dark .ssa-icon-btn { background: #111827; border-color: #374151; color: #d1d5db; } .dark .ssa-icon-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); } .ssa-primary { height: 38px; padding: 0 14px; background: linear-gradient(135deg, var(--agency-primary, #003A3A), var(--agency-primary-mid, #005454)); color: #fff; border: 0; border-radius: 10px; box-shadow: 0 2px 8px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.25); transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: pointer; } .ssa-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.35); } .ssa-primary:active { transform: scale(0.98); } /* Locked state — Starter agency without copy/PDF features. */ .ssa-locked { background: #f3f4f6 !important; color: #9ca3af !important; border-color: #e5e7eb !important; box-shadow: none !important; cursor: not-allowed !important; transform: none !important; } .dark .ssa-locked { background: #111827 !important; color: #6b7280 !important; border-color: #374151 !important; } /* Native for the submit-confirmation modal. Backdrop lives in the browser top-layer so it covers the entire viewport regardless of any stacking-context shenanigans elsewhere. Tailwind preflight resets dialog auto-centering so we re-apply position+inset+margin:auto. */ .qf-confirm-dialog::backdrop { background: rgba(17, 24, 39, 0.6); } .qf-confirm-dialog { border: 0; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); position: fixed; inset: 0; margin: auto; max-height: calc(100vh - 2rem); } .qf-confirm-dialog[open] { animation: qfDialogIn 0.18s ease-out; } @keyframes qfDialogIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ============================================================================ Sidebar (app/views/shared/_sidebar.html.erb) Logo fallback uses agency-primary so the user avatar + missing-logo placeholder reflect the agency's brand colour. Sidebar nav links already drive off `bg-brand-soft / text-brand` via sidebar_menu_link. ========================================================================= */ .sidebar-logo-fallback { background: linear-gradient(135deg, var(--agency-primary, #003A3A), var(--agency-primary-mid, #005454)); box-shadow: 0 2px 4px rgba(var(--agency-primary-rgb, 0, 58, 58), 0.20); } /* ============================================================================ Support Tickets (app/views/support_tickets/*) Message-bubble pair: user bubble is neutral gray, admin bubble is agency-primary tinted to make the support voice feel "branded." ========================================================================= */ /* User message bubble (from the ticket opener) — neutral. */ .st-bubble-user { background: #f9fafb; border: 1px solid #f3f4f6; color: #374151; } .dark .st-bubble-user { background: rgba(255, 255, 255, 0.04); border-color: #374151; color: #e5e7eb; } .st-avatar-user { background: #f3f4f6; color: #6b7280; } .dark .st-avatar-user { background: #374151; color: #d1d5db; } /* Admin/support reply bubble — brand-tinted to signal "this is from us." */ .st-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.18); color: var(--agency-primary, #003A3A); } .dark .st-bubble-admin { 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); } .st-avatar-admin { background: rgba(var(--agency-primary-rgb, 0, 58, 58), 0.12); color: var(--agency-primary, #003A3A); } .dark .st-avatar-admin { background: rgba(var(--agency-primary-bright-rgb, 45, 212, 191), 0.20); color: var(--agency-primary-bright, #5eead4); } /* --- Reduced motion fallback ---------------------------------------- */ @media (prefers-reduced-motion: reduce) { .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, .bd-bar-animate { animation: none !important; opacity: 1 !important; transform: none !important; } .bp-card-lift:hover { transform: none; } }