/* * FunnelFusion theme — AdFusion-style design tokens overlaid on Bootstrap 5.3. * * Loaded after Bootstrap so the :root and .* overrides win the cascade. * Three concerns: * 1. Design tokens (color palette, typography, radii) * 2. App shell (fixed sidebar + sticky topbar) * 3. Component refinements (cards, tonal badges, nav-link state) * * Pages opt in to the shell via . Auth pages keep * the default body and render edge-to-edge. */ /* EEC-246 — Alpine x-cloak, applied globally so any page using Alpine can * hide pre-mount markup (e.g. clear-search buttons) without an inline rule. * Previously this lived only in product/detail.html, so x-cloak was a no-op * on /routing-groups and the clear-"x" flashed on load. */ [x-cloak] { display: none !important; } /* --------------------------------------------------------------- */ /* 1. Design tokens */ /* --------------------------------------------------------------- */ :root { /* Brand palette (AFT) */ --ff-indigo-50: #eef2ff; --ff-indigo-100: #e0e7ff; --ff-indigo-500: #6366f1; --ff-indigo-600: #4f46e5; --ff-indigo-700: #4338ca; --ff-emerald-50: #ecfdf5; --ff-emerald-100: #d1fae5; --ff-emerald-500: #10b981; --ff-emerald-600: #059669; --ff-emerald-700: #047857; --ff-rose-50: #fff1f2; --ff-rose-100: #ffe4e6; --ff-rose-600: #e11d48; --ff-rose-700: #be123c; --ff-amber-50: #fffbeb; --ff-amber-100: #fef3c7; --ff-amber-700: #b45309; --ff-sky-50: #f0f9ff; --ff-sky-100: #e0f2fe; --ff-sky-700: #0369a1; --ff-violet-50: #f5f3ff; --ff-violet-100: #ede9fe; --ff-violet-700: #6d28d9; --ff-slate-50: #f8fafc; --ff-slate-100: #f1f5f9; --ff-slate-200: #e2e8f0; --ff-slate-300: #cbd5e1; --ff-slate-400: #94a3b8; --ff-slate-500: #64748b; --ff-slate-600: #475569; --ff-slate-700: #334155; --ff-slate-800: #1e293b; --ff-slate-900: #0f172a; --ff-sidebar-w: 16rem; --ff-topbar-h: 3.75rem; /* Bootstrap variable overrides */ --bs-body-bg: var(--ff-slate-50); --bs-body-color: var(--ff-slate-900); --bs-body-color-rgb: 15, 23, 42; --bs-secondary-color: var(--ff-slate-500); --bs-tertiary-color: var(--ff-slate-400); --bs-border-color: var(--ff-slate-200); --bs-border-radius: .5rem; --bs-border-radius-sm: .375rem; --bs-border-radius-lg: .75rem; /* rounded-xl in AFT */ --bs-border-radius-xl: 1rem; --bs-primary: var(--ff-indigo-600); --bs-primary-rgb: 79, 70, 229; --bs-link-color: var(--ff-indigo-600); --bs-link-color-rgb: 79, 70, 229; --bs-link-hover-color: var(--ff-indigo-700); --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --bs-body-font-family: var(--bs-font-sans-serif); } html, body { font-family: var(--bs-font-sans-serif); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--bs-body-bg); color: var(--bs-body-color); } /* Bootstrap recolours that need help with the override above */ .btn-primary { --bs-btn-bg: var(--ff-indigo-600); --bs-btn-border-color: var(--ff-indigo-600); --bs-btn-hover-bg: var(--ff-indigo-700); --bs-btn-hover-border-color: var(--ff-indigo-700); --bs-btn-active-bg: var(--ff-indigo-700); --bs-btn-active-border-color: var(--ff-indigo-700); --bs-btn-disabled-bg: var(--ff-indigo-600); --bs-btn-disabled-border-color: var(--ff-indigo-600); } .btn-outline-primary { --bs-btn-color: var(--ff-indigo-600); --bs-btn-border-color: var(--ff-indigo-600); --bs-btn-hover-bg: var(--ff-indigo-600); --bs-btn-hover-border-color: var(--ff-indigo-600); --bs-btn-active-bg: var(--ff-indigo-700); --bs-btn-active-border-color: var(--ff-indigo-700); } a { text-decoration: none; } a:hover { text-decoration: underline; } /* --------------------------------------------------------------- */ /* 2. App shell — sidebar + topbar */ /* --------------------------------------------------------------- */ body.ff-app { min-height: 100vh; padding-left: 0; padding-top: var(--ff-topbar-h); } @media (min-width: 992px) { body.ff-app { padding-left: var(--ff-sidebar-w); } } .ff-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--ff-sidebar-w); background: #fff; border-right: 1px solid var(--ff-slate-200); display: flex; flex-direction: column; z-index: 1040; transform: translateX(-100%); transition: transform .2s ease; } @media (min-width: 992px) { .ff-sidebar { transform: none; } } .ff-sidebar.is-open { transform: translateX(0); } .ff-sidebar-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 1030; display: none; } .ff-sidebar.is-open + .ff-sidebar-backdrop { display: block; } @media (min-width: 992px) { .ff-sidebar-backdrop { display: none !important; } } .ff-brand { display: flex; align-items: center; gap: .625rem; padding: 1rem 1.25rem; font-weight: 700; color: var(--ff-slate-900); font-size: 1.05rem; letter-spacing: -0.01em; border-bottom: 1px solid var(--ff-slate-200); } .ff-brand:hover { color: var(--ff-slate-900); text-decoration: none; } .ff-brand-mark { width: 2rem; height: 2rem; border-radius: .625rem; background: linear-gradient(135deg, var(--ff-indigo-500), var(--ff-emerald-500)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; box-shadow: 0 2px 6px rgba(79, 70, 229, .25); } .ff-nav { list-style: none; margin: 0; padding: 1rem .75rem; display: flex; flex-direction: column; gap: .125rem; flex: 1 1 auto; overflow-y: auto; } .ff-nav-link { display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; border-radius: .5rem; color: var(--ff-slate-600); font-size: .875rem; font-weight: 500; line-height: 1.25rem; } .ff-nav-link:hover { color: var(--ff-slate-900); background: var(--ff-slate-100); text-decoration: none; } .ff-nav-link.is-active { color: var(--ff-indigo-700); background: var(--ff-indigo-50); } .ff-nav-link i { font-size: 1.05rem; } .ff-nav-section { padding: 1rem .75rem .25rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ff-slate-400); font-weight: 600; } .ff-sidebar-footer { padding: .75rem; border-top: 1px solid var(--ff-slate-200); } /* Workspace selector lives in the sidebar footer. The dropdown menu has to flip up because the trigger sits at the bottom of the sidebar. */ .ff-workspace-trigger { width: 100%; display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; border-radius: .5rem; border: 1px solid var(--ff-slate-200); background: #fff; color: var(--ff-slate-700); font-size: .875rem; text-align: left; cursor: pointer; } .ff-workspace-trigger:hover { background: var(--ff-slate-50); } .ff-workspace-trigger .ff-workspace-mark { width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: var(--ff-indigo-50); color: var(--ff-indigo-700); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .8rem; flex-shrink: 0; } .ff-workspace-trigger .ff-workspace-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ff-slate-900); } .ff-workspace-trigger .ff-workspace-caret { color: var(--ff-slate-400); font-size: .75rem; } .ff-topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--ff-topbar-h); background: #fff; border-bottom: 1px solid var(--ff-slate-200); display: flex; align-items: center; gap: .75rem; padding: 0 1rem; z-index: 1020; } @media (min-width: 992px) { .ff-topbar { left: var(--ff-sidebar-w); } } .ff-topbar-toggle { background: transparent; border: 0; width: 2.25rem; height: 2.25rem; border-radius: .5rem; color: var(--ff-slate-600); font-size: 1.15rem; display: inline-flex; align-items: center; justify-content: center; } .ff-topbar-toggle:hover { background: var(--ff-slate-100); color: var(--ff-slate-900); } @media (min-width: 992px) { .ff-topbar-toggle { display: none; } } .ff-search { flex: 1 1 auto; max-width: 32rem; position: relative; } .ff-search input { width: 100%; height: 2.25rem; padding: 0 .75rem 0 2.25rem; border-radius: .5rem; border: 1px solid var(--ff-slate-200); background: var(--ff-slate-50); font-size: .875rem; color: var(--ff-slate-900); } .ff-search input::placeholder { color: var(--ff-slate-400); } .ff-search input:focus { outline: none; border-color: var(--ff-indigo-500); box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); background: #fff; } .ff-search .bi { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--ff-slate-400); font-size: .95rem; } .ff-topbar-spacer { flex: 1 1 auto; } .ff-user-trigger { background: transparent; border: 0; padding: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ff-indigo-50); color: var(--ff-indigo-700); font-weight: 600; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; } .ff-user-trigger:hover { background: var(--ff-indigo-100); } .ff-user-menu .dropdown-header { padding: .5rem 1rem .25rem; color: var(--ff-slate-500); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .ff-user-menu .dropdown-item-text { color: var(--ff-slate-900); font-weight: 500; padding: .25rem 1rem .5rem; font-size: .85rem; } /* EEC-196 — notification bell + dropdown */ .ff-notifications { margin-right: .25rem; } .ff-notification-trigger { position: relative; background: transparent; border: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--ff-slate-600); font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; } .ff-notification-trigger:hover { background: var(--ff-slate-100); color: var(--ff-slate-900); } .ff-notification-badge { position: absolute; top: .15rem; right: .1rem; min-width: 1rem; height: 1rem; padding: 0 .2rem; border-radius: 999px; background: var(--ff-rose-600, #e11d48); color: #fff; font-size: .6rem; font-weight: 700; line-height: 1rem; text-align: center; } .ff-notification-menu { width: 22rem; max-height: 26rem; overflow-y: auto; padding: 0; } .ff-notification-menu .dropdown-header { padding: .6rem 1rem; color: var(--ff-slate-500); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--ff-slate-100); } .ff-notification-item { display: flex; align-items: flex-start; gap: .5rem; padding: .6rem 1rem; border-bottom: 1px solid var(--ff-slate-100); } .ff-notification-item:last-child { border-bottom: 0; } .ff-notification-item:hover { background: var(--ff-slate-50); } .ff-notification-link { display: flex; align-items: flex-start; gap: .5rem; flex: 1 1 auto; text-decoration: none; color: inherit; min-width: 0; } .ff-notification-text { display: flex; flex-direction: column; min-width: 0; } .ff-notification-title { font-weight: 600; font-size: .82rem; color: var(--ff-slate-900); } .ff-notification-body { font-size: .78rem; color: var(--ff-slate-600); overflow: hidden; text-overflow: ellipsis; } .ff-notification-dismiss { background: transparent; border: 0; color: var(--ff-slate-400); line-height: 1; padding: 0 .15rem; } .ff-notification-dismiss:hover { color: var(--ff-slate-700); } /* --------------------------------------------------------------- */ /* 3. Component refinements */ /* --------------------------------------------------------------- */ .card { border: 1px solid var(--ff-slate-200); border-radius: var(--bs-border-radius-lg); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } .card-header { background: #fff; border-bottom: 1px solid var(--ff-slate-200); font-weight: 600; } /* Tonal "soft" badges — match AFT's bg-X-50 + text-X-700 pattern. */ .badge-soft { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1; } .badge-soft-indigo { background: var(--ff-indigo-50); color: var(--ff-indigo-700); } .badge-soft-emerald { background: var(--ff-emerald-50); color: var(--ff-emerald-700); } .badge-soft-rose { background: var(--ff-rose-50); color: var(--ff-rose-700); } .badge-soft-amber { background: var(--ff-amber-50); color: var(--ff-amber-700); } .badge-soft-sky { background: var(--ff-sky-50); color: var(--ff-sky-700); } .badge-soft-violet { background: var(--ff-violet-50); color: var(--ff-violet-700); } .badge-soft-slate { background: var(--ff-slate-100); color: var(--ff-slate-700); } /* Tables: AFT uses uppercase muted column heads, no top border, hover tint. */ .table { --bs-table-hover-bg: var(--ff-slate-50); color: var(--ff-slate-700); } .table thead th { border-top: 0; border-bottom: 1px solid var(--ff-slate-200); color: var(--ff-slate-500); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: .75rem; padding-bottom: .75rem; } .table tbody td { vertical-align: middle; padding-top: .75rem; padding-bottom: .75rem; border-color: var(--ff-slate-100); } .form-control, .form-select { border-color: var(--ff-slate-200); border-radius: .5rem; } .form-control:focus, .form-select:focus { border-color: var(--ff-indigo-500); box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); } .form-label { font-weight: 500; color: var(--ff-slate-700); font-size: .85rem; } .btn { border-radius: .5rem; font-weight: 500; } .btn-sm { font-size: .8rem; } /* --------------------------------------------------------------- */ /* 4. Auth pages — split-screen (login / register) */ /* --------------------------------------------------------------- */ .ff-auth { min-height: 100vh; display: grid; grid-template-columns: 1fr; } @media (min-width: 992px) { .ff-auth { grid-template-columns: 1fr 1fr; } } .ff-auth-hero { display: none; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--ff-indigo-600) 0%, var(--ff-indigo-700) 50%, var(--ff-emerald-600) 100%); color: #fff; padding: 3rem; flex-direction: column; justify-content: space-between; } @media (min-width: 992px) { .ff-auth-hero { display: flex; } } /* Decorative blur orbs, like AFT. */ .ff-auth-hero::before, .ff-auth-hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(64px); z-index: 0; } .ff-auth-hero::before { top: -6rem; right: -6rem; width: 24rem; height: 24rem; background: rgba(255, 255, 255, .1); } .ff-auth-hero::after { bottom: -6rem; left: -6rem; width: 20rem; height: 20rem; background: rgba(52, 211, 153, .25); } .ff-auth-hero > * { position: relative; z-index: 1; } .ff-auth-brand { display: flex; align-items: center; gap: .625rem; font-weight: 600; font-size: 1.125rem; } .ff-auth-brand .ff-brand-mark { width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: rgba(255, 255, 255, .15); backdrop-filter: blur(8px); box-shadow: none; color: #fff; font-size: 1.15rem; } .ff-auth-hero h1 { font-size: 2.25rem; font-weight: 700; line-height: 1.15; max-width: 28rem; margin-bottom: 1.25rem; } .ff-auth-hero .ff-auth-lead { color: rgba(224, 231, 255, .95); max-width: 28rem; font-size: 1rem; margin-bottom: 1.75rem; } .ff-auth-hero ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; max-width: 28rem; color: rgba(238, 242, 255, .95); font-size: .9rem; } .ff-auth-hero li { display: flex; align-items: flex-start; gap: .625rem; } .ff-auth-hero li i { font-size: 1.1rem; line-height: 1.25rem; flex-shrink: 0; margin-top: .1rem; } .ff-auth-hero li i.ff-check { color: #6ee7b7; } .ff-auth-hero li i.ff-spark { color: #fcd34d; } .ff-auth-hero li i.ff-shield { color: #6ee7b7; } .ff-auth-hero-footer { font-size: .75rem; color: rgba(199, 210, 254, .8); } .ff-auth-pane { display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--ff-slate-50); } @media (min-width: 576px) { .ff-auth-pane { padding: 2.5rem; } } .ff-auth-card { width: 100%; max-width: 28rem; background: #fff; border: 1px solid var(--ff-slate-200); border-radius: 1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); padding: 2rem; animation: ff-fade-up .4s ease-out; } @media (min-width: 576px) { .ff-auth-card { padding: 2.25rem; } } @keyframes ff-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .ff-auth-mobile-brand { display: flex; align-items: center; gap: .625rem; margin-bottom: 1.5rem; font-weight: 600; font-size: 1.125rem; color: var(--ff-slate-900); } @media (min-width: 992px) { .ff-auth-mobile-brand { display: none; } } .ff-auth-card h2 { font-size: 1.5rem; font-weight: 600; color: var(--ff-slate-900); margin: 0; } .ff-auth-card .ff-auth-sub { margin-top: .25rem; color: var(--ff-slate-500); font-size: .875rem; } /* Generic tonal alert strip — used on auth pages and any other page that needs a subtle success/warning/danger flash. Also keep .ff-auth-alert as an alias for backward compatibility with existing login/register markup. */ .ff-alert, .ff-auth-alert { border-radius: .5rem; border: 1px solid transparent; padding: .625rem .75rem; font-size: .8125rem; display: flex; align-items: center; gap: .5rem; } .ff-alert.is-success, .ff-auth-alert.is-success { background: var(--ff-emerald-50); border-color: var(--ff-emerald-100); color: var(--ff-emerald-700); } .ff-alert.is-danger, .ff-auth-alert.is-danger { background: var(--ff-rose-50); border-color: var(--ff-rose-100); color: var(--ff-rose-700); } .ff-alert.is-warning, .ff-auth-alert.is-warning { background: var(--ff-amber-50); border-color: var(--ff-amber-100); color: var(--ff-amber-700); } .ff-alert.is-info, .ff-auth-alert.is-info { background: var(--ff-indigo-50); border-color: var(--ff-indigo-100); color: var(--ff-indigo-700); } /* Auth alerts kept their historical top-margin for the login/register layout where they sit after the subhead. */ .ff-auth-alert { margin-top: 1.25rem; } .ff-auth-footer { margin-top: 1.25rem; text-align: center; font-size: .8125rem; color: var(--ff-slate-500); } /* --------------------------------------------------------------- */ /* 5. Catalogue page — filter bar, thumbnail, status cells */ /* --------------------------------------------------------------- */ /* Search input with inline icon. */ .ff-filter-search { position: relative; } .ff-filter-search .bi { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); color: var(--ff-slate-400); font-size: .95rem; pointer-events: none; z-index: 2; } .ff-filter-search input { padding-left: 2.25rem; } /* Card-embedded table wants the table itself to go edge-to-edge. Negative margins cancel the card-body padding. */ .ff-table-wrap { margin-left: -1.5rem; margin-right: -1.5rem; } .ff-table-wrap .table { margin: 0; } .ff-table-wrap .table th:first-child, .ff-table-wrap .table td:first-child { padding-left: 1.5rem; } .ff-table-wrap .table th:last-child, .ff-table-wrap .table td:last-child { padding-right: 1.5rem; } /* Product cell: thumbnail + linked title + availability sub-line. */ .ff-product-link { color: inherit; min-width: 0; } .ff-product-link:hover { text-decoration: none; } .ff-product-link:hover .ff-product-title { color: var(--ff-indigo-700); } .ff-product-thumb { width: 2.75rem; height: 2.75rem; border-radius: .625rem; background: var(--ff-slate-100); color: var(--ff-slate-400); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .ff-product-thumb img { width: 100%; height: 100%; object-fit: cover; } .ff-product-thumb .bi { font-size: 1.1rem; } .ff-product-title { font-weight: 500; color: var(--ff-slate-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22rem; transition: color .1s ease; } .ff-product-sub { font-size: .75rem; color: var(--ff-slate-500); display: inline-flex; align-items: center; gap: .25rem; } .ff-vendor-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ff-indigo-500); flex-shrink: 0; } /* Status cell: single-letter platform mark + tonal status pill. Coloured variants reflect the last publish outcome: .is-success → emerald (most recent publish to this platform succeeded) .is-error → rose (most recent publish failed) .is-pending → amber (publish queued / running) Unstyled (default) = never published or no known outcome. */ .ff-platform-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: .25rem; background: var(--ff-slate-100); color: var(--ff-slate-600); font-size: .7rem; font-weight: 700; } .ff-platform-mark.is-success { background: var(--ff-emerald-50); color: var(--ff-emerald-700); box-shadow: inset 0 0 0 1px var(--ff-emerald-200); } .ff-platform-mark.is-error { background: var(--ff-rose-50); color: var(--ff-rose-700); box-shadow: inset 0 0 0 1px var(--ff-rose-200); } .ff-platform-mark.is-pending { background: var(--ff-amber-50); color: var(--ff-amber-700); box-shadow: inset 0 0 0 1px var(--ff-amber-200); } /* "Manage →" link — indigo, subtle underline only on hover. */ .ff-manage-link { font-size: .8125rem; font-weight: 500; color: var(--ff-indigo-700); text-decoration: none; white-space: nowrap; } .ff-manage-link:hover { color: var(--ff-indigo-700); text-decoration: underline; } .ff-manage-link .bi { font-size: .75rem; margin-left: .1rem; transition: transform .12s ease; } .ff-manage-link:hover .bi { transform: translateX(2px); } /* --------------------------------------------------------------- */ /* 6. Product detail — hero, tabs, term chips */ /* --------------------------------------------------------------- */ /* Back-to-list breadcrumb link */ .ff-back-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--ff-slate-500); text-decoration: none; } .ff-back-link:hover { color: var(--ff-slate-900); text-decoration: none; } .ff-back-link .bi { font-size: .8rem; } /* Hero card layout */ .ff-detail-hero { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 768px) { .ff-detail-hero { flex-direction: row; } } .ff-detail-image { width: 11rem; height: 11rem; border-radius: .75rem; object-fit: cover; background: var(--ff-slate-100); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--ff-slate-400); overflow: hidden; } .ff-detail-image img { width: 100%; height: 100%; object-fit: cover; } .ff-detail-image .bi { font-size: 2.25rem; } .ff-detail-meta { flex: 1 1 auto; min-width: 0; } .ff-detail-title { font-size: 1.5rem; font-weight: 600; color: var(--ff-slate-900); margin: .75rem 0 .25rem; line-height: 1.25; } .ff-detail-sub { color: var(--ff-slate-500); font-size: .875rem; } /* 4-up "stat" info blocks */ .ff-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.25rem; } @media (min-width: 576px) { .ff-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ff-stat { background: var(--ff-slate-50); border: 1px solid var(--ff-slate-100); border-radius: .625rem; padding: .625rem .75rem; } .ff-stat-label { font-size: .7rem; color: var(--ff-slate-500); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .ff-stat-value { font-size: .95rem; font-weight: 600; color: var(--ff-slate-900); margin-top: .15rem; display: flex; align-items: center; gap: .375rem; } /* Tab bar — AFT-style underline tabs */ .ff-tabs { display: flex; align-items: center; gap: .25rem; border-bottom: 1px solid var(--ff-slate-200); margin-bottom: 1.5rem; } .ff-tab { background: transparent; border: 0; padding: .625rem 1rem; font-size: .875rem; font-weight: 500; color: var(--ff-slate-600); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; transition: color .12s ease; } .ff-tab:hover { color: var(--ff-slate-900); } .ff-tab.is-active { color: var(--ff-indigo-700); border-bottom-color: var(--ff-indigo-600); } .ff-tab .bi { font-size: .9rem; } /* Chip list for routing / blocking terms */ .ff-chip-group { display: flex; flex-wrap: wrap; gap: .5rem; } .ff-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .25rem .3rem .6rem; background: #fff; border: 1px solid var(--ff-slate-200); border-radius: 999px; font-size: .8125rem; color: var(--ff-slate-700); } .ff-chip .ff-chip-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; padding: .125rem .45rem; border-radius: 999px; font-weight: 600; } .ff-chip .ff-chip-label.tone-sky { background: var(--ff-sky-50); color: var(--ff-sky-700); } .ff-chip .ff-chip-label.tone-violet { background: var(--ff-violet-50); color: var(--ff-violet-700); } .ff-chip .ff-chip-label.tone-rose { background: var(--ff-rose-50); color: var(--ff-rose-700); } .ff-chip .ff-chip-label.tone-amber { background: var(--ff-amber-50); color: var(--ff-amber-700); } .ff-chip .ff-chip-label.tone-slate { background: var(--ff-slate-100); color: var(--ff-slate-700); } .ff-chip .ff-chip-term { font-weight: 500; color: var(--ff-slate-900); } .ff-chip .ff-chip-meta { color: var(--ff-slate-400); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; } .ff-chip-remove { width: 1.25rem; height: 1.25rem; border: 0; background: transparent; color: var(--ff-slate-400); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .ff-chip-remove:hover { background: var(--ff-rose-50); color: var(--ff-rose-600); } .ff-chip-remove .bi { font-size: .7rem; } /* EEC-171: in-place chip edit input — sits inside the pill, sized to its text. */ .ff-chip .ff-chip-term { cursor: text; } .ff-chip .ff-chip-edit-input { border: 0; outline: 0; padding: 0; margin: 0; background: transparent; font: inherit; font-weight: 500; color: var(--ff-slate-900); min-width: 6rem; width: 100%; } .ff-chip-empty { border: 1px dashed var(--ff-slate-200); border-radius: .625rem; padding: 1rem; color: var(--ff-slate-500); font-size: .875rem; text-align: center; background: #fff; } /* Add-term form panel — subtle tint to separate from the chip list */ .ff-add-form { border: 1px solid var(--ff-slate-200); border-radius: .75rem; padding: 1rem; background: var(--ff-slate-50); margin-bottom: 1rem; } .ff-add-form .form-label { font-size: .75rem; margin-bottom: .25rem; } /* --------------------------------------------------------------- */ /* 7. Settings page — page header, radio cards, danger zone */ /* --------------------------------------------------------------- */ /* Generic page-level header, subtitle */ .ff-page-header { margin-bottom: 1.5rem; } .ff-page-header h1 { font-size: 1.5rem; font-weight: 600; color: var(--ff-slate-900); margin: 0; } .ff-page-header .ff-page-sub { margin-top: .25rem; font-size: .875rem; color: var(--ff-slate-500); } /* Radio cards — a stack of clickable labels where the checked one gets an indigo ring and a tinted background. Uses :has() for the container state; the native radio stays visible as a small circle on the right so there's no ambiguity about what's selected. */ .ff-radio-stack { display: flex; flex-direction: column; gap: .625rem; } .ff-radio-card { display: flex; align-items: flex-start; gap: .75rem; border: 1px solid var(--ff-slate-200); border-radius: .625rem; padding: .75rem 1rem; cursor: pointer; background: #fff; transition: border-color .12s ease, background-color .12s ease; margin: 0; } .ff-radio-card:hover { border-color: var(--ff-slate-300); background: var(--ff-slate-50); } .ff-radio-card:has(input:checked) { border-color: var(--ff-indigo-500); background: var(--ff-indigo-50); box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); } .ff-radio-card-input { appearance: none; -webkit-appearance: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--ff-slate-300); background: #fff; margin-top: .15rem; flex-shrink: 0; cursor: pointer; position: relative; } .ff-radio-card-input:checked { border-color: var(--ff-indigo-600); } .ff-radio-card-input:checked::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: .5rem; height: .5rem; border-radius: 50%; background: var(--ff-indigo-600); } .ff-radio-card-body { flex: 1 1 auto; min-width: 0; } .ff-radio-card-title { font-weight: 600; color: var(--ff-slate-900); font-size: .9rem; } .ff-radio-card-preview { margin-top: .25rem; font-size: .8125rem; color: var(--ff-slate-500); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* Card footer strip — used on forms where the save sits at the bottom. */ .ff-card-footer { border-top: 1px solid var(--ff-slate-200); padding: .875rem 1.25rem; background: var(--ff-slate-50); border-bottom-left-radius: var(--bs-border-radius-lg); border-bottom-right-radius: var(--bs-border-radius-lg); display: flex; align-items: center; justify-content: flex-end; gap: .5rem; } /* Danger zone — red-bordered card with tinted inner action strips. */ .ff-danger-card { border-color: var(--ff-rose-100) !important; } .ff-danger-card .card-header { border-bottom-color: var(--ff-rose-100); color: var(--ff-rose-700); } .ff-danger-item { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; background: color-mix(in oklab, var(--ff-rose-50), transparent 40%); border: 1px solid var(--ff-rose-100); border-radius: .625rem; } @media (min-width: 576px) { .ff-danger-item { flex-direction: row; align-items: center; justify-content: space-between; } } .ff-danger-item + .ff-danger-item { margin-top: .75rem; } .ff-danger-item-copy { flex: 1 1 auto; min-width: 0; } .ff-danger-item-title { font-size: .875rem; font-weight: 500; color: var(--ff-slate-900); } .ff-danger-item-sub { font-size: .75rem; color: var(--ff-slate-600); margin-top: .15rem; } /* Danger-tinted button variant (not part of Bootstrap by default in the same tone). */ .btn-ff-danger { --bs-btn-color: var(--ff-rose-700); --bs-btn-bg: #fff; --bs-btn-border-color: var(--ff-rose-200); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ff-rose-600); --bs-btn-hover-border-color: var(--ff-rose-600); --bs-btn-active-bg: var(--ff-rose-700); --bs-btn-active-border-color: var(--ff-rose-700); --bs-btn-disabled-color: var(--ff-rose-400); --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: var(--ff-rose-100); } /* --------------------------------------------------------------- */ /* 8. Workspace card + Integration cards (unified Settings page) */ /* --------------------------------------------------------------- */ .ff-workspace-avatar { width: 4rem; height: 4rem; border-radius: 1rem; background: linear-gradient(135deg, var(--ff-indigo-500), var(--ff-emerald-500)); color: #fff; font-size: 1.5rem; font-weight: 600; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(79, 70, 229, .2); } .ff-workspace-grid { flex: 1 1 auto; display: grid; grid-template-columns: 1fr; gap: .75rem; } @media (min-width: 576px) { .ff-workspace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ff-workspace-field { background: color-mix(in oklab, var(--ff-slate-50), transparent 40%); border: 1px solid var(--ff-slate-100); border-radius: .5rem; padding: .625rem .75rem; } .ff-workspace-field-label { font-size: .7rem; color: var(--ff-slate-500); display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; } .ff-workspace-field-label .bi { color: var(--ff-slate-400); font-size: .8rem; } .ff-workspace-field-value { margin-top: .15rem; font-size: .875rem; font-weight: 500; color: var(--ff-slate-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Integration cards — one per platform (Shopify / Google / Microsoft). */ .ff-integration-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .ff-integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .ff-integration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .ff-integration-card { background: #fff; border: 1px solid var(--ff-slate-200); border-radius: var(--bs-border-radius-lg); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); padding: 1.25rem; display: flex; flex-direction: column; min-height: 12rem; transition: box-shadow .12s ease; } .ff-integration-card:hover { box-shadow: 0 2px 8px rgba(15, 23, 42, .08); } .ff-integration-head { display: flex; align-items: flex-start; gap: .75rem; } .ff-integration-icon { width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: var(--ff-slate-50); border: 1px solid var(--ff-slate-100); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .ff-integration-meta { flex: 1 1 auto; min-width: 0; } .ff-integration-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 600; color: var(--ff-slate-900); } .ff-integration-sub { margin-top: .15rem; font-size: .75rem; color: var(--ff-slate-500); } .ff-integration-details { margin-top: 1rem; display: flex; flex-direction: column; gap: .35rem; font-size: .8rem; } .ff-integration-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .ff-integration-row .k { color: var(--ff-slate-500); font-size: .75rem; } .ff-integration-row .v { color: var(--ff-slate-800); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; text-align: right; } .ff-integration-row .v.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; } .ff-integration-empty { margin-top: 1rem; font-size: .85rem; color: var(--ff-slate-500); } .ff-integration-actions { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } /* --------------------------------------------------------------- */ /* 9. Topbar search results dropdown */ /* --------------------------------------------------------------- */ .ff-search { position: relative; } .ff-search-results { position: absolute; top: calc(100% + .35rem); left: 0; right: 0; max-height: 26rem; overflow-y: auto; background: #fff; border: 1px solid var(--ff-slate-200); border-radius: .75rem; box-shadow: 0 10px 25px rgba(15, 23, 42, .08); z-index: 1050; padding: .25rem; } /* Hide the empty wrapper so the dropdown doesn't draw a line when the user clears the input. */ .ff-search-results:empty { display: none; } .ff-search-hint { padding: .75rem 1rem; color: var(--ff-slate-500); font-size: .85rem; } .ff-search-group { padding: .25rem 0; } .ff-search-group + .ff-search-group { border-top: 1px solid var(--ff-slate-100); } .ff-search-group-label { padding: .5rem .75rem .25rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ff-slate-500); font-weight: 600; display: flex; align-items: center; gap: .4rem; } .ff-search-group-label .bi { font-size: .8rem; color: var(--ff-slate-400); } .ff-search-hit { display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem; border-radius: .5rem; color: var(--ff-slate-800); text-decoration: none; cursor: pointer; } .ff-search-hit:hover { background: var(--ff-indigo-50); color: var(--ff-slate-900); text-decoration: none; } .ff-search-hit-thumb { width: 2rem; height: 2rem; border-radius: .375rem; background: var(--ff-slate-100); color: var(--ff-slate-400); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .ff-search-hit-thumb img { width: 100%; height: 100%; object-fit: cover; } .ff-search-hit-glyph { background: var(--ff-indigo-50); color: var(--ff-indigo-700); } .ff-search-hit-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .ff-search-hit-title { font-size: .875rem; font-weight: 500; color: var(--ff-slate-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ff-search-hit-sub { font-size: .75rem; color: var(--ff-slate-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --------------------------------------------------------------- */ /* 10. Catalogue per-priority tier chips (G/M × H/M/L) */ /* --------------------------------------------------------------- */ .ff-tier-cell { display: inline-flex; align-items: center; gap: .35rem; } .ff-tier-chips { display: inline-flex; gap: .2rem; } .ff-tier-chip { width: 1.25rem; height: 1.25rem; border-radius: .3rem; font-size: .65rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; background: var(--ff-slate-50); color: var(--ff-slate-400); box-shadow: inset 0 0 0 1px var(--ff-slate-200); } /* Tonal "on" state per priority tier — matches AFT. */ .ff-tier-chip.is-on.tone-sky { background: var(--ff-sky-50); color: var(--ff-sky-700); box-shadow: inset 0 0 0 1px #bae6fd; } .ff-tier-chip.is-on.tone-violet { background: var(--ff-violet-50); color: var(--ff-violet-700); box-shadow: inset 0 0 0 1px #ddd6fe; } .ff-tier-chip.is-on.tone-rose { background: var(--ff-rose-50); color: var(--ff-rose-700); box-shadow: inset 0 0 0 1px #fecdd3; } /* --------------------------------------------------------------- */ /* 11. Product detail — activity timeline + spend chart */ /* --------------------------------------------------------------- */ .ff-timeline { display: flex; flex-direction: column; gap: .5rem; } .ff-timeline-item { display: flex; align-items: flex-start; gap: .75rem; padding: .625rem .75rem; border: 1px solid var(--ff-slate-100); border-radius: .625rem; background: #fff; transition: background-color .1s ease; } .ff-timeline-item:hover { background: var(--ff-slate-50); } .ff-timeline-dot { width: 2rem; height: 2rem; border-radius: .625rem; background: var(--ff-indigo-50); color: var(--ff-indigo-600); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .95rem; } .ff-timeline-body { flex: 1 1 auto; min-width: 0; } .ff-timeline-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .ff-timeline-title { font-size: .875rem; font-weight: 500; color: var(--ff-slate-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ff-timeline-sub { font-size: .75rem; color: var(--ff-slate-500); margin-top: .1rem; } /* Failed-job error message: tonal rose strip under the timeline row. Always user-readable text from PublishErrorTranslator — never a stack trace. */ .ff-timeline-error { margin-top: .35rem; padding: .4rem .55rem; font-size: .75rem; line-height: 1.35; color: var(--ff-rose-700); background: var(--ff-rose-50); border-radius: .35rem; box-shadow: inset 0 0 0 1px var(--ff-rose-200); } .ff-job-items { padding: .35rem .55rem; background: var(--ff-rose-50); border-radius: .35rem; box-shadow: inset 0 0 0 1px var(--ff-rose-200); } .ff-job-item-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem; padding: .2rem 0; font-size: .75rem; line-height: 1.4; } .ff-job-item-row + .ff-job-item-row { border-top: 1px solid var(--ff-rose-100); } .ff-chart-wrap { position: relative; height: 14rem; } .ff-chart-empty { height: 14rem; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .25rem; color: var(--ff-slate-500); text-align: center; font-size: .85rem; } .ff-chart-empty .bi { font-size: 1.5rem; color: var(--ff-slate-400); } /* --------------------------------------------------------------- */ /* 11. Workspaces manage page + wizard */ /* --------------------------------------------------------------- */ .ff-ws-list { display: flex; flex-direction: column; gap: .75rem; } .ff-ws-row { transition: box-shadow .15s ease; } .ff-ws-row:hover { box-shadow: 0 2px 8px rgba(15, 23, 42, .06); } .ff-ws-mark { width: 2.75rem; height: 2.75rem; border-radius: .625rem; background: linear-gradient(135deg, var(--ff-indigo-500), var(--ff-emerald-500)); color: #fff; font-weight: 600; font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .ff-ws-main { min-width: 0; } .ff-ws-name { font-size: 1rem; font-weight: 600; color: var(--ff-slate-900); display: flex; align-items: center; } .ff-ws-sub { font-size: .8rem; color: var(--ff-slate-600); } .ff-ws-meta { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; } .ff-ws-meta .bi { font-size: .95rem; } .ff-ws-actions { flex-shrink: 0; } /* Inline rename input — sized to look like a name label rather than a form field eating the whole row. */ .ff-ws-name-input { font-weight: 600; color: var(--ff-slate-900); width: 18rem; max-width: 100%; } /* Wizard step indicator — horizontal numbered pill row. */ .ff-wizard-steps { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .ff-wizard-steps li { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .75rem; border: 1px solid var(--ff-slate-200); border-radius: 999px; background: #fff; color: var(--ff-slate-600); font-size: .85rem; } .ff-wizard-steps li.is-active { border-color: var(--ff-indigo-200); background: var(--ff-indigo-50); color: var(--ff-indigo-700); } .ff-wizard-step-index { width: 1.35rem; height: 1.35rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--ff-slate-100); color: var(--ff-slate-700); font-weight: 600; font-size: .75rem; } .ff-wizard-steps li.is-active .ff-wizard-step-index { background: var(--ff-indigo-500); color: #fff; } .ff-wizard-steps li.is-done { border-color: var(--ff-emerald-200); background: var(--ff-emerald-50); color: var(--ff-emerald-700); } .ff-wizard-steps li.is-done .ff-wizard-step-index { background: var(--ff-emerald-500); color: #fff; } .ff-wizard-step-label { font-weight: 500; } /* Workspace setup-mode card — sits below the wizard step indicator on /workspaces when the user has no Shopify configured yet. Slightly accented so it reads as the active wizard target, not just a list row. */ .ff-setup-card { border: 1px solid var(--ff-indigo-200); box-shadow: 0 1px 3px rgba(15, 23, 42, .04); max-width: 42rem; } /* --------------------------------------------------------------- */ /* 12. Settings hub — left nav + sub-page layout */ /* --------------------------------------------------------------- */ .ff-settings-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; } @media (min-width: 768px) { .ff-settings-layout { grid-template-columns: 14rem minmax(0, 1fr); } } .ff-settings-nav { display: flex; flex-direction: column; gap: .15rem; padding: .5rem; background: #fff; border: 1px solid var(--ff-slate-200); border-radius: .75rem; position: sticky; top: calc(var(--ff-topbar-h) + 1rem); } .ff-settings-nav-title { font-size: .7rem; font-weight: 600; color: var(--ff-slate-400); text-transform: uppercase; letter-spacing: .05em; padding: .5rem .75rem .25rem; } .ff-settings-nav-item { display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; border-radius: .5rem; color: var(--ff-slate-700); text-decoration: none; font-size: .875rem; } .ff-settings-nav-item:hover { background: var(--ff-slate-50); color: var(--ff-slate-900); } .ff-settings-nav-item.is-active { background: var(--ff-indigo-50); color: var(--ff-indigo-700); font-weight: 500; } .ff-settings-nav-item.is-active .bi { color: var(--ff-indigo-600); } .ff-settings-nav-item .bi { color: var(--ff-slate-400); font-size: 1rem; } .ff-settings-body { min-width: 0; } /* Default-bids form — platform header row */ .ff-bid-platform-label { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--ff-slate-900); margin-bottom: .75rem; } /* Cursor for elements with tooltips */ .cursor-help { cursor: help; } /* EEC-169: reusable searchable-select (type-to-filter dropdown). Shared by the catalogue filter bar via fragments/forms :: searchableSelect; the routing-groups rule autocomplete carries its own (identical) copy. */ .ff-searchable-select { position: relative; } .ff-autocomplete-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--ff-slate-200); border-radius: .375rem; box-shadow: 0 4px 12px rgba(15, 23, 42, .08); max-height: 16rem; overflow-y: auto; z-index: 1050; margin-top: 2px; } .ff-autocomplete-item { padding: .375rem .625rem; font-size: .85rem; cursor: pointer; color: var(--ff-slate-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ff-autocomplete-item.is-highlighted { background: var(--ff-indigo-50); color: var(--ff-indigo-700); } .ff-autocomplete-item.is-clear { color: var(--ff-slate-500); font-style: italic; }