← All changes | assets/css/pricing-modal.css +185 -11 1.10 → trunk View file →

		@@ -40,13 +40,19 @@
40	40	background: #fff url('../images/loader-balls.svg') center no-repeat;
41	41	z-index: 10;
42	42	}
43	43	.imagify-payment-modal .imagify-modal-content {
44		- width: 980px;
	44	+ width: 1065px;
45	45	max-width: 100%;
46	46	min-width: 925px;
47	47	padding: 0;
48	48	}
	49	+@media (prefers-reduced-motion: no-preference) {
	50	+ .imagify-payment-modal .imagify-modal-content {
	51	+ -webkit-transition: width .3s ease, min-width .3s ease, max-width .3s ease, height .3s ease, min-height .3s ease;
	52	+ transition: width .3s ease, min-width .3s ease, max-width .3s ease, height .3s ease, min-height .3s ease;
	53	+ }
	54	+}
49	55	.imagify-modal-content.imagify-iframe-viewing {
50	56	width: 980px;
51	57	height: 672px;
52	58	overflow: hidden;
		@@ -55,9 +61,11 @@
55	61	width: 980px;
56	62	height: 668px;
57	63	}
58	64	.imagify-payment-modal .imagify-modal-main {
59		- width: 70%;
	65	+ width: 100%;
	66	+ background-color: #f5f7f9;
	67	+ padding: 30px 50px;
60	68	}
61	69	.imagify-iframe-viewing .imagify-modal-main {
62	70	width: auto;
63	71	}
		@@ -98,9 +106,11 @@
98	106	margin-top: .5em;
99	107	margin-bottom: .5em;
100	108	}
101	109	.imagify-modal-title {
102		- font-size: 1.8em;
	110	+ font-size: 2.2em;
	111	+ font-weight: 600;
	112	+ margin: 30px 0 10px;
103	113	}
104	114	.imagify-modal-title .imagify-inner-sub-title {
105	115	display: block;
106	116	font-size: .56em;
		@@ -162,9 +172,9 @@
162	172	}
163	173
164	174	.imagify-small-options {
165	175	width: 300px;
166		- margin: 1em auto .5em;
	176	+ margin: 5em auto 5em;
167	177	background: #338EA6;
168	178	border-radius: 4px;
169	179	}
170	180
		@@ -393,12 +403,13 @@
393	403
394	404	/* Offer col */
395	405	.imagify-offer-size {
396	406	font-size: 30px;
397		- color: #2E3243;
	407	+ color: #5F758E;
398	408	font-weight: bold;
399	409	-webkit-transition: all .275s;
400	410	transition: all .275s;
	411	+ text-transform: uppercase;
401	412	}
402	413	.imagify-offer-by {
403	414	font-size: 10px;
404	415	-webkit-transition: all .275s;
		@@ -421,13 +432,16 @@
421	432	}
422	433	.imagify-offer-monthly .imagify-flex-table .imagify-price-block,
423	434	.imagify-offer-monthlies .imagify-price-block {
424	435	padding-top: 0;
	436	+ max-width: 39%;
425	437	}
426	438	.imagify-flex-table .imagify-price-complement {
427	439	padding-right: 0;
428	440	font-size: 10px;
429	441	font-weight: bold;
	442	+ font-size: 0.9em;
	443	+ line-height: 1.7;
430	444	}
431	445	.imagify-price-block,
432	446	.imagify-price-discount {
433	447	white-space: nowrap;
		@@ -489,13 +503,20 @@
489	503	font-size: 18px;
490	504	vertical-align: 2px;
491	505	}
492	506	span.imagify-price-by {
493		- font-size: 10px;
494		- color: #1F2332;
495		- vertical-align: -13px;
496		- text-indent: -27px;
	507	+ font-size: 0.9em;
	508	+ color: #5F758E;
	509	+ text-indent: -27px;
	510	+ display: block;
	511	+ text-align: center;
	512	+ margin-top: 9px;
	513	+ text-transform: uppercase;
	514	+ font-weight: bold;
497	515	}
	516	+.imagify-plans-selection-view span.imagify-price-by {
	517	+ text-indent: -66px;
	518	+}
498	519
499	520	.imagify-col-other-actions {
500	521	width: 18.5%;
501	522	text-align: right;
		@@ -693,10 +714,11 @@
693	714	.imagify-footer-lines {
694	715	width: 500px;
695	716	max-width: 100%;
696	717	margin: 2em auto 2.5em;
697		- font-size: 0.85em;
	718	+ font-size: 0.9em;
698	719	line-height: 1.5;
	720	+ font-weight:600
699	721	}
700	722
701	723	/* Year selected */
702	724	.imagify-year-selected .imagify-switch-my .imagify-yearly {
		@@ -740,11 +762,13 @@
740	762	margin: 0 20px;
741	763	}
742	764	.imagify-pricing-table .imagify-offer-line {
743	765	padding: .6em 0;
744		- border: 2px solid #E8EEF0;
	766	+ background-color: white;
	767	+ margin-bottom: 30px;
745	768	text-align: left;
746	769	border-radius: 3px;
	770	+ position: relative;
747	771	}
748	772	.imagify-pricing-table .imagify-offer-line:first-child {
749	773	margin-top: .75em;
750	774	}
		@@ -1151,8 +1175,20 @@
1151	1175	color: #40b1d0;
1152	1176	float: right;
1153	1177	font-weight: bold;
1154	1178	}
	1179	+.imagify-col-details p.imagify-label-plans{
	1180	+ margin-left: 10px;
	1181	+ font-size: 1.5em;
	1182	+ text-transform: uppercase;
	1183	+ color: #3FB1CF;
	1184	+}
	1185	+div.imagify-col-label {
	1186	+ width:15%;
	1187	+}
	1188	+.imagify-pricing-table .imagify-col-other-actions.imagify-choose-plan-col {
	1189	+ width: 14.5%;
	1190	+}
