PluginProbe
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder / 51.1.83
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder v51.1.83
51.1.84 51.1.85 51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 51.1.45 51.1.46 All 39 releases
king-addons / includes / extensions / Pricing_Table_Builder / assets / frontend.css

frontend.css in King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder 51.1.83, at includes/extensions/Pricing_Table_Builder/assets/frontend.css

615 lines 13.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Pricing Table Builder - Frontend Styles
3 * Premium style inspired design with modern animations
4 */
5
6 /* ============================================
7 CSS Variables (Defaults)
8 ============================================ */
9
10 .kng-pt-wrapper {
11 --kng-pt-bg: transparent;
12 --kng-pt-card-bg: #ffffff;
13 --kng-pt-card-border: #e5e7eb;
14 --kng-pt-text: #1d1d1f;
15 --kng-pt-muted: #86868b;
16 --kng-pt-accent: #0071e3;
17 --kng-pt-accent-text: #ffffff;
18 --kng-pt-badge-bg: #f5f5f7;
19 --kng-pt-badge-text: #1d1d1f;
20 --kng-pt-highlight: #0071e3;
21
22 --kng-pt-title-size: 24px;
23 --kng-pt-price-size: 56px;
24 --kng-pt-body-size: 14px;
25
26 --kng-pt-radius: 20px;
27 --kng-pt-border-width: 0;
28 --kng-pt-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
29
30 --kng-pt-columns-desktop: 3;
31 --kng-pt-columns-tablet: 2;
32 --kng-pt-columns-mobile: 1;
33 --kng-pt-gap: 24px;
34 --kng-pt-max-width: 1200px;
35
36 font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
37 -webkit-font-smoothing: antialiased;
38 -moz-osx-font-smoothing: grayscale;
39 }
40
41 /* ============================================
42 Container & Layout
43 ============================================ */
44
45 .kng-pt-wrapper {
46 background: var(--kng-pt-bg);
47 padding: 40px 20px;
48 }
49
50 .kng-pt-container {
51 max-width: var(--kng-pt-max-width);
52 margin: 0 auto;
53 }
54
55 /* ============================================
56 Billing Toggle
57 ============================================ */
58
59 .kng-pt-toggle-wrapper {
60 display: flex;
61 justify-content: center;
62 margin-bottom: 48px;
63 }
64
65 .kng-pt-toggle {
66 display: inline-flex;
67 background: var(--kng-pt-badge-bg);
68 border-radius: 100px;
69 padding: 4px;
70 gap: 4px;
71 }
72
73 .kng-pt-toggle-btn {
74 display: flex;
75 align-items: center;
76 gap: 8px;
77 padding: 12px 24px;
78 font-size: 14px;
79 font-weight: 500;
80 color: var(--kng-pt-muted);
81 background: transparent;
82 border: none;
83 border-radius: 100px;
84 cursor: pointer;
85 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
86 white-space: nowrap;
87 }
88
89 .kng-pt-toggle-btn:hover {
90 color: var(--kng-pt-text);
91 }
92
93 .kng-pt-toggle-btn.is-active {
94 background: var(--kng-pt-card-bg);
95 color: var(--kng-pt-text);
96 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
97 }
98
99 .kng-pt-toggle-badge {
100 display: inline-flex;
101 align-items: center;
102 padding: 2px 8px;
103 font-size: 11px;
104 font-weight: 600;
105 color: var(--kng-pt-accent);
106 background: rgba(0, 113, 227, 0.1);
107 border-radius: 100px;
108 }
109
110 /* Switch style toggle */
111 .kng-pt-wrapper[data-toggle-style="switch"] .kng-pt-toggle {
112 background: transparent;
113 gap: 12px;
114 }
115
116 .kng-pt-wrapper[data-toggle-style="switch"] .kng-pt-toggle-btn {
117 padding: 0;
118 background: transparent !important;
119 box-shadow: none !important;
120 }
121
122 .kng-pt-wrapper[data-toggle-style="switch"] .kng-pt-toggle::before {
123 content: '';
124 position: absolute;
125 width: 44px;
126 height: 24px;
127 background: var(--kng-pt-accent);
128 border-radius: 12px;
129 transition: all 0.3s ease;
130 }
131
132 /* Tabs style toggle */
133 .kng-pt-wrapper[data-toggle-style="tabs"] .kng-pt-toggle {
134 background: transparent;
135 border-bottom: 2px solid var(--kng-pt-card-border);
136 border-radius: 0;
137 padding: 0;
138 }
139
140 .kng-pt-wrapper[data-toggle-style="tabs"] .kng-pt-toggle-btn {
141 border-radius: 0;
142 padding: 12px 24px;
143 border-bottom: 2px solid transparent;
144 margin-bottom: -2px;
145 }
146
147 .kng-pt-wrapper[data-toggle-style="tabs"] .kng-pt-toggle-btn.is-active {
148 background: transparent;
149 box-shadow: none;
150 border-bottom-color: var(--kng-pt-accent);
151 color: var(--kng-pt-accent);
152 }
153
154 /* ============================================
155 Plans Grid
156 ============================================ */
157
158 .kng-pt-grid {
159 display: grid;
160 grid-template-columns: repeat(var(--kng-pt-columns-desktop), 1fr);
161 gap: var(--kng-pt-gap);
162 align-items: start;
163 }
164
165 @media (max-width: 1024px) {
166 .kng-pt-grid {
167 grid-template-columns: repeat(var(--kng-pt-columns-tablet), 1fr);
168 }
169 }
170
171 @media (max-width: 640px) {
172 .kng-pt-grid {
173 grid-template-columns: repeat(var(--kng-pt-columns-mobile), 1fr);
174 }
175 }
176
177 /* ============================================
178 Plan Card
179 ============================================ */
180
181 .kng-pt-card {
182 position: relative;
183 background: var(--kng-pt-card-bg);
184 border: var(--kng-pt-border-width) solid var(--kng-pt-card-border);
185 border-radius: var(--kng-pt-radius);
186 box-shadow: var(--kng-pt-shadow);
187 padding: 32px;
188 display: flex;
189 flex-direction: column;
190 transition: transform 0.3s ease, box-shadow 0.3s ease;
191 }
192
193 .kng-pt-card:hover {
194 transform: translateY(-4px);
195 }
196
197 /* Highlighted card */
198 .kng-pt-card--highlighted {
199 border-color: var(--kng-pt-highlight);
200 border-width: 2px;
201 transform: scale(1.02);
202 z-index: 1;
203 }
204
205 .kng-pt-card--highlighted:hover {
206 transform: scale(1.02) translateY(-4px);
207 }
208
209 /* Card badge */
210 .kng-pt-card-badge {
211 position: absolute;
212 top: -12px;
213 left: 50%;
214 transform: translateX(-50%);
215 padding: 6px 16px;
216 font-size: 12px;
217 font-weight: 600;
218 color: var(--kng-pt-badge-text);
219 background: var(--kng-pt-badge-bg);
220 border-radius: 100px;
221 white-space: nowrap;
222 }
223
224 .kng-pt-badge--pill {
225 background: var(--kng-pt-accent);
226 color: var(--kng-pt-accent-text);
227 }
228
229 .kng-pt-badge--ribbon {
230 top: 16px;
231 left: auto;
232 right: -8px;
233 border-radius: 4px 0 0 4px;
234 transform: none;
235 }
236
237 .kng-pt-badge--ribbon::after {
238 content: '';
239 position: absolute;
240 top: 100%;
241 right: 0;
242 border: 4px solid transparent;
243 border-top-color: var(--kng-pt-accent);
244 border-left-color: var(--kng-pt-accent);
245 }
246
247 /* ============================================
248 Card Header
249 ============================================ */
250
251 .kng-pt-card-header {
252 text-align: center;
253 margin-bottom: 24px;
254 }
255
256 .kng-pt-card-name {
257 font-size: var(--kng-pt-title-size);
258 font-weight: 600;
259 color: var(--kng-pt-text);
260 margin: 0 0 4px;
261 letter-spacing: -0.02em;
262 }
263
264 .kng-pt-card-subtitle {
265 font-size: 15px;
266 color: var(--kng-pt-muted);
267 margin: 0;
268 }
269
270 /* ============================================
271 Pricing Display
272 ============================================ */
273
274 .kng-pt-card-pricing {
275 text-align: center;
276 margin-bottom: 24px;
277 }
278
279 .kng-pt-price-group {
280 animation: kng-pt-fade-in 0.3s ease;
281 }
282
283 @keyframes kng-pt-fade-in {
284 from {
285 opacity: 0;
286 transform: translateY(8px);
287 }
288 to {
289 opacity: 1;
290 transform: translateY(0);
291 }
292 }
293
294 .kng-pt-price {
295 display: flex;
296 align-items: flex-start;
297 justify-content: center;
298 gap: 2px;
299 margin-bottom: 4px;
300 }
301
302 .kng-pt-price-currency {
303 font-size: calc(var(--kng-pt-price-size) * 0.4);
304 font-weight: 500;
305 color: var(--kng-pt-text);
306 margin-top: 8px;
307 }
308
309 .kng-pt-price-value {
310 font-size: var(--kng-pt-price-size);
311 font-weight: 700;
312 color: var(--kng-pt-text);
313 letter-spacing: -0.03em;
314 line-height: 1;
315 }
316
317 .kng-pt-price-suffix {
318 font-size: 16px;
319 font-weight: 400;
320 color: var(--kng-pt-muted);
321 align-self: flex-end;
322 margin-bottom: 8px;
323 }
324
325 .kng-pt-price-note {
326 font-size: 13px;
327 color: var(--kng-pt-muted);
328 }
329
330 /* ============================================
331 CTA Button
332 ============================================ */
333
334 .kng-pt-card-cta {
335 margin-bottom: 24px;
336 }
337
338 .kng-pt-btn {
339 display: block;
340 width: 100%;
341 padding: 14px 24px;
342 font-size: 15px;
343 font-weight: 500;
344 text-align: center;
345 text-decoration: none;
346 border-radius: calc(var(--kng-pt-radius) * 0.5);
347 transition: all 0.2s ease;
348 cursor: pointer;
349 border: none;
350 }
351
352 .kng-pt-btn--primary {
353 background: var(--kng-pt-accent);
354 color: var(--kng-pt-accent-text);
355 }
356
357 .kng-pt-btn--primary:hover {
358 opacity: 0.9;
359 transform: translateY(-1px);
360 }
361
362 .kng-pt-btn--secondary {
363 background: var(--kng-pt-badge-bg);
364 color: var(--kng-pt-text);
365 }
366
367 .kng-pt-btn--secondary:hover {
368 background: var(--kng-pt-card-border);
369 }
370
371 .kng-pt-btn--outline {
372 background: transparent;
373 color: var(--kng-pt-accent);
374 border: 2px solid var(--kng-pt-accent);
375 }
376
377 .kng-pt-btn--outline:hover {
378 background: var(--kng-pt-accent);
379 color: var(--kng-pt-accent-text);
380 }
381
382 /* ============================================
383 Features List
384 ============================================ */
385
386 .kng-pt-card-features {
387 flex: 1;
388 }
389
390 .kng-pt-features-list {
391 list-style: none;
392 margin: 0;
393 padding: 0;
394 }
395
396 .kng-pt-feature {
397 display: flex;
398 align-items: flex-start;
399 gap: 12px;
400 padding: 10px 0;
401 font-size: var(--kng-pt-body-size);
402 color: var(--kng-pt-text);
403 border-bottom: 1px solid rgba(0, 0, 0, 0.05);
404 }
405
406 .kng-pt-feature:last-child {
407 border-bottom: none;
408 }
409
410 .kng-pt-feature-icon {
411 flex-shrink: 0;
412 width: 20px;
413 height: 20px;
414 display: flex;
415 align-items: center;
416 justify-content: center;
417 }
418
419 .kng-pt-feature-icon svg {
420 width: 16px;
421 height: 16px;
422 }
423
424 .kng-pt-feature--enabled .kng-pt-feature-icon {
425 color: #34c759;
426 }
427
428 .kng-pt-feature--disabled {
429 color: var(--kng-pt-muted);
430 }
431
432 .kng-pt-feature--disabled .kng-pt-feature-icon {
433 color: var(--kng-pt-muted);
434 opacity: 0.5;
435 }
436
437 .kng-pt-feature--disabled .kng-pt-feature-text {
438 text-decoration: line-through;
439 opacity: 0.6;
440 }
441
442 /* ============================================
443 Fine Print
444 ============================================ */
445
446 .kng-pt-card-fine-print {
447 margin-top: 16px;
448 padding-top: 16px;
449 border-top: 1px solid var(--kng-pt-card-border);
450 font-size: 12px;
451 color: var(--kng-pt-muted);
452 text-align: center;
453 }
454
455 /* ============================================
456 Preset Variations
457 ============================================ */
458
459 /* Minimal Light */
460 .kng-pt-preset-free_minimal_light .kng-pt-card {
461 box-shadow: none;
462 }
463
464 .kng-pt-preset-free_minimal_light .kng-pt-card:hover {
465 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
466 }
467
468 /* Dark SaaS */
469 .kng-pt-preset-free_dark_saas,
470 .kng-pt-preset-pro_linear,
471 .kng-pt-preset-pro_vercel,
472 .kng-pt-preset-pro_discord,
473 .kng-pt-preset-pro_spotify,
474 .kng-pt-preset-pro_netflix,
475 .kng-pt-preset-pro_supabase,
476 .kng-pt-preset-pro_planetscale,
477 .kng-pt-preset-pro_railway {
478 --kng-pt-badge-bg: rgba(255, 255, 255, 0.1);
479 }
480
481 /* Gradient badges */
482 .kng-pt-preset-free_gradient_header .kng-pt-card-badge,
483 .kng-pt-preset-pro_loom .kng-pt-card-badge {
484 background: linear-gradient(135deg, var(--kng-pt-accent) 0%, #d946ef 100%);
485 }
486
487 /* Fruit Phone */
488 .kng-pt-preset-pro_fruit_phone .kng-pt-card {
489 padding: 40px;
490 }
491
492 .kng-pt-preset-pro_fruit_phone .kng-pt-price-value {
493 font-weight: 600;
494 }
495
496 /* Squarespace Elegant */
497 .kng-pt-preset-pro_squarespace .kng-pt-btn {
498 border-radius: 0;
499 }
500
501 .kng-pt-preset-pro_squarespace .kng-pt-toggle {
502 border-radius: 0;
503 }
504
505 .kng-pt-preset-pro_squarespace .kng-pt-toggle-btn {
506 border-radius: 0;
507 }
508
509 /* ============================================
510 Animations
511 ============================================ */
512
513 .kng-pt-wrapper:not([data-no-animations="1"]) .kng-pt-card {
514 animation: kng-pt-card-enter 0.5s ease both;
515 }
516
517 .kng-pt-wrapper:not([data-no-animations="1"]) .kng-pt-card:nth-child(1) {
518 animation-delay: 0s;
519 }
520
521 .kng-pt-wrapper:not([data-no-animations="1"]) .kng-pt-card:nth-child(2) {
522 animation-delay: 0.1s;
523 }
524
525 .kng-pt-wrapper:not([data-no-animations="1"]) .kng-pt-card:nth-child(3) {
526 animation-delay: 0.2s;
527 }
528
529 .kng-pt-wrapper:not([data-no-animations="1"]) .kng-pt-card:nth-child(4) {
530 animation-delay: 0.3s;
531 }
532
533 .kng-pt-wrapper:not([data-no-animations="1"]) .kng-pt-card:nth-child(5) {
534 animation-delay: 0.4s;
535 }
536
537 .kng-pt-wrapper:not([data-no-animations="1"]) .kng-pt-card:nth-child(6) {
538 animation-delay: 0.5s;
539 }
540
541 @keyframes kng-pt-card-enter {
542 from {
543 opacity: 0;
544 transform: translateY(20px);
545 }
546 to {
547 opacity: 1;
548 transform: translateY(0);
549 }
550 }
551
552 /* Disable animations */
553 .kng-pt-wrapper[data-no-animations="1"] .kng-pt-card {
554 animation: none;
555 }
556
557 .kng-pt-wrapper[data-no-animations="1"] .kng-pt-price-group {
558 animation: none;
559 }
560
561 /* ============================================
562 Responsive Adjustments
563 ============================================ */
564
565 @media (max-width: 768px) {
566 .kng-pt-wrapper {
567 padding: 24px 16px;
568 }
569
570 .kng-pt-toggle-wrapper {
571 margin-bottom: 32px;
572 }
573
574 .kng-pt-toggle-btn {
575 padding: 10px 16px;
576 font-size: 13px;
577 }
578
579 .kng-pt-card {
580 padding: 24px;
581 }
582
583 .kng-pt-card--highlighted {
584 transform: none;
585 }
586
587 .kng-pt-card--highlighted:hover {
588 transform: translateY(-4px);
589 }
590
591 .kng-pt-price-value {
592 font-size: calc(var(--kng-pt-price-size) * 0.8);
593 }
594 }
595
596 /* ============================================
597 Print Styles
598 ============================================ */
599
600 @media print {
601 .kng-pt-wrapper {
602 padding: 0;
603 }
604
605 .kng-pt-card {
606 break-inside: avoid;
607 box-shadow: none;
608 border: 1px solid #ddd;
609 }
610
611 .kng-pt-toggle-wrapper {
612 display: none;
613 }
614 }
615