PluginProbe
Blockenberg — 600+ Advanced Gutenberg Blocks & AI Agent for WordPress Block Editor / 2.0.7
Blockenberg — 600+ Advanced Gutenberg Blocks & AI Agent for WordPress Block Editor v2.0.7
2.0.13 2.0.12 2.0.11 2.0.10 2.0.9 trunk 2.0.2 2.0.3 2.0.4 2.0.5 2.0.6 2.0.7 2.0.8
blockenberg / blocks / affiliate-box / style.css

style.css in Blockenberg — 600+ Advanced Gutenberg Blocks & AI Agent for WordPress Block Editor 2.0.7, at blocks/affiliate-box/style.css

381 lines 15.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .bkbg-ab-wrapper {
2 box-sizing: border-box;
3 width: 100%;
4 }
5
6 /* ── Outer card ─────────────────────────────────────────────────── */
7 .bkbg-ab-card {
8 background: var(--bkbg-ab-card-bg, #fff);
9 border: var(--bkbg-ab-border-width, 2px) solid var(--bkbg-ab-card-border, #e5e7eb);
10 border-radius: var(--bkbg-ab-card-r, 20px);
11 overflow: hidden;
12 box-shadow: 0 4px 24px rgba(0,0,0,0.06);
13 }
14
15 /* Top header bar */
16 .bkbg-ab-header {
17 background: var(--bkbg-ab-header-bg, #6c3fb5);
18 padding: 20px 28px;
19 display: flex;
20 align-items: center;
21 justify-content: space-between;
22 gap: 16px;
23 flex-wrap: wrap;
24 }
25 .bkbg-ab-product-name {
26 font-size: var(--bkbg-ab-title-sz, 22px);
27 font-weight: 900;
28 color: var(--bkbg-ab-header-text, #fff);
29 line-height: 1.2;
30 margin: 0;
31 }
32 .bkbg-ab-category-badge {
33 display: inline-block;
34 padding: 4px 12px;
35 border-radius: 99px;
36 background: rgba(255,255,255,0.2);
37 color: #fff;
38 font-size: 12px;
39 font-weight: 700;
40 letter-spacing: 0.08em;
41 text-transform: uppercase;
42 }
43
44 /* ── Body ───────────────────────────────────────────────────────── */
45 .bkbg-ab-body {
46 display: flex;
47 gap: 28px;
48 padding: var(--bkbg-ab-pad, 28px);
49 align-items: flex-start;
50 flex-wrap: wrap;
51 }
52
53 /* Image / Score side */
54 .bkbg-ab-image-score {
55 display: flex;
56 flex-direction: column;
57 align-items: center;
58 gap: 16px;
59 flex-shrink: 0;
60 min-width: 140px;
61 }
62 .bkbg-ab-image-wrap {
63 width: var(--bkbg-ab-img-size, 140px);
64 height: var(--bkbg-ab-img-size, 140px);
65 border-radius: var(--bkbg-ab-img-r, 12px);
66 overflow: hidden;
67 flex-shrink: 0;
68 background: #f3f4f6;
69 }
70 .bkbg-ab-image-wrap img {
71 width: 100%;
72 height: 100%;
73 object-fit: cover;
74 display: block;
75 }
76
77 /* Score badge */
78 .bkbg-ab-score-badge {
79 width: var(--bkbg-ab-score-size, 88px);
80 height: var(--bkbg-ab-score-size, 88px);
81 border-radius: 50%;
82 background: var(--bkbg-ab-score-bg, #6c3fb5);
83 display: flex;
84 flex-direction: column;
85 align-items: center;
86 justify-content: center;
87 box-shadow: 0 4px 16px rgba(108,63,181,0.35);
88 flex-shrink: 0;
89 }
90 .bkbg-ab-score-number {
91 font-size: calc(var(--bkbg-ab-score-size, 88px) * 0.35);
92 font-weight: 900;
93 color: var(--bkbg-ab-score-text, #fff);
94 line-height: 1;
95 }
96 .bkbg-ab-score-denom {
97 font-size: calc(var(--bkbg-ab-score-size, 88px) * 0.13);
98 color: rgba(255,255,255,0.75);
99 margin-top: 2px;
100 }
101
102 /* Content side */
103 .bkbg-ab-content { flex: 1; min-width: 200px; }
104
105 /* Pros/Cons row */
106 .bkbg-ab-pros-cons {
107 display: flex;
108 gap: 20px;
109 flex-wrap: wrap;
110 margin-bottom: 20px;
111 }
112 .bkbg-ab-pros,
113 .bkbg-ab-cons { flex: 1; min-width: 140px; }
114
115 .bkbg-ab-pros-title,
116 .bkbg-ab-cons-title {
117 font-size: 13px;
118 font-weight: 800;
119 text-transform: uppercase;
120 letter-spacing: 0.08em;
121 margin-bottom: 10px;
122 }
123 .bkbg-ab-pros-title { color: var(--bkbg-ab-pro-color, #16a34a); }
124 .bkbg-ab-cons-title { color: var(--bkbg-ab-con-color, #dc2626); }
125
126 .bkbg-ab-pros-list,
127 .bkbg-ab-cons-list { list-style: none; padding: 0; margin: 0; }
128
129 .bkbg-ab-pros-list li,
130 .bkbg-ab-cons-list li {
131 display: flex;
132 align-items: baseline;
133 gap: 7px;
134 font-size: var(--bkbg-ab-item-sz, 14px);
135 line-height: 1.5;
136 padding: 4px 0;
137 color: var(--bkbg-ab-text-color, #374151);
138 }
139
140 .bkbg-ab-pros-list li::before {
141 content: '';
142 font-weight: 900;
143 color: var(--bkbg-ab-pro-color, #16a34a);
144 flex-shrink: 0;
145 font-size: 14px;
146 line-height: 1;
147 }
148 .bkbg-ab-cons-list li::before {
149 content: '';
150 font-weight: 900;
151 color: var(--bkbg-ab-con-color, #dc2626);
152 flex-shrink: 0;
153 font-size: 14px;
154 line-height: 1;
155 }
156
157 /* Summary boxes */
158 .bkbg-ab-summary-row {
159 display: flex;
160 gap: 12px;
161 flex-wrap: wrap;
162 margin-bottom: 20px;
163 }
164 .bkbg-ab-summary-box {
165 flex: 1;
166 min-width: 120px;
167 background: #f9fafb;
168 border: 1px solid #e5e7eb;
169 border-radius: 10px;
170 padding: 12px 16px;
171 text-align: center;
172 }
173 .bkbg-ab-summary-value {
174 font-size: 20px;
175 font-weight: 900;
176 color: var(--bkbg-ab-score-bg, #6c3fb5);
177 display: block;
178 }
179 .bkbg-ab-summary-label {
180 font-size: 11px;
181 color: #9ca3af;
182 font-weight: 600;
183 display: block;
184 margin-top: 2px;
185 text-transform: uppercase;
186 letter-spacing: 0.06em;
187 }
188
189 /* Verdict */
190 .bkbg-ab-verdict-box {
191 background: var(--bkbg-ab-verdict-bg, #f0fdf4);
192 border: 1px solid var(--bkbg-ab-verdict-border, #bbf7d0);
193 border-left: 4px solid var(--bkbg-ab-pro-color, #16a34a);
194 border-radius: 10px;
195 padding: 14px 18px;
196 margin-bottom: 20px;
197 }
198 .bkbg-ab-verdict-label {
199 font-size: 11px;
200 font-weight: 800;
201 text-transform: uppercase;
202 letter-spacing: 0.1em;
203 color: var(--bkbg-ab-pro-color, #16a34a);
204 margin-bottom: 5px;
205 display: block;
206 }
207 .bkbg-ab-verdict-text {
208 font-size: var(--bkbg-ab-item-sz, 14px);
209 color: var(--bkbg-ab-text-color, #374151);
210 line-height: 1.65;
211 margin: 0;
212 }
213
214 /* ── Footer / CTA ───────────────────────────────────────────────── */
215 .bkbg-ab-footer {
216 padding: 20px 28px;
217 border-top: 1px solid var(--bkbg-ab-card-border, #e5e7eb);
218 display: flex;
219 align-items: center;
220 gap: 16px;
221 flex-wrap: wrap;
222 background: #fafafa;
223 }
224 .bkbg-ab-cta-price-col { flex: 1; min-width: 120px; }
225 .bkbg-ab-cta-price {
226 font-size: 24px;
227 font-weight: 900;
228 color: var(--bkbg-ab-score-bg, #6c3fb5);
229 display: block;
230 line-height: 1.1;
231 }
232 .bkbg-ab-cta-price-note { font-size: 12px; color: #9ca3af; margin-top: 2px; }
233
234 .bkbg-ab-cta-btn {
235 display: inline-block;
236 padding: var(--bkbg-ab-btn-pad, 13px 28px);
237 border-radius: var(--bkbg-ab-btn-r, 10px);
238 border: none;
239 background: var(--bkbg-ab-btn-bg, #6c3fb5);
240 color: var(--bkbg-ab-btn-color, #fff);
241 font-family: inherit;
242 font-size: var(--bkbg-ab-btn-sz, 15px);
243 font-weight: 800;
244 cursor: pointer;
245 text-decoration: none;
246 text-align: center;
247 transition: filter 0.2s;
248 white-space: nowrap;
249 line-height: 1;
250 }
251 .bkbg-ab-cta-btn:hover { filter: brightness(1.12); }
252
253 .bkbg-ab-disclaimer {
254 width: 100%;
255 font-size: 11px;
256 color: #9ca3af;
257 line-height: 1.5;
258 margin: 0;
259 }
260
261 @media (max-width: 640px) {
262 .bkbg-ab-body { flex-direction: column; }
263 .bkbg-ab-image-score { flex-direction: row; width: 100%; justify-content: flex-start; }
264 .bkbg-ab-pros-cons { flex-direction: column; gap: 12px; }
265 .bkbg-ab-summary-row { flex-direction: column; }
266 .bkbg-ab-footer { flex-direction: column; align-items: flex-start; }
267 .bkbg-ab-cta-btn { width: 100%; text-align: center; }
268 }
269
270 /* ── Typography (new system) ─────────────────────────────────────── */
271
272 /* Pros/Cons headers (editor + frontend) */\n.bkbg-ab-wrap .bkbg-ab-pros-header,\n.bkbg-ab-wrap .bkbg-ab-cons-header,\n.bkbg-ab-wrap .bkbg-ab-pros-title,\n.bkbg-ab-wrap .bkbg-ab-cons-title {\n font-size: 13px;\n font-weight: 800;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n}
273
274 /* Product name */
275 .bkbg-ab-wrap .bkbg-ab-name {
276 font-family: var(--bkbg-ab-name-font-family, inherit);
277 font-size: var(--bkbg-ab-name-font-size-d, var(--bkbg-ab-name-sz, 22px));
278 font-weight: var(--bkbg-ab-name-font-weight, 800);
279 line-height: var(--bkbg-ab-name-line-height-d, 1.2);
280 text-transform: var(--bkbg-ab-name-text-transform, none);
281 font-style: var(--bkbg-ab-name-font-style, normal);
282 text-decoration:var(--bkbg-ab-name-text-decoration, none);
283 letter-spacing: var(--bkbg-ab-name-letter-spacing-d, var(--bkbg-ab-name-letter-spacing, normal));
284 word-spacing: var(--bkbg-ab-name-word-spacing-d, var(--bkbg-ab-name-word-spacing, normal));
285 }
286
287 /* Tagline */
288 .bkbg-ab-wrap .bkbg-ab-tagline {
289 font-family: var(--bkbg-ab-tagline-font-family, inherit);
290 font-size: var(--bkbg-ab-tagline-font-size-d, var(--bkbg-ab-tagline-sz, 14px));
291 font-weight: var(--bkbg-ab-tagline-font-weight, 400);
292 line-height: var(--bkbg-ab-tagline-line-height-d, 1.5);
293 text-transform: var(--bkbg-ab-tagline-text-transform, none);
294 font-style: var(--bkbg-ab-tagline-font-style, normal);
295 text-decoration:var(--bkbg-ab-tagline-text-decoration, none);
296 letter-spacing: var(--bkbg-ab-tagline-letter-spacing-d, var(--bkbg-ab-tagline-letter-spacing, normal));
297 word-spacing: var(--bkbg-ab-tagline-word-spacing-d, var(--bkbg-ab-tagline-word-spacing, normal));
298 }
299
300 /* List items (pros & cons) */
301 .bkbg-ab-wrap .bkbg-ab-list li {
302 font-family: var(--bkbg-ab-list-font-family, inherit);
303 font-size: var(--bkbg-ab-list-font-size-d, var(--bkbg-ab-list-sz, 14px));
304 font-weight: var(--bkbg-ab-list-font-weight, 400);
305 line-height: var(--bkbg-ab-list-line-height-d, 1.4);
306 text-transform: var(--bkbg-ab-list-text-transform, none);
307 font-style: var(--bkbg-ab-list-font-style, normal);
308 text-decoration:var(--bkbg-ab-list-text-decoration, none);
309 letter-spacing: var(--bkbg-ab-list-letter-spacing-d, var(--bkbg-ab-list-letter-spacing, normal));
310 word-spacing: var(--bkbg-ab-list-word-spacing-d, var(--bkbg-ab-list-word-spacing, normal));
311 }
312
313 /* Verdict text */
314 .bkbg-ab-wrap .bkbg-ab-verdict-text {
315 font-family: var(--bkbg-ab-verdict-font-family, inherit);
316 font-size: var(--bkbg-ab-verdict-font-size-d, var(--bkbg-ab-verdict-sz, 14px));
317 font-weight: var(--bkbg-ab-verdict-font-weight, 400);
318 line-height: var(--bkbg-ab-verdict-line-height-d, 1.65);
319 text-transform: var(--bkbg-ab-verdict-text-transform, none);
320 font-style: var(--bkbg-ab-verdict-font-style, normal);
321 text-decoration:var(--bkbg-ab-verdict-text-decoration, none);
322 letter-spacing: var(--bkbg-ab-verdict-letter-spacing-d, var(--bkbg-ab-verdict-letter-spacing, normal));
323 word-spacing: var(--bkbg-ab-verdict-word-spacing-d, var(--bkbg-ab-verdict-word-spacing, normal));
324 }
325
326 /* ── Responsive Typography ──────────────────────────────────────── */
327
328 @media (max-width: 1024px) {
329 .bkbg-ab-wrap .bkbg-ab-name {
330 font-size: var(--bkbg-ab-name-font-size-t, var(--bkbg-ab-name-font-size-d, var(--bkbg-ab-name-sz, 22px)));
331 line-height: var(--bkbg-ab-name-line-height-t, var(--bkbg-ab-name-line-height-d, 1.2));
332 letter-spacing: var(--bkbg-ab-name-letter-spacing-t, var(--bkbg-ab-name-letter-spacing-d, var(--bkbg-ab-name-letter-spacing, normal)));
333 word-spacing: var(--bkbg-ab-name-word-spacing-t, var(--bkbg-ab-name-word-spacing-d, var(--bkbg-ab-name-word-spacing, normal)));
334 }
335 .bkbg-ab-wrap .bkbg-ab-tagline {
336 font-size: var(--bkbg-ab-tagline-font-size-t, var(--bkbg-ab-tagline-font-size-d, var(--bkbg-ab-tagline-sz, 14px)));
337 line-height: var(--bkbg-ab-tagline-line-height-t, var(--bkbg-ab-tagline-line-height-d, 1.5));
338 letter-spacing: var(--bkbg-ab-tagline-letter-spacing-t, var(--bkbg-ab-tagline-letter-spacing-d, var(--bkbg-ab-tagline-letter-spacing, normal)));
339 word-spacing: var(--bkbg-ab-tagline-word-spacing-t, var(--bkbg-ab-tagline-word-spacing-d, var(--bkbg-ab-tagline-word-spacing, normal)));
340 }
341 .bkbg-ab-wrap .bkbg-ab-list li {
342 font-size: var(--bkbg-ab-list-font-size-t, var(--bkbg-ab-list-font-size-d, var(--bkbg-ab-list-sz, 14px)));
343 line-height: var(--bkbg-ab-list-line-height-t, var(--bkbg-ab-list-line-height-d, 1.4));
344 letter-spacing: var(--bkbg-ab-list-letter-spacing-t, var(--bkbg-ab-list-letter-spacing-d, var(--bkbg-ab-list-letter-spacing, normal)));
345 word-spacing: var(--bkbg-ab-list-word-spacing-t, var(--bkbg-ab-list-word-spacing-d, var(--bkbg-ab-list-word-spacing, normal)));
346 }
347 .bkbg-ab-wrap .bkbg-ab-verdict-text {
348 font-size: var(--bkbg-ab-verdict-font-size-t, var(--bkbg-ab-verdict-font-size-d, var(--bkbg-ab-verdict-sz, 14px)));
349 line-height: var(--bkbg-ab-verdict-line-height-t, var(--bkbg-ab-verdict-line-height-d, 1.65));
350 letter-spacing: var(--bkbg-ab-verdict-letter-spacing-t, var(--bkbg-ab-verdict-letter-spacing-d, var(--bkbg-ab-verdict-letter-spacing, normal)));
351 word-spacing: var(--bkbg-ab-verdict-word-spacing-t, var(--bkbg-ab-verdict-word-spacing-d, var(--bkbg-ab-verdict-word-spacing, normal)));
352 }
353 }
354
355 @media (max-width: 767px) {
356 .bkbg-ab-wrap .bkbg-ab-name {
357 font-size: var(--bkbg-ab-name-font-size-m, var(--bkbg-ab-name-font-size-t, var(--bkbg-ab-name-font-size-d, var(--bkbg-ab-name-sz, 22px))));
358 line-height: var(--bkbg-ab-name-line-height-m, var(--bkbg-ab-name-line-height-t, var(--bkbg-ab-name-line-height-d, 1.2)));
359 letter-spacing: var(--bkbg-ab-name-letter-spacing-m, var(--bkbg-ab-name-letter-spacing-t, var(--bkbg-ab-name-letter-spacing-d, var(--bkbg-ab-name-letter-spacing, normal))));
360 word-spacing: var(--bkbg-ab-name-word-spacing-m, var(--bkbg-ab-name-word-spacing-t, var(--bkbg-ab-name-word-spacing-d, var(--bkbg-ab-name-word-spacing, normal))));
361 }
362 .bkbg-ab-wrap .bkbg-ab-tagline {
363 font-size: var(--bkbg-ab-tagline-font-size-m, var(--bkbg-ab-tagline-font-size-t, var(--bkbg-ab-tagline-font-size-d, var(--bkbg-ab-tagline-sz, 14px))));
364 line-height: var(--bkbg-ab-tagline-line-height-m, var(--bkbg-ab-tagline-line-height-t, var(--bkbg-ab-tagline-line-height-d, 1.5)));
365 letter-spacing: var(--bkbg-ab-tagline-letter-spacing-m, var(--bkbg-ab-tagline-letter-spacing-t, var(--bkbg-ab-tagline-letter-spacing-d, var(--bkbg-ab-tagline-letter-spacing, normal))));
366 word-spacing: var(--bkbg-ab-tagline-word-spacing-m, var(--bkbg-ab-tagline-word-spacing-t, var(--bkbg-ab-tagline-word-spacing-d, var(--bkbg-ab-tagline-word-spacing, normal))));
367 }
368 .bkbg-ab-wrap .bkbg-ab-list li {
369 font-size: var(--bkbg-ab-list-font-size-m, var(--bkbg-ab-list-font-size-t, var(--bkbg-ab-list-font-size-d, var(--bkbg-ab-list-sz, 14px))));
370 line-height: var(--bkbg-ab-list-line-height-m, var(--bkbg-ab-list-line-height-t, var(--bkbg-ab-list-line-height-d, 1.4)));
371 letter-spacing: var(--bkbg-ab-list-letter-spacing-m, var(--bkbg-ab-list-letter-spacing-t, var(--bkbg-ab-list-letter-spacing-d, var(--bkbg-ab-list-letter-spacing, normal))));
372 word-spacing: var(--bkbg-ab-list-word-spacing-m, var(--bkbg-ab-list-word-spacing-t, var(--bkbg-ab-list-word-spacing-d, var(--bkbg-ab-list-word-spacing, normal))));
373 }
374 .bkbg-ab-wrap .bkbg-ab-verdict-text {
375 font-size: var(--bkbg-ab-verdict-font-size-m, var(--bkbg-ab-verdict-font-size-t, var(--bkbg-ab-verdict-font-size-d, var(--bkbg-ab-verdict-sz, 14px))));
376 line-height: var(--bkbg-ab-verdict-line-height-m, var(--bkbg-ab-verdict-line-height-t, var(--bkbg-ab-verdict-line-height-d, 1.65)));
377 letter-spacing: var(--bkbg-ab-verdict-letter-spacing-m, var(--bkbg-ab-verdict-letter-spacing-t, var(--bkbg-ab-verdict-letter-spacing-d, var(--bkbg-ab-verdict-letter-spacing, normal))));
378 word-spacing: var(--bkbg-ab-verdict-word-spacing-m, var(--bkbg-ab-verdict-word-spacing-t, var(--bkbg-ab-verdict-word-spacing-d, var(--bkbg-ab-verdict-word-spacing, normal))));
379 }
380 }
381