/* ===================================================================== Market Intelligence - polish layer (mi-polish.css) Linked LAST in every report so it reliably refines the shared mi.css + each page's inline styles without forking them. Purely additive smoothing: motion, focus, scrollbars, hover consistency, loading states. ===================================================================== */ /* ---- motion system: one easing, honored everywhere ---- */ :root{ --mi-ease:cubic-bezier(.2,.8,.2,1); --mi-ease-out:cubic-bezier(.16,1,.3,1); } html{ scroll-behavior:smooth; } /* Respect users who ask for less motion. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ---- branded selection + tab focus ---- */ ::selection{ background:rgba(3,144,217,.18); color:#00163D; } a:focus-visible,button:focus-visible,input:focus-visible, [tabindex]:focus-visible,.brow:focus-visible,.lane:focus-visible, .mi-more-card:focus-visible,.mi-rn-tabs a:focus-visible,.info-i:focus-visible{ outline:2px solid #0390D9; outline-offset:2px; border-radius:8px; } /* ---- thin, branded scrollbars on the scrolling regions ---- */ .mi-table-wrap,.menu,.statrow,.mi-bars,.board{ scrollbar-width:thin; scrollbar-color:#C3D4E6 transparent; } .mi-table-wrap::-webkit-scrollbar,.menu::-webkit-scrollbar{ height:9px; width:9px; } .mi-table-wrap::-webkit-scrollbar-thumb,.menu::-webkit-scrollbar-thumb{ background:#C3D4E6; border-radius:999px; border:2px solid transparent; background-clip:content-box; } .mi-table-wrap::-webkit-scrollbar-thumb:hover,.menu::-webkit-scrollbar-thumb:hover{ background:#9FB6CE; background-clip:content-box; } .mi-table-wrap::-webkit-scrollbar-track,.menu::-webkit-scrollbar-track{ background:transparent; } /* ---- tabular figures so animated/sortable numbers never jitter ---- */ .gstat .gv,.mi-stat .v,.brow .bv,.mi-bar .val,.mi-div .val, .glance-stats .gv,.trust-number,.mi-table td.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } /* ---- consistent card hover lift across every clickable surface ---- */ .path,.mi-stat,.gstat,.mi-more-card,.cta-card{ transition:transform .28s var(--mi-ease), box-shadow .28s var(--mi-ease), border-color .28s var(--mi-ease); will-change:transform; } .mi-stat:hover,.gstat:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,22,61,.10); } a.mi-more-card:hover,.path:hover{ transform:translateY(-4px); box-shadow:0 16px 38px rgba(0,22,61,.13); } .brow,.lane{ transition:background .18s var(--mi-ease), transform .18s var(--mi-ease); } .brow:hover,.lane:hover{ transform:translateX(2px); } /* ---- buttons: add press feedback + focus, keep existing look ---- */ .btn,.mi-cta,.btn-header,.btn-mobile-cta{ transition:transform .2s var(--mi-ease), box-shadow .2s var(--mi-ease), background .2s var(--mi-ease); } .btn:active{ transform:translateY(0); box-shadow:0 3px 10px rgba(30,64,175,.30); } /* ---- sortable table headers: clearer affordance + smooth tint ---- */ .mi-table thead th{ transition:background .18s var(--mi-ease); } .mi-table tbody tr{ transition:background .15s var(--mi-ease); } /* ---- "Explore the other reports": 3 public reports read as a clean 3-up, equal height with the CTA pinned to the bottom of each card ---- */ .mi-more-grid{ grid-template-columns:repeat(3,1fr); align-items:stretch; } @media(max-width:900px){ .mi-more-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:600px){ .mi-more-grid{ grid-template-columns:1fr; } } .mi-more-card{ display:flex; flex-direction:column; height:100%; } .mi-more-card .go{ margin-top:auto; padding-top:.75rem; } /* ---- loading state: a calm shimmer line instead of a static label ---- */ .mi-loading{ display:flex; align-items:center; justify-content:center; gap:.65rem; min-height:96px; color:#5B6B7C; font-size:.9rem; font-weight:500; text-align:center; } .mi-loading::before{ content:""; width:18px; height:18px; border-radius:50%; border:2.5px solid #D6E4F0; border-top-color:#0390D9; animation:mi-spin .7s linear infinite; flex:none; } @keyframes mi-spin{ to{ transform:rotate(360deg); } } /* ---- sticky report nav: subtle depth so it reads as a layer when stuck ---- */ .mi-reportnav{ box-shadow:0 1px 0 rgba(0,22,61,.04), 0 6px 16px -12px rgba(0,22,61,.28); backdrop-filter:saturate(1.1); } /* ---- gentle one-time rise for above-the-fold static blocks (ends fully visible) ---- */ @media (prefers-reduced-motion: no-preference){ .fi-head,.head>h1,.head>p,.mi-scope,.mi-srcline{ animation:mi-rise .55s var(--mi-ease-out) both; } .head>p{ animation-delay:.05s; } .mi-scope{ animation-delay:.10s; } .mi-srcline{ animation-delay:.14s; } } @keyframes mi-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } } /* ---- info icons: smoother hover ---- */ .info-i{ transition:background .18s var(--mi-ease), color .18s var(--mi-ease), border-color .18s var(--mi-ease); } /* ===================================================================== Targeted UI fixes (round 2) ===================================================================== */ /* ---- Data view toggle: a clean segmented control living in the sticky report nav (was a dark full-width bar jammed at the top of the page) ---- */ .mi-viewtoggle{ display:inline-flex; align-items:center; gap:.55rem; margin-left:auto; } .mi-viewtoggle .vt-label{ font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#7A8AA0; } .vt-seg{ display:inline-flex; background:#EDF2F8; border:1px solid #DFE7F0; border-radius:999px; padding:3px; } .vt-opt{ text-decoration:none; padding:.34rem .82rem; border-radius:999px; font-size:.8rem; font-weight:600; color:#46586C; white-space:nowrap; transition:background .18s var(--mi-ease), color .18s var(--mi-ease), box-shadow .18s var(--mi-ease); } .vt-opt:hover{ color:#0b2740; } .vt-opt.active{ background:#fff; color:#0b2740; font-weight:700; box-shadow:0 1px 3px rgba(11,39,64,.16); } .vt-info{ cursor:help; color:#9FB0C2; font-weight:700; font-size:.98rem; line-height:1; position:relative; } .vt-info:hover, .vt-info:focus-visible{ color:#0390D9; } /* Custom tooltip for the view-toggle info icon (the native title attribute was slow/unreliable and didn't work on focus or touch). Shows on hover AND focus. */ .vt-info::after{ content:attr(data-tip); position:absolute; top:calc(100% + 12px); right:-6px; width:min(310px,80vw); background:#0b2740; color:#fff; font:500 .8rem/1.55 'Inter',-apple-system,sans-serif; letter-spacing:0; text-transform:none; text-align:left; padding:.75rem .9rem; border-radius:10px; box-shadow:0 14px 34px rgba(0,22,61,.30); opacity:0; visibility:hidden; transform:translateY(-5px); transition:opacity .16s var(--mi-ease), transform .16s var(--mi-ease), visibility .16s; pointer-events:none; z-index:1000; } .vt-info::before{ content:""; position:absolute; top:calc(100% + 6px); right:3px; border:7px solid transparent; border-bottom-color:#0b2740; opacity:0; visibility:hidden; transition:opacity .16s var(--mi-ease), visibility .16s; z-index:1001; } .vt-info:hover::after, .vt-info:focus-visible::after, .vt-info:focus::after{ opacity:1; visibility:visible; transform:translateY(0); } .vt-info:hover::before, .vt-info:focus-visible::before, .vt-info:focus::before{ opacity:1; visibility:visible; } @media(max-width:520px){ .vt-info::after{ right:auto; left:0; } .vt-info::before{ right:auto; left:7px; } } @media(max-width:820px){ .mi-viewtoggle{ margin-left:0; width:100%; flex-wrap:wrap; justify-content:flex-start; padding-top:.15rem; } .vt-seg{ flex:1 1 auto; min-width:0; } /* fill the row, never overflow it */ .vt-opt{ flex:1 1 0; min-width:0; text-align:center; line-height:1.2; } } @media(max-width:430px){ .vt-opt{ font-size:.74rem; padding:.38rem .42rem; } } /* Migration Lanes firm-lookup direction toggle: fill the row on tiny phones so it never pushes the page wider than the viewport. */ @media(max-width:400px){ .dirtoggle{ width:100%; } .dirtoggle button{ flex:1; } } /* ---- Migration Lanes / Movement Map hero: give it the same breathing room and balance as the Flow Index / Channel Flow heroes ---- */ .head{ padding-top:2.5rem; } .head p{ max-width:660px; margin-left:auto; margin-right:auto; } .head .mi-databadge{ margin-top:1.15rem; } /* ---- "Compare any two firms": the second-firm inputs were unstyled browser default boxes. Match the styled primary lookup field. ---- */ #pairAInput, #pairBInput{ width:100%; font-family:'Inter',sans-serif; font-size:1.05rem; font-weight:600; color:#00163D; background:#fff; border:2px solid var(--teal-primary,#11BDBF); border-radius:10px; padding:.85rem 1.1rem; outline:none; transition:border-color .18s var(--mi-ease), box-shadow .18s var(--mi-ease); } #firmInput:focus, #pairAInput:focus, #pairBInput:focus{ border-color:#0390D9; box-shadow:0 0 0 3px rgba(3,144,217,.18); } /* ---- Flow Index "can / can't tell you": balanced cards with a clear positive / limitation read ---- */ .mi-cantell-wrap{ max-width:1080px; margin:1.6rem auto 0; padding:0 2rem; } .mi-cantell{ background:#fff; border:1px solid #E2E8F0; border-radius:14px; padding:1.3rem 1.45rem; position:relative; overflow:hidden; height:100%; } .mi-cantell::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; } .mi-cantell.can::before{ background:linear-gradient(180deg,#11BDBF,#0B7A4B); } .mi-cantell.cant::before{ background:#CBD5E1; } .mi-cantell .ct-h{ display:flex; align-items:center; gap:.5rem; font-weight:700; color:#00163D; font-size:.95rem; margin-bottom:.7rem; } .mi-cantell.can .ct-h::before{ content:"\2713"; color:#0B7A4B; font-weight:800; } .mi-cantell.cant .ct-h::before{ content:"\2715"; color:#94A3B8; font-weight:800; } .mi-cantell ul{ margin:0; padding-left:1.2rem; color:#4A5568; font-size:.875rem; line-height:1.75; } .mi-cantell-wrap .mi-grid2{ align-items:stretch; } @media(max-width:768px){ .mi-cantell-wrap{ padding:0 1.25rem; } } /* ---- Channel Flow: clear separation before the "Where you stand" CTA ---- */ .help{ margin-top:4.5rem; } /* ---- Definitions / glossary accordion: more breathing room in the bar ---- */ .gloss-toggle{ padding:1.4rem 1.6rem; } .glossary{ margin-top:2rem; } /* ---- Hub methodology: a clean collapsible disclosure instead of a dense wall of fine print. One credible lead line stays visible; the detail expands. ---- */ .mi-method-disc{ max-width:1080px; margin:0 auto 1.25rem; background:#F4F8FC; border:1px solid #E3ECF5; border-radius:14px; overflow:hidden; transition:box-shadow .2s var(--mi-ease); } .mi-method-disc[open]{ box-shadow:0 1px 2px rgba(16,40,80,.05); } .mi-method-disc > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.05rem 1.4rem; } .mi-method-disc > summary::-webkit-details-marker{ display:none; } .mi-method-disc > summary:hover .mm-toggle{ color:#0b2740; } .mi-method-disc .mm-lead{ font-size:.9rem; line-height:1.55; color:#46586C; font-weight:500; } .mi-method-disc .mm-lead b{ color:var(--mi-navy,#00163D); font-weight:700; } .mi-method-disc .mm-toggle{ flex:none; display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#0390D9; white-space:nowrap; transition:color .18s var(--mi-ease); } .mi-method-disc .mm-chev{ font-size:1.25rem; line-height:1; font-weight:400; transition:transform .25s var(--mi-ease); } .mi-method-disc[open] .mm-chev{ transform:rotate(45deg); } .mi-method-disc .mm-body{ padding:.2rem 1.4rem 1.25rem; } .mi-method-disc .mm-body p{ font-size:.83rem; line-height:1.65; color:#5B6B7C; margin:0 0 .7rem; } .mi-method-disc .mm-body p:last-child{ margin:0; } @media(max-width:680px){ .mi-method-disc > summary{ flex-direction:column; align-items:flex-start; gap:.55rem; } } /* ---- Hub "four public reports": uniform preview height so the cards line up across the 1x4 row (one preview image had a different aspect ratio, which pushed its tag/title/text out of alignment with the others) ---- */ .mi-shot{ aspect-ratio:760 / 545; overflow:hidden; } .mi-shot img{ width:100%; height:100%; object-fit:cover; object-position:top; } /* ---- And align every internal row (tag / title / question / blurb / CTA) across the four cards with subgrid, so titles, questions and "Explore ->" links all sit on the same baseline regardless of how long each one is. Only at the 4-up width; the 2-up / 1-up layouts keep the simpler flex behaviour. ---- */ @media(min-width:1101px){ .mi-reports{ grid-template-rows:auto auto auto auto 1fr auto auto; row-gap:0; align-items:stretch; } .mi-report{ display:grid; grid-template-rows:subgrid; grid-row:span 7; row-gap:0; } .mi-rb{ display:contents; } .mi-shot{ grid-row:1; } .mi-tag{ grid-row:2; padding:1.6rem 1.6rem 0; margin:0; } .mi-report h3{ grid-row:3; padding:.55rem 1.6rem 0; margin:0; } .mi-q{ grid-row:4; padding:.75rem 1.6rem 0; margin:0; } .mi-report p{ grid-row:5; padding:.75rem 1.6rem 0; margin:0; } .mi-why{ grid-row:6; padding:.85rem 1.6rem 0; margin:0; } .mi-go{ grid-row:7; padding:1rem 1.6rem 1.75rem; margin:0; } } /* N2: a small "why it matters" line on each report card */ .mi-why{ display:block; font-size:.8rem; line-height:1.5; color:#5B6B7C; } .mi-why::first-letter{ text-transform:uppercase; } .mi-report .mi-why{ border-top:1px solid #EEF2F6; padding-top:.85rem; margin-top:.85rem; } @media(min-width:1101px){ .mi-report .mi-why{ margin-top:0; } } /* N1: "Read this first" plain-language callout above the methodology */ .mi-readfirst{ max-width:1080px; margin:0 auto 1rem; display:flex; gap:1rem; align-items:flex-start; background:#FFFFFF; border:1px solid #DCE8F4; border-left:4px solid #0390D9; border-radius:12px; padding:1.05rem 1.3rem; } .mi-readfirst .rf-badge{ flex:none; font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#0390D9; background:rgba(3,144,217,.10); border-radius:999px; padding:.35rem .7rem; margin-top:.1rem; white-space:nowrap; } .mi-readfirst p{ margin:0; font-size:.9rem; line-height:1.6; color:#3B4A5C; } .mi-readfirst p b{ color:var(--mi-navy,#00163D); font-weight:700; } @media(max-width:600px){ .mi-readfirst{ flex-direction:column; gap:.6rem; } } /* ---- report "data context" block: sits UNDER the hero, reads as quiet, intentional supporting info instead of a wall of disclaimer up top ---- */ .mi-context{ max-width:1080px; margin:1.5rem auto 2.25rem; padding:0 2rem; display:flex; flex-direction:column; gap:.75rem; } @media(max-width:768px){ .mi-context{ padding:0 1.25rem; } } /* freshness line (T12 window / last updated / source) - a calm info bar */ .mi-context .mi-srcline{ margin:0; text-align:left; font-size:.82rem; line-height:1.5; color:#46586C; background:#F3F8FC; border:1px solid #E3ECF5; border-radius:10px; padding:.7rem 1rem; } .mi-context .mi-srcline b{ color:var(--mi-navy,#00163D); font-weight:600; } /* methodology - demoted to a quiet left-ruled footnote, not a heavy gray box */ .mi-context .mi-scope{ margin:0; background:transparent; border:0; border-left:3px solid #D6E4F0; border-radius:0; padding:.15rem 0 .15rem 1rem; font-size:.785rem; line-height:1.65; color:#64748B; } .mi-context .mi-scope b{ color:#475569; } /* map "volume not rate" guidance - keep it prominent, float it to the top */ .mi-context .mi-scope.warn{ order:-1; background:#FFF7ED; border:1px solid #FBD9A8; border-left:3px solid #F59E0B; border-radius:10px; padding:.8rem 1rem; color:#92400E; font-size:.84rem; line-height:1.55; } /* flow "can / can't tell you" cards: tighten the gap above them */ .fi-head + div[style*="max-width:1080px"]{ margin-top:1.5rem !important; }