|
102 | 102 | &:hover { background: var(--bn-yellow-bright); } |
103 | 103 | } |
104 | 104 |
|
| 105 | + .b-btn-primary { |
| 106 | + background: var(--bn-cream-light); |
| 107 | + color: var(--bn-green-darker); |
| 108 | + border-color: var(--bn-cream-light); |
| 109 | + |
| 110 | + &:hover { background: var(--bn-paper); } |
| 111 | + } |
| 112 | + |
| 113 | + .b-btn:disabled, |
| 114 | + .b-btn[aria-disabled='true'] { |
| 115 | + cursor: not-allowed; |
| 116 | + opacity: 0.55; |
| 117 | + |
| 118 | + &:hover { |
| 119 | + transform: none; |
| 120 | + background: var(--bn-cream-light); |
| 121 | + } |
| 122 | + } |
| 123 | + |
105 | 124 | .b-shape { |
106 | 125 | position: absolute; |
107 | 126 | pointer-events: none; |
|
1163 | 1182 | .b-accent { color: var(--bn-yellow); } |
1164 | 1183 | } |
1165 | 1184 |
|
1166 | | - .b-cta-btn { |
1167 | | - padding: 1.25rem 2.4rem; |
1168 | | - font-size: 15px; |
| 1185 | + .b-cta-actions { |
| 1186 | + display: inline-flex; |
| 1187 | + gap: 14px; |
| 1188 | + flex-wrap: wrap; |
| 1189 | + justify-content: center; |
1169 | 1190 | } |
1170 | 1191 |
|
1171 | 1192 | // ───────────────────────────────────────────────────────────────────────── |
|
1188 | 1209 | .b-cmp, |
1189 | 1210 | .b-repro, |
1190 | 1211 | .b-cta { padding: 56px 0; } |
1191 | | - .b-tab { padding: 14px 16px; font-size: 11.5px; } |
1192 | | - .b-bar { grid-template-columns: 90px 1fr 64px; gap: 10px; font-size: 11.5px; } |
1193 | | - .b-chart-body { height: 200px; } |
1194 | | - .b-cluster-bars { height: 170px; } |
1195 | | - .b-cluster-bar { width: 6px; } |
1196 | | - .b-detail { padding: 22px 18px 20px; } |
| 1212 | + |
| 1213 | + .b-hero-title { font-size: clamp(32px, 8.6vw, 44px); } |
| 1214 | + .b-hero-sub { font-size: 14px; margin-top: 16px; } |
| 1215 | + |
| 1216 | + .b-cmp-head { margin-bottom: 32px; } |
| 1217 | + .b-cmp-title { font-size: clamp(28px, 7.4vw, 40px); margin-bottom: 16px; } |
| 1218 | + .b-cmp-sub { font-size: 14px; } |
| 1219 | + |
| 1220 | + .b-tabs { |
| 1221 | + overflow-x: auto; |
| 1222 | + flex-wrap: nowrap; |
| 1223 | + margin-bottom: 24px; |
| 1224 | + -webkit-overflow-scrolling: touch; |
| 1225 | + scrollbar-width: none; |
| 1226 | + |
| 1227 | + &::-webkit-scrollbar { display: none; } |
| 1228 | + } |
| 1229 | + .b-tab { |
| 1230 | + padding: 14px 16px; |
| 1231 | + font-size: 11.5px; |
| 1232 | + flex: 0 0 auto; |
| 1233 | + |
| 1234 | + .b-tab-tip { display: none; } |
| 1235 | + } |
| 1236 | + |
| 1237 | + // Section 2 (Comparison): on small screens, cards are informational only — |
| 1238 | + // the per-query breakdown is hidden to keep the page readable. |
| 1239 | + .b-card { |
| 1240 | + cursor: default; |
| 1241 | + padding: 24px 20px 22px; |
| 1242 | + |
| 1243 | + &:hover { |
| 1244 | + transform: none; |
| 1245 | + border-color: rgba(15, 26, 20, 0.12); |
| 1246 | + box-shadow: 0 8px 22px -16px rgba(15, 26, 20, 0.18); |
| 1247 | + } |
| 1248 | + |
| 1249 | + &.is-active { |
| 1250 | + background: var(--bn-paper); |
| 1251 | + border-color: rgba(15, 26, 20, 0.12); |
| 1252 | + box-shadow: none; |
| 1253 | + |
| 1254 | + &::after { display: none; } |
| 1255 | + } |
| 1256 | + } |
| 1257 | + .b-card-head { gap: 10px; } |
| 1258 | + .b-card-title { font-size: 19px; } |
| 1259 | + .b-card-tip { display: none; } |
| 1260 | + .b-detail { display: none; } |
| 1261 | + |
| 1262 | + .b-bar { grid-template-columns: 80px 1fr 56px; gap: 10px; font-size: 11.5px; } |
| 1263 | + |
1197 | 1264 | .b-method { padding: 22px 18px 18px; } |
1198 | 1265 | .b-method-grid { grid-template-columns: 1fr; gap: 18px; } |
| 1266 | + |
| 1267 | + .b-repro-title { font-size: clamp(28px, 7.4vw, 40px); } |
| 1268 | + .b-cta-title { font-size: clamp(28px, 7.4vw, 40px); margin-bottom: 32px; } |
| 1269 | + } |
| 1270 | + |
| 1271 | + @media (max-width: 480px) { |
| 1272 | + .b-card { padding: 22px 16px 18px; } |
| 1273 | + .b-card-head { |
| 1274 | + flex-direction: column; |
| 1275 | + align-items: flex-start; |
| 1276 | + gap: 4px; |
| 1277 | + } |
| 1278 | + .b-card-title { font-size: 17px; } |
| 1279 | + .b-card-tag { padding-top: 0; } |
| 1280 | + .b-bars { gap: 9px; } |
| 1281 | + .b-bar { |
| 1282 | + grid-template-columns: 68px 1fr 48px; |
| 1283 | + gap: 8px; |
| 1284 | + font-size: 11px; |
| 1285 | + } |
| 1286 | + .b-bar-label { letter-spacing: 0; } |
| 1287 | + .b-card-desc { font-size: 12.5px; padding-top: 12px; } |
| 1288 | + .b-card-note { font-size: 11.5px; } |
1199 | 1289 | } |
1200 | 1290 | } |
0 commit comments