| 1 |
.bkbg-arc-app{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;box-sizing:border-box} |
| 2 |
.bkbg-arc-app *{box-sizing:inherit} |
| 3 |
.bkbg-arc-wrap{background:#fff;border-radius:16px;padding:36px 32px;max-width:580px;margin:0 auto;box-shadow:0 4px 24px rgba(0,0,0,.09)} |
| 4 |
.bkbg-arc-header{margin-bottom:22px} |
| 5 |
.bkbg-arc-title{ |
| 6 |
font-family:var(--bkbg-arc-title-font-family, inherit); |
| 7 |
font-size:var(--bkbg-arc-title-font-size-d, var(--bkbg-arc-title-font-size, var(--bkbg-arc-title-sz, 28px))); |
| 8 |
font-weight:var(--bkbg-arc-title-font-weight, 700); |
| 9 |
font-style:var(--bkbg-arc-title-font-style, normal); |
| 10 |
text-transform:var(--bkbg-arc-title-text-transform, none); |
| 11 |
text-decoration:var(--bkbg-arc-title-text-decoration, none); |
| 12 |
line-height:var(--bkbg-arc-title-line-height-d, var(--bkbg-arc-title-line-height, 1.2)); |
| 13 |
letter-spacing:var(--bkbg-arc-title-letter-spacing-d, var(--bkbg-arc-title-letter-spacing, normal)); |
| 14 |
word-spacing:var(--bkbg-arc-title-word-spacing-d, var(--bkbg-arc-title-word-spacing, normal)); |
| 15 |
color:#111827;margin:0 0 6px |
| 16 |
} |
| 17 |
.bkbg-arc-subtitle{font-size:15px;color:#6b7280;margin:0} |
| 18 |
.bkbg-arc-label{display:block;font-size:12px;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px} |
| 19 |
.bkbg-arc-input{width:100%;padding:9px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit;outline:none;background:#fff;transition:border-color .15s} |
| 20 |
.bkbg-arc-input:focus{border-color:#6c3fb5} |
| 21 |
.bkbg-arc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px} |
| 22 |
/* Presets */ |
| 23 |
.bkbg-arc-presets-row{margin-bottom:18px} |
| 24 |
.bkbg-arc-presets{display:flex;flex-wrap:wrap;gap:6px} |
| 25 |
.bkbg-arc-preset{padding:5px 10px;border:1.5px solid #e5e7eb;border-radius:6px;background:#fff;color:#374151;font-weight:600;font-size:12px;font-family:inherit;cursor:pointer;transition:all .15s} |
| 26 |
.bkbg-arc-preset:hover{border-color:#6c3fb5;color:#6c3fb5} |
| 27 |
.bkbg-arc-preset.active{background:#6c3fb5;border-color:#6c3fb5;color:#fff} |
| 28 |
/* Ratio card */ |
| 29 |
.bkbg-arc-ratio-card{background:#6c3fb5;border-radius:12px;padding:18px 24px;display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:16px;color:#fff} |
| 30 |
.bkbg-arc-ratio-num{ |
| 31 |
font-family:var(--bkbg-arc-ratio-font-family, inherit); |
| 32 |
font-size:var(--bkbg-arc-ratio-font-size-d, var(--bkbg-arc-ratio-font-size, var(--bkbg-arc-ratio-sz, 44px))); |
| 33 |
font-weight:var(--bkbg-arc-ratio-font-weight, 800); |
| 34 |
font-style:var(--bkbg-arc-ratio-font-style, normal); |
| 35 |
text-transform:var(--bkbg-arc-ratio-text-transform, none); |
| 36 |
text-decoration:var(--bkbg-arc-ratio-text-decoration, none); |
| 37 |
line-height:var(--bkbg-arc-ratio-line-height-d, var(--bkbg-arc-ratio-line-height, 1)); |
| 38 |
letter-spacing:var(--bkbg-arc-ratio-letter-spacing-d, var(--bkbg-arc-ratio-letter-spacing, normal)); |
| 39 |
word-spacing:var(--bkbg-arc-ratio-word-spacing-d, var(--bkbg-arc-ratio-word-spacing, normal)) |
| 40 |
} |
| 41 |
.bkbg-arc-ratio-lbl{font-size:13px;opacity:.8;margin-top:4px} |
| 42 |
.bkbg-arc-ratio-sep{width:1px;background:rgba(255,255,255,.25);height:50px} |
| 43 |
.bkbg-arc-mp-num{font-size:22px;font-weight:700} |
| 44 |
/* Scale box */ |
| 45 |
.bkbg-arc-scale-box{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:10px;padding:14px 16px;margin-bottom:14px} |
| 46 |
.bkbg-arc-scale-title{font-size:13px;font-weight:700;color:#374151;margin-bottom:12px} |
| 47 |
.bkbg-arc-scale-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end} |
| 48 |
.bkbg-arc-scale-sep{text-align:center;font-size:18px;color:#9ca3af;padding-bottom:8px} |
| 49 |
.bkbg-arc-scale-result{margin-top:10px;padding:10px 12px;background:#fff;border-radius:8px;border:1.5px solid #e5e7eb;font-size:14px;font-weight:600;color:#6c3fb5;text-align:center} |
| 50 |
/* Preview */ |
| 51 |
.bkbg-arc-preview-wrap{display:flex;justify-content:center;align-items:center;padding:20px;background:#f3f4f6;border-radius:10px;border:1px solid #e5e7eb} |
| 52 |
.bkbg-arc-preview-box{background:#ede9fe;border:2px solid #6c3fb5;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#6c3fb5;min-height:4px} |
| 53 |
|
| 54 |
@media(max-width:1024px){ |
| 55 |
.bkbg-arc-title{ |
| 56 |
font-size:var(--bkbg-arc-title-font-size-t, var(--bkbg-arc-title-font-size-d, var(--bkbg-arc-title-font-size, var(--bkbg-arc-title-sz, 28px)))); |
| 57 |
line-height:var(--bkbg-arc-title-line-height-t, var(--bkbg-arc-title-line-height-d, var(--bkbg-arc-title-line-height, 1.2))); |
| 58 |
letter-spacing:var(--bkbg-arc-title-letter-spacing-t, var(--bkbg-arc-title-letter-spacing-d, var(--bkbg-arc-title-letter-spacing, normal))); |
| 59 |
word-spacing:var(--bkbg-arc-title-word-spacing-t, var(--bkbg-arc-title-word-spacing-d, var(--bkbg-arc-title-word-spacing, normal))) |
| 60 |
} |
| 61 |
.bkbg-arc-ratio-num{ |
| 62 |
font-size:var(--bkbg-arc-ratio-font-size-t, var(--bkbg-arc-ratio-font-size-d, var(--bkbg-arc-ratio-font-size, var(--bkbg-arc-ratio-sz, 44px)))); |
| 63 |
line-height:var(--bkbg-arc-ratio-line-height-t, var(--bkbg-arc-ratio-line-height-d, var(--bkbg-arc-ratio-line-height, 1))); |
| 64 |
letter-spacing:var(--bkbg-arc-ratio-letter-spacing-t, var(--bkbg-arc-ratio-letter-spacing-d, var(--bkbg-arc-ratio-letter-spacing, normal))); |
| 65 |
word-spacing:var(--bkbg-arc-ratio-word-spacing-t, var(--bkbg-arc-ratio-word-spacing-d, var(--bkbg-arc-ratio-word-spacing, normal))) |
| 66 |
} |
| 67 |
} |
| 68 |
@media(max-width:767px){ |
| 69 |
.bkbg-arc-title{ |
| 70 |
font-size:var(--bkbg-arc-title-font-size-m, var(--bkbg-arc-title-font-size-t, var(--bkbg-arc-title-font-size-d, var(--bkbg-arc-title-font-size, var(--bkbg-arc-title-sz, 28px))))); |
| 71 |
line-height:var(--bkbg-arc-title-line-height-m, var(--bkbg-arc-title-line-height-t, var(--bkbg-arc-title-line-height-d, var(--bkbg-arc-title-line-height, 1.2)))); |
| 72 |
letter-spacing:var(--bkbg-arc-title-letter-spacing-m, var(--bkbg-arc-title-letter-spacing-t, var(--bkbg-arc-title-letter-spacing-d, var(--bkbg-arc-title-letter-spacing, normal)))); |
| 73 |
word-spacing:var(--bkbg-arc-title-word-spacing-m, var(--bkbg-arc-title-word-spacing-t, var(--bkbg-arc-title-word-spacing-d, var(--bkbg-arc-title-word-spacing, normal)))) |
| 74 |
} |
| 75 |
.bkbg-arc-ratio-num{ |
| 76 |
font-size:var(--bkbg-arc-ratio-font-size-m, var(--bkbg-arc-ratio-font-size-t, var(--bkbg-arc-ratio-font-size-d, var(--bkbg-arc-ratio-font-size, var(--bkbg-arc-ratio-sz, 44px))))); |
| 77 |
line-height:var(--bkbg-arc-ratio-line-height-m, var(--bkbg-arc-ratio-line-height-t, var(--bkbg-arc-ratio-line-height-d, var(--bkbg-arc-ratio-line-height, 1)))); |
| 78 |
letter-spacing:var(--bkbg-arc-ratio-letter-spacing-m, var(--bkbg-arc-ratio-letter-spacing-t, var(--bkbg-arc-ratio-letter-spacing-d, var(--bkbg-arc-ratio-letter-spacing, normal)))); |
| 79 |
word-spacing:var(--bkbg-arc-ratio-word-spacing-m, var(--bkbg-arc-ratio-word-spacing-t, var(--bkbg-arc-ratio-word-spacing-d, var(--bkbg-arc-ratio-word-spacing, normal)))) |
| 80 |
} |
| 81 |
} |
| 82 |
@media(max-width:500px){ |
| 83 |
.bkbg-arc-wrap{padding:24px 16px} |
| 84 |
.bkbg-arc-grid2{grid-template-columns:1fr} |
| 85 |
.bkbg-arc-scale-grid{grid-template-columns:1fr} |
| 86 |
.bkbg-arc-scale-sep{display:none} |
| 87 |
.bkbg-arc-ratio-card{flex-direction:column;gap:12px;text-align:center} |
| 88 |
.bkbg-arc-ratio-sep{width:80px;height:1px} |
| 89 |
} |
| 90 |
|
