/* ============================================================================ Web tier gating + account bar styles (preview build) Loaded AFTER styles.css so it can hide Prime-only UI for Basic users. ============================================================================ */ /* ---- Account bar (top, preview) ---- */ .mcc-account-bar { position: sticky; top: 0; z-index: 5000; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 16px; background: #24485a; color: #eaf1f4; font-family: Inter, system-ui, sans-serif; font-size: .88rem; } .mcc-account-bar .mcc-ab-left, .mcc-account-bar .mcc-ab-right { display: flex; align-items: center; gap: 12px; } .mcc-ab-email { opacity: .8; } .mcc-tier-pill { font-weight: 800; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; } .mcc-tier-pill.is-basic { background: #e6eef1; color: #24485a; } .mcc-tier-pill.is-prime { background: #f2b84b; color: #6a4e12; } .mcc-tier-pill.is-lifetime { background: #7c5cff; color: #fff; } .mcc-ab-link { color: #cfe0e7; background: transparent; border: 0; cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; } .mcc-ab-link:hover { color: #fff; } .mcc-ab-preview { position: absolute; left: 50%; transform: translateX(-50%); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .55; } /* Plan selector (preview) */ .mcc-plan-select-wrap { display: inline-flex; align-items: center; gap: 7px; } .mcc-plan-select { font: inherit; font-size: .85rem; padding: 4px 8px; border-radius: 8px; border: 1px solid #4f6f7e; background: #1c3b49; color: #eaf1f4; cursor: pointer; } .mcc-plan-select:focus { outline: 2px solid #f2b84b; } /* ============================================================================ GATING RULES (only apply when ) ============================================================================ */ /* ---- CPT Code Sequence column: hidden for Basic ---- */ body.tier-basic .cpt-sequence-section { display: none !important; } /* Show a small locked placeholder where CPT used to be */ body.tier-basic .sequence-panel-dual-cpt::after { content: '\1F512 CPT Code Sequence \2014 Prime feature'; grid-column: 2; align-self: center; padding: 10px 12px; border: 1px dashed #e0b451; border-radius: 10px; background: #fff7e6; color: #6a4e12; font-weight: 700; font-family: Inter, system-ui, sans-serif; font-size: .82rem; text-align: center; } /* ---- At-a-Glance overview deck ---- IMPORTANT: .tag-title-overview and .at-a-glance-category-rows are the SAME element (one node with both classes), so we hide that node and inject an upgrade notice on the card wrapper instead. */ body.tier-basic .tag-title-overview.at-a-glance-category-rows { display: none !important; } body.tier-basic .ataglance-card-expanded > .tag-title-overview, body.tier-basic .ataglance-card-collapsed > .tag-title-overview { display: none !important; } body.tier-basic .at-a-glance-category-break::before { content: '\1F512 At-a-Glance is a Prime feature \2014 upgrade to unlock the visual overview.'; display: block !important; padding: 16px 18px; margin: 6px 0; background: #fff7e6; border: 1px dashed #e0b451; border-radius: 12px; color: #6a4e12; font-weight: 700; font-family: Inter, system-ui, sans-serif; font-size: .92rem; } /* ---- Recall-tag checkbox row: dim + lock for Basic. Option B: Add Note (.tag-note-toggle) and DO NOT (.do-not-toggle) stay FREE. Everything else in the row is locked. We keep clicks enabled so the JS gate can show the upgrade modal; cursor signals it's locked. ---- */ body.tier-basic .sequence-subnote-toggles .subnote-toggle:not(.tag-note-toggle):not(.do-not-toggle) { opacity: .45; position: relative; cursor: pointer; } body.tier-basic .sequence-subnote-toggles .subnote-toggle:not(.tag-note-toggle):not(.do-not-toggle)::after { content: '\1F512'; margin-left: 6px; font-size: .8em; opacity: .85; } /* ---- Highlighting palette trigger: locked for Basic ---- */ body.tier-basic [data-action="toggle-sequence-entry-highlight-palette"], body.tier-basic [data-action="set-sequence-entry-highlight"] { opacity: .45; cursor: pointer; } /* ---- "Add more" limits for Basic: dim the add buttons + show a lock, so the first entry is usable but adding more nudges toward Prime. ---- */ body.tier-basic [data-action="add-sequence-entry"], body.tier-basic [data-action="add-extra-note"], body.tier-basic [data-action="add-scenario-box"], body.tier-basic [data-action="add-detail-box"] { opacity: .5; cursor: pointer; position: relative; } body.tier-basic [data-action="add-sequence-entry"]::after, body.tier-basic [data-action="add-extra-note"]::after, body.tier-basic [data-action="add-scenario-box"]::after, body.tier-basic [data-action="add-detail-box"]::after { content: '\1F512'; margin-left: 4px; font-size: .85em; } /* ---- Prime-only toolbar buttons get a lock badge + muted look ---- */ body.tier-basic #exportBtn, body.tier-basic #suggestBtn { opacity: .6; } body.tier-basic #exportBtn::after, body.tier-basic #suggestBtn::after { content: ' \1F512'; font-size: .85em; } /* ============================================================================ WEB HEADER — clean, solid, no frosted blur The old .topbar used a frosted-glass blur built for the desktop app; on the web it looked fuzzy. Replace it with a crisp solid header + readable text. ============================================================================ */ body[data-web-app="true"] .topbar { background: #24485a !important; /* solid brand navy */ border: 0 !important; border-radius: 16px !important; box-shadow: 0 8px 24px rgba(31, 41, 51, .18) !important; backdrop-filter: none !important; /* kill the fuzzy blur */ -webkit-backdrop-filter: none !important; } body[data-web-app="true"] .brand-block h1 { background: none !important; /* remove gradient-clip text */ -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #ffffff !important; /* crisp solid white */ text-shadow: none !important; letter-spacing: .2px; } body[data-web-app="true"] .brand-block p { color: #cfe0e7 !important; /* soft readable subtitle */ text-shadow: none !important; } /* ---- A friendly banner so the Basic user always knows what plan they're on ---- */ body.tier-basic .app-shell::before { content: 'Basic plan \2014 notes, DO NOT & Add Note, ICD sequence, search, 2 books. Locked items (\1F512) are Prime.'; display: block; text-align: center; padding: 7px 14px; background: #eef4f6; color: #24485a; font-family: Inter, system-ui, sans-serif; font-size: .8rem; font-weight: 600; border-bottom: 1px solid #d8e3e8; } body.tier-prime .app-shell::before { content: 'Prime plan \2014 everything unlocked. \2728'; display: block; text-align: center; padding: 7px 14px; background: #fff7e6; color: #6a4e12; font-family: Inter, system-ui, sans-serif; font-size: .8rem; font-weight: 600; border-bottom: 1px solid #ecd9a8; } /* ---- Upgrade modal ---- */ .mcc-upgrade-overlay { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(20, 33, 41, .55); backdrop-filter: blur(2px); font-family: Inter, system-ui, sans-serif; } .mcc-upgrade-card { width: min(440px, 92vw); background: #fff; border-radius: 18px; padding: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.3); text-align: center; position: relative; } .mcc-upgrade-badge { display: inline-block; background: #f2b84b; color: #6a4e12; font-weight: 800; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; } .mcc-upgrade-card h3 { margin: 0 0 10px; color: #24485a; font-size: 1.25rem; } .mcc-upgrade-card p { margin: 0 0 18px; color: #51606c; } .mcc-upgrade-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .mcc-btn-primary, .mcc-btn-ghost { border: 0; cursor: pointer; font-weight: 700; padding: 11px 20px; border-radius: 999px; font-size: .95rem; } .mcc-btn-primary { background: #305f72; color: #fff; } .mcc-btn-primary:hover { background: #24485a; } .mcc-btn-ghost { background: transparent; color: #305f72; border: 1.5px solid #cdd9de; } .mcc-btn-lifetime { background: #7c5cff; color: #fff; } .mcc-btn-lifetime:hover { background: #6a49f0; } .mcc-upgrade-later { display: block; margin: 14px auto 0; background: none; border: 0; cursor: pointer; color: #9aa6ae; font: inherit; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; } .mcc-upgrade-foot { margin: 10px 0 0; font-size: .78rem; color: #9aa6ae; } /* ---- Stripe checkout return banner ---- */ .mcc-checkout-banner { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); max-width: 560px; width: calc(100% - 32px); background: #24485a; color: #fff; padding: 14px 20px; border-radius: 12px; box-shadow: 0 10px 30px rgba(31, 41, 51, .28); font-size: 14px; line-height: 1.4; z-index: 100000; opacity: 0; transition: opacity .35s ease, transform .35s ease; text-align: center; } .mcc-checkout-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); } .mcc-checkout-banner.success { background: #1f7a4d; } .mcc-checkout-banner.cancel { background: #6b4b1f; } /* ---- Payment celebration: confetti + fanfare card ---- */ .mcc-confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 100002; overflow: hidden; } .mcc-confetti { position: absolute; top: -20px; display: block; will-change: transform, opacity; animation-name: mcc-confetti-fall; animation-timing-function: ease-in; animation-fill-mode: forwards; opacity: 0.95; } @keyframes mcc-confetti-fall { 0% { transform: translate(0, -20px) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--drift, 0px), 104vh) rotate(var(--rot, 360deg)); opacity: 0.9; } } .mcc-celebrate { position: fixed; inset: 0; z-index: 100003; display: flex; align-items: center; justify-content: center; background: rgba(20, 32, 40, .45); opacity: 0; transition: opacity .35s ease; padding: 20px; } .mcc-celebrate.show { opacity: 1; } .mcc-celebrate-inner { background: #fff; border-radius: 20px; padding: 34px 36px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 24px 70px rgba(20, 32, 40, .35); transform: scale(.88) translateY(10px); transition: transform .4s cubic-bezier(.2,.9,.3,1.4); } .mcc-celebrate.show .mcc-celebrate-inner { transform: scale(1) translateY(0); } .mcc-celebrate-emoji { font-size: 54px; line-height: 1; margin-bottom: 8px; animation: mcc-pop .6s ease; } @keyframes mcc-pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } } .mcc-celebrate-inner h2 { margin: 6px 0 6px; font-size: 26px; color: #24485a; font-weight: 800; } .mcc-celebrate-inner p { margin: 0 0 20px; color: #4a5b64; font-size: 15px; line-height: 1.5; } .mcc-celebrate-btn { background: #f2b84b; color: #24485a; border: 0; border-radius: 12px; padding: 12px 30px; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 16px rgba(242, 184, 75, .4); transition: transform .15s ease, box-shadow .15s ease; } .mcc-celebrate-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(242, 184, 75, .5); } .mcc-celebrate-btn:active { transform: translateY(0); }