/** * ThinkRank branded admin notices. * * Keeps the native WordPress `.notice` frame (positioning, the dismiss "X", * screen-reader semantics) but restyles the inner content into a branded, * card-like layout shared by every ThinkRank admin notice. * * Hand-authored — lives in static/ so the build never cleans it. */ .thinkrank-notice { border-left-color: #4451ff; padding: 0; } .thinkrank-notice .thinkrank-notice__inner { display: flex; align-items: flex-start; gap: 16px; /* Right padding leaves room for the WP dismiss "X". */ padding: 16px 40px 16px 16px; } .thinkrank-notice__body { flex: 1 1 auto; min-width: 0; } .thinkrank-notice__title { margin: 1px 0 6px !important; padding: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: #1d2327; } .thinkrank-notice__text { margin: 0 0 10px !important; padding: 0; max-width: 90ch; color: #50575e; font-size: 13px; line-height: 1.6; } /* Reassurance chip (e.g. "your SEO data is safe"). */ .thinkrank-notice__hint { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px !important; padding: 7px 12px; background: #f0f4ff; border: 1px solid #d6ddff; border-radius: 7px; color: #313a8a; font-size: 12.5px; line-height: 1.5; } .thinkrank-notice__hint svg { flex: 0 0 auto; fill: #4451ff; } /* Detected-plugin pills */ .thinkrank-notice__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px !important; padding: 0; } .thinkrank-notice__badge { display: inline-flex; align-items: center; padding: 3px 11px; background: #fff; border: 1px solid #dcdcde; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.6; color: #1d2327; } /* Actions row */ .thinkrank-notice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 !important; padding: 0; } .thinkrank-notice .thinkrank-notice__actions .button { border-radius: 6px; } .thinkrank-notice .thinkrank-notice__actions .button-primary { background: #4451ff; border-color: #3a46e0; box-shadow: none; text-shadow: none; } .thinkrank-notice .thinkrank-notice__actions .button-primary:hover, .thinkrank-notice .thinkrank-notice__actions .button-primary:focus { background: #3a46e0; border-color: #2f39c4; color: #fff; } .thinkrank-notice .thinkrank-notice__actions .button-primary:disabled, .thinkrank-notice .thinkrank-notice__actions .button-primary.disabled { background: #a7adf5 !important; border-color: #a7adf5 !important; color: #fff !important; } .thinkrank-notice__dismiss { margin-left: 2px; color: #646970; text-decoration: underline; font-size: 13px; } .thinkrank-notice__dismiss:hover, .thinkrank-notice__dismiss:focus { color: #1d2327; } @media screen and ( max-width: 600px ) { .thinkrank-notice .thinkrank-notice__inner { gap: 12px; padding: 14px 36px 14px 14px; } }