/* ════════════════════════════════════════════════════════════════════ Account-tier locked-feature UI ════════════════════════════════════════════════════════════════════ Pattern: every "client-tier" feature is wrapped in a container with data-tier="client". For basic users, JS toggles `.is-locked` on the (or on the wrapper itself) and this CSS shows the lock overlay. Usage in HTML:

Freedom Number

... content ...

The actual feature card/section renders behind a semi-transparent veil with a centered lock icon + "Available after settlement" CTA. Compliance benefit: features stay visible (transparency), but blocked from interaction. Drives lead → settlement conversion. ════════════════════════════════════════════════════════════════════ */ /* ─── Base — feature visible to everyone ────────────────────────────── */ [data-tier="client"] { position: relative; } /* ─── Locked state — applied when user is on basic tier ─────────────── */ .tier-basic [data-tier="client"]::after { content: ''; position: absolute; inset: 0; background: rgba(245, 243, 238, 0.86); /* cream veil */ backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: inherit; z-index: 10; pointer-events: none; } /* The lock badge sits above the veil */ .tier-basic [data-tier="client"] > .tier-lock { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; flex-direction: column; z-index: 11; pointer-events: auto; cursor: pointer; border-radius: inherit; } [data-tier="client"] > .tier-lock { display: none; /* hidden for client users */ } /* The lock badge itself */ .tier-lock-badge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--navy, #12153D); color: var(--gold, #C9A84C); border: 1px solid rgba(201, 168, 76, 0.4); border-radius: 50px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; box-shadow: 0 8px 30px rgba(18, 21, 61, 0.18); transition: transform 0.2s, box-shadow 0.2s; } .tier-lock:hover .tier-lock-badge { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(18, 21, 61, 0.25); } .tier-lock-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; } .tier-lock-cta { margin-top: 14px; font-size: 0.78rem; color: var(--n-700, #4A4F6E); text-align: center; max-width: 280px; line-height: 1.45; } .tier-lock-cta strong { color: var(--navy, #12153D); font-weight: 600; } /* Disable interaction on the underlying content */ .tier-basic [data-tier="client"] > *:not(.tier-lock) { pointer-events: none; user-select: none; filter: grayscale(0.3); opacity: 0.6; } /* When the user clicks the lock, surface a tooltip / modal handler */ .tier-lock[data-modal-open="true"] .tier-lock-badge { background: var(--gold, #C9A84C); color: var(--navy, #12153D); } /* Compact variant for inline list items / smaller cards */ [data-tier="client"][data-tier-style="compact"] > .tier-lock .tier-lock-badge { padding: 6px 12px; font-size: 0.72rem; } [data-tier="client"][data-tier-style="compact"] > .tier-lock .tier-lock-cta { display: none; } /* Sidebar nav item locked variant */ .nav-item[data-tier="client"], .sb-link[data-tier="client"] { position: relative; } .tier-basic .nav-item[data-tier="client"]::before, .tier-basic .sb-link[data-tier="client"]::after { content: '🔒'; font-size: 0.7em; margin-left: auto; opacity: 0.55; } .tier-basic .nav-item[data-tier="client"]::before { margin-right: 4px; } .tier-basic .sb-link[data-tier="client"] { opacity: 0.75; } .tier-basic .sb-link[data-tier="client"]:hover { opacity: 1; } /* ════════════════════════════════════════════════════════════════════ Tier lock info modal ════════════════════════════════════════════════════════════════════ */ .tier-lock-modal-overlay { position: fixed; inset: 0; background: rgba(18, 21, 61, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; } .tier-lock-modal-overlay.is-open { display: flex; } .tier-lock-modal { background: var(--cream, #F5F3EE); border-radius: 16px; padding: 36px 32px 32px; max-width: 520px; width: 100%; position: relative; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); border: 1px solid rgba(201, 168, 76, 0.25); } .tier-lock-modal h2 { font-family: var(--font-display, 'Playfair Display', serif); font-size: 1.65rem; color: var(--navy, #12153D); line-height: 1.2; } .tier-lock-modal .eyebrow { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; } .tier-lock-modal-close { position: absolute; top: 12px; right: 14px; background: transparent; border: 0; font-size: 1.8rem; line-height: 1; color: var(--n-500, #4A4F6E); cursor: pointer; padding: 4px 10px; border-radius: 8px; transition: background 0.15s; } .tier-lock-modal-close:hover { background: rgba(0, 0, 0, 0.05); } @media (max-width: 540px) { .tier-lock-modal { padding: 32px 22px 24px; } .tier-lock-modal h2 { font-size: 1.4rem; } } /* ============================================================ HIDDEN FEATURES — public launch (27 May 2026) My Portfolio, Position Tracker and Milestones are hidden from the MyFinancials UI for the public launch. The pages, their JS (portfolio.js, strategy.js) and all data/tables remain intact — only the entry points are hidden. EMP is not killed; this is reversible by deleting this block (and the matching list in app.js routeTo / hidden-pages guard). ============================================================ */ .sb-link[data-page="emp-portfolio"], .sb-link[data-page="emp-history"], .sb-link[data-page="milestones"], .sb-link[data-page="emp-strategy-forecast"], .sb-link[data-page="raffi"], #navAssistantLabel, #settingsRoleLabel, #settingsEmpCard, #settingsRatesCard, .emp-only-card, [data-page-link="emp-portfolio"], [data-page-link="emp-history"], [data-page-link="milestones"], [data-page-link="emp-strategy-forecast"] { display: none !important; }