1155	1191	@media (max-width: 782px) {
1156	1192	.imagify-payment-modal .imagify-modal-content{
1157	1193	width: 90%;
1158	1194	min-width: auto;
		@@ -1337,4 +1373,142 @@
1337	1373	top: -1px;
1338	1374	left: 10px;
1339	1375	}
1340	1376	}
	1377	+
	1378	+/** Ribbon **/
	1379	+.imagify-ribbon {
	1380	+ position: absolute;
	1381	+ left: -5px; top: -5px;
	1382	+ z-index: 1;
	1383	+ overflow: hidden;
	1384	+ width: 75px; height: 75px;
	1385	+ text-align: right;
	1386	+}
	1387	+.imagify-ribbon span {
	1388	+ font-size: 0.9em;
	1389	+ font-weight: bold;
	1390	+ color: #FFF;
	1391	+ text-align: center;
	1392	+ line-height: 22px;
	1393	+ transform: rotate(-45deg);
	1394	+ -webkit-transform: rotate(-45deg);
	1395	+ width: 100px;
	1396	+ display: block;
	1397	+ background: #79A70A;
	1398	+ background: linear-gradient(#3FB1CF 0%, #3FB1CF 100%);
	1399	+ box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
	1400	+ position: absolute;
	1401	+ top: 19px; left: -21px;
	1402	+}
	1403	+.imagify-ribbon span::before {
	1404	+ content: "";
	1405	+ position: absolute; left: 0px; top: 100%;
	1406	+ z-index: -1;
	1407	+ border-left: 3px solid #3FB1CF;
	1408	+ border-right: 3px solid transparent;
	1409	+ border-bottom: 3px solid transparent;
	1410	+ border-top: 3px solid #3FB1CF;
	1411	+}
	1412	+.imagify-ribbon span::after {
	1413	+ content: "";
	1414	+ position: absolute; right: 0px; top: 100%;
	1415	+ z-index: -1;
	1416	+ border-left: 3px solid transparent;
	1417	+ border-right: 3px solid #3FB1CF;
	1418	+ border-bottom: 3px solid transparent;
	1419	+ border-top: 3px solid #3FB1CF;
	1420	+}
	1421	+/** End Ribbon **/
	1422	+
	1423	+/** Toggle Switch **/
	1424	+.imagify-toggle-container {
	1425	+ display: flex;
	1426	+ align-items: center;
	1427	+ justify-content: center;
	1428	+ gap: 10px;
	1429	+ position: relative;
	1430	+ width: 70%;
	1431	+ margin: 80px auto 40px;
	1432	+}
	1433	+.imagify-toggle-container .toggle-label {
	1434	+ font-size: 16px;
	1435	+ font-weight: 500;
	1436	+}
	1437	+.toggle-container .toggle-label:nth-of-type(2) {
	1438	+ color: #c8ced5;
	1439	+}
	1440	+.imagify-switch {
	1441	+ position: relative;
	1442	+ display: inline-block;
	1443	+ width: 48px;
	1444	+ height: 24px;
	1445	+}
	1446	+.imagify-switch input {
	1447	+ opacity: 0;
	1448	+ width: 0;
	1449	+ height: 0;
	1450	+}
	1451	+.imagify-slider {
	1452	+ position: absolute;
	1453	+ top: 0;
	1454	+ left: 0;
	1455	+ right: 0;
	1456	+ bottom: 0;
	1457	+ background-color: #97c45e;
	1458	+ border-radius: 30px;
	1459	+ cursor: pointer;
	1460	+ transition: 0.4s;
	1461	+}
	1462	+.imagify-slider:before {
	1463	+ position: absolute;
	1464	+ content: "";
	1465	+ height: 18px;
	1466	+ width: 18px;
	1467	+ left: 4px;
	1468	+ bottom: 3px;
	1469	+ background-color: white;
	1470	+ border-radius: 50%;
	1471	+ transition: 0.4s;
	1472	+}
	1473	+input:checked + .imagify-slider {
	1474	+ background-color: #97c45e;
	1475	+}
	1476	+input:checked + .imagify-slider:before {
	1477	+ transform: translateX(22px);
	1478	+}
	1479	+.imagify-badge-container {
	1480	+ align-items: center;
	1481	+ gap: 5px;
	1482	+ position:absolute;
	1483	+ right: 80px;
	1484	+ top: -25px;
	1485	+}
	1486	+.imagify-badge {
	1487	+ font-size: 12px;
	1488	+ padding: 4px 10px;
	1489	+ border: 1px solid #b8bfc5;
	1490	+ border-radius: 3px;
	1491	+ color: #b8bfc5;
	1492	+ font-weight: 700;
	1493	+ transition: background-color 0.4s, color 0.4s;
	1494	+}
	1495	+.imagify-badge.imagify-badge-checked {
	1496	+ background-color: #E2F0D1;
	1497	+ color: #8bc34a;
	1498	+ border: 1px solid #8bc34a
	1499	+}
	1500	+.imagify-arrow-container {
	1501	+ position: absolute;
	1502	+ right: 180px;
	1503	+ top: 0px;
	1504	+}
	1505	+.imagify-toggle-container img:nth-of-type(1) {
	1506	+ display: none;
	1507	+}
	1508	+input:checked ~ .imagify-badge-container .imagify-badge {
	1509	+ background-color: #97c45e;
	1510	+ color: white;
	1511	+ border-color: #97c45e;
	1512	+ opacity: 1;
	1513	+}
	1514	+/** End Toggle Switch **/