/* ============================================================================ app-flagship.css — shared flagship design + conversion layer for every specialty dashboard (Practice / Billing / DME / MSO). War Room 2026-06-10 ratified spec (96%). Inherits the --cc-* night-sky tokens from reimburseos-design.css; never edits them. Cyan #00D4FF is THE system accent (structure + CTA); each surface sets --sig-hue (identity) used ONLY in the hero eyebrow/keyline and the locked-glow/reveal — never table chrome. ============================================================================ */ /* Per-surface identity hue — set on etc. Default cyan. */ :root { --sig-hue:#00D4FF; --sig-hue-rgb:0,212,255; } [data-surface="practice"] { --sig-hue:#00D4FF; --sig-hue-rgb:0,212,255; } [data-surface="billing"] { --sig-hue:#8B5CF6; --sig-hue-rgb:139,92,246; } [data-surface="dme"] { --sig-hue:#10B981; --sig-hue-rgb:16,185,129; } [data-surface="mso"] { --sig-hue:#F59E0B; --sig-hue-rgb:245,158,11; } /* ── Magnitude-tier substrate: replaces raw filter:blur on a value. A designed pill that reads as "a specific thing behind glass", not an absence. ── */ .fx-sub{ display:inline-flex; align-items:center; justify-content:flex-end; min-width:72px; padding:0 8px; height:1.5em; border-radius:4px; font-family:var(--cc-font-mono); font-variant-numeric:tabular-nums; color:transparent; position:relative; user-select:none; vertical-align:middle; background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); } .fx-sub::before{ /* the blurred ghost figure */ content:attr(data-ghost); position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; padding:0 8px; color:var(--cc-fg-muted); filter:blur(8px); -webkit-filter:blur(8px); } .fx-sub::after{ /* frosted overlay defeats OLED readability */ content:""; position:absolute; inset:0; border-radius:4px; background:rgba(8,10,15,.45); box-shadow:0 0 0 0 rgba(var(--sig-hue-rgb),0); animation:fx-breathe 3.6s ease-in-out infinite; } @keyframes fx-breathe{ 0%,100%{box-shadow:0 0 0 0 rgba(var(--sig-hue-rgb),0)} 50%{box-shadow:0 0 14px -4px rgba(var(--sig-hue-rgb),.18)} } /* tier string shown over the substrate (honest scale, not a fake digit) */ .fx-tier{ font-family:var(--cc-font-mono); font-variant-numeric:tabular-nums; color:var(--cc-fg-muted); letter-spacing:.02em; } /* ── Drawn gap / heat / variance bar — renders at the REAL ratio even while the paired dollar is locked. Animates scaleX(0->1) on reveal. ── */ .fx-bar{ position:relative; height:4px; border-radius:2px; overflow:hidden; background:rgba(255,255,255,.08); width:100%; } .fx-bar__fill{ position:absolute; inset:0 auto 0 0; height:100%; border-radius:2px; transform:scaleX(var(--r,0)); transform-origin:left center; transition:transform .58s var(--cc-ease-expo,cubic-bezier(.22,1,.36,1)); background:linear-gradient(90deg, rgba(var(--sig-hue-rgb),.85), rgba(var(--sig-hue-rgb),.45)); } .fx-bar--danger .fx-bar__fill{ background:linear-gradient(90deg,#EF4444,rgba(239,68,68,.5)); } .fx-bar--success .fx-bar__fill{ background:linear-gradient(90deg,#10B981,rgba(16,185,129,.5)); } /* left-edge per-row heat keyline ranks rows by quartile */ .fx-heat{ position:relative; } .fx-heat::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:2px; background:var(--cc-border); transition:background .2s; } .fx-heat[data-q="top"]::before{ background:var(--cc-accent); } .fx-heat[data-q="mid"]::before{ background:#F59E0B; } .fx-heat[data-q="low"]::before{ background:#EF4444; } /* ── The ONE upgrade moment: inline glass CTA card above the first locked row ── */ .fx-cta{ position:relative; margin:4px 0 22px; padding:20px 22px; border-radius:16px; background:rgba(10,11,15,.85); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border:1px solid rgba(var(--sig-hue-rgb),.40); overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px -18px rgba(0,0,0,.6); } .fx-cta__eyebrow{ font-family:var(--cc-font-mono); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sig-hue); margin-bottom:8px; } .fx-cta__h{ font-family:var(--cc-font-body); font-size:clamp(17px,2vw,21px); font-weight:700; color:var(--cc-fg-bright); letter-spacing:-.01em; margin:0 0 4px; line-height:1.25; } .fx-cta__sub{ font-family:var(--cc-font-body); font-size:13px; color:var(--cc-fg-muted); line-height:1.55; max-width:620px; } .fx-cta__row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:14px; } .fx-cta__btn{ appearance:none; border:0; cursor:pointer; white-space:nowrap; font-family:var(--cc-font-body); font-weight:700; font-size:14px; color:#04121a; padding:13px 26px; border-radius:12px; background:var(--cc-accent); box-shadow:0 8px 22px -10px rgba(0,212,255,.55); transition:transform .16s var(--cc-ease-smooth,cubic-bezier(.4,0,.2,1)), box-shadow .16s; } .fx-cta__btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(0,212,255,.55); } .fx-cta__btn:active{ transform:translateY(0); transition-duration:80ms; } .fx-cta__btn .fx-spin{ display:none; width:14px; height:14px; margin-right:8px; vertical-align:-2px; border:2px solid rgba(4,18,26,.35); border-top-color:#04121a; border-radius:50%; animation:fx-rot .6s linear infinite; } .fx-cta__btn.is-loading .fx-spin{ display:inline-block; } @keyframes fx-rot{ to{ transform:rotate(360deg); } } .fx-cta__fine{ font-family:var(--cc-font-mono); font-size:10px; line-height:1.7; color:var(--cc-fg-faint); letter-spacing:.01em; } /* value-ladder tier strip */ .fx-ladder{ display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; } .fx-ladder__node{ font-family:var(--cc-font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--cc-fg-faint); padding:4px 10px; border-radius:100px; border:1px solid var(--cc-border); } .fx-ladder__node.is-current{ color:var(--cc-accent); border-color:rgba(0,212,255,.4); background:rgba(0,212,255,.06); } .fx-ladder__node.is-next{ color:var(--cc-fg-muted); border-color:rgba(var(--sig-hue-rgb),.35); animation:fx-breathe 3.6s ease-in-out infinite; } /* ── In-page upgrade sheet (no navigation away) ── */ .fx-sheet-scrim{ position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .28s var(--cc-ease-smooth,ease); } .fx-sheet-scrim.open{ opacity:1; pointer-events:auto; } .fx-sheet{ position:fixed; z-index:1001; left:50%; top:50%; transform:translate(-50%,-46%) scale(.98); width:min(520px,calc(100vw - 32px)); max-height:88vh; overflow:auto; background:var(--cc-bg-raised); border:1px solid var(--cc-border-strong); border-radius:20px; padding:28px; opacity:0; pointer-events:none; box-shadow:0 40px 90px -30px rgba(0,0,0,.8); transition:opacity .3s var(--cc-ease-expo,ease), transform .3s var(--cc-ease-expo,ease); } .fx-sheet.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); } .fx-sheet__close{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:9px; background:transparent; border:1px solid var(--cc-border); color:var(--cc-fg-muted); cursor:pointer; font-size:16px; line-height:1; } .fx-sheet__eyebrow{ font-family:var(--cc-font-mono); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sig-hue); margin-bottom:8px; } .fx-sheet__h{ font-family:var(--cc-font-body); font-size:22px; font-weight:700; color:var(--cc-fg-bright); margin:0 0 6px; letter-spacing:-.01em; } .fx-sheet__plan{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:16px 0; border-bottom:1px solid var(--cc-divider); } .fx-sheet__price{ font-family:var(--cc-font-mono); font-variant-numeric:tabular-nums; font-size:24px; font-weight:700; color:var(--cc-fg-bright); } .fx-sheet__btn{ display:block; width:100%; margin-top:20px; text-align:center; cursor:pointer; border:0; font-family:var(--cc-font-body); font-weight:700; font-size:15px; color:#04121a; padding:15px; border-radius:12px; background:var(--cc-accent); text-decoration:none; box-shadow:0 10px 26px -10px rgba(0,212,255,.55); transition:transform .16s; } .fx-sheet__btn:hover{ transform:translateY(-1px); } @media (max-width:768px){ .fx-sheet{ top:auto; bottom:0; left:0; transform:translateY(16px); width:100%; max-height:90vh; border-radius:20px 20px 0 0; padding-bottom:calc(28px + env(safe-area-inset-bottom)); } .fx-sheet.open{ transform:translateY(0); } } /* mobile sticky CTA — same action, appears after the inline card scrolls off */ .fx-sticky{ position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:900; display:none; padding:14px 18px; border-radius:14px; background:rgba(10,11,15,.92); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid rgba(var(--sig-hue-rgb),.4); box-shadow:0 18px 40px -16px rgba(0,0,0,.7); align-items:center; justify-content:space-between; gap:12px; transform:translateY(120%); transition:transform .32s var(--cc-ease-expo,ease); } .fx-sticky.show{ transform:translateY(0); } .fx-sticky__btn{ border:0; cursor:pointer; font-family:var(--cc-font-body); font-weight:700; font-size:13.5px; color:#04121a; padding:11px 18px; border-radius:10px; background:var(--cc-accent); white-space:nowrap; } @media (max-width:768px){ .fx-sticky{ display:flex; } } @media (min-width:769px){ .fx-sticky{ display:none !important; } } /* ── Trust scaffold ── */ .fx-trust{ font-family:var(--cc-font-mono); font-size:10.5px; line-height:1.6; color:var(--cc-fg-faint); letter-spacing:.02em; margin-top:32px; padding-top:16px; border-top:1px solid var(--cc-divider); } .fx-qualifier{ font-family:var(--cc-font-mono); font-size:10.5px; color:var(--cc-fg-faint); letter-spacing:.01em; margin-top:6px; } /* ── Load choreography (entrances) ── */ .fx-in{ opacity:0; transform:translateY(14px); } .fx-in.fx-shown{ opacity:1; transform:none; transition:opacity .38s var(--cc-ease-expo,ease), transform .38s var(--cc-ease-expo,ease); } .fx-reveal{ opacity:0; transform:translateY(28px); } .fx-reveal.fx-shown{ opacity:1; transform:none; transition:opacity .6s var(--cc-ease-expo,ease), transform .6s var(--cc-ease-expo,ease); } /* skeleton shimmer */ .fx-skel{ border-radius:6px; background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.05) 75%); background-size:400% 100%; animation:fx-shimmer 1.6s ease-in-out infinite; } @keyframes fx-shimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} } /* ── Daybreak reveal (locked -> unlocked) ── */ .fx-pulse{ position:absolute; left:50%; top:50%; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; border:2px solid rgba(0,212,255,.6); pointer-events:none; transform:scale(.3); opacity:.6; animation:fx-pulse .42s var(--cc-ease-expo,ease) forwards; } @keyframes fx-pulse{ to{ transform:scale(2.5); opacity:0; } } .fx-flash{ animation:fx-flash .6s var(--cc-ease-expo,ease); } @keyframes fx-flash{ 0%{box-shadow:0 0 0 0 rgba(var(--sig-hue-rgb),0)} 40%{box-shadow:0 0 28px -2px rgba(var(--sig-hue-rgb),.55)} 100%{box-shadow:0 0 0 0 rgba(var(--sig-hue-rgb),0)} } .fx-daybreak .fx-sub{ filter:blur(0); } .fx-daybreak .fx-sub::before{ filter:blur(0); color:var(--cc-fg-bright); } .fx-daybreak .fx-sub::after{ opacity:0; transition:opacity .4s; } /* ── Reduced motion: structure stays, motion stops ── */ @media (prefers-reduced-motion: reduce){ .fx-in,.fx-reveal{ opacity:1 !important; transform:none !important; transition:none !important; } .fx-bar__fill{ transition:none !important; } .fx-sub::after,.fx-ladder__node.is-next{ animation:none !important; } .fx-skel{ animation:none; background:rgba(255,255,255,.07); } .fx-pulse{ display:none !important; } .fx-flash{ animation:none !important; } }