/** * CoreFusion OS — App-Like Frontend Shell (Springboard + Top App Bar). * * A cohesive, self-contained "operating system" surface that reuses the brand * tokens (--cf-brand-*) but lives in its own .cf-os namespace so it never * clashes with the marketing theme around it. Mobile-first; an iOS-style * Springboard grid scales from 2 columns on phones to 4 on the desktop. * * @package Chamber_CRM * @since 1.57.0 */ /* ------------------------------------------------------------------------- * Semantic palette (v1.62.0) — Vercel/Linear-inspired, brand neon accents. * Defined at :root so a single [data-theme="dark"] flip on re-skins the * whole OS. Every surface reads these tokens (no hardcoded greys). * ---------------------------------------------------------------------- */ :root { /* Surfaces + text (light). */ --cf-os-bg: #F8FAFC; --cf-os-surface: #FFFFFF; --cf-os-text: #1E293B; --cf-os-text-muted: #64748B; --cf-os-border: #E2E8F0; /* Brand neon accents — used strategically, not everywhere. */ --cf-os-accent-cyan: #0CD2E9; --cf-os-accent-magenta: var( --cf-brand-accent, #F47937 ); /* v2.55.0 — repointed off the legacy magenta to the brand accent (buzz-orange default). Name kept to avoid churning 7 call sites. */ /* Structural tokens. */ --cf-os-accent: var( --cf-brand-primary, #2563eb ); --cf-os-accent-ink: var( --cf-brand-on-primary, #ffffff ); --cf-os-radius: 22px; --cf-os-bar-h: 56px; --cf-os-shadow: 0 10px 30px rgba( 15, 23, 42, 0.10 ); /* v2.57.0 — CoreFusion OS expanded palette (Buzzfish-derived). One source of truth for icon tiles, tags, charts, and semantic states. Brand-fixed hues — they do NOT invert per theme. */ --cf-pal-blue: #0A1CC1; --cf-pal-orange: #F47937; --cf-pal-sky: #1AA7E8; --cf-pal-teal: #15B79E; --cf-pal-indigo: #5A52D9; --cf-pal-gold: #F5A623; --cf-pal-coral: #EC6A75; --cf-pal-crimson: #E5394A; --cf-pal-ink: #231F20; --cf-pal-slate: #6B6C75; --cf-pal-paper: #F5F5F5; } body[data-theme="dark"] { --cf-os-bg: #0A0A0A; --cf-os-surface: #171717; --cf-os-text: #EDEDED; --cf-os-text-muted: #A3A3A3; --cf-os-border: #262626; --cf-os-shadow: 0 12px 34px rgba( 0, 0, 0, 0.55 ); } .cf-os { position: relative; box-sizing: border-box; min-height: 70vh; margin: 0; background: var( --cf-os-bg ); border-radius: var( --cf-os-radius ); overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var( --cf-os-text ); box-shadow: var( --cf-os-shadow ); } .cf-os *, .cf-os *::before, .cf-os *::after { box-sizing: border-box; } /* When launched as an installed PWA, fill the whole viewport edge-to-edge. */ @media ( display-mode: standalone ) { .cf-os { min-height: 100vh; border-radius: 0; box-shadow: none; } } /* Bespoke theme-free template (Bug 1 fix): the OS owns the whole viewport, so * reset the bare and let the shell run full-bleed. */ body.cf-os-body { margin: 0; padding: 0; background: var( --cf-os-bg ); color: var( --cf-os-text ); } body.cf-os-body .cf-os { min-height: 100vh; border-radius: 0; box-shadow: none; } /* ------------------------------------------------------------------------- * Top App Bar (sticky). * ---------------------------------------------------------------------- */ .cf-os__bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; height: var( --cf-os-bar-h ); padding: 0 12px; padding-top: env( safe-area-inset-top, 0 ); background: var( --cf-os-surface ); color: var( --cf-os-text ); border-bottom: 1px solid var( --cf-os-border ); } /* Icon buttons in the bar — Home, View Website, Theme toggle. */ .cf-os__home, .cf-os__web, .cf-os__vault, .cf-os__theme { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var( --cf-os-text-muted ); text-decoration: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .cf-os__home:hover, .cf-os__home:focus-visible, .cf-os__web:hover, .cf-os__web:focus-visible, .cf-os__vault:hover, .cf-os__vault:focus-visible, .cf-os__theme:hover, .cf-os__theme:focus-visible { background: var( --cf-os-bg ); color: var( --cf-os-text ); outline: none; } .cf-os__home[hidden] { display: none; } /* v2.19.9 — the "four boxes" Front-Portal button renders a 40px glyph (the grid icon's built-in viewBox padding keeps comfortable breathing room in the bar). */ .cf-os__home { width: 44px; height: 44px; } .cf-os__home svg { width: 40px; height: 40px; } /* Theme toggle — show the icon for the action that's available. */ .cf-os__theme .cf-os__sun { display: none; } .cf-os__theme .cf-os__moon { display: inline-flex; } body[data-theme="dark"] .cf-os__theme .cf-os__sun { display: inline-flex; } body[data-theme="dark"] .cf-os__theme .cf-os__moon { display: none; } .cf-os__theme:hover { color: var( --cf-os-accent-cyan ); } .cf-os__title { flex: 0 1 auto; min-width: 0; margin: 0; font-size: 16px; font-weight: 700; letter-spacing: 0.01em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var( --cf-os-text ); } /* v2.56.0 — brand lockup (fusion-O mark + Comfortaa wordmark) doubles as the persistent Home button. */ .cf-os__brand { display: inline-flex; align-items: center; gap: 9px; flex: 0 1 auto; min-width: 0; margin: 0; padding: 5px 9px 5px 6px; border: 0; border-radius: 10px; background: transparent; color: var( --cf-os-text ); cursor: pointer; text-decoration: none; transition: background 0.15s ease, transform 0.1s ease; } /* v2.59.0 — tactile press: the brand/Home lockup dips on click so it reads as a button. */ .cf-os__brand:active { transform: translateY( 1px ) scale( 0.95 ); } .cf-os__brand:hover, .cf-os__brand:focus-visible { background: var( --cf-os-bg ); outline: none; } .cf-os__brand-mark { flex: 0 0 auto; width: 40px; height: 40px; } .cf-os__brand-text { font-family: 'Comfortaa', var( --cf-brand-font-heading ), system-ui, sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 0.005em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-os__brand-text b { font-weight: 700; } @media ( max-width: 560px ) { .cf-os__brand-text { display: none; } } /* ------------------------------------------------------------------------- * Global Command Search (Ctrl/⌘+K) — v1.68.0. * ---------------------------------------------------------------------- */ .cf-os__search { position: relative; flex: 1 1 auto; max-width: 420px; margin: 0 auto; /* v1.98.0 — fix the icon/input stacking: own stacking context, and the * FIELD surface (background + border + focus ring) lives on the container. * The input is transparent and layered ABOVE the icon (z-index), so the * magnifier can never paint on top of the input text. */ isolation: isolate; background: var( --cf-os-bg ); border: 1px solid var( --cf-os-border ); border-radius: 10px; } .cf-os__search:focus-within { border-color: var( --cf-os-accent ); background: var( --cf-os-surface ); box-shadow: 0 0 0 3px rgba( 37, 99, 235, 0.15 ); } .cf-os__search-icon { position: absolute; left: 12px; top: 50%; transform: translateY( -50% ); /* Pin the icon box so no global svg/img reset can balloon it past the * input's padding-left and back onto the text. */ width: 16px; height: 16px; color: var( --cf-os-text-muted ); pointer-events: none; z-index: 0; /* below the input's text layer */ } .cf-os__search-input { position: relative; z-index: 1; /* input + its text paint ABOVE the icon */ width: 100%; height: 38px; /* Longhands (not shorthand) so a later/mobile padding-right override can * never silently reset the left clearance. Left = icon (12px + 16px) + a * comfortable gap so the cursor/text never touches the magnifier; right * clears the ⌘K badge. */ padding-top: 0; padding-right: 66px; padding-bottom: 0; padding-left: 46px; border: 0; border-radius: 10px; background: transparent; /* field surface is on .cf-os__search */ color: var( --cf-os-text ); font: inherit; font-size: 14px; box-sizing: border-box; } .cf-os__search-input::placeholder { color: var( --cf-os-text-muted ); } .cf-os__search-input:focus { outline: none; } .cf-os__kbd { position: absolute; right: 9px; top: 50%; transform: translateY( -50% ); display: inline-flex; align-items: center; gap: 1px; padding: 2px 7px; border: 1px solid var( --cf-os-border ); border-radius: 6px; background: var( --cf-os-surface ); color: var( --cf-os-text-muted ); font-size: 11px; font-weight: 700; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; pointer-events: none; } /* Floating results dropdown. */ .cf-os__search-results { position: absolute; top: calc( 100% + 8px ); left: 0; right: 0; z-index: 30; max-height: 60vh; overflow-y: auto; padding: 6px; background: var( --cf-os-surface ); border: 1px solid var( --cf-os-border ); border-radius: 12px; box-shadow: 0 16px 40px rgba( 15, 23, 42, 0.22 ); } .cf-os__search-results[hidden] { display: none; } .cf-os__search-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; } .cf-os__search-item:hover, .cf-os__search-item.is-active { background: var( --cf-os-bg ); } .cf-os__search-item-title { font-size: 14px; font-weight: 600; color: var( --cf-os-text ); } .cf-os__search-item-sub { font-size: 12px; color: var( --cf-os-text-muted ); } .cf-os__search-empty { padding: 16px 12px; text-align: center; font-size: 13px; color: var( --cf-os-text-muted ); } /* On phones: give the search room — hide the brand title + the kbd hint. */ @media ( max-width: 600px ) { .cf-os__title { display: none; } .cf-os__kbd { display: none; } .cf-os__search-input { /* Badge is hidden here, so reclaim the right padding — but keep the * left clearance locked so the magnifier never overlaps the text. */ padding-right: 12px; padding-left: 46px; } } /* Account avatar + dropdown. */ .cf-os__user { position: relative; flex: 0 0 auto; } .cf-os__avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var( --cf-os-accent ); color: var( --cf-os-accent-ink ); font-size: 14px; font-weight: 700; cursor: pointer; transition: filter 0.15s ease; } .cf-os__avatar:hover, .cf-os__avatar:focus-visible { filter: brightness( 1.08 ); outline: none; } .cf-os__menu { position: absolute; top: calc( 100% + 8px ); right: 0; min-width: 180px; padding: 8px; background: var( --cf-os-surface ); border: 1px solid var( --cf-os-border ); border-radius: 14px; box-shadow: var( --cf-os-shadow ); color: var( --cf-os-text ); } .cf-os__menu[hidden] { display: none; } .cf-os__menu-name { display: block; padding: 6px 10px; font-size: 13px; font-weight: 600; color: var( --cf-os-text-muted ); border-bottom: 1px solid var( --cf-os-border ); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-os__logout { display: block; padding: 9px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var( --cf-os-text ); text-decoration: none; } .cf-os__logout:hover, .cf-os__logout:focus-visible { background: var( --cf-os-bg ); color: var( --cf-os-accent ); outline: none; } /* ------------------------------------------------------------------------- * View area. * ---------------------------------------------------------------------- */ .cf-os__view { display: block; padding: 22px 16px 32px; } /* Springboard grid. */ .cf-os__springboard { display: grid; grid-template-columns: repeat( 2, 1fr ); gap: 22px 14px; max-width: 760px; margin: 0 auto; } .cf-os__app { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .cf-os__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 18px; /* v2.16.0 — glyphs render with currentColor; keep them white on the accent bg. */ color: #fff; background: var( --cf-app, var( --cf-os-accent ) ); box-shadow: 0 8px 18px rgba( 15, 23, 42, 0.18 ); transition: transform 0.15s ease, box-shadow 0.15s ease; } /* v2.19.8 — larger glyphs (~40px) so the icon fills the rounded square; one rule for both inline-SVG launcher tiles and Dashicon settings tiles. */ .cf-os__icon svg { width: 40px; height: 40px; } .cf-os__icon .dashicons { font-size: 40px; width: 40px; height: 40px; line-height: 1; } /* v2.41.0 — "Option A" settings cog badge: a white disc carrying the tile-colored cog, marking each task-domain tile as a settings surface (--cf-app inherits the tile's jewel color from .cf-os__icon). */ .cf-set__cog { position: absolute; right: -3px; bottom: -3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba( 15, 23, 42, 0.25 ); } .cf-set__cog svg { width: 15px; height: 15px; color: var( --cf-app, #475569 ); } /* v2.43.0 — read-only L0 reference card (e.g. platform Stripe status in the Payments domain). Visually "managed elsewhere": dashed, muted, non-editable. */ .cf-set__l0 { background: rgba( 148, 163, 184, 0.08 ); border: 1px dashed rgba( 148, 163, 184, 0.45 ); border-radius: 12px; padding: 14px 16px; margin-bottom: 22px; } .cf-set__l0list { list-style: none; margin: 10px 0 0; padding: 0; } .cf-set__l0list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba( 148, 163, 184, 0.18 ); font-size: 14px; } .cf-set__l0list li:last-child { border-bottom: 0; } .cf-set__l0pill { font-size: 12px; font-weight: 500; padding: 2px 11px; border-radius: 999px; white-space: nowrap; } .cf-set__l0pill--on { background: rgba( 16, 110, 86, 0.16 ); color: #0a5641; } .cf-set__l0pill--off { background: rgba( 153, 45, 45, 0.13 ); color: #8a2727; } .cf-set__l0pill--test { background: rgba( 153, 104, 0, 0.16 ); color: #7a5200; } .cf-set__l0pill--live { background: rgba( 153, 45, 45, 0.16 ); color: #8a2727; } /* v2.45.0 — Business Categories list (CRM & Directory domain). */ .cf-cat-table { width: 100%; max-width: 640px; border-collapse: collapse; margin: 14px 0 6px; font-size: 14px; } .cf-cat-table th, .cf-cat-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba( 148, 163, 184, 0.18 ); } .cf-cat-table th { font-weight: 500; opacity: 0.7; } .cf-os__app:hover .cf-os__icon, .cf-os__app:focus-visible .cf-os__icon { transform: translateY( -3px ); box-shadow: 0 12px 24px rgba( 15, 23, 42, 0.24 ); } .cf-os__app:active .cf-os__icon { transform: scale( 0.94 ); } .cf-os__app:focus-visible { outline: none; } .cf-os__app:focus-visible .cf-os__icon { outline: 3px solid var( --cf-os-accent ); outline-offset: 3px; } .cf-os__badge { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: #ef4444; border: 2px solid var( --cf-os-bg ); box-shadow: 0 0 0 1px rgba( 239, 68, 68, 0.35 ); } .cf-os__label { /* v2.19.7 — bumped 13px → 16px for legibility (per design review). */ font-size: 16px; font-weight: 600; line-height: 1.3; text-align: center; color: var( --cf-os-text ); max-width: 9rem; } /* ------------------------------------------------------------------------- * Canonical view header (v2.19.8) — every loaded view opens with this exact * band: a circular back arrow on the left, then the page title. The arrow steps * back one level via the SPA history stack (wired in cf_app_router.js). * ---------------------------------------------------------------------- */ .cf-os__view-header { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var( --cf-os-border ); } .cf-os__back { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var( --cf-os-border ); background: var( --cf-os-surface ); color: var( --cf-os-text ); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease; } .cf-os__back:hover { background: var( --cf-os-bg ); border-color: var( --cf-os-accent ); transform: translateX( -2px ); } .cf-os__back:focus-visible { outline: 3px solid var( --cf-os-accent ); outline-offset: 2px; } .cf-os__view-title { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; color: var( --cf-os-text ); } /* ------------------------------------------------------------------------- * App Canvas (loaded views) — Springboard hides, this reveals. * ---------------------------------------------------------------------- */ .cf-os__springboard[hidden] { display: none; } /* ========================================================================= * Morning Briefing — calm "what needs my attention today" board (v1.64.0). * ====================================================================== */ .cf-os__briefing-board { max-width: 760px; margin: 30px auto 4px; padding: 0 4px; } .cf-os__briefing-board[hidden] { display: none; } .cf-os__greeting { margin: 0 0 16px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var( --cf-os-text ); } .cf-os__metrics { display: grid; grid-template-columns: 1fr; gap: 14px; } @media ( min-width: 720px ) { .cf-os__metrics { grid-template-columns: repeat( 3, 1fr ); } } .cf-os__metric { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var( --cf-os-surface ); border: 1px solid var( --cf-os-border ); border-radius: 14px; } /* v2.21.0 — each briefing card is an action: it opens where you act on it. */ .cf-os__metric.is-actionable { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .cf-os__metric.is-actionable:hover, .cf-os__metric.is-actionable:focus-visible { transform: translateY( -2px ); border-color: var( --cf-os-accent ); box-shadow: 0 10px 24px rgba( 15, 23, 42, 0.12 ); outline: none; } .cf-os__metric-title { font-size: 13px; font-weight: 600; color: var( --cf-os-text-muted ); } .cf-os__metric-value { font-size: 34px; font-weight: 800; line-height: 1; color: var( --cf-os-text ); font-variant-numeric: tabular-nums; } /* Surface attention only when there's something to act on. */ .cf-os__metric.is-warn .cf-os__metric-value { color: #b45309; } .cf-os__metric.is-alert .cf-os__metric-value { color: #dc2626; } .cf-os__metric.is-info .cf-os__metric-value { color: var( --cf-os-accent-cyan ); } body[data-theme="dark"] .cf-os__metric.is-warn .cf-os__metric-value { color: #fbbf24; } body[data-theme="dark"] .cf-os__metric.is-alert .cf-os__metric-value { color: #f87171; } .cf-os__canvas[hidden] { display: none; } .cf-os__canvas { max-width: 920px; margin: 0 auto; } /* Loading + error states. */ .cf-os__loadview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 36vh; color: var( --cf-os-text-muted ); } .cf-os__loadtext { margin: 0; font-size: 15px; font-weight: 600; } .cf-os__spinner { display: inline-block; width: 30px; height: 30px; border: 3px solid var( --cf-os-border ); border-top-color: var( --cf-os-accent ); border-radius: 50%; animation: cf-os-spin 0.8s linear infinite; } @keyframes cf-os-spin { to { transform: rotate( 360deg ); } } .cf-os__retry { margin-top: 14px; padding: 9px 22px; border: 0; border-radius: 10px; background: var( --cf-os-accent ); color: var( --cf-os-accent-ink ); font-weight: 700; cursor: pointer; } /* Panel shell shared by every loaded view. */ .cf-os__panel { background: var( --cf-os-surface ); border: 1px solid var( --cf-os-border ); border-radius: 16px; padding: 18px 18px 8px; box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.04 ); } .cf-os__panel-intro { margin: 0 0 14px; font-size: 14px; color: var( --cf-os-text-muted ); } .cf-os__empty { margin: 8px 0 16px; padding: 24px; text-align: center; color: var( --cf-os-text-muted ); font-size: 14px; } .cf-os__subhead { margin: 18px 0 10px; font-size: 14px; font-weight: 700; color: var( --cf-os-text ); } /* Data tables. */ .cf-os__table { width: 100%; border-collapse: collapse; font-size: 14px; } .cf-os__table th, .cf-os__table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var( --cf-os-border ); white-space: nowrap; } .cf-os__table th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var( --cf-os-text-muted ); } .cf-os__table td:first-child { white-space: normal; font-weight: 600; color: var( --cf-os-text ); } .cf-os__table tr:last-child td { border-bottom: 0; } .cf-os__num { text-align: right; font-variant-numeric: tabular-nums; } /* Status pills. */ .cf-os__pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #e2e8f0; color: #334155; } .cf-os__pill--publish, .cf-os__pill--paid, .cf-os__pill--active { background: #dcfce7; color: #166534; } .cf-os__pill--pending, .cf-os__pill--draft, .cf-os__pill--sent, .cf-os__pill--open, .cf-os__pill--unpaid { background: #fef3c7; color: #92400e; } .cf-os__pill--overdue, .cf-os__pill--past_due, .cf-os__pill--failed { background: #fee2e2; color: #991b1b; } /* Stat tiles (Reports). */ .cf-os__stats { display: grid; grid-template-columns: repeat( 2, 1fr ); gap: 14px; } .cf-os__stat { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var( --cf-os-border ); border-radius: 14px; background: var( --cf-os-bg ); } .cf-os__stat-num { font-size: 26px; font-weight: 800; line-height: 1; color: var( --cf-os-text ); } .cf-os__stat-label { font-size: 13px; font-weight: 600; color: var( --cf-os-text-muted ); } @media ( min-width: 620px ) { .cf-os__stats { grid-template-columns: repeat( 4, 1fr ); } } /* ========================================================================= * Notifications Hub — grouped activity feed (v1.61.0). * ====================================================================== */ .cf-notif { max-width: 720px; margin: 0 auto; } .cf-notif__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid var( --cf-os-border ); } .cf-notif__count { font-size: 14px; font-weight: 700; color: var( --cf-os-text-muted ); } .cf-notif__markall { flex: 0 0 auto; padding: 8px 14px; border: 1px solid var( --cf-os-border ); border-radius: 10px; background: var( --cf-os-surface ); font-size: 13px; font-weight: 700; color: var( --cf-os-accent ); cursor: pointer; transition: background 0.15s ease; } .cf-notif__markall:hover { background: var( --cf-os-bg ); } .cf-notif__markall[disabled] { opacity: 0.6; cursor: default; } .cf-notif__group { margin-top: 14px; } .cf-notif__grouplabel { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var( --cf-os-text-muted ); } .cf-notif__groupcount { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var( --cf-os-bg ); border: 1px solid var( --cf-os-border ); font-size: 11px; font-weight: 700; letter-spacing: 0; color: var( --cf-os-text-muted ); } /* Mentions get the brand-cyan accent; System/Approvals the magenta. */ .cf-notif__group--mentions .cf-notif__grouplabel { color: var( --cf-os-accent-cyan ); } .cf-notif__group--system .cf-notif__grouplabel { color: var( --cf-os-accent-magenta ); } .cf-notif__list { list-style: none; margin: 0; /* v2.21.0 — each list is a shadow card, matching the rest of the OS. */ padding: 6px; background: var( --cf-os-surface ); border: 1px solid var( --cf-os-border ); border-radius: 14px; box-shadow: 0 6px 20px rgba( 15, 23, 42, 0.06 ); } .cf-notif__item.is-collapsed { display: none; } .cf-notif__viewall { display: block; width: 100%; margin: 8px 0 0; padding: 9px; background: transparent; border: 1px solid var( --cf-os-border ); border-radius: 10px; color: var( --cf-os-accent ); font-weight: 700; font-size: 13px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .cf-notif__viewall:hover, .cf-notif__viewall:focus-visible { background: var( --cf-os-bg ); border-color: var( --cf-os-accent ); outline: none; } .cf-notif__item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; transition: background 0.15s ease; } .cf-notif__item + .cf-notif__item { border-top: 1px solid var( --cf-os-border ); border-radius: 0; } /* Actionable (routable) notifications (v1.83.0). */ .cf-notif__item--link { cursor: pointer; } .cf-notif__item--link:hover { background: var( --cf-os-bg ); } .cf-notif__item--link:focus-visible { outline: 2px solid var( --cf-os-accent ); outline-offset: -2px; } .cf-notif__chevron { flex: 0 0 auto; display: inline-flex; align-items: center; color: var( --cf-os-text-muted ); opacity: 0.6; transition: transform 0.15s ease, opacity 0.15s ease; } .cf-notif__item--link:hover .cf-notif__chevron { opacity: 1; transform: translateX( 2px ); color: var( --cf-os-accent ); } .cf-notif__item.is-unread { background: #eff6ff; border-top-color: transparent; border-radius: 12px; } .cf-notif__item.is-unread + .cf-notif__item.is-unread { margin-top: 6px; } .cf-notif__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var( --cf-app, var( --cf-os-accent ) ); box-shadow: 0 4px 10px rgba( 15, 23, 42, 0.12 ); } .cf-notif__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cf-notif__msg { font-size: 14px; line-height: 1.4; color: var( --cf-os-text ); } .cf-notif__msg strong { font-weight: 700; } .cf-notif__time { font-size: 12px; color: var( --cf-os-text-muted ); } .cf-notif__unread { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var( --cf-os-accent ); visibility: hidden; } .cf-notif__item.is-unread .cf-notif__unread { visibility: visible; } /* Definition list + chips (Settings). */ .cf-os__defs { display: grid; grid-template-columns: minmax( 120px, max-content ) 1fr; gap: 8px 18px; margin: 0 0 8px; font-size: 14px; } .cf-os__defs dt { font-weight: 700; color: var( --cf-os-text-muted ); } .cf-os__defs dd { margin: 0; color: var( --cf-os-text ); } .cf-os__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; } .cf-os__chip { padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; } .cf-os__chip--on { background: #dcfce7; color: #166534; } .cf-os__chip--off { background: #e2e8f0; color: #64748b; } /* ------------------------------------------------------------------------- * Guest (logged-out) state. * ---------------------------------------------------------------------- */ .cf-os--guest { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 24px; } .cf-os__guestcard { text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .cf-os__guestcard h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: #0f172a; } .cf-os__guestcard p { margin: 0 0 18px; color: #64748b; } .cf-os__guestbtn { display: inline-block; padding: 11px 26px; border-radius: 12px; background: var( --cf-brand-primary, #2563eb ); color: var( --cf-brand-on-primary, #ffffff ); font-weight: 700; text-decoration: none; } /* ------------------------------------------------------------------------- * Responsive: more columns on wider screens. * ---------------------------------------------------------------------- */ @media ( min-width: 560px ) { .cf-os__springboard { grid-template-columns: repeat( 3, 1fr ); gap: 28px 18px; } } @media ( min-width: 820px ) { .cf-os__springboard { grid-template-columns: repeat( 4, 1fr ); } .cf-os__icon { width: 74px; height: 74px; border-radius: 20px; } } @media ( prefers-reduced-motion: reduce ) { .cf-os__icon, .cf-os__home, .cf-os__avatar { transition: none; } .cf-os__spinner { animation: none; } } /* ========================================================================= * CRM Hub — "Cards + Velocity vs. Depth" (v1.59.0). * ====================================================================== */ .cf-crm { width: 100%; } /* Masonry card grid — 1 column on phones, 2 on the desktop. */ .cf-crm__feed { display: grid; grid-template-columns: 1fr; gap: 14px; } @media ( min-width: 720px ) { .cf-crm__feed { grid-template-columns: repeat( 2, 1fr ); } } .cf-hub-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left; background: var( --cf-os-surface ); color: var( --cf-os-text ); border: 1px solid var( --cf-os-border ); border-radius: 12px; box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.06 ), 0 6px 16px rgba( 15, 23, 42, 0.05 ); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .cf-hub-card:hover, .cf-hub-card:focus-visible { transform: translateY( -2px ); box-shadow: 0 6px 14px rgba( 15, 23, 42, 0.10 ), 0 14px 30px rgba( 15, 23, 42, 0.10 ); outline: none; } .cf-hub-card.is-active { border-color: var( --cf-os-accent ); box-shadow: 0 0 0 2px var( --cf-os-accent ), 0 10px 24px rgba( 37, 99, 235, 0.18 ); } .cf-hub-card__avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var( --cf-app, var( --cf-os-accent ) ); color: #fff; font-size: 18px; font-weight: 800; overflow: hidden; } .cf-hub-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .cf-hub-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cf-hub-card__name { font-size: 16px; font-weight: 700; color: var( --cf-os-text ); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-hub-card__contact { font-size: 13px; color: var( --cf-os-text-muted ); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-hub-card__tier { align-self: flex-start; margin-top: 4px; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: #eef2ff; color: #4338ca; } .cf-hub-card .cf-os__pill { flex: 0 0 auto; align-self: flex-start; } /* Mobile (Task 1): stack the card contents vertically so EVERY field — * name, contact, tier, status — is fully visible (no truncation, no overlap). */ @media ( max-width: 768px ) { .cf-hub-card { flex-direction: column; align-items: flex-start; gap: 6px; } .cf-hub-card__avatar { margin-bottom: 4px; } .cf-hub-card__body { width: 100%; gap: 0; } .cf-hub-card__name, .cf-hub-card__contact { white-space: normal; overflow: visible; text-overflow: clip; margin-bottom: 4px; } .cf-hub-card__tier { margin-top: 0; margin-bottom: 4px; } .cf-hub-card .cf-os__pill { align-self: flex-start; } } /* ---- Quick actions (Call / Email) ---- */ .cf-crm__actions { display: flex; gap: 10px; margin-bottom: 16px; } .cf-crm__btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; border: 0; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; transition: filter 0.15s ease, background 0.15s ease; } .cf-crm__btn:focus-visible { outline: 2px solid var( --cf-os-accent ); outline-offset: 2px; } .cf-crm__btn--call, .cf-crm__btn--email { flex: 1 1 0; color: #fff; } .cf-crm__btn--call { background: #16a34a; } .cf-crm__btn--email { background: #2563eb; } .cf-crm__btn--call:hover, .cf-crm__btn--email:hover { filter: brightness( 0.94 ); } /* Leadership Role tagging (v1.78.0). */ .cf-crm__rolefield { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .cf-crm__role-label { font-size: 13px; font-weight: 700; color: var( --cf-os-text-muted ); } .cf-crm__role-select { padding: 10px 12px; border: 1px solid var( --cf-os-border ); border-radius: 10px; background: var( --cf-os-surface ); color: var( --cf-os-text ); font: inherit; font-size: 14px; cursor: pointer; } .cf-crm__role-select:focus { outline: none; border-color: var( --cf-os-accent ); box-shadow: 0 0 0 3px rgba( 37, 99, 235, 0.15 ); } .cf-crm__role-select[disabled] { opacity: 0.6; cursor: default; } .cf-crm__note { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .cf-crm__note-label { font-size: 13px; font-weight: 700; color: var( --cf-os-text-muted ); } .cf-crm__note-text { width: 100%; padding: 10px 12px; border: 1px solid var( --cf-os-border ); border-radius: 10px; font: inherit; font-size: 14px; resize: vertical; box-sizing: border-box; background: var( --cf-os-surface ); color: var( --cf-os-text ); } .cf-crm__note-text:focus { outline: none; border-color: var( --cf-os-accent ); box-shadow: 0 0 0 3px rgba( 37, 99, 235, 0.15 ); } .cf-crm__btn--save { align-self: flex-end; background: var( --cf-os-accent ); color: #fff; } .cf-crm__btn--save:hover { filter: brightness( 0.94 ); } .cf-crm__btn--save[disabled] { opacity: 0.6; cursor: default; } .cf-crm__btn--full { width: 100%; background: var( --cf-os-bg ); color: var( --cf-os-text ); border: 1px solid var( --cf-os-border ); } .cf-crm__btn--full:hover { background: #e9eef5; } /* ---- Deep profile view ---- */ .cf-crm__hero { display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: 16px 16px 0 0; /* v2.21.0 — a stronger dark scrim guarantees ADA-compliant (>=4.5:1) contrast for the white hero text on ANY per-business accent, including light ones. */ background: linear-gradient( 135deg, rgba( 0, 0, 0, 0.42 ), rgba( 0, 0, 0, 0.58 ) ), var( --cf-app, var( --cf-os-accent ) ); color: #fff; } .cf-crm__hero-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 16px; background: rgba( 255, 255, 255, 0.22 ); font-size: 26px; font-weight: 800; overflow: hidden; } .cf-crm__hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .cf-crm__hero-main { flex: 1 1 auto; min-width: 0; } .cf-crm__hero-name { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.15; /* v2.21.0 — always white + a soft shadow so the name stays legible (ADA) on the accent hero regardless of the tenant's brand color. */ color: #fff; text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.45 ); } .cf-crm__hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .cf-crm__hero-tier { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba( 255, 255, 255, 0.22 ); color: #fff; } .cf-crm__hero-link { flex: 0 0 auto; padding: 9px 16px; border-radius: 10px; background: rgba( 255, 255, 255, 0.18 ); color: #fff; font-weight: 700; font-size: 13px; text-decoration: none; } .cf-crm__hero-link:hover { background: rgba( 255, 255, 255, 0.30 ); color: #fff; } .cf-crm__back { display: inline-block; margin: 16px 0; padding: 8px 14px; border: 1px solid var( --cf-os-border ); border-radius: 10px; background: var( --cf-os-surface ); font-size: 14px; font-weight: 700; color: var( --cf-os-text ); cursor: pointer; } .cf-crm__back:hover { background: var( --cf-os-bg ); color: var( --cf-os-accent ); } .cf-crm__deepgrid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media ( min-width: 620px ) { .cf-crm__deepgrid { grid-template-columns: repeat( 2, 1fr ); } } .cf-crm__field { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var( --cf-os-surface ); border: 1px solid var( --cf-os-border ); border-radius: 12px; } .cf-crm__field-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var( --cf-os-text-muted ); } .cf-crm__field-val { font-size: 15px; color: var( --cf-os-text ); word-break: break-word; } .cf-crm__field-val a { color: var( --cf-os-accent ); text-decoration: none; } .cf-crm__field-val a:hover { text-decoration: underline; } /* ---- Deep-Dive Profile (crm_profile, v1.65.0) ---- */ .cf-crm-profile { max-width: 980px; margin: 0 auto; } /* Standalone hero (not glued to a grid beneath it). */ .cf-crm-profile .cf-crm__hero { border-radius: 16px; margin-top: 12px; } .cf-crm-profile__grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 18px; align-items: start; } @media ( min-width: 860px ) { .cf-crm-profile__grid { grid-template-columns: 1.35fr 1fr; } } .cf-crm-profile__details { display: flex; flex-direction: column; gap: 16px; } .cf-crm-profile__history { background: var( --cf-os-surface ); border: 1px solid var( --cf-os-border ); border-radius: 16px; padding: 16px 18px; } .cf-crm-profile__histtitle { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var( --cf-os-text ); } /* ---- Toast ---- */ .cf-os-toast { position: fixed; left: 50%; bottom: 28px; transform: translate( -50%, 16px ); z-index: 9999; max-width: 90vw; padding: 12px 20px; border-radius: 12px; background: #0f172a; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 12px 30px rgba( 15, 23, 42, 0.35 ); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .cf-os-toast.is-visible { opacity: 1; transform: translate( -50%, 0 ); } @media ( prefers-reduced-motion: reduce ) { .cf-hub-card, .cf-crm__btn, .cf-os-toast { transition: none; } } /* ========================================================================= * Agency Routing form (System Settings) — v1.60.0. * ====================================================================== */ .cf-os__form { margin: 0; } .cf-os__flabel { display: block; font-size: 14px; font-weight: 700; color: var( --cf-os-text ); } .cf-os__fhelp { margin: 4px 0 10px; font-size: 13px; color: var( --cf-os-text-muted ); } .cf-os__frow { display: flex; gap: 10px; flex-wrap: wrap; } /* v2.29.0 — breathing room above a settings panel's Save row so the button isn't glued to the last field (e.g. the Routing slug inputs). */ .cf-set__panel .cf-os__frow { margin-top: 20px; } .cf-os__input { flex: 1 1 220px; min-width: 0; padding: 10px 12px; border: 1px solid var( --cf-os-border ); border-radius: 10px; font: inherit; font-size: 14px; box-sizing: border-box; background: var( --cf-os-surface ); color: var( --cf-os-text ); } .cf-os__input:focus { outline: none; border-color: var( --cf-os-accent ); box-shadow: 0 0 0 3px rgba( 37, 99, 235, 0.15 ); } .cf-os__btn { flex: 0 0 auto; padding: 10px 20px; border: 0; border-radius: 10px; background: var( --cf-os-accent ); color: var( --cf-os-accent-ink ); font-size: 14px; font-weight: 700; cursor: pointer; transition: filter 0.15s ease; } .cf-os__btn:hover { filter: brightness( 0.94 ); } .cf-os__btn[disabled] { opacity: 0.6; cursor: default; } /* Quick Report Configuration checklist (v1.76.0). */ .cf-os__checklist { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; } .cf-os__check { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var( --cf-os-border ); border-radius: 12px; background: var( --cf-os-surface ); cursor: pointer; transition: border-color 0.15s ease; } .cf-os__check:hover { border-color: var( --cf-os-accent ); } .cf-os__check input { margin-top: 2px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var( --cf-os-accent ); cursor: pointer; } .cf-os__check-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cf-os__check-title { font-size: 14px; font-weight: 700; color: var( --cf-os-text ); } .cf-os__check-desc { font-size: 12.5px; line-height: 1.45; color: var( --cf-os-text-muted ); } /* ========================================================================= * Feature Lab — painted-door cards (v1.60.0). * ====================================================================== */ .cf-flab__intro { margin: 0 auto 20px; max-width: 640px; text-align: center; font-size: 15px; color: var( --cf-os-text-muted ); } .cf-flab__grid { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 1040px; margin: 0 auto; } @media ( min-width: 640px ) { .cf-flab__grid { grid-template-columns: repeat( 2, 1fr ); } } @media ( min-width: 960px ) { .cf-flab__grid { grid-template-columns: repeat( 3, 1fr ); } } .cf-flab__card { position: relative; display: flex; flex-direction: column; padding: 22px 20px 20px; background: var( --cf-os-surface ); border: 1px solid var( --cf-os-border ); border-radius: 16px; border-top: 4px solid var( --cf-app, var( --cf-os-accent ) ); box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.06 ), 0 10px 26px rgba( 15, 23, 42, 0.06 ); transition: transform 0.15s ease, box-shadow 0.15s ease; } .cf-flab__card:hover { transform: translateY( -3px ); box-shadow: 0 12px 28px rgba( 15, 23, 42, 0.12 ); } .cf-flab__badge { align-self: flex-start; margin-bottom: 12px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var( --cf-app, var( --cf-os-accent ) ); background: color-mix( in srgb, var( --cf-app, #2563eb ) 12%, #ffffff ); } /* Fallback for browsers without color-mix. */ @supports not ( background: color-mix( in srgb, red 10%, white ) ) { .cf-flab__badge { background: #eef2ff; } } .cf-flab__name { margin: 0 0 8px; font-size: 18px; font-weight: 800; color: var( --cf-os-text ); line-height: 1.25; } .cf-flab__desc { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var( --cf-os-text-muted ); flex: 1 1 auto; } /* L0-only architecture note + tags (rendered for Super Admins / Developers). */ .cf-flab__arch { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba( 124, 58, 237, 0.08 ); border: 1px dashed var( --cf-os-border ); font-size: 12.5px; line-height: 1.5; color: var( --cf-os-text ); } .cf-flab__arch-label { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var( --cf-os-accent-magenta, #e9128c ); } .cf-flab__tags { margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; } .cf-flab__tag { padding: 2px 8px; border-radius: 999px; background: var( --cf-os-bg ); border: 1px solid var( --cf-os-border ); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var( --cf-os-text-muted ); } .cf-flab__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 16px; border: 0; border-radius: 11px; background: var( --cf-app, var( --cf-os-accent ) ); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: filter 0.15s ease, opacity 0.15s ease; } .cf-flab__btn:hover { filter: brightness( 0.94 ); } .cf-flab__btn:focus-visible { outline: 2px solid var( --cf-os-text ); outline-offset: 2px; } .cf-flab__btn[disabled] { cursor: default; } .cf-flab__btn.is-joined { background: #0f172a; opacity: 0.92; } .cf-flab__spin { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba( 255, 255, 255, 0.5 ); border-top-color: #fff; border-radius: 50%; animation: cf-os-spin 0.7s linear infinite; } @media ( prefers-reduced-motion: reduce ) { .cf-flab__card, .cf-flab__btn, .cf-os__btn { transition: none; } .cf-flab__spin { animation: none; } } /* ========================================================================= * Dark-mode refinements — surfaces that hardcode a light tint (v1.62.0). * ====================================================================== */ body[data-theme="dark"] .cf-notif__item.is-unread { background: rgba( 12, 210, 233, 0.10 ); /* strategic neon cyan */ } body[data-theme="dark"] .cf-flab__badge { background: rgba( 12, 210, 233, 0.14 ); color: var( --cf-os-accent-cyan ); } /* Keep the springboard tile labels + app names crisp on the dark canvas. */ body[data-theme="dark"] .cf-os__retry, body[data-theme="dark"] .cf-crm__btn--full { color: var( --cf-os-text ); } /* ========================================================================= * Events Hub — upcoming-events grid + quick-create slide-out (v1.66.0). * ====================================================================== */ .cf-evt { max-width: 860px; margin: 0 auto; } .cf-evt__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .cf-evt__intro { margin: 0; font-size: 14px; font-weight: 600; color: var( --cf-os-text-muted ); } .cf-evt__add { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 10px 16px; border: 0; border-radius: 11px; background: var( --cf-os-accent ); color: var( --cf-os-accent-ink ); font-size: 14px; font-weight: 700; cursor: pointer; transition: filter 0.15s ease; } .cf-evt__add:hover { filter: brightness( 0.94 ); } /* List / grid. */ .cf-evt__list { display: grid; grid-template-columns: 1fr; gap: 12px; } @media ( min-width: 720px ) { .cf-evt__list { grid-template-columns: repeat( 2, 1fr ); } } .cf-evt__card { display: block; overflow: hidden; background: var( --cf-os-surface ); border: 1px solid var( --cf-os-border ); border-radius: 14px; box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.05 ); transition: transform 0.15s ease, box-shadow 0.15s ease; } .cf-evt__card:hover { transform: translateY( -2px ); box-shadow: 0 8px 20px rgba( 15, 23, 42, 0.10 ); } /* v2.17.0 — quick-search toolbar + delegation toggle + card edit affordances. */ .cf-evt__toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; } .cf-evt__filter { flex: 1 1 160px; min-width: 140px; padding: 9px 12px; font-size: 14px; color: var( --cf-os-text ); background: var( --cf-os-surface ); border: 1px solid var( --cf-os-border ); border-radius: 10px; } .cf-evt__filter:focus { outline: none; border-color: var( --cf-os-accent ); box-shadow: 0 0 0 3px rgba( 37, 99, 235, 0.15 ); } .cf-evt__delegate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 14px; background: var( --cf-os-bg ); border: 1px solid var( --cf-os-border ); border-radius: 12px; } .cf-evt__switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 600; color: var( --cf-os-text ); } .cf-evt__switch input { position: absolute; opacity: 0; width: 0; height: 0; } .cf-evt__switch-track { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background: var( --cf-os-border ); transition: background 0.15s ease; } .cf-evt__switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.3 ); transition: transform 0.15s ease; } .cf-evt__switch input:checked + .cf-evt__switch-track { background: var( --cf-os-accent ); } .cf-evt__switch input:checked + .cf-evt__switch-track::after { transform: translateX( 18px ); } .cf-evt__switch input:focus-visible + .cf-evt__switch-track { outline: 2px solid var( --cf-os-accent ); outline-offset: 2px; } .cf-evt__delegate-status { font-size: 13px; color: var( --cf-os-text-muted ); } .cf-evt__card-actions { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var( --cf-os-border ); } .cf-evt__card-edit { padding: 6px 14px; font-size: 13px; font-weight: 600; color: #fff; background: var( --cf-os-accent ); border: 0; border-radius: 8px; cursor: pointer; } .cf-evt__card-edit:hover { filter: brightness( 0.95 ); } .cf-evt__card-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600; color: var( --cf-os-accent ); background: rgba( 37, 99, 235, 0.10 ); border-radius: 999px; vertical-align: middle; } .cf-evt__banner { height: 132px; background-size: cover; background-position: center; background-color: var( --cf-os-bg ); border-bottom: 1px solid var( --cf-os-border ); } .cf-evt__row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; } .cf-evt__price { display: inline-block; align-self: flex-start; margin-top: 8px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: color-mix( in srgb, var( --cf-os-accent ) 14%, transparent ); color: var( --cf-os-accent ); } .cf-evt__price.is-free { background: #dcfce7; color: #166534; } body[data-theme="dark"] .cf-evt__price.is-free { background: rgba( 34, 197, 94, 0.16 ); color: #4ade80; } @supports not ( background: color-mix( in srgb, red 10%, transparent ) ) { .cf-evt__price { background: var( --cf-os-bg ); } } .cf-evt__date { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 56px; border-radius: 12px; background: var( --cf-os-bg ); border: 1px solid var( --cf-os-border ); } .cf-evt__date-mon { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var( --cf-os-accent-magenta ); } .cf-evt__date-day { font-size: 22px; font-weight: 800; line-height: 1; color: var( --cf-os-text ); } .cf-evt__main { flex: 1 1 auto; min-width: 0; } .cf-evt__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var( --cf-os-text ); line-height: 1.25; } .cf-evt__meta { display: flex; flex-direction: column; gap: 2px; } .cf-evt__metaitem { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var( --cf-os-text-muted ); } .cf-evt__count { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 54px; padding-left: 8px; border-left: 1px solid var( --cf-os-border ); } .cf-evt__count-num { font-size: 22px; font-weight: 800; line-height: 1; color: var( --cf-os-accent-cyan ); font-variant-numeric: tabular-nums; } .cf-evt__count-label { margin-top: 3px; font-size: 11px; font-weight: 600; color: var( --cf-os-text-muted ); text-align: center; } /* The RSVP count doubles as the "view attendees" affordance (v1.89.0). */ .cf-evt__count.cf-evt-attendees { cursor: pointer; border-radius: 10px; transition: background-color 0.15s ease; } .cf-evt__count.cf-evt-attendees:hover { background: var( --cf-os-bg ); } .cf-evt__count.cf-evt-attendees:focus-visible { outline: 2px solid var( --cf-os-accent ); outline-offset: 2px; } /* --------------------------------------------------------------------------- * Event attendee roster + guest accordion (v1.89.0). Dark-mode tokens. * ------------------------------------------------------------------------- */ .cf-att { max-width: 760px; margin: 0 auto; } .cf-att__head { margin-bottom: 16px; } .cf-att__title { margin: 0 0 2px; font-size: 18px; font-weight: 800; color: var( --cf-os-text ); } .cf-att__sub { margin: 0; font-size: 13px; color: var( --cf-os-text-muted ); } .cf-att__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .cf-att__row { background: var( --cf-os-surface ); border: 1px solid var( --cf-os-border ); border-radius: 12px; overflow: hidden; } .cf-att__primary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; } .cf-att__toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var( --cf-os-border ); border-radius: 8px; background: var( --cf-os-bg ); color: var( --cf-os-text-muted ); cursor: pointer; transition: transform 0.15s ease, color 0.15s ease; } .cf-att__toggle:hover { color: var( --cf-os-text ); } .cf-att__toggle--empty { border-color: transparent; background: transparent; cursor: default; } .cf-att__row.is-open .cf-att__toggle { transform: rotate( 90deg ); color: var( --cf-os-accent ); } .cf-att__name { font-size: 14px; font-weight: 700; color: var( --cf-os-text ); } .cf-att__meta { margin-left: 4px; font-size: 12.5px; color: var( --cf-os-text-muted ); font-variant-numeric: tabular-nums; } .cf-att__status { margin-left: auto; flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .cf-att__status.is-paid { background: rgba( 22, 163, 74, 0.16 ); color: #16a34a; } .cf-att__status.is-pending { background: rgba( 217, 119, 6, 0.16 ); color: #d97706; } .cf-att__status.is-other { background: var( --cf-os-bg ); color: var( --cf-os-text-muted ); } .cf-att__children { list-style: none; margin: 0; padding: 6px 14px 12px 50px; border-top: 1px solid var( --cf-os-border ); display: flex; flex-direction: column; gap: 4px; } .cf-att__child { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; } .cf-att__child-name { font-size: 13px; font-weight: 600; color: var( --cf-os-text ); } .cf-att__child-email { font-size: 12px; color: var( --cf-os-text-muted ); } /* Data-migration card (Settings → Financials, L0/L1 only; v1.91.0). */ .cf-mig { margin-top: 6px; padding: 14px 16px; background: var( --cf-os-bg ); border: 1px solid var( --cf-os-border ); border-radius: 12px; } .cf-mig__count { margin: 8px 0 10px; font-size: 13px; font-weight: 700; color: var( --cf-os-text ); } .cf-mig__status { margin-top: 8px; min-height: 1em; font-size: 12.5px; font-weight: 600; color: var( --cf-os-text-muted ); } /* Support & Site Updates form (v1.96.0). */ .cf-sup { max-width: 640px; margin: 0 auto; } .cf-sup__intro { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var( --cf-os-text-muted ); } .cf-sup__form { display: flex; flex-direction: column; } .cf-sup__input { margin-bottom: 4px; /* v2.29.0 — the shared .cf-os__input sets flex:1 1 220px, which made the Request Type / Target Page