:root { --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --type-display: 2rem; --type-h1: 1.5rem; --type-h2: 1.25rem; --type-body: 0.9375rem; --type-meta: 0.75rem; --type-line-tight: 1.25; --type-line-title: 1.4; --type-line-body: 1.55; --type-color: #1f2937; --type-muted: #6b7280; } html { font-size: 16px; } body { font-family: var(--font-sans); font-size: var(--type-body); line-height: var(--type-line-body); color: var(--type-color); -webkit-font-smoothing: antialiased; } .type-display, h1.display, .display-6 { font-family: var(--font-sans); font-size: var(--type-display); line-height: var(--type-line-tight); font-weight: 700; letter-spacing: -0.02em; color: var(--type-color); } h1, .h1, .type-h1 { font-family: var(--font-sans); font-size: var(--type-h1); line-height: var(--type-line-tight); font-weight: 700; letter-spacing: -0.015em; color: var(--type-color); } h2, .h2, .type-h2, h3, .h3, h4, .h4, h5, .h5 { font-family: var(--font-sans); font-size: var(--type-h2); line-height: var(--type-line-tight); font-weight: 600; letter-spacing: -0.01em; color: var(--type-color); } h6, .h6 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: var(--type-line-tight); } p, .type-body, .form-control, .form-select, .form-label, .btn, .dropdown-menu, .nav-link, #sidebar a, .table { font-family: var(--font-sans); } .type-meta, small, .small, .text-muted, .form-text, .help-text, .badge, .breadcrumb { font-size: var(--type-meta); line-height: 1.4; } #content h1, #content h2.fw-semibold, #content h2, #main-content h1, #main-content h2.fw-semibold, #main-content h2 { font-size: var(--type-h1); font-weight: 700; line-height: var(--type-line-title); overflow: visible; padding-block: 0.08em; } #content h4, #content h5, #main-content h4, #main-content h5 { font-size: var(--type-h2); } .metric-abbr { border-bottom: 1px dotted rgba(26, 88, 94, 0.35); cursor: help; text-decoration: none; } @media (max-width: 767.98px) { :root { --type-display: 1.75rem; --type-h1: 1.35rem; --type-h2: 1.125rem; } }:root { --brand-primary: #1a585e; --brand-primary-soft: #3faeb2; --brand-primary-tint: #5bc4c7; --brand-primary-bg: #e6f5f5; --brand-primary-border: #b8e4e4; --brand-primary-deep: #134347; --brand-live: #0ea5e9; --brand-live-hover: #0284c7; --brand-live-bg: #e0f2fe; --brand-live-border: #bae6fd; --brand-live-url: var(--brand-live); --brand-live-url-hover: var(--brand-live-hover); --brand-live-url-bg: var(--brand-live-bg); --brand-live-url-border: #7dd3fc; --brand-logo-grey: #76797c; --brand-neutral: #76797c; --brand-neutral-bg: #f1f5f9; --brand-ink: #1e293b; --brand-ink-muted: #697078; --brand-success: #0f766e; --brand-success-bg: #d1fae5; --brand-warning: #b45309; --brand-warning-bg: #fff7ed; --brand-warning-border: #fdba74; --brand-warning-ink: #9a3412; --brand-danger: #dc2626; --brand-danger-bg: #ffffff; --chart-1: #1a585e; --chart-2: #0ea5e9; --chart-3: #3faeb2; --chart-4: #76797c; --chart-5: #b8e4e4; --chart-grid: #e2e8f0; --chart-label: #76797c; --surface-1: #ffffff; --surface-2: #f7fafb; --surface-3: #f1f5f9; --border-subtle: #e2e8f0; --border-default: #e2e8f0; --brand-primary-rgb: 26, 88, 94; --brand-soft-rgb: 63, 174, 178; --brand-live-rgb: 14, 165, 233; --grad-hero: linear-gradient(145deg, #e6f5f5 0%, #f7fafb 40%, #ffffff 100%); --grad-surface: linear-gradient(180deg, #f7fafb 0%, #ffffff 100%); --grad-panel: linear-gradient(160deg, #e6f5f5 0%, #f0faf9 100%); --grad-cta: linear-gradient(160deg, #134347 0%, #1a585e 48%, #3faeb2 100%); --grad-cta-deep: linear-gradient(180deg, #134347 0%, #1a585e 100%); --grad-soft-bar: linear-gradient(90deg, transparent, rgba(63, 174, 178, 0.55), transparent); --grad-wash-page: radial-gradient(1200px 480px at 90% -10%, rgba(14, 165, 233, 0.12), transparent 60%), radial-gradient(900px 420px at -10% 20%, rgba(26, 88, 94, 0.07), transparent 55%), #fbfefe; --grad-wash-hero: radial-gradient(ellipse 58% 52% at 88% 40%, rgba(14, 165, 233, 0.18), transparent 72%), radial-gradient(ellipse 42% 48% at 6% 80%, rgba(26, 88, 94, 0.10), transparent 65%); --hover-overlay: rgba(15, 23, 42, 0.06); --hover-overlay-strong: rgba(15, 23, 42, 0.10); --hover-tint: var(--hover-overlay); --hover-tint-strong: var(--hover-overlay-strong); --focus-ring: rgba(26, 88, 94, 0.35); --motion-fast: 150ms ease; --motion-base: 180ms ease; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-pill: 999px; --radius-icon: 999px; --shadow-dropdown: 0 8px 24px rgba(15, 23, 42, 0.1); --bs-primary: #1a585e; --bs-primary-rgb: 26, 88, 94; --bs-link-color: #1a585e; --bs-link-hover-color: #134347; --bs-focus-ring-color: var(--focus-ring); --bs-info: #3faeb2; --bs-info-rgb: 63, 174, 178; --bs-warning: var(--brand-warning); --bs-warning-rgb: 180, 83, 9; --bs-code-color: #1a585e; } .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-primary-deep); --bs-btn-hover-border-color: var(--brand-primary-deep); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-primary-deep); --bs-btn-active-border-color: var(--brand-primary-deep); transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast); } .btn-outline-primary { --bs-btn-color: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-color: var(--brand-primary); --bs-btn-hover-bg: var(--hover-overlay); --bs-btn-hover-border-color: var(--brand-primary); --bs-btn-active-color: var(--brand-primary); --bs-btn-active-bg: var(--hover-overlay-strong); --bs-btn-active-border-color: var(--brand-primary); transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast); } .bg-primary { background-color: var(--brand-primary) !important; } .text-primary { color: var(--brand-primary) !important; } .border-primary { border-color: var(--brand-primary) !important; } .bg-primary-subtle { background-color: var(--brand-primary-bg) !important; } .text-primary-emphasis { color: var(--brand-primary) !important; } .text-info { color: var(--brand-ink-muted, #697078) !important; } .bg-info { background-color: var(--surface-1) !important; } .bg-info-subtle { background-color: var(--surface-2) !important; } .text-warning { color: var(--brand-danger) !important; } .bg-warning { background-color: var(--surface-1) !important; } .bg-warning-subtle { background-color: var(--surface-1) !important; } .text-bg-warning { color: var(--brand-ink) !important; background-color: var(--surface-1) !important; border: 1px solid var(--border-subtle); } .badge.text-bg-warning { color: var(--brand-ink) !important; background-color: var(--surface-1) !important; border: 1px solid var(--border-subtle); font-weight: 600; } .badge { --bs-badge-color: var(--brand-ink, #1e293b); color: var(--bs-badge-color); } .badge.bg-primary, .badge.bg-success, .badge.bg-danger, .badge.bg-dark, .badge.bg-secondary, .badge.text-bg-primary, .badge.text-bg-success, .badge.text-bg-danger, .badge.text-bg-dark, .badge.text-bg-secondary { --bs-badge-color: #fff; color: #fff !important; } .badge.bg-warning, .badge.bg-info, .badge.bg-light, .badge.bg-warning-subtle, .badge.bg-info-subtle, .badge.text-bg-warning, .badge.text-bg-info, .badge.text-bg-light { --bs-badge-color: var(--brand-ink, #1e293b); color: var(--brand-ink, #1e293b) !important; } .badge.bg-warning, .badge.bg-info { border: 1px solid var(--border-subtle, #e2e8f0); } .toast.bg-warning, .toast.bg-info, .toast.bg-light, .toast.bg-warning-subtle, .toast.bg-info-subtle { color: var(--brand-ink, #1e293b) !important; background-color: var(--surface-1, #ffffff) !important; border: 1px solid var(--border-subtle, #e2e8f0) !important; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12); } .toast.bg-warning .toast-body, .toast.bg-info .toast-body, .toast.bg-light .toast-body, .toast.bg-warning-subtle .toast-body, .toast.bg-info-subtle .toast-body, .toast.bg-warning.text-white, .toast.bg-info.text-white, .toast.bg-light.text-white { color: var(--brand-ink, #1e293b) !important; } .toast.bg-warning .btn-close, .toast.bg-info .btn-close, .toast.bg-light .btn-close, .toast.bg-warning-subtle .btn-close, .toast.bg-info-subtle .btn-close, .toast.bg-warning .btn-close-white, .toast.bg-info .btn-close-white, .toast.bg-light .btn-close-white { filter: none; opacity: 0.7; --bs-btn-close-color: var(--brand-ink, #1e293b); background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231e293b'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707A1 1 0 0 1 .293.293z'/%3e%3c/svg%3e") center/1em auto no-repeat; } .app-toast-icon { flex-shrink: 0; font-size: 1rem; line-height: 1; } .app-toast-message { flex: 1 1 auto; min-width: 0; } .app-toast-action { flex-shrink: 0; } .app-toast-icon.text-brand-warning { color: var(--brand-warning-ink, #9a3412); } .app-toast-icon.text-brand-live { color: var(--brand-live-hover, #0284c7); } .app-toast-icon.text-brand-primary { color: var(--brand-primary, #1a585e); } .app-toast-quiet { background: var(--surface-1, #fff); border-color: var(--brand-primary-border, #b8e4e4) !important; box-shadow: 0 8px 20px rgba(26, 88, 94, 0.08); } .slb-flash-stack { margin: 0 0 1rem; } .slb-flash-stack .slb-flash-soft { background: var(--surface-1, #fff); color: var(--text-1, #0f172a); border: 1px solid var(--brand-primary-border, #b8e4e4); box-shadow: 0 8px 20px rgba(26, 88, 94, 0.06); } .slb-flash-stack .slb-flash-soft .fa-circle-check { color: var(--brand-primary, #1a585e); } .ondemand-table { --ondemand-row-bg: #fff; --ondemand-row-hover: #f3fafb; border-collapse: separate; border-spacing: 0; } .ondemand-table thead th { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-ink-muted, #75787b); background: #f8fbfb; border-bottom: 1px solid var(--brand-primary-border, #b8e4e4); } .ondemand-row { cursor: pointer; } .ondemand-row td { background: var(--ondemand-row-bg); border-bottom: 1px solid #eef4f4; padding: 0.9rem 0.8rem; vertical-align: middle; transition: background-color 160ms ease, box-shadow 160ms ease; } .ondemand-row td:first-child { box-shadow: inset 3px 0 0 transparent; } .ondemand-row:hover td, .ondemand-row:focus-visible td, .ondemand-row.is-open td { background: var(--ondemand-row-hover); } .ondemand-row:hover td:first-child, .ondemand-row:focus-visible td:first-child, .ondemand-row.is-open td:first-child { box-shadow: inset 3px 0 0 var(--brand-primary, #1a585e); } .ondemand-row:focus-visible { outline: none; } .ondemand-site-cell { min-width: 0; } .ondemand-site-head { display: flex; justify-content: flex-end; margin-bottom: 4px; } .ondemand-stack-line { display: flex; align-items: center; gap: 6px; width: 100%; } .ondemand-chip { display: inline; color: #334155; font-weight: 600; line-height: 1.35; } .ondemand-visit { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 999px; color: var(--brand-primary, #1a585e); text-decoration: none; font-size: 11px; } .ondemand-visit:hover, .ondemand-visit:focus-visible { background: var(--brand-primary-bg, #e6f5f5); color: var(--brand-primary, #1a585e); } .ondemand-open-hint { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-ink-muted, #75787b); font-size: 11px; font-weight: 600; } .ondemand-open-hint i { transition: transform 160ms ease; } .ondemand-more { display: inline-flex; align-items: center; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--brand-primary-bg, #e6f5f5); color: var(--brand-primary, #1a585e); font-size: 11px; font-weight: 700; } .ondemand-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--brand-ink-muted, #75787b); line-height: 1; text-decoration: none; } .ondemand-icon-btn:hover, .ondemand-icon-btn:focus-visible { background: var(--brand-primary-bg, #e6f5f5); color: var(--brand-primary, #1a585e); } .ondemand-icon-btn.is-danger:hover, .ondemand-icon-btn.is-danger:focus-visible { background: #fef2f2; color: #dc2626; } .ondemand-row.is-open .ondemand-open-hint i { transform: rotate(180deg); } .ondemand-enter-field { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border: 1px solid #d7e3e3; border-radius: 6px; background: #fff; color: #64748b; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; line-height: 1; } .ondemand-row-hint { font-size: 12px; } .ondemand-phone-row { display: flex; align-items: stretch; gap: 8px; } .ondemand-phone-row .form-control { flex: 1 1 auto; min-width: 0; } .ondemand-dial-wrap { flex: 0 0 8.75rem; z-index: 5; } .ondemand-dial-wrap .single-select-input { height: 100%; } .ondemand-dial-wrap .single-select-value { font-size: 12px; font-weight: 600; color: var(--brand-ink, #1e293b); white-space: nowrap; } .ondemand-dial-wrap .single-select-dropdown { min-width: 16.5rem; z-index: 40; } .toast.bg-success { background-color: var(--brand-success, #0f766e) !important; } .toast.bg-danger { background-color: var(--brand-danger, #dc2626) !important; } .toast.bg-success, .toast.bg-danger, .toast.bg-primary, .toast.bg-dark, .toast.bg-secondary { color: #fff !important; } .toast.bg-success .toast-body, .toast.bg-danger .toast-body, .toast.bg-primary .toast-body, .toast.bg-dark .toast-body, .toast.bg-secondary .toast-body { color: #fff !important; } .alert { border-radius: var(--radius-md); } .alert-warning, .alert-info, .alert-success, .alert-danger { --bs-alert-color: var(--brand-ink); --bs-alert-bg: transparent; --bs-alert-border-color: var(--border-subtle); color: var(--brand-ink); background-color: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .alert-warning .alert-link, .alert-info .alert-link, .alert-success .alert-link, .alert-danger .alert-link { color: var(--brand-primary); font-weight: 600; } .alert-warning > .fa, .alert-warning > .fa-solid, .alert-warning > .fas, .alert-warning .ui-callout__icon, .alert-danger > .fa, .alert-danger > .fa-solid, .alert-danger > .fas { color: var(--brand-danger); } .alert-info > .fa, .alert-info > .fa-solid, .alert-info > .fas { color: var(--brand-ink-muted, #697078); } .alert-success > .fa, .alert-success > .fa-solid, .alert-success > .fas { color: var(--brand-primary); } .ui-callout { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.75rem 0.9rem; margin-bottom: 1rem; background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--brand-ink); font-size: 0.9rem; line-height: 1.45; } .ui-callout--flush { margin-bottom: 0; } .ui-callout--sm { padding: 0.55rem 0.75rem; font-size: 0.82rem; } .ui-callout__icon { flex: 0 0 auto; margin-top: 0.1rem; font-size: 1rem; line-height: 1; } .ui-callout__body { flex: 1 1 auto; min-width: 0; } .ui-callout--attention .ui-callout__icon { color: var(--brand-danger); } .ui-callout--info .ui-callout__icon { color: var(--brand-ink-muted, #697078); } .ui-callout--success .ui-callout__icon { color: var(--brand-primary); } .ui-callout--danger .ui-callout__icon { color: var(--brand-danger); } .ui-callout--banner { align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .ui-callout--banner .ui-callout__main { display: flex; align-items: flex-start; gap: 0.65rem; flex: 1 1 220px; min-width: 0; } code, .ref-code, .ref-code-display, #referenceCode, #refCodeDisplay { color: var(--brand-primary) !important; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 600; letter-spacing: 0.02em; } .ref-code, code.ref-code, code.font-monospace { display: inline-block; padding: 0.15rem 0.45rem; border-radius: var(--radius-sm); background: var(--brand-primary-bg); border: 1px solid var(--brand-primary-border); color: var(--brand-primary) !important; font-size: 0.85em; } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--brand-primary-soft); box-shadow: 0 0 0 0.2rem var(--focus-ring); } .form-check-input:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); } .progress-bar.bg-primary { background-color: var(--brand-primary-soft) !important; } .badge-verified { background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%) !important; color: #0f766e !important; border: 1px solid rgba(15, 118, 110, 0.22) !important; font-weight: 600; letter-spacing: 0.01em; } .badge-new { background: linear-gradient(180deg, #f0fffe 0%, #e6f5f5 100%) !important; color: var(--brand-primary) !important; border: 1px solid var(--brand-primary-border) !important; font-weight: 600; letter-spacing: 0.01em; box-shadow: none !important; } .feature-new-badge { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 7px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; } .payment-brand-logos { display: inline-flex; align-items: center; justify-content: center; gap: 4px; } .payment-brand-logos img { display: block; width: auto; height: 16px; object-fit: contain; } .payment-brand-logos--header img { height: 12px; } .badge-warn, .badge-pending { background: #fff7ed !important; color: #9a3412 !important; border: 1px solid #fdba74 !important; font-weight: 600; } .badge-danger-action { background: #fff !important; color: #dc2626 !important; border: 1px solid #fecaca !important; font-weight: 600; } .badge-neutral { background: #fff !important; color: var(--brand-ink-muted, #697078) !important; border: 1px solid var(--border-subtle) !important; font-weight: 500; } .badge-category { background: #fff !important; color: var(--brand-primary) !important; border: 1px solid var(--brand-primary-border) !important; } .status-rejected, .status-error { background: #fff !important; color: #dc2626 !important; border: 1px solid #fecaca !important; font-weight: 600; } .status-pending, .status-needs-corrections { background: #fff7ed !important; color: #9a3412 !important; border: 1px solid #fdba74 !important; font-weight: 600; } .status-live, .status-approved, .status-paid { background: #fff !important; color: #0f766e !important; border: 1px solid #bbf7d0 !important; font-weight: 600; } .kpi-icon-mist { background: var(--brand-primary-bg) !important; color: var(--brand-primary) !important; border: 1px solid var(--brand-primary-border); } .btn-upload { --bs-btn-color: #fff; --bs-btn-bg: #2563eb; --bs-btn-border-color: #1d4ed8; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1d4ed8; --bs-btn-hover-border-color: #1e40af; --bs-btn-focus-shadow-rgb: 37, 99, 235; --bs-btn-active-color: #fff; --bs-btn-active-bg: #1e40af; --bs-btn-active-border-color: #1e3a8a; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; color: var(--bs-btn-color); background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); font-weight: 600; border-radius: var(--btn-radius-pill, 999px); box-shadow: 0 1px 2px rgba(37, 99, 235, .28); transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast); } .btn-upload:hover, .btn-upload:focus-visible { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); box-shadow: 0 2px 8px rgba(37, 99, 235, .35); } .btn-upload:active, .btn-upload.active { color: var(--bs-btn-active-color); background-color: var(--bs-btn-active-bg); border-color: var(--bs-btn-active-border-color); } .btn-upload:has(.btn-upload__icon) { padding: .4rem 1rem .4rem .4rem; } .btn-upload__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: rgba(255, 255, 255, .2); flex-shrink: 0; } .btn-upload__hint { font-size: .7rem; font-weight: 600; letter-spacing: .02em; padding: .12rem .4rem; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #eff6ff; } .btn-sm.btn-upload:has(.btn-upload__icon) { padding: .25rem .75rem .25rem .25rem; } .btn-sm.btn-upload .btn-upload__icon { width: 1.4rem; height: 1.4rem; font-size: .75rem; } .upload-zone { background: #eff6ff; border: 1px solid #bfdbfe; border-left: 3px solid #60a5fa; border-radius: 0.5rem; padding: 0.85rem 1rem; } .upload-zone .upload-zone-title { margin: 0 0 0.25rem; font-weight: 600; color: #1e3a8a; } .upload-zone .upload-zone-copy { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--brand-ink-muted); } .modal-header.bg-primary, .modal-header.bg-primary.text-white, .modal-header.bg-warning, .modal-header.bg-warning.text-dark, .modal-header.bg-info, .modal-header.bg-info.text-white { background: var(--surface-1) !important; color: var(--brand-ink) !important; border-bottom: 1px solid var(--border-default); } .modal-header.bg-primary .btn-close, .modal-header.bg-primary.text-white .btn-close, .modal-header.bg-warning .btn-close, .modal-header.bg-info .btn-close, .modal-header.bg-info.text-white .btn-close { filter: none; opacity: 0.65; } a.live-url, .live-url, a.library-live-url { color: var(--brand-live-url) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } a.live-url:hover, .live-url:hover, a.library-live-url:hover { color: var(--brand-live-url-hover) !important; } .btn-live-url, a.btn-live-url { --bs-btn-color: var(--brand-live-url); --bs-btn-border-color: var(--brand-live-url-border); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-live-url); --bs-btn-hover-border-color: var(--brand-live-url); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-live-url-hover); --bs-btn-active-border-color: var(--brand-live-url-hover); color: var(--brand-live-url) !important; background: var(--brand-live-url-bg); border: 1px solid var(--brand-live-url-border); font-weight: 600; text-decoration: none !important; } .btn-live-url:hover, a.btn-live-url:hover { color: #fff !important; background: var(--brand-live-url); border-color: var(--brand-live-url); } .text-live { color: var(--brand-live) !important; } .bg-live-soft { background-color: var(--brand-live-bg) !important; } .border-live { border-color: var(--brand-live-border) !important; } .nav-underline-live.active, .nav-link.nav-underline-live.active, .an-tabs a.active { box-shadow: inset 0 -2px 0 var(--brand-live); } .status-dot--pending { --status-dot: var(--brand-logo-grey); } .status-dot--processing, .status-dot--review, .status-dot--live { --status-dot: var(--brand-live); } .status-dot--completed { --status-dot: var(--brand-success); } .status-dot--cancelled { --status-dot: #94a3b8; } .status-dot--failed { --status-dot: var(--brand-danger); }:root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --table-cell-y: 16px; --table-cell-x: 12px; --table-head-y: 14px; --form-field-gap: 12px; --form-group-gap: 28px; --form-group-internal: 12px; } .table.data-table thead th, table.data-table thead th { padding: var(--table-head-y) var(--table-cell-x) !important; } .table.data-table tbody td, table.data-table tbody td { padding: var(--table-cell-y) var(--table-cell-x) !important; } .form-section { margin-bottom: var(--form-group-gap); padding-bottom: var(--space-5); border-bottom: 1px solid #e6ebf1; } .form-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .form-section-title { display: block; margin: 0 0 var(--form-group-internal); font-size: 13px; font-weight: 600; color: #1a585e; letter-spacing: 0.02em; } .form-section .row.g-form { --bs-gutter-y: var(--form-field-gap); --bs-gutter-x: var(--space-4); } .form-section .bg-light.rounded { padding: var(--space-4) !important; } .dash-panel { background: var(--surface-1, #fff); border: 1px solid var(--border-subtle, #e2e8f0); border-radius: var(--radius-lg, 12px); padding: var(--space-5); height: 100%; } .dash-panel--flush { padding: var(--space-4) var(--space-5); } .dash-panel h5, .dash-panel h6 { margin-bottom: var(--space-3); } .publisher-secondary-cta.dash-panel, .dash-panel.publisher-secondary-cta { padding: var(--space-4); } .publisher-secondary-cta .card-body, .publisher-secondary-cta.dash-panel { padding: var(--space-4) !important; } .publisher-secondary-cta p.small { margin-bottom: var(--space-3) !important; }:root { --btn-primary-bg: var(--brand-primary, #1a585e); --btn-primary-hover: var(--brand-primary-deep, #123f42); --btn-secondary-border: #64748b; --btn-secondary-text: #334155; --btn-tertiary-text: var(--brand-primary, #1a585e); --btn-danger-bg: var(--brand-danger, #dc2626); --btn-radius-pill: var(--radius-pill, 999px); --btn-radius-icon: var(--radius-icon, 999px); --hover-overlay: rgba(15, 23, 42, 0.06); --hover-overlay-strong: rgba(15, 23, 42, 0.10); } .btn.shadow-sm, .btn.shadow { box-shadow: none !important; } .btn:disabled, .btn.disabled, fieldset:disabled .btn { --bs-btn-disabled-color: #64748b; --bs-btn-disabled-bg: #eef1f4; --bs-btn-disabled-border-color: #dbe1e7; --bs-btn-disabled-opacity: 1; cursor: not-allowed; box-shadow: none; } .btn.is-loading { position: relative; color: transparent !important; pointer-events: none; cursor: progress; } .btn.is-loading > * { visibility: hidden; } .btn.is-loading:disabled, .btn.is-loading.disabled { --bs-btn-disabled-bg: var(--bs-btn-bg); --bs-btn-disabled-border-color: var(--bs-btn-border-color); --bs-btn-disabled-color: transparent; --bs-btn-disabled-opacity: 1; } .btn.is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; margin: -0.5em 0 0 -0.5em; border: 2px solid currentcolor; border-right-color: transparent; border-radius: 50%; color: #fff; animation: slb-btn-spin 0.6s linear infinite; } .btn-outline-secondary.is-loading::after, .btn-outline-primary.is-loading::after, .btn-cta-tertiary.is-loading::after, .btn-link.is-loading::after, .btn-icon-quiet.is-loading::after { color: var(--brand-primary, #1a585e); } @keyframes slb-btn-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn.is-loading::after { animation-duration: 1.6s; } } .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--btn-primary-bg); --bs-btn-border-color: var(--btn-primary-bg); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--btn-primary-hover); --bs-btn-hover-border-color: var(--btn-primary-hover); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-primary-deep, #123f42); --bs-btn-active-border-color: var(--brand-primary-deep, #123f42); font-weight: 600; border-radius: var(--btn-radius-pill); transition: background-color var(--motion-fast, 150ms ease), border-color var(--motion-fast, 150ms ease), color var(--motion-fast, 150ms ease), box-shadow var(--motion-fast, 150ms ease); } .btn-cta-secondary, .btn-outline-secondary { --bs-btn-color: var(--btn-secondary-text); --bs-btn-border-color: var(--btn-secondary-border); --bs-btn-hover-color: var(--brand-ink, #1e293b); --bs-btn-hover-bg: var(--hover-overlay); --bs-btn-hover-border-color: #94a3b8; --bs-btn-active-color: var(--brand-ink, #1e293b); --bs-btn-active-bg: var(--hover-overlay-strong); --bs-btn-active-border-color: #94a3b8; font-weight: 500; border-radius: var(--btn-radius-pill); transition: background-color var(--motion-fast, 150ms ease), border-color var(--motion-fast, 150ms ease), color var(--motion-fast, 150ms ease); } .btn-cta-tertiary, .btn-link.btn-cta-tertiary { color: var(--btn-tertiary-text); font-weight: 600; text-decoration: none; border: 0; background: transparent; padding-left: 0.5rem; padding-right: 0.5rem; border-radius: var(--radius-sm, 8px); transition: color var(--motion-fast, 150ms ease), background-color var(--motion-fast, 150ms ease); } .btn-cta-tertiary:hover, .btn-link.btn-cta-tertiary:hover { color: var(--brand-primary-deep, #123f42); text-decoration: none; background: var(--hover-overlay); } .btn-danger { --bs-btn-bg: var(--btn-danger-bg); --bs-btn-border-color: var(--btn-danger-bg); --bs-btn-hover-bg: #b91c1c; --bs-btn-hover-border-color: #b91c1c; font-weight: 600; border-radius: var(--btn-radius-pill); } .btn-success { --bs-btn-color: #fff; --bs-btn-bg: var(--brand-success, #0f766e); --bs-btn-border-color: var(--brand-success, #0f766e); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0b5d56; --bs-btn-hover-border-color: #0b5d56; --bs-btn-active-color: #fff; --bs-btn-active-bg: #0b5d56; --bs-btn-active-border-color: #0b5d56; font-weight: 600; border-radius: var(--btn-radius-pill); } .btn-warning { --bs-btn-color: #fff; --bs-btn-bg: var(--brand-warning, #b45309); --bs-btn-border-color: var(--brand-warning, #b45309); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #92400e; --bs-btn-hover-border-color: #92400e; --bs-btn-active-color: #fff; --bs-btn-active-bg: #92400e; --bs-btn-active-border-color: #92400e; font-weight: 600; border-radius: var(--btn-radius-pill); } .btn-icon-quiet { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--btn-radius-icon); background: transparent; color: #64748b; line-height: 1; transition: color var(--motion-fast, 150ms ease), background-color var(--motion-fast, 150ms ease); } .btn-icon-quiet:hover { background: var(--hover-overlay); color: #334155; } .btn-icon-quiet:active { background: var(--hover-overlay-strong); } .btn-icon-quiet.is-active, .btn-icon-quiet.favorite-btn.is-active { color: var(--brand-primary, #1a585e); background: var(--brand-primary-bg, #e6f5f5); } .btn-icon-quiet.favorite-btn.is-active { color: #dc2626; background: #fef2f2; } .btn-icon-quiet.blacklist-btn.is-active { color: #475569; background: var(--hover-overlay-strong); } .btn-icon-quiet.btn-icon-danger:hover, .btn-icon-quiet.btn-delete:hover { background: #fef2f2; color: #dc2626; } .btn-icon-quiet:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(63, 174, 178, 0.25); } .btn-chip, .site-status-filter { border-radius: var(--btn-radius-pill) !important; font-weight: 600; font-size: 13px; padding: 0.35rem 0.85rem; border: 1px solid var(--btn-secondary-border); background: var(--surface-1, #fff); color: var(--btn-secondary-text); transition: background-color var(--motion-fast, 150ms ease), border-color var(--motion-fast, 150ms ease), color var(--motion-fast, 150ms ease), box-shadow var(--motion-fast, 150ms ease); } .btn-chip:hover, .site-status-filter:hover { background: var(--hover-overlay); color: var(--brand-ink, #1e293b); border-color: #94a3b8; } .btn-chip.is-active, .site-status-filter.is-active, .site-status-filter.btn-primary { background: var(--brand-primary, #1a585e) !important; border-color: var(--brand-primary, #1a585e) !important; color: #fff !important; box-shadow: none !important; } .btn-chip.is-active:hover, .site-status-filter.is-active:hover, .site-status-filter.btn-primary:hover { background: var(--brand-primary-deep, #123f42) !important; border-color: var(--brand-primary-deep, #123f42) !important; color: #fff !important; } .site-status-filter .badge { font-weight: 650; font-size: 11px; } .site-status-filter.is-active .badge, .site-status-filter.btn-primary .badge { background: rgba(255, 255, 255, 0.22) !important; color: #fff !important; } .btn.buy-now { min-width: 7.5rem; font-weight: 600; border-radius: var(--btn-radius-pill); box-shadow: none; } .catalog-row-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; } .catalog-row-actions__secondary { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; } .catalog-row-actions-quiet { display: flex; gap: 2px; justify-content: center; opacity: 0.9; } .catalog-row-actions-quiet:hover { opacity: 1; } .btn-claim-site { appearance: none; border: 0; background: transparent; color: var(--brand-ink-muted, #697078); font-size: 11px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.3; padding: 4px 2px; border-radius: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; transition: color var(--motion-hover, 140ms ease); } .btn-claim-site:hover, .btn-claim-site:focus-visible { background: transparent; color: #334155; outline: none; }.form-label .req, .req-mark { color: #dc2626; font-weight: 700; margin-left: 2px; font-size: 0.95em; } .form-control.is-invalid, .form-select.is-invalid, .single-select-input.is-invalid, .multi-select-input.is-invalid { border-color: #dc2626 !important; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12) !important; } .form-control.is-valid, .form-select.is-valid { border-color: #0f766e !important; } .field-error { display: none; margin-top: 4px; font-size: 12px; color: #dc2626; line-height: 1.35; } .field-error.is-visible { display: block; } .filter-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .filter-preset { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid #dbe3e8; border-radius: 999px; background: #fff; color: #475569; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: background-color var(--motion-hover, 140ms ease), border-color var(--motion-hover, 140ms ease), color var(--motion-hover, 140ms ease); } .filter-preset:hover { border-color: #b8e4e4; background: #e6f5f5; color: #1a585e; } .filter-preset.is-active { border-color: #1a585e; background: #1a585e; color: #fff; } .disclosure-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: #1a585e; font-size: 13px; font-weight: 600; cursor: pointer; } .disclosure-toggle:hover { color: #3faeb2; } .disclosure-panel { margin-top: 12px; } .disclosure-panel[hidden] { display: none !important; }:root { --glass-tip-icon: var(--brand-neutral, #75787B); --glass-tip-icon-hover: var(--brand-primary, #1a585e); --glass-tip-bg: #f3f4f6; --glass-tip-border: #e5e7eb; --glass-tip-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); --glass-tip-title: var(--brand-ink, #1f2937); --glass-tip-text: #6b7280; --glass-tip-blur: 6px; } html[data-bs-theme="dark"], body.layout-dark, [data-theme="dark"] { --glass-tip-icon: #94a3b8; --glass-tip-icon-hover: #5eead4; --glass-tip-bg: #1f2937; --glass-tip-border: #374151; --glass-tip-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); --glass-tip-title: #e5e7eb; --glass-tip-text: #9ca3af; } .glass-tip-trigger { display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; background: transparent; color: var(--glass-tip-icon); line-height: 1; cursor: help; vertical-align: middle; border-radius: 999px; transition: color 0.16s ease, opacity 0.16s ease; opacity: 0.72; outline: none; } .glass-tip-trigger:hover, .glass-tip-trigger:focus-visible, .glass-tip-trigger.is-open { color: var(--glass-tip-icon-hover); opacity: 1; } .glass-tip-trigger:focus-visible { box-shadow: 0 0 0 2px rgba(63, 174, 178, 0.22); } .glass-tip-icon { width: 10px; height: 10px; display: block; flex-shrink: 0; pointer-events: none; } .glass-tip-trigger--lg .glass-tip-icon { width: 11px; height: 11px; } [data-glass-tip].site-chip, [data-glass-tip].site-badge-new, .site-chip[data-glass-tip], .site-badge-new[data-glass-tip] { cursor: help; } [data-glass-tip-auto="1"]:not(a):not(button):not(input):not([role="button"]) { cursor: help; } .glass-tip { position: fixed; z-index: var(--shell-z-fab, 1080); max-width: 280px; min-width: 160px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--glass-tip-border); background: var(--glass-tip-bg); backdrop-filter: blur(var(--glass-tip-blur)); -webkit-backdrop-filter: blur(var(--glass-tip-blur)); box-shadow: var(--glass-tip-shadow); color: var(--glass-tip-text); pointer-events: none; opacity: 0; transform: translateY(5px); transition: opacity 0.17s ease, transform 0.17s ease; will-change: opacity, transform; } .glass-tip.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .glass-tip[data-placement="bottom"].is-visible { transform: translateY(0); } .glass-tip:not(.is-visible)[data-placement="bottom"] { transform: translateY(-5px); } .glass-tip-title { display: block; margin: 0 0 3px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--glass-tip-title); line-height: 1.4; } .glass-tip-body { margin: 0; font-size: 12px; font-weight: 400; line-height: 1.55; color: var(--glass-tip-text); } .glass-tip-body:only-child, .glass-tip:not(:has(.glass-tip-title)) .glass-tip-body { margin-top: 0; } .glass-tip-arrow { position: absolute; width: 8px; height: 8px; background: var(--glass-tip-bg); border: 1px solid var(--glass-tip-border); transform: rotate(45deg); pointer-events: none; } .glass-tip[data-placement="top"] .glass-tip-arrow { bottom: -4px; border-top: 0; border-left: 0; } .glass-tip[data-placement="bottom"] .glass-tip-arrow { top: -4px; border-bottom: 0; border-right: 0; } .glass-tip[data-placement="left"] .glass-tip-arrow { right: -4px; border-bottom: 0; border-left: 0; } .glass-tip[data-placement="right"] .glass-tip-arrow { left: -4px; border-top: 0; border-right: 0; } @media (prefers-reduced-motion: reduce) { .glass-tip-trigger, .glass-tip { transition: none !important; } .glass-tip { transform: none !important; } }:root { --slb-ink: #0f172a; --slb-muted: #76797c; --slb-surface: #f3faf9; --slb-surface-2: #ffffff; --slb-line: rgba(26, 88, 94, 0.12); --slb-glow: rgba(14, 165, 233, 0.18); --slb-radius: 16px; --slb-font-display: 'Sora', 'Poppins', system-ui, sans-serif; } body.slb-marketing { color: var(--slb-ink); background: var(--grad-wash-page, radial-gradient(1200px 480px at 90% -10%, rgba(14, 165, 233, 0.12), transparent 60%), radial-gradient(900px 420px at -10% 20%, rgba(26, 88, 94, 0.07), transparent 55%), #fbfefe); } body.slb-marketing h1, body.slb-marketing h2, body.slb-marketing h3, body.slb-marketing .h1, body.slb-marketing .h2, body.slb-marketing .h3 { font-family: var(--slb-font-display); letter-spacing: -0.015em; word-spacing: 0.04em; } #mainNavbar.slb-nav { background: rgba(255, 255, 255, 0.82) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--slb-line); box-shadow: none !important; } #mainNavbar.slb-nav.navbar-scrolled { background: rgba(255, 255, 255, 0.94) !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important; } #mainNavbar.slb-nav .nav-link { font-weight: 500; color: #334155 !important; border-radius: 999px; padding: 0.45rem 0.85rem !important; } #mainNavbar.slb-nav .nav-link:hover { color: var(--brand-primary) !important; background: rgba(26, 88, 94, 0.06) !important; } #mainNavbar.slb-nav .navbar-cta-primary { background: var(--brand-primary) !important; color: #fff !important; border-radius: 999px; font-weight: 600; padding: 0.5rem 1.1rem !important; box-shadow: none; transition: background-color 150ms ease, box-shadow 150ms ease; } #mainNavbar.slb-nav .navbar-cta-primary:hover { background: var(--brand-primary-deep) !important; color: #fff !important; box-shadow: none; } #mainNavbar.slb-nav .navbar-cta-outline { border: 1px solid var(--slb-line); color: var(--brand-primary) !important; border-radius: 999px; font-weight: 600; background: transparent; } #mainNavbar.slb-nav .navbar-cta-outline:hover { border-color: #94a3b8; background: var(--hover-overlay, rgba(15, 23, 42, 0.06)) !important; color: var(--brand-primary) !important; } #mainNavbar.slb-nav .navbar-lang-btn { border-radius: 999px; border-color: var(--slb-line); background: #fff; } #mainNavbar.slb-nav .navbar-lang-menu, #mainNavbar .navbar-lang-menu { min-width: 220px; max-height: min(70vh, 28rem); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } footer.slb-footer { background: var(--grad-panel, linear-gradient(160deg, #e6f5f5 0%, #f0faf9 100%)) !important; border-top: 1px solid var(--slb-line); position: relative; } footer.slb-footer::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--grad-soft-bar, linear-gradient(90deg, transparent, rgba(63, 174, 178, 0.55), transparent)); } footer.slb-footer h5 { font-family: var(--slb-font-display); font-size: 0.95rem; font-weight: 700; color: var(--brand-primary); letter-spacing: -0.02em; } footer.slb-footer a.text-dark { color: #475569 !important; transition: color var(--motion-hover, 140ms ease); } footer.slb-footer a.text-dark:hover { color: var(--brand-primary) !important; } footer.slb-footer .slb-footer-brand img { max-width: min(300px, 100%); height: auto; width: auto; object-fit: contain; background: transparent; } .slb-social-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; } .slb-social-icons__link, .slb-social-icons__link:hover, .slb-social-icons__link:focus, .slb-social-icons__link:focus-visible { display: inline-flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none; } .slb-section { position: relative; padding: clamp(3.5rem, 7vw, 5.5rem) 0; } .slb-section-kicker { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary); margin-bottom: 0.75rem; } .slb-section-title { font-family: var(--slb-font-display); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 700; color: var(--slb-ink); letter-spacing: -0.03em; margin-bottom: 0.75rem; } .slb-section-lead { font-size: 1.05rem; line-height: 1.6; color: var(--slb-muted); max-width: 40rem; margin-left: auto; margin-right: auto; } .slb-features { background: radial-gradient(700px 280px at 10% 0%, rgba(63, 174, 178, 0.12), transparent 70%), var(--slb-surface); } .slb-feature { height: 100%; padding: 1.5rem 1.35rem; border-radius: var(--slb-radius); background: rgba(255, 255, 255, 0.72); border: 1px solid var(--slb-line); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .slb-feature:hover { transform: translateY(-3px); border-color: rgba(26, 88, 94, 0.22); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06); } .slb-feature-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; background: var(--grad-panel, linear-gradient(160deg, #e6f5f5 0%, #f0faf9 100%)); color: var(--brand-primary); border: 1px solid var(--slb-line); font-size: 1.15rem; } .slb-feature h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.65rem; color: var(--slb-ink); } .slb-feature p, .slb-feature li { color: var(--slb-muted); font-size: 0.95rem; line-height: 1.55; } .slb-feature ul { list-style: none; padding: 0; margin: 0.75rem 0 0; } .slb-feature li { position: relative; padding-left: 1.25rem; margin-bottom: 0.4rem; } .slb-feature li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--brand-primary-soft); } .slb-feature--row { background: transparent; border: none; box-shadow: none; padding: 0.5rem 0.75rem; text-align: center; } .slb-feature--row:hover { transform: none; box-shadow: none; border-color: transparent; } .slb-feature--row .slb-feature-icon { margin-left: auto; margin-right: auto; } .slb-feature--row p { margin-bottom: 0; } .slb-pricing { background: radial-gradient(800px 320px at 80% 0%, rgba(63, 174, 178, 0.1), transparent 65%), var(--slb-surface); } .slb-price-from { color: var(--brand-primary, #1a585e); } .pricing-managed { padding: 1.25rem 1.5rem; background: #fff; border: 1px solid var(--slb-line); border-radius: 14px; max-width: 920px; } .pricing-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--slb-line); border-radius: 14px; transition: border-color var(--motion-hover, 140ms ease), box-shadow var(--motion-hover, 140ms ease); } .pricing-card:hover { border-color: rgba(26, 88, 94, 0.22); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06); } .pricing-card--featured { border-color: rgba(26, 88, 94, 0.28); position: relative; } .pricing-card-badge { position: absolute; top: 0; right: 0; padding: 0.35rem 0.85rem; font-size: 0.75rem; font-weight: 600; color: #fff; background: var(--brand-primary, #1a585e); border-bottom-left-radius: 0.5rem; border-top-right-radius: 14px; } .pricing-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; padding-top: 1.75rem; } .pricing-card-price { font-family: var(--slb-font-display, Sora, sans-serif); font-size: 1.65rem; font-weight: 700; color: var(--slb-ink); } .pricing-card-price span { font-size: 0.95rem; font-weight: 500; color: var(--slb-muted); } .slb-testimonial-carousel .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(26, 88, 94, 0.25); border: 0; } .slb-testimonial-carousel .carousel-indicators .active { background-color: var(--brand-primary, #1a585e) !important; } .slb-quote { max-width: 640px; margin: 0 auto 2.5rem; padding: 1.5rem 1rem 2rem; border: 0; } .slb-quote p { font-size: 1.15rem; line-height: 1.6; font-style: italic; color: var(--slb-ink); margin-bottom: 1rem; } .slb-quote cite { display: block; font-style: normal; font-weight: 700; color: var(--slb-ink); } .slb-quote footer span { display: block; font-size: 0.9rem; color: var(--slb-muted); } .slb-carousel-btn { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--slb-line); color: var(--brand-primary, #1a585e); font-size: 0.85rem; } .slb-testimonial-carousel .carousel-control-prev, .slb-testimonial-carousel .carousel-control-next { width: 48px; opacity: 1; } .slb-newsletter { background: var(--slb-surface); } .slb-newsletter-panel { background: #fff; border: 1px solid var(--slb-line); border-radius: 16px; padding: clamp(1.25rem, 3vw, 2rem); } .slb-bottom-cta { background: linear-gradient(180deg, #ffffff 0%, #f7fafb 55%, #e6f5f5 100%); padding: clamp(3rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--slb-line, #e2e8f0); } .slb-bottom-cta-title { font-family: var(--slb-font-display, Sora, sans-serif); font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1.25rem; color: var(--slb-ink, #1e293b); } .slb-bottom-cta-btn { color: #fff !important; } @media (prefers-reduced-motion: reduce) { .pricing-card { transition: none; } } .slb-how { background: linear-gradient(180deg, #ffffff 0%, #f7fcfb 100%); } @media (prefers-reduced-motion: no-preference) { .slb-reveal { animation: slbReveal 0.55s ease-out both; } } @keyframes slbReveal { from { opacity: 0; } to { opacity: 1; } } .slb-section, .slb-features, .slb-how, .slb-reveal { overflow: visible; } .slb-section[id], #marketplace-value, #how-it-works { scroll-margin-top: 6rem; } .publisher-card { border: 1px solid var(--border-subtle, #e2e8f0); border-radius: var(--radius-md, 12px); background: var(--surface-1, #fff); padding: 1rem 1.1rem; } .publisher-steps, .publisher-list { margin: 0; padding-left: 1.25rem; } .publisher-steps > li, .publisher-list > li { margin-bottom: 0.85rem; line-height: 1.6; } .publisher-steps > li::marker, .publisher-list > li::marker { color: var(--brand-primary, #1a585e); font-weight: 600; } .publisher-steps > li:last-child, .publisher-list > li:last-child { margin-bottom: 0; }html { scroll-behavior: smooth; scroll-padding-top: var(--public-navbar-height, var(--shell-topbar-height, 88px)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .skip-to-content { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 10000; background: var(--brand-primary, #1a585e); color: #fff; font-weight: 600; font-size: 0.9rem; text-decoration: none; border-radius: 8px; padding: 12px 16px; box-shadow: 0 0 0 0.2rem var(--focus-ring, rgba(63, 174, 178, 0.35)); } .skip-to-content:focus, .skip-to-content:focus-visible { position: fixed; left: 16px; top: 16px; width: auto; height: auto; overflow: visible; outline: 2px solid #fff; outline-offset: 2px; color: #fff; } .dropdown-menu, .slb-dropdown { border: 1px solid var(--border-subtle, #e2e8f0); border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-dropdown, 0 8px 24px rgba(15, 23, 42, 0.1)); padding: 6px; overflow: hidden; } .dropdown-menu .dropdown-item, .slb-dropdown .dropdown-item { display: flex; align-items: center; gap: 8px; border-radius: var(--radius-sm, 8px); padding: 8px 12px; font-size: 0.9rem; color: #334155; transition: background-color var(--motion-fast, 150ms ease), color var(--motion-fast, 150ms ease); } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .slb-dropdown .dropdown-item:hover, .slb-dropdown .dropdown-item:focus { background: var(--hover-overlay, rgba(15, 23, 42, 0.06)); color: var(--brand-ink, #1e293b); } .dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active { background: var(--brand-primary-bg, #e6f5f5); color: var(--brand-primary, #1a585e); } .dropdown-divider { margin: 6px 0; border-top-color: var(--border-subtle, #e2e8f0); } .table > :not(caption) > * > * { vertical-align: middle; } .table-hover > tbody > tr { transition: background-color var(--motion-fast, 150ms ease); } .table-hover > tbody > tr:hover > * { background-color: var(--surface-2, #f7fafb); --bs-table-bg-state: var(--surface-2, #f7fafb); } a:not(.btn):not(.dropdown-item):not(#sidebar a):not(.nav-link) { transition: color var(--motion-fast, 150ms ease); } .card { border-color: var(--border-subtle, #e2e8f0); border-radius: var(--radius-lg, 12px); } .card.shadow-sm { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important; } .modal-content { border: 1px solid var(--border-subtle, #e2e8f0); border-radius: var(--radius-lg, 12px); overflow: hidden; } .modal-header.bg-primary, .modal-header.bg-primary.text-white { background: var(--surface-1, #fff) !important; color: var(--brand-ink, #1e293b) !important; border-bottom: 1px solid var(--border-subtle, #e2e8f0); } .modal-header.bg-primary .btn-close, .modal-header.bg-primary.text-white .btn-close { filter: none; opacity: 0.65; } .form-control, .form-select { border-radius: var(--radius-sm, 8px); border-color: var(--border-subtle, #e2e8f0); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); } .alert { border-radius: var(--radius-md, 10px); } .slb-text-break { overflow-wrap: anywhere; word-break: break-word; } .catalog-site-url, .url-full, .blog-content a, .blog-content p, .company-details p, .table td .text-break, .dropdown-menu .dropdown-item small.text-muted { overflow-wrap: anywhere; word-break: break-word; } .blog-content img, .blog-content figure { max-width: 100%; height: auto; } .blog-content table { display: block; width: 100%; max-width: 100%; overflow-x: auto; } body.role-shell-advertiser, body.role-shell-publisher, body.role-shell-admin, body.role-shell-marketing { overflow-x: clip; } .slb-toast-stack { position: fixed; right: 0; bottom: 0; padding: 1rem; padding-bottom: 84px; z-index: var(--shell-z-toast, 10000); pointer-events: none; } .slb-toast-stack > * { pointer-events: auto; } @media (max-width: 575.98px) { .slb-toast-stack { left: 0; padding: 0.75rem; padding-bottom: 76px; } }:root { --dialog-radius: var(--radius-lg, 12px); --dialog-btn-radius: var(--radius-pill, 999px); } .swal2-container .swal2-popup { border-radius: var(--dialog-radius); font-family: var(--font-sans, system-ui, sans-serif); padding: 1.75rem 1.5rem 1.5rem; box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18); } .swal2-container .swal2-title { font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--type-h2, 1.25rem); font-weight: 600; line-height: var(--type-line-tight, 1.25); color: var(--brand-ink, #1e293b); } .swal2-container .swal2-html-container { font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--type-body, 0.9375rem); line-height: var(--type-line-body, 1.55); color: var(--brand-ink-muted, #697078); } .swal2-container .swal2-actions { gap: 0.5rem; margin-top: 1.25rem; } .swal2-container .swal2-popup .swal2-styled { border-radius: var(--dialog-btn-radius); font-family: var(--font-sans, system-ui, sans-serif); font-weight: 600; font-size: 0.9rem; padding: 0.5rem 1.25rem; margin: 0; box-shadow: none; transition: background-color var(--motion-hover, 140ms ease), border-color var(--motion-hover, 140ms ease), color var(--motion-hover, 140ms ease); } .swal2-container .swal2-popup .swal2-styled.swal2-confirm { background-color: var(--brand-primary, #1a585e); border: 1px solid var(--brand-primary, #1a585e); color: #fff; } .swal2-container .swal2-popup .swal2-styled.swal2-cancel { background-color: transparent; border: 1px solid var(--btn-secondary-border, #64748b); color: var(--btn-secondary-text, #334155); } .swal2-container .swal2-popup .swal2-styled.swal2-deny, .swal2-container .swal2-popup .swal2-styled.slb-swal-danger { background-color: var(--brand-danger, #dc2626); border: 1px solid var(--brand-danger, #dc2626); color: #fff; } .swal2-container .swal2-popup .swal2-styled.slb-swal-muted { background-color: var(--brand-neutral, #76797c); border: 1px solid var(--brand-neutral, #76797c); color: #fff; } @media (hover: hover) and (pointer: fine) { .swal2-container .swal2-popup .swal2-styled.swal2-confirm:hover { background-color: var(--brand-primary-deep, #123f42); border-color: var(--brand-primary-deep, #123f42); } .swal2-container .swal2-popup .swal2-styled.swal2-cancel:hover { background-color: var(--hover-2, rgba(15, 23, 42, 0.075)); border-color: #94a3b8; color: var(--hover-ink, #0f172a); } .swal2-container .swal2-popup .swal2-styled.swal2-deny:hover, .swal2-container .swal2-popup .swal2-styled.slb-swal-danger:hover { background-color: #b91c1c; border-color: #b91c1c; } .swal2-container .swal2-popup .swal2-styled.slb-swal-muted:hover { background-color: #5f6265; border-color: #5f6265; } } .swal2-container .swal2-popup .swal2-styled:focus, .swal2-container .swal2-popup .swal2-styled:focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-width, 3px) var(--focus-ring, rgba(26, 88, 94, 0.35)); } .swal2-container .swal2-icon.swal2-question { border-color: var(--brand-primary-soft, #3faeb2); color: var(--brand-primary, #1a585e); } .swal2-container .swal2-icon.swal2-warning { border-color: var(--brand-warning-border, #fdba74); color: var(--brand-warning, #b45309); } .swal2-container .swal2-icon.swal2-error { border-color: var(--brand-danger, #dc2626); color: var(--brand-danger, #dc2626); } .swal2-container .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--brand-danger, #dc2626); } .swal2-container .swal2-icon.swal2-success { border-color: var(--brand-success, #0f766e); color: var(--brand-success, #0f766e); } .swal2-container .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--brand-success, #0f766e); } .swal2-container .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(15, 118, 110, 0.3); } .swal2-container .swal2-icon.swal2-info { border-color: var(--brand-primary-soft, #3faeb2); color: var(--brand-primary, #1a585e); } .swal2-container.swal2-top-end .swal2-popup.swal2-toast { border-radius: var(--radius-md, 10px); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); border: 1px solid var(--border-subtle, #e2e8f0); } .swal2-container .swal2-popup.swal2-toast .swal2-title { font-size: 0.875rem; font-weight: 600; } .swal2-container .swal2-popup.swal2-toast .swal2-timer-progress-bar { background: var(--brand-primary-soft, #3faeb2); } .swal2-container .swal2-popup .swal2-input, .swal2-container .swal2-popup .swal2-textarea, .swal2-container .swal2-popup .swal2-select { border-radius: var(--radius-sm, 8px); border: 1px solid var(--border-default, #e2e8f0); font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--type-body, 0.9375rem); box-shadow: none; } .swal2-container .swal2-popup .swal2-input:focus, .swal2-container .swal2-popup .swal2-textarea:focus, .swal2-container .swal2-popup .swal2-select:focus { border-color: var(--brand-primary-soft, #3faeb2); box-shadow: 0 0 0 var(--focus-ring-width, 3px) var(--focus-ring, rgba(26, 88, 94, 0.35)); } .swal2-container .swal2-popup .swal2-validation-message { border-radius: var(--radius-sm, 8px); background: var(--brand-warning-bg, #fff7ed); color: var(--brand-warning-ink, #9a3412); font-family: var(--font-sans, system-ui, sans-serif); } @media (prefers-reduced-motion: reduce) { .swal2-container .swal2-popup, .swal2-container .swal2-popup .swal2-styled { animation: none !important; transition: none; } }.slb-search-wrap { position: relative; } .slb-search-wrap > input[type="search"], .slb-search-wrap > input.form-control { padding-right: 2rem; } .slb-search-wrap > input[type="search"]::-webkit-search-decoration, .slb-search-wrap > input[type="search"]::-webkit-search-cancel-button, .slb-search-wrap > input[type="search"]::-webkit-search-results-button, .slb-search-wrap > input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; } .slb-search-clear { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: #94a3b8; text-decoration: none; line-height: 1; padding: 0.25rem 0.45rem; z-index: 2; } .slb-search-clear:hover, .slb-search-clear:focus-visible { color: var(--brand-primary, #1a585e); } .slb-search-clear.d-none, .slb-search-clear[hidden] { display: none !important; } .slb-search-status { min-height: 1.15em; margin-top: .15rem; } .slb-search-status:empty { min-height: 0; height: 0; margin: 0; overflow: hidden; }:root { --hover-1: rgba(15, 23, 42, 0.045); --hover-2: rgba(15, 23, 42, 0.075); --hover-3: rgba(15, 23, 42, 0.11); --hover-ink: #0f172a; --hover-overlay: var(--hover-2); --hover-overlay-strong: var(--hover-3); --hover-tint: var(--hover-2); --hover-tint-strong: var(--hover-3); --elevation-hover: 0 4px 14px rgba(15, 23, 42, 0.10); --motion-hover: 140ms ease; --focus-ring-width: 3px; } .btn, .btn-chip, .btn-icon-quiet, .site-status-filter, .topbar-icon-btn, .nc-bell-btn, .nc-item, .nc-filter, .nc-link-btn, .dropdown-item, .balance-block, .role-switch-btn, #sidebar a, .table-hover > tbody > tr, .site-chip { transition-property: background-color, border-color, color, box-shadow; transition-duration: var(--motion-hover); transition-timing-function: ease; } @media (hover: hover) and (pointer: fine) { .table-hover > tbody > tr:hover > *, .table tbody tr.site-row:hover > *, .table tbody tr[class*='expanded-row']:hover > * { background-color: var(--hover-1); } .nc-item:hover, .af-activity-item:hover, .dropdown-item:hover, .dropdown-menu .dropdown-item:hover { background-color: var(--hover-1); color: var(--hover-ink); } #sidebar a:hover, .topbar-icon-btn:hover, .btn-icon-quiet:hover, .nc-bell-btn:hover, .nc-link-btn:hover, .btn-chip:hover, .site-status-filter:hover { background-color: var(--hover-2); } .btn-primary:hover, .buy-now:hover { background-color: var(--brand-primary-deep, #123f42); border-color: var(--brand-primary-deep, #123f42); } .btn-danger:hover { background-color: #b91c1c; border-color: #b91c1c; } .dash-panel:hover, .stat-card:hover, .site-card:hover { box-shadow: var(--elevation-hover); } a:not(.btn):not(.dropdown-item):not(.nc-item):not(.nav-link):not(#sidebar a):not(.glass-tip-trigger):not(.slb-social-icons__link):hover { text-decoration: underline; } .site-chip:not([data-glass-tip]):hover { transform: none; box-shadow: none; } } .table-hover > tbody > tr:active > *, .nc-item:active, .af-activity-item:active, #sidebar a:active, .topbar-icon-btn:active, .btn-icon-quiet:active, .nc-bell-btn:active, .btn-chip:active, .site-status-filter:active { background-color: var(--hover-3); } .btn:focus-visible, .btn-chip:focus-visible, .btn-icon-quiet:focus-visible, .btn-cta-tertiary:focus-visible, .btn-claim-site:focus-visible, .btn-live-url:focus-visible, .site-status-filter:focus-visible, .filter-preset:focus-visible, .disclosure-toggle:focus-visible, .auth-secondary-btn:focus-visible, .navbar-cta-primary:focus-visible, .navbar-cta-outline:focus-visible, .nc-item:focus-visible, .nc-filter:focus-visible, .nc-link-btn:focus-visible, .nc-tool:focus-visible, .nc-bell-btn:focus-visible, .topbar-icon-btn:focus-visible, .balance-block:focus-visible, .role-switch-btn:focus-visible, #sidebar a:focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring); } .btn-primary:focus-visible, .btn-danger:focus-visible, .btn-upload:focus-visible, .btn-chip.is-active:focus-visible, .site-status-filter.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring), 0 0 0 1px #fff inset; } @media (prefers-reduced-motion: reduce) { .btn, .btn-chip, .btn-icon-quiet, .site-status-filter, .topbar-icon-btn, .nc-bell-btn, .nc-item, .dropdown-item, .balance-block, #sidebar a, .table-hover > tbody > tr, .site-chip { transition: none; } }