meta embed flow
This commit is contained in:
parent
ae72b59878
commit
99ed8f2477
10 changed files with 2256 additions and 151 deletions
|
|
@ -1819,3 +1819,83 @@ main { padding: 30px clamp(20px, 3vw, 44px) 50px; }
|
|||
.wa-list { max-height: 280px; }
|
||||
.wa-setup form { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.wa-biz { max-width: 1080px; }
|
||||
.wa-biz-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
|
||||
.wa-biz-heading h1 { margin: 6px 0; }
|
||||
.wa-biz-heading p { max-width: 640px; }
|
||||
.wa-biz-notice { margin: 0 0 16px; padding: 12px 14px; border: 1px solid #d7e6ff; border-radius: 12px; background: #f4f8ff; color: #1d4f91; font-size: 13px; }
|
||||
.wa-biz-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: 18px; }
|
||||
.wa-biz-card { padding: 28px; border: 1px solid #e6ebf2; border-radius: 18px; background: #fff; box-shadow: 0 8px 28px rgba(16, 34, 63, .04); }
|
||||
.wa-biz-card h2 { margin: 14px 0 8px; color: #14233b; font-size: 22px; letter-spacing: -.03em; }
|
||||
.wa-biz-card > p, .wa-biz-muted { color: #6d7c90; font-size: 13px; line-height: 1.5; }
|
||||
.wa-biz-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #e8f8ef; color: #12805c; }
|
||||
.wa-biz-mark.ok { background: #e8f8ef; color: #12805c; }
|
||||
.wa-biz-mark.warn { background: #fff6e8; color: #a56d12; }
|
||||
.wa-biz-card ul { margin: 18px 0; padding: 0; list-style: none; display: grid; gap: 10px; }
|
||||
.wa-biz-card ul li { display: flex; align-items: center; gap: 8px; color: #24344c; font-size: 14px; }
|
||||
.wa-biz-card ul li svg { color: #159768; }
|
||||
.wa-biz-cta { width: 100%; margin-top: 8px; padding: 12px 16px; font-size: 14px; }
|
||||
.wa-biz-card > small { display: block; margin-top: 12px; color: #8a95a7; font-size: 12px; }
|
||||
.wa-biz-aside { padding: 24px; border-radius: 18px; background: #f4f7fb; }
|
||||
.wa-biz-aside h3 { margin: 0 0 16px; color: #14233b; font-size: 16px; }
|
||||
.wa-biz-aside div + div { margin-top: 16px; }
|
||||
.wa-biz-aside strong { display: block; color: #1c2b42; font-size: 13px; }
|
||||
.wa-biz-aside p { margin: 4px 0 0; color: #6d7c90; font-size: 12px; line-height: 1.45; }
|
||||
.wa-biz-provision, .wa-biz-result { max-width: 720px; }
|
||||
.wa-biz-wait { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: #1d4f91; font-size: 13px; font-weight: 600; }
|
||||
.wa-spin { animation: wa-spin .8s linear infinite; }
|
||||
@keyframes wa-spin { to { transform: rotate(360deg); } }
|
||||
.wa-biz-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin: 18px 0 0; }
|
||||
.wa-biz-facts div { display: grid; gap: 4px; }
|
||||
.wa-biz-facts dt { color: #8a95a7; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
|
||||
.wa-biz-facts dd { margin: 0; color: #1c2b42; font-size: 14px; }
|
||||
.wa-biz-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
|
||||
.wa-biz-list { display: grid; gap: 14px; }
|
||||
.wa-biz-account { padding: 20px 22px; border: 1px solid #e6ebf2; border-radius: 16px; background: #fff; }
|
||||
.wa-biz-account header, .wa-biz-detail-head, .wa-biz-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
||||
.wa-biz-account h2, .wa-biz-detail h1 { margin: 0 0 6px; color: #14233b; font-size: 18px; letter-spacing: -.03em; }
|
||||
.wa-biz-account-grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
|
||||
.wa-biz-account-grid span, .wa-biz-numbers span { color: #8a95a7; font-size: 11px; font-weight: 700; text-transform: uppercase; }
|
||||
.wa-biz-account-grid strong, .wa-biz-numbers strong { display: block; margin-top: 4px; color: #1c2b42; font-size: 14px; }
|
||||
.wa-biz-account-grid small, .wa-biz-numbers small { display: block; color: #6d7c90; font-size: 12px; }
|
||||
.wa-biz-menu { position: relative; display: flex; gap: 8px; }
|
||||
.wa-biz-popover { position: absolute; top: 40px; right: 0; z-index: 5; display: grid; min-width: 160px; padding: 6px; border: 1px solid #e6ebf2; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(16, 34, 63, .12); }
|
||||
.wa-biz-popover button { border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; color: #24344c; font-size: 13px; text-align: left; }
|
||||
.wa-biz-popover button:hover { background: #f4f7fb; }
|
||||
.wa-biz-status { display: inline-flex; align-items: center; gap: 6px; color: #8a5b00; font-size: 12px; font-weight: 700; }
|
||||
.wa-biz-status i { width: 8px; height: 8px; border-radius: 50%; background: #d78219; }
|
||||
.wa-biz-status.ok { color: #0f7a49; }
|
||||
.wa-biz-status.ok i { background: #12b76a; }
|
||||
.wa-biz-status.bad { color: #b42318; }
|
||||
.wa-biz-status.bad i { background: #f04438; }
|
||||
.wa-biz-inline-error { margin: 12px 0 0; color: #b42318; font-size: 12px; }
|
||||
.wa-biz-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; border: 0; background: transparent; color: #4b5a70; font-size: 13px; font-weight: 600; }
|
||||
.wa-biz-tabs { display: flex; gap: 8px; margin: 16px 0; border-bottom: 1px solid #e6ebf2; }
|
||||
.wa-biz-tabs button { border: 0; background: transparent; padding: 10px 12px; color: #7d8ba0; font-size: 13px; font-weight: 700; }
|
||||
.wa-biz-tabs button.active { color: #1475ff; box-shadow: inset 0 -2px 0 #1475ff; }
|
||||
.wa-biz-overview { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
|
||||
.wa-biz-capabilities { margin: 0; }
|
||||
.wa-biz-capabilities li { justify-content: space-between; }
|
||||
.wa-biz-numbers { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
|
||||
.wa-biz-numbers li { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid #edf0f4; }
|
||||
.wa-biz-table { margin-top: 12px; }
|
||||
.wa-biz-table-head, .wa-biz-table-row { display: grid; grid-template-columns: 1.4fr .8fr .7fr .8fr .6fr; gap: 8px; padding: 10px 0; }
|
||||
.wa-biz-table-head { color: #8a95a7; font-size: 11px; font-weight: 700; text-transform: uppercase; }
|
||||
.wa-biz-table-row { border-top: 1px solid #edf0f4; color: #24344c; font-size: 13px; }
|
||||
.wa-biz-subhead { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; color: #607089; font-size: 12px; font-weight: 700; text-transform: uppercase; }
|
||||
.wa-biz-log { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
|
||||
.wa-biz-log li { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid #edf0f4; }
|
||||
.wa-biz-log strong { color: #1c2b42; font-size: 13px; text-transform: capitalize; }
|
||||
.wa-biz-log span { color: #4b5a70; font-size: 12px; }
|
||||
.wa-biz-log small { color: #8a95a7; font-size: 11px; }
|
||||
.wa-biz-danger { color: #b42318; }
|
||||
.wa-biz-danger-fill { background: #d92d20; border-color: #d92d20; }
|
||||
.wa-biz-modal-copy { margin: 0; padding: 16px 20px 0; color: #4b5a70; font-size: 13px; line-height: 1.5; }
|
||||
.wa-biz .ghost-button { display: inline-flex; align-items: center; gap: 6px; color: #1475ff; font-size: 12px; font-weight: 700; text-decoration: none; }
|
||||
@media (max-width: 900px) {
|
||||
.wa-biz-hero, .wa-biz-overview, .wa-biz-facts, .wa-biz-account-grid { grid-template-columns: 1fr; }
|
||||
.wa-biz-heading { flex-direction: column; align-items: stretch; }
|
||||
.wa-biz-table-head { display: none; }
|
||||
.wa-biz-table-row, .wa-biz-numbers li { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue