appscms-tools-theme 5.7.1 → 5.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/_data/.DS_Store +0 -0
- data/_data/home/.DS_Store +0 -0
- data/_data/home/en/latest-tools.json +110 -6
- data/_includes/.DS_Store +0 -0
- data/_includes/appscms/.DS_Store +0 -0
- data/_includes/appscms/home/latest-features-display.html +41 -274
- data/_includes/contenttool_banner.html +1 -246
- data/_layouts/appscms-feature.html +10 -12
- data/assets/.DS_Store +0 -0
- data/assets/css/appscms-theme.css +419 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: '020491632a7f68fd0a3ef8911341a8b28a355ac820cbe2724f4fb217ee285191'
|
|
4
|
+
data.tar.gz: d4f9b7a7ba0f3e0c6291581524f2a90a80c17e6d12764d32b3a085ade96c4b2b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e36b4ac32266a385f00bd968534b072a981e13bb791234a5bcbfb5e25347471904a0203d5f566bfff7fb4ee484400b0f33de1dfe5c5f5989bcffd4d2b099d5ec
|
|
7
|
+
data.tar.gz: 7e8fd39cf1f186cfa82aced3c98699ae4f950b3e305f190b023cb9605c497eca227b50fc73b40a6767ac36922ca8ac01b71715d51be7defe16d4203d49fcf288
|
data/_data/.DS_Store
CHANGED
|
Binary file
|
data/_data/home/.DS_Store
CHANGED
|
Binary file
|
|
@@ -6,37 +6,141 @@
|
|
|
6
6
|
"name": "PDF Creator",
|
|
7
7
|
"description": "Create a PDF quickly and easily with our free online PDF creator",
|
|
8
8
|
"url": "/pdf-creator",
|
|
9
|
-
"icon": "/assets/images/convert.svg"
|
|
9
|
+
"icon": "/assets/images/convert.svg",
|
|
10
|
+
"bg": "linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"
|
|
10
11
|
},
|
|
11
12
|
{
|
|
12
13
|
"name": "Background Remover",
|
|
13
14
|
"description": "Remove or change the background on any photo instantly",
|
|
14
15
|
"url": "/background-remover",
|
|
15
|
-
"icon": "/assets/images/digipaint.svg"
|
|
16
|
+
"icon": "/assets/images/digipaint.svg",
|
|
17
|
+
"bg": "linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%)"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"name": "PDF Creator",
|
|
21
|
+
"description": "Create a PDF quickly and easily with our free online PDF creator",
|
|
22
|
+
"url": "/pdf-creator",
|
|
23
|
+
"icon": "/assets/images/convert.svg",
|
|
24
|
+
"bg": "linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"name": "Background Remover",
|
|
28
|
+
"description": "Remove or change the background on any photo instantly",
|
|
29
|
+
"url": "/background-remover",
|
|
30
|
+
"icon": "/assets/images/digipaint.svg",
|
|
31
|
+
"bg": "linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%)"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"name": "PDF Creator",
|
|
35
|
+
"description": "Create a PDF quickly and easily with our free online PDF creator",
|
|
36
|
+
"url": "/pdf-creator",
|
|
37
|
+
"icon": "/assets/images/convert.svg",
|
|
38
|
+
"bg": "linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"name": "Background Remover",
|
|
42
|
+
"description": "Remove or change the background on any photo instantly",
|
|
43
|
+
"url": "/background-remover",
|
|
44
|
+
"icon": "/assets/images/digipaint.svg",
|
|
45
|
+
"bg": "linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%)"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "PDF Creator",
|
|
49
|
+
"description": "Create a PDF quickly and easily with our free online PDF creator",
|
|
50
|
+
"url": "/pdf-creator",
|
|
51
|
+
"icon": "/assets/images/convert.svg",
|
|
52
|
+
"bg": "linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"name": "Background Remover",
|
|
56
|
+
"description": "Remove or change the background on any photo instantly",
|
|
57
|
+
"url": "/background-remover",
|
|
58
|
+
"icon": "/assets/images/digipaint.svg",
|
|
59
|
+
"bg": "linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%)"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"name": "PDF Creator",
|
|
63
|
+
"description": "Create a PDF quickly and easily with our free online PDF creator",
|
|
64
|
+
"url": "/pdf-creator",
|
|
65
|
+
"icon": "/assets/images/convert.svg",
|
|
66
|
+
"bg": "linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"name": "Background Remover",
|
|
70
|
+
"description": "Remove or change the background on any photo instantly",
|
|
71
|
+
"url": "/background-remover",
|
|
72
|
+
"icon": "/assets/images/digipaint.svg",
|
|
73
|
+
"bg": "linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%)"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"name": "PDF Creator",
|
|
77
|
+
"description": "Create a PDF quickly and easily with our free online PDF creator",
|
|
78
|
+
"url": "/pdf-creator",
|
|
79
|
+
"icon": "/assets/images/convert.svg",
|
|
80
|
+
"bg": "linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"name": "Background Remover",
|
|
84
|
+
"description": "Remove or change the background on any photo instantly",
|
|
85
|
+
"url": "/background-remover",
|
|
86
|
+
"icon": "/assets/images/digipaint.svg",
|
|
87
|
+
"bg": "linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%)"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"name": "PDF Creator",
|
|
91
|
+
"description": "Create a PDF quickly and easily with our free online PDF creator",
|
|
92
|
+
"url": "/pdf-creator",
|
|
93
|
+
"icon": "/assets/images/convert.svg",
|
|
94
|
+
"bg": "linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"name": "Background Remover",
|
|
98
|
+
"description": "Remove or change the background on any photo instantly",
|
|
99
|
+
"url": "/background-remover",
|
|
100
|
+
"icon": "/assets/images/digipaint.svg",
|
|
101
|
+
"bg": "linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%)"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"name": "PDF Creator",
|
|
105
|
+
"description": "Create a PDF quickly and easily with our free online PDF creator",
|
|
106
|
+
"url": "/pdf-creator",
|
|
107
|
+
"icon": "/assets/images/convert.svg",
|
|
108
|
+
"bg": "linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"name": "Background Remover",
|
|
112
|
+
"description": "Remove or change the background on any photo instantly",
|
|
113
|
+
"url": "/background-remover",
|
|
114
|
+
"icon": "/assets/images/digipaint.svg",
|
|
115
|
+
"bg": "linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%)"
|
|
16
116
|
},
|
|
17
117
|
{
|
|
18
118
|
"name": "Photo Cleanup",
|
|
19
119
|
"description": "Use AI to remove unwanted objects, items, or people from an image",
|
|
20
120
|
"url": "/photo-cleanup",
|
|
21
|
-
"icon": "/assets/images/vectorpaint.svg"
|
|
121
|
+
"icon": "/assets/images/vectorpaint.svg",
|
|
122
|
+
"bg": "linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%)"
|
|
22
123
|
},
|
|
23
124
|
{
|
|
24
125
|
"name": "Image Converter",
|
|
25
126
|
"description": "Convert images between JPG, PNG, WEBP and more formats in seconds",
|
|
26
127
|
"url": "/image-converter",
|
|
27
|
-
"icon": "/assets/images/addimg.svg"
|
|
128
|
+
"icon": "/assets/images/addimg.svg",
|
|
129
|
+
"bg": "linear-gradient(135deg, #fef9c3 0%, #fef08a 100%)"
|
|
28
130
|
},
|
|
29
131
|
{
|
|
30
132
|
"name": "Audio Converter",
|
|
31
133
|
"description": "Convert audio files to MP3, WAV, AAC and other formats with ease",
|
|
32
134
|
"url": "/audio-converter",
|
|
33
|
-
"icon": "/assets/images/audio-upload.svg"
|
|
135
|
+
"icon": "/assets/images/audio-upload.svg",
|
|
136
|
+
"bg": "linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%)"
|
|
34
137
|
},
|
|
35
138
|
{
|
|
36
139
|
"name": "Speed Test",
|
|
37
140
|
"description": "Check your internet connection speed quickly and accurately",
|
|
38
141
|
"url": "/speed-test",
|
|
39
|
-
"icon": "/assets/images/speed.svg"
|
|
142
|
+
"icon": "/assets/images/speed.svg",
|
|
143
|
+
"bg": "linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%)"
|
|
40
144
|
}
|
|
41
145
|
]
|
|
42
146
|
}
|
data/_includes/.DS_Store
CHANGED
|
Binary file
|
data/_includes/appscms/.DS_Store
CHANGED
|
Binary file
|
|
@@ -4,284 +4,51 @@
|
|
|
4
4
|
{% if lfd_tools.size > 0 %}
|
|
5
5
|
<section class="lfd-section" aria-label="Latest Featured Tools">
|
|
6
6
|
<div class="container">
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<div class="row">
|
|
17
|
-
{% for item in lfd_tools %}
|
|
18
|
-
<div class="col-12 col-sm-6 col-md-4 mb-4 lfd-col">
|
|
19
|
-
<a href="{{ item.url }}" class="lfd-card lfd-bg-{{ forloop.index }}">
|
|
20
|
-
<div class="lfd-preview">
|
|
21
|
-
<div class="lfd-browser-bar">
|
|
22
|
-
<span class="lfd-dot"></span>
|
|
23
|
-
<span class="lfd-dot"></span>
|
|
24
|
-
<span class="lfd-dot"></span>
|
|
25
|
-
<span class="lfd-url-bar"></span>
|
|
26
|
-
</div>
|
|
27
|
-
<div class="lfd-icon-wrap">
|
|
28
|
-
<img
|
|
29
|
-
src="{{ item.icon }}"
|
|
30
|
-
alt="{{ item.name }}"
|
|
31
|
-
class="lfd-icon"
|
|
32
|
-
crossorigin="anonymous"
|
|
33
|
-
loading="lazy"
|
|
34
|
-
/>
|
|
35
|
-
</div>
|
|
36
|
-
<span class="lfd-new-badge">NEW</span>
|
|
7
|
+
<div class="row justify-content-center">
|
|
8
|
+
<div class="col-12 col-md-9 col-xl-10">
|
|
9
|
+
|
|
10
|
+
<div class="row mb-4">
|
|
11
|
+
<div class="col">
|
|
12
|
+
<span class="lfd-eyebrow">What's New</span>
|
|
13
|
+
<p class="lfd-heading">{{ lfd.heading }}</p>
|
|
14
|
+
<p class="lfd-sub">{{ lfd.subtext }}</p>
|
|
37
15
|
</div>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
<div class="row">
|
|
19
|
+
{% for item in lfd_tools %}
|
|
20
|
+
<div class="col-12 col-sm-6 col-md-4 mb-4 lfd-col" style="--lfd-i: {{ forloop.index0 }};">
|
|
21
|
+
<a href="{{ item.url }}" class="lfd-card">
|
|
22
|
+
<div class="lfd-preview" style="background: {{ item.bg }};">
|
|
23
|
+
<div class="lfd-browser-bar">
|
|
24
|
+
<span class="lfd-dot"></span>
|
|
25
|
+
<span class="lfd-dot"></span>
|
|
26
|
+
<span class="lfd-dot"></span>
|
|
27
|
+
<span class="lfd-url-bar"></span>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="lfd-icon-wrap">
|
|
30
|
+
<img
|
|
31
|
+
src="{{ item.icon }}"
|
|
32
|
+
alt="{{ item.name }}"
|
|
33
|
+
class="lfd-icon"
|
|
34
|
+
crossorigin="anonymous"
|
|
35
|
+
loading="lazy"
|
|
36
|
+
/>
|
|
37
|
+
</div>
|
|
38
|
+
<span class="lfd-new-badge">NEW</span>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="lfd-info">
|
|
41
|
+
<p class="lfd-title">{{ item.name | truncate: 36, ".." }}</p>
|
|
42
|
+
<p class="lfd-desc">{{ item.description | truncate: 90, ".." }}</p>
|
|
43
|
+
<span class="lfd-cta">Try it free →</span>
|
|
44
|
+
</div>
|
|
45
|
+
</a>
|
|
42
46
|
</div>
|
|
43
|
-
|
|
47
|
+
{% endfor %}
|
|
48
|
+
</div>
|
|
49
|
+
|
|
44
50
|
</div>
|
|
45
|
-
{% endfor %}
|
|
46
51
|
</div>
|
|
47
|
-
|
|
48
52
|
</div>
|
|
49
53
|
</section>
|
|
50
|
-
|
|
51
|
-
<style>
|
|
52
|
-
.lfd-section {
|
|
53
|
-
padding: 3.5rem 0 4.5rem;
|
|
54
|
-
background: #f5f7fb;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.lfd-eyebrow {
|
|
58
|
-
display: inline-block;
|
|
59
|
-
font-size: .72rem;
|
|
60
|
-
font-weight: 700;
|
|
61
|
-
letter-spacing: .12em;
|
|
62
|
-
text-transform: uppercase;
|
|
63
|
-
color: #2563eb;
|
|
64
|
-
background: #dbeafe;
|
|
65
|
-
border-radius: 999px;
|
|
66
|
-
padding: .2rem .8rem;
|
|
67
|
-
margin-bottom: .65rem;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.lfd-heading {
|
|
71
|
-
font-size: clamp(1.4rem, 3vw, 2rem);
|
|
72
|
-
font-weight: 800;
|
|
73
|
-
color: #0f172a;
|
|
74
|
-
margin-bottom: .3rem;
|
|
75
|
-
line-height: 1.2;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.lfd-sub {
|
|
79
|
-
color: #64748b;
|
|
80
|
-
font-size: .95rem;
|
|
81
|
-
margin-bottom: 0;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
/* card */
|
|
85
|
-
.lfd-card {
|
|
86
|
-
display: block;
|
|
87
|
-
background: #fff;
|
|
88
|
-
border-radius: 1rem;
|
|
89
|
-
overflow: hidden;
|
|
90
|
-
text-decoration: none;
|
|
91
|
-
height: 100%;
|
|
92
|
-
box-shadow: 0 1px 4px rgba(0,0,0,.07);
|
|
93
|
-
transition: box-shadow .25s, transform .25s;
|
|
94
|
-
animation: lfd-rise .7s cubic-bezier(.22,.68,0,1.2) both, lfd-ring 2.8s ease-in-out 1.2s infinite;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.lfd-card:hover {
|
|
98
|
-
box-shadow: 0 14px 36px rgba(37,99,235,.22);
|
|
99
|
-
transform: translateY(-8px);
|
|
100
|
-
text-decoration: none;
|
|
101
|
-
animation-play-state: paused, paused;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
@keyframes lfd-ring {
|
|
105
|
-
0%, 100% { box-shadow: 0 1px 4px rgba(0,0,0,.07); }
|
|
106
|
-
50% { box-shadow: 0 0 0 4px rgba(37,99,235,.35), 0 8px 28px rgba(37,99,235,.18); }
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
/* staggered entry animation */
|
|
110
|
-
.lfd-col:nth-child(1) .lfd-card { animation-delay: 0ms; }
|
|
111
|
-
.lfd-col:nth-child(2) .lfd-card { animation-delay: 90ms; }
|
|
112
|
-
.lfd-col:nth-child(3) .lfd-card { animation-delay: 180ms; }
|
|
113
|
-
.lfd-col:nth-child(4) .lfd-card { animation-delay: 270ms; }
|
|
114
|
-
.lfd-col:nth-child(5) .lfd-card { animation-delay: 360ms; }
|
|
115
|
-
.lfd-col:nth-child(6) .lfd-card { animation-delay: 450ms; }
|
|
116
|
-
|
|
117
|
-
@keyframes lfd-rise {
|
|
118
|
-
from { opacity: 0; transform: translateY(40px) scale(.92); }
|
|
119
|
-
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
/* preview background colours — match order in latest-tools.json */
|
|
123
|
-
.lfd-bg-1 .lfd-preview { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); }
|
|
124
|
-
.lfd-bg-2 .lfd-preview { background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); }
|
|
125
|
-
.lfd-bg-3 .lfd-preview { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); }
|
|
126
|
-
.lfd-bg-4 .lfd-preview { background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%); }
|
|
127
|
-
.lfd-bg-5 .lfd-preview { background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%); }
|
|
128
|
-
.lfd-bg-6 .lfd-preview { background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%); }
|
|
129
|
-
|
|
130
|
-
/* preview area */
|
|
131
|
-
.lfd-preview {
|
|
132
|
-
position: relative;
|
|
133
|
-
height: 190px;
|
|
134
|
-
display: flex;
|
|
135
|
-
align-items: center;
|
|
136
|
-
justify-content: center;
|
|
137
|
-
overflow: hidden;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
/* shine sweep across preview */
|
|
141
|
-
.lfd-preview::after {
|
|
142
|
-
content: '';
|
|
143
|
-
position: absolute;
|
|
144
|
-
top: 0; bottom: 0;
|
|
145
|
-
left: -60%;
|
|
146
|
-
width: 40%;
|
|
147
|
-
background: linear-gradient(
|
|
148
|
-
105deg,
|
|
149
|
-
transparent 0%,
|
|
150
|
-
rgba(255,255,255,.85) 50%,
|
|
151
|
-
transparent 100%
|
|
152
|
-
);
|
|
153
|
-
transform: skewX(-15deg);
|
|
154
|
-
animation: lfd-shine 2.8s ease-in-out infinite;
|
|
155
|
-
pointer-events: none;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
.lfd-col:nth-child(1) .lfd-preview::after { animation-delay: 0s; }
|
|
159
|
-
.lfd-col:nth-child(2) .lfd-preview::after { animation-delay: .45s; }
|
|
160
|
-
.lfd-col:nth-child(3) .lfd-preview::after { animation-delay: .9s; }
|
|
161
|
-
.lfd-col:nth-child(4) .lfd-preview::after { animation-delay: 1.35s; }
|
|
162
|
-
.lfd-col:nth-child(5) .lfd-preview::after { animation-delay: 1.8s; }
|
|
163
|
-
.lfd-col:nth-child(6) .lfd-preview::after { animation-delay: 2.25s; }
|
|
164
|
-
|
|
165
|
-
@keyframes lfd-shine {
|
|
166
|
-
0% { left: -60%; opacity: 0; }
|
|
167
|
-
10% { opacity: 1; }
|
|
168
|
-
60% { left: 130%; opacity: 1; }
|
|
169
|
-
61%, 100% { left: 130%; opacity: 0; }
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.lfd-browser-bar {
|
|
173
|
-
position: absolute;
|
|
174
|
-
top: 10px;
|
|
175
|
-
left: 10px;
|
|
176
|
-
right: 10px;
|
|
177
|
-
height: 20px;
|
|
178
|
-
background: rgba(255,255,255,.6);
|
|
179
|
-
border-radius: 5px;
|
|
180
|
-
display: flex;
|
|
181
|
-
align-items: center;
|
|
182
|
-
padding: 0 7px;
|
|
183
|
-
gap: 5px;
|
|
184
|
-
backdrop-filter: blur(4px);
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
.lfd-dot {
|
|
188
|
-
width: 7px;
|
|
189
|
-
height: 7px;
|
|
190
|
-
border-radius: 50%;
|
|
191
|
-
background: rgba(0,0,0,.18);
|
|
192
|
-
flex-shrink: 0;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
.lfd-url-bar {
|
|
196
|
-
flex: 1;
|
|
197
|
-
height: 7px;
|
|
198
|
-
background: rgba(0,0,0,.1);
|
|
199
|
-
border-radius: 4px;
|
|
200
|
-
margin-left: 5px;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
.lfd-icon-wrap {
|
|
204
|
-
display: flex;
|
|
205
|
-
align-items: center;
|
|
206
|
-
justify-content: center;
|
|
207
|
-
padding-top: 8px;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
.lfd-icon {
|
|
211
|
-
width: 72px;
|
|
212
|
-
height: 72px;
|
|
213
|
-
object-fit: contain;
|
|
214
|
-
filter: drop-shadow(0 6px 18px rgba(0,0,0,.22));
|
|
215
|
-
animation: lfd-float 2.4s ease-in-out infinite;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
@keyframes lfd-float {
|
|
219
|
-
0%, 100% { transform: translateY(0) scale(1); }
|
|
220
|
-
50% { transform: translateY(-16px) scale(1.08); }
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
/* NEW badge */
|
|
224
|
-
.lfd-new-badge {
|
|
225
|
-
position: absolute;
|
|
226
|
-
top: 36px;
|
|
227
|
-
right: 10px;
|
|
228
|
-
background: #2563eb;
|
|
229
|
-
color: #fff;
|
|
230
|
-
font-size: .65rem;
|
|
231
|
-
font-weight: 800;
|
|
232
|
-
letter-spacing: .12em;
|
|
233
|
-
padding: .2rem .55rem;
|
|
234
|
-
border-radius: 5px;
|
|
235
|
-
box-shadow: 0 0 0 0 rgba(37,99,235,.7);
|
|
236
|
-
animation: lfd-badge-pop 1.6s ease-out infinite;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
@keyframes lfd-badge-pop {
|
|
240
|
-
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37,99,235,.7); }
|
|
241
|
-
50% { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(37,99,235,0); }
|
|
242
|
-
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37,99,235,0); }
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
/* card body */
|
|
246
|
-
.lfd-info {
|
|
247
|
-
padding: 1.1rem 1.2rem 1.3rem;
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
.lfd-title {
|
|
251
|
-
font-size: 1rem;
|
|
252
|
-
font-weight: 700;
|
|
253
|
-
color: #0f172a;
|
|
254
|
-
margin-bottom: .3rem;
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
.lfd-desc {
|
|
258
|
-
font-size: .84rem;
|
|
259
|
-
color: #475569;
|
|
260
|
-
line-height: 1.55;
|
|
261
|
-
margin-bottom: .75rem;
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
.lfd-cta {
|
|
265
|
-
font-size: .9rem;
|
|
266
|
-
font-weight: 700;
|
|
267
|
-
color: #fff;
|
|
268
|
-
background: #2563eb;
|
|
269
|
-
display: inline-block;
|
|
270
|
-
padding: .4rem 1rem;
|
|
271
|
-
border-radius: 999px;
|
|
272
|
-
animation: lfd-nudge 1.4s ease-in-out infinite;
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
@keyframes lfd-nudge {
|
|
276
|
-
0%, 100% { transform: translateX(0) scale(1); }
|
|
277
|
-
40% { transform: translateX(8px) scale(1.05); }
|
|
278
|
-
60% { transform: translateX(4px) scale(1.02); }
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
.lfd-card:hover .lfd-cta {
|
|
282
|
-
animation-play-state: paused;
|
|
283
|
-
background: #1d4ed8;
|
|
284
|
-
transform: translateX(8px) scale(1.05);
|
|
285
|
-
}
|
|
286
|
-
</style>
|
|
287
54
|
{% endif %}
|
|
@@ -1,249 +1,4 @@
|
|
|
1
|
-
|
|
2
1
|
{%- if site.show_contenttool_promo -%}
|
|
3
|
-
<style>
|
|
4
|
-
/* Main Promotion Banner */
|
|
5
|
-
.promo-banner {
|
|
6
|
-
position: sticky;
|
|
7
|
-
top: 0;
|
|
8
|
-
z-index: 9999;
|
|
9
|
-
background: linear-gradient(135deg, #667eea 0%, #1b2fe7 100%);
|
|
10
|
-
/* background: linear-gradient(to right, #d53369, #cbad6d); */
|
|
11
|
-
/* background: linear-gradient(to right, #f857a6, #ff5858); */
|
|
12
|
-
/* background: linear-gradient(135deg, #4456f6f7 0%, #4456f6f7 100%); */
|
|
13
|
-
background-size: 200% 200%;
|
|
14
|
-
animation: gradientShift 4s ease infinite;
|
|
15
|
-
padding: 12px 20px;
|
|
16
|
-
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
|
17
|
-
overflow: hidden;
|
|
18
|
-
position: relative;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.promo-banner::before {
|
|
22
|
-
content: '';
|
|
23
|
-
position: absolute;
|
|
24
|
-
top: 0;
|
|
25
|
-
left: -100%;
|
|
26
|
-
width: 100%;
|
|
27
|
-
height: 100%;
|
|
28
|
-
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
29
|
-
animation: shine 3s infinite;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
@keyframes gradientShift {
|
|
33
|
-
0% {
|
|
34
|
-
background-position: 0% 50%;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
50% {
|
|
38
|
-
background-position: 100% 50%;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
100% {
|
|
42
|
-
background-position: 0% 50%;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
@keyframes shine {
|
|
47
|
-
0% {
|
|
48
|
-
left: -100%;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
100% {
|
|
52
|
-
left: 100%;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.banner-content {
|
|
57
|
-
display: flex;
|
|
58
|
-
align-items: center;
|
|
59
|
-
justify-content: center;
|
|
60
|
-
gap: 15px;
|
|
61
|
-
max-width: 1200px;
|
|
62
|
-
margin: 0 auto;
|
|
63
|
-
position: relative;
|
|
64
|
-
z-index: 2;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.banner-icon {
|
|
68
|
-
font-size: 24px;
|
|
69
|
-
animation: bounce 2s infinite;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
@keyframes bounce {
|
|
73
|
-
|
|
74
|
-
0%,
|
|
75
|
-
20%,
|
|
76
|
-
50%,
|
|
77
|
-
80%,
|
|
78
|
-
100% {
|
|
79
|
-
transform: translateY(0);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
40% {
|
|
83
|
-
transform: translateY(-5px);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
60% {
|
|
87
|
-
transform: translateY(-3px);
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.banner-text {
|
|
92
|
-
color: white;
|
|
93
|
-
font-size: 16px;
|
|
94
|
-
font-weight: 600;
|
|
95
|
-
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
96
|
-
letter-spacing: 0.5px;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.highlight {
|
|
100
|
-
color: #ffd700;
|
|
101
|
-
font-weight: 700;
|
|
102
|
-
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.cta-button {
|
|
106
|
-
background: linear-gradient(45deg, #f59e0b, #d97706);
|
|
107
|
-
/* background-color: #fff; */
|
|
108
|
-
/* background: linear-gradient(45deg, #007bff, #007bff); */
|
|
109
|
-
/* background: linear-gradient(45deg, #ff6b6b, #ff8e8e); */
|
|
110
|
-
color: #fff;
|
|
111
|
-
padding: 5px 15px;
|
|
112
|
-
border-radius: 25px;
|
|
113
|
-
text-decoration: none;
|
|
114
|
-
font-weight: 700;
|
|
115
|
-
font-size: 14px;
|
|
116
|
-
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
117
|
-
transition: all 0.3s ease;
|
|
118
|
-
/* box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4); */
|
|
119
|
-
position: relative;
|
|
120
|
-
overflow: hidden;
|
|
121
|
-
text-transform: uppercase;
|
|
122
|
-
letter-spacing: 1px;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.cta-button::before {
|
|
126
|
-
content: '';
|
|
127
|
-
position: absolute;
|
|
128
|
-
top: 0;
|
|
129
|
-
left: -100%;
|
|
130
|
-
width: 100%;
|
|
131
|
-
height: 100%;
|
|
132
|
-
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
133
|
-
transition: left 0.5s;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.cta-button:hover::before {
|
|
137
|
-
left: 100%;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.cta-button:hover {
|
|
141
|
-
color: #000;
|
|
142
|
-
transform: translateY(-2px);
|
|
143
|
-
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
|
|
144
|
-
border-color: rgba(255, 255, 255, 0.4);
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.close-btn {
|
|
148
|
-
background: rgba(255, 255, 255, 0.2);
|
|
149
|
-
border: none;
|
|
150
|
-
color: white;
|
|
151
|
-
font-size: 18px;
|
|
152
|
-
width: 30px;
|
|
153
|
-
height: 30px;
|
|
154
|
-
border-radius: 50%;
|
|
155
|
-
cursor: pointer;
|
|
156
|
-
transition: all 0.3s ease;
|
|
157
|
-
position: absolute;
|
|
158
|
-
right: 15px;
|
|
159
|
-
top: 50%;
|
|
160
|
-
transform: translateY(-50%);
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
.close-btn:hover {
|
|
164
|
-
background: rgba(255, 255, 255, 0.3);
|
|
165
|
-
transform: translateY(-50%) rotate(90deg);
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
/* Floating particles effect */
|
|
169
|
-
.particle {
|
|
170
|
-
position: absolute;
|
|
171
|
-
background: rgba(255, 255, 255, 0.1);
|
|
172
|
-
border-radius: 50%;
|
|
173
|
-
pointer-events: none;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.particle:nth-child(1) {
|
|
177
|
-
width: 6px;
|
|
178
|
-
height: 6px;
|
|
179
|
-
top: 20%;
|
|
180
|
-
left: 10%;
|
|
181
|
-
animation: float 6s infinite ease-in-out;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
.particle:nth-child(2) {
|
|
185
|
-
width: 4px;
|
|
186
|
-
height: 4px;
|
|
187
|
-
top: 60%;
|
|
188
|
-
left: 80%;
|
|
189
|
-
animation: float 4s infinite ease-in-out reverse;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
.particle:nth-child(3) {
|
|
193
|
-
width: 8px;
|
|
194
|
-
height: 8px;
|
|
195
|
-
top: 40%;
|
|
196
|
-
left: 20%;
|
|
197
|
-
animation: float 5s infinite ease-in-out;
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
@keyframes float {
|
|
201
|
-
|
|
202
|
-
0%,
|
|
203
|
-
100% {
|
|
204
|
-
transform: translateY(0px);
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
50% {
|
|
208
|
-
transform: translateY(-10px);
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
/* Mobile Responsive */
|
|
213
|
-
@media (max-width: 768px) {
|
|
214
|
-
.promo-banner {
|
|
215
|
-
padding: 8px 15px;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
.banner-content {
|
|
219
|
-
gap: 10px;
|
|
220
|
-
flex-wrap: wrap;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
.banner-text {
|
|
224
|
-
font-size: 14px;
|
|
225
|
-
text-align: center;
|
|
226
|
-
flex: 1 1 100%;
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
.cta-button {
|
|
230
|
-
padding: 8px 20px;
|
|
231
|
-
font-size: 12px;
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
.banner-icon {
|
|
235
|
-
font-size: 20px;
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
.close-btn {
|
|
239
|
-
position: relative;
|
|
240
|
-
right: auto;
|
|
241
|
-
top: auto;
|
|
242
|
-
transform: none;
|
|
243
|
-
margin-left: auto;
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
|
-
</style>
|
|
247
2
|
<!-- Attractive Promotion Banner -->
|
|
248
3
|
<div class="promo-banner" id="promoBanner">
|
|
249
4
|
<!-- Floating particles for extra effect -->
|
|
@@ -254,7 +9,7 @@
|
|
|
254
9
|
<div class="banner-content">
|
|
255
10
|
<div class="banner-icon">🚀</div>
|
|
256
11
|
<div class="banner-text">
|
|
257
|
-
|
|
12
|
+
{{site.contenttool_promo_text}}
|
|
258
13
|
<!-- New! Try ContentTool – <span class="highlight">410+ AI Tools</span> in One Place -->
|
|
259
14
|
</div>
|
|
260
15
|
<a href="https://contenttool.io" class="cta-button">
|
|
@@ -58,21 +58,19 @@ assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
|
|
|
58
58
|
<script>
|
|
59
59
|
function closeBanner() {
|
|
60
60
|
const banner = document.getElementById("promoBanner");
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
banner.style.
|
|
65
|
-
|
|
61
|
+
if (banner) {
|
|
62
|
+
banner.style.transition = "transform 0.3s ease, opacity 0.3s ease";
|
|
63
|
+
banner.style.transform = "translateY(-100%)";
|
|
64
|
+
banner.style.opacity = "0";
|
|
65
|
+
setTimeout(() => {
|
|
66
|
+
banner.style.display = "none";
|
|
67
|
+
}, 300);
|
|
68
|
+
}
|
|
66
69
|
}
|
|
67
70
|
|
|
68
|
-
// Auto-hide after 30 seconds
|
|
71
|
+
// Auto-hide after 30 seconds
|
|
69
72
|
setTimeout(() => {
|
|
70
|
-
|
|
71
|
-
if (banner) {
|
|
72
|
-
if (banner.style.display !== "none") {
|
|
73
|
-
banner.style.opacity = "0.8";
|
|
74
|
-
}
|
|
75
|
-
}
|
|
73
|
+
closeBanner();
|
|
76
74
|
}, 30000);
|
|
77
75
|
</script>
|
|
78
76
|
|
data/assets/.DS_Store
CHANGED
|
Binary file
|
|
@@ -3945,4 +3945,422 @@ textarea {
|
|
|
3945
3945
|
.trustpilot-h2{
|
|
3946
3946
|
padding: 1rem;
|
|
3947
3947
|
}
|
|
3948
|
-
}
|
|
3948
|
+
}
|
|
3949
|
+
|
|
3950
|
+
/* ==========================================================================
|
|
3951
|
+
Latest Featured Tools (LFD)
|
|
3952
|
+
Colors per card come from _data/home/en/latest-tools.json (item.bg).
|
|
3953
|
+
Stagger index --lfd-i is set on .lfd-col so it scales to any N items.
|
|
3954
|
+
========================================================================== */
|
|
3955
|
+
.lfd-section {
|
|
3956
|
+
padding: 3.5rem 0 4.5rem;
|
|
3957
|
+
background: #f5f7fb;
|
|
3958
|
+
}
|
|
3959
|
+
|
|
3960
|
+
.lfd-eyebrow {
|
|
3961
|
+
display: inline-block;
|
|
3962
|
+
font-size: .72rem;
|
|
3963
|
+
font-weight: 700;
|
|
3964
|
+
letter-spacing: .12em;
|
|
3965
|
+
text-transform: uppercase;
|
|
3966
|
+
color: #2563eb;
|
|
3967
|
+
background: #dbeafe;
|
|
3968
|
+
border-radius: 999px;
|
|
3969
|
+
padding: .2rem .8rem;
|
|
3970
|
+
margin-bottom: .65rem;
|
|
3971
|
+
}
|
|
3972
|
+
|
|
3973
|
+
.lfd-heading {
|
|
3974
|
+
font-size: clamp(1.4rem, 3vw, 2rem);
|
|
3975
|
+
font-weight: 800;
|
|
3976
|
+
color: #0f172a;
|
|
3977
|
+
margin-bottom: .3rem;
|
|
3978
|
+
line-height: 1.2;
|
|
3979
|
+
}
|
|
3980
|
+
|
|
3981
|
+
.lfd-sub {
|
|
3982
|
+
color: #64748b;
|
|
3983
|
+
font-size: .95rem;
|
|
3984
|
+
margin-bottom: 0;
|
|
3985
|
+
}
|
|
3986
|
+
|
|
3987
|
+
.lfd-card {
|
|
3988
|
+
display: block;
|
|
3989
|
+
background: #fff;
|
|
3990
|
+
border-radius: 1rem;
|
|
3991
|
+
overflow: hidden;
|
|
3992
|
+
text-decoration: none;
|
|
3993
|
+
height: 100%;
|
|
3994
|
+
box-shadow: 0 1px 4px rgba(0,0,0,.07);
|
|
3995
|
+
transition: box-shadow .25s, transform .25s;
|
|
3996
|
+
animation: lfd-rise .7s cubic-bezier(.22,.68,0,1.2) both,
|
|
3997
|
+
lfd-ring 2.8s ease-in-out 1.2s infinite;
|
|
3998
|
+
animation-delay: calc(var(--lfd-i, 0) * 90ms), 1.2s;
|
|
3999
|
+
}
|
|
4000
|
+
|
|
4001
|
+
.lfd-card:hover {
|
|
4002
|
+
box-shadow: 0 14px 36px rgba(37,99,235,.22);
|
|
4003
|
+
transform: translateY(-8px);
|
|
4004
|
+
text-decoration: none;
|
|
4005
|
+
animation-play-state: paused, paused;
|
|
4006
|
+
}
|
|
4007
|
+
|
|
4008
|
+
@keyframes lfd-ring {
|
|
4009
|
+
0%, 100% { box-shadow: 0 1px 4px rgba(0,0,0,.07); }
|
|
4010
|
+
50% { box-shadow: 0 0 0 4px rgba(37,99,235,.35), 0 8px 28px rgba(37,99,235,.18); }
|
|
4011
|
+
}
|
|
4012
|
+
|
|
4013
|
+
@keyframes lfd-rise {
|
|
4014
|
+
from { opacity: 0; transform: translateY(40px) scale(.92); }
|
|
4015
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
4016
|
+
}
|
|
4017
|
+
|
|
4018
|
+
.lfd-preview {
|
|
4019
|
+
position: relative;
|
|
4020
|
+
height: 190px;
|
|
4021
|
+
display: flex;
|
|
4022
|
+
align-items: center;
|
|
4023
|
+
justify-content: center;
|
|
4024
|
+
overflow: hidden;
|
|
4025
|
+
}
|
|
4026
|
+
|
|
4027
|
+
.lfd-preview::after {
|
|
4028
|
+
content: '';
|
|
4029
|
+
position: absolute;
|
|
4030
|
+
top: 0; bottom: 0;
|
|
4031
|
+
left: -60%;
|
|
4032
|
+
width: 40%;
|
|
4033
|
+
background: linear-gradient(
|
|
4034
|
+
105deg,
|
|
4035
|
+
transparent 0%,
|
|
4036
|
+
rgba(255,255,255,.85) 50%,
|
|
4037
|
+
transparent 100%
|
|
4038
|
+
);
|
|
4039
|
+
transform: skewX(-15deg);
|
|
4040
|
+
animation: lfd-shine 2.8s ease-in-out infinite;
|
|
4041
|
+
animation-delay: calc(var(--lfd-i, 0) * .45s);
|
|
4042
|
+
pointer-events: none;
|
|
4043
|
+
}
|
|
4044
|
+
|
|
4045
|
+
@keyframes lfd-shine {
|
|
4046
|
+
0% { left: -60%; opacity: 0; }
|
|
4047
|
+
10% { opacity: 1; }
|
|
4048
|
+
60% { left: 130%; opacity: 1; }
|
|
4049
|
+
61%, 100% { left: 130%; opacity: 0; }
|
|
4050
|
+
}
|
|
4051
|
+
|
|
4052
|
+
.lfd-browser-bar {
|
|
4053
|
+
position: absolute;
|
|
4054
|
+
top: 10px;
|
|
4055
|
+
left: 10px;
|
|
4056
|
+
right: 10px;
|
|
4057
|
+
height: 20px;
|
|
4058
|
+
background: rgba(255,255,255,.6);
|
|
4059
|
+
border-radius: 5px;
|
|
4060
|
+
display: flex;
|
|
4061
|
+
align-items: center;
|
|
4062
|
+
padding: 0 7px;
|
|
4063
|
+
gap: 5px;
|
|
4064
|
+
backdrop-filter: blur(4px);
|
|
4065
|
+
}
|
|
4066
|
+
|
|
4067
|
+
.lfd-dot {
|
|
4068
|
+
width: 7px;
|
|
4069
|
+
height: 7px;
|
|
4070
|
+
border-radius: 50%;
|
|
4071
|
+
background: rgba(0,0,0,.18);
|
|
4072
|
+
flex-shrink: 0;
|
|
4073
|
+
}
|
|
4074
|
+
|
|
4075
|
+
.lfd-url-bar {
|
|
4076
|
+
flex: 1;
|
|
4077
|
+
height: 7px;
|
|
4078
|
+
background: rgba(0,0,0,.1);
|
|
4079
|
+
border-radius: 4px;
|
|
4080
|
+
margin-left: 5px;
|
|
4081
|
+
}
|
|
4082
|
+
|
|
4083
|
+
.lfd-icon-wrap {
|
|
4084
|
+
display: flex;
|
|
4085
|
+
align-items: center;
|
|
4086
|
+
justify-content: center;
|
|
4087
|
+
padding-top: 8px;
|
|
4088
|
+
}
|
|
4089
|
+
|
|
4090
|
+
.lfd-icon {
|
|
4091
|
+
width: 72px;
|
|
4092
|
+
height: 72px;
|
|
4093
|
+
object-fit: contain;
|
|
4094
|
+
filter: drop-shadow(0 6px 18px rgba(0,0,0,.22));
|
|
4095
|
+
animation: lfd-float 2.4s ease-in-out infinite;
|
|
4096
|
+
}
|
|
4097
|
+
|
|
4098
|
+
@keyframes lfd-float {
|
|
4099
|
+
0%, 100% { transform: translateY(0) scale(1); }
|
|
4100
|
+
50% { transform: translateY(-16px) scale(1.08); }
|
|
4101
|
+
}
|
|
4102
|
+
|
|
4103
|
+
.lfd-new-badge {
|
|
4104
|
+
position: absolute;
|
|
4105
|
+
top: 36px;
|
|
4106
|
+
right: 10px;
|
|
4107
|
+
background: #2563eb;
|
|
4108
|
+
color: #fff;
|
|
4109
|
+
font-size: .65rem;
|
|
4110
|
+
font-weight: 800;
|
|
4111
|
+
letter-spacing: .12em;
|
|
4112
|
+
padding: .2rem .55rem;
|
|
4113
|
+
border-radius: 5px;
|
|
4114
|
+
box-shadow: 0 0 0 0 rgba(37,99,235,.7);
|
|
4115
|
+
animation: lfd-badge-pop 1.6s ease-out infinite;
|
|
4116
|
+
}
|
|
4117
|
+
|
|
4118
|
+
@keyframes lfd-badge-pop {
|
|
4119
|
+
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37,99,235,.7); }
|
|
4120
|
+
50% { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(37,99,235,0); }
|
|
4121
|
+
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37,99,235,0); }
|
|
4122
|
+
}
|
|
4123
|
+
|
|
4124
|
+
.lfd-info {
|
|
4125
|
+
padding: 1.1rem 1.2rem 1.3rem;
|
|
4126
|
+
}
|
|
4127
|
+
|
|
4128
|
+
.lfd-title {
|
|
4129
|
+
font-size: 1rem;
|
|
4130
|
+
font-weight: 700;
|
|
4131
|
+
color: #0f172a;
|
|
4132
|
+
margin-bottom: .3rem;
|
|
4133
|
+
}
|
|
4134
|
+
|
|
4135
|
+
.lfd-desc {
|
|
4136
|
+
font-size: .84rem;
|
|
4137
|
+
color: #475569;
|
|
4138
|
+
line-height: 1.55;
|
|
4139
|
+
margin-bottom: .75rem;
|
|
4140
|
+
}
|
|
4141
|
+
|
|
4142
|
+
.lfd-cta {
|
|
4143
|
+
font-size: .9rem;
|
|
4144
|
+
font-weight: 700;
|
|
4145
|
+
color: #fff;
|
|
4146
|
+
background: #2563eb;
|
|
4147
|
+
display: inline-block;
|
|
4148
|
+
padding: .4rem 1rem;
|
|
4149
|
+
border-radius: 999px;
|
|
4150
|
+
animation: lfd-nudge 1.4s ease-in-out infinite;
|
|
4151
|
+
}
|
|
4152
|
+
|
|
4153
|
+
@keyframes lfd-nudge {
|
|
4154
|
+
0%, 100% { transform: translateX(0) scale(1); }
|
|
4155
|
+
40% { transform: translateX(8px) scale(1.05); }
|
|
4156
|
+
60% { transform: translateX(4px) scale(1.02); }
|
|
4157
|
+
}
|
|
4158
|
+
|
|
4159
|
+
.lfd-card:hover .lfd-cta {
|
|
4160
|
+
animation-play-state: paused;
|
|
4161
|
+
background: #1d4ed8;
|
|
4162
|
+
transform: translateX(8px) scale(1.05);
|
|
4163
|
+
}
|
|
4164
|
+
|
|
4165
|
+
/* Main Promotion Banner */
|
|
4166
|
+
.promo-banner {
|
|
4167
|
+
position: sticky;
|
|
4168
|
+
top: 0;
|
|
4169
|
+
z-index: 9999;
|
|
4170
|
+
background: linear-gradient(135deg, #667eea 0%, #1b2fe7 100%);
|
|
4171
|
+
background-size: 200% 200%;
|
|
4172
|
+
animation: promoGradientShift 4s ease infinite;
|
|
4173
|
+
padding: 12px 20px;
|
|
4174
|
+
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
|
4175
|
+
overflow: hidden;
|
|
4176
|
+
transition: transform 0.3s ease, opacity 0.3s ease;
|
|
4177
|
+
}
|
|
4178
|
+
|
|
4179
|
+
.promo-banner::before {
|
|
4180
|
+
content: '';
|
|
4181
|
+
position: absolute;
|
|
4182
|
+
top: 0;
|
|
4183
|
+
left: -100%;
|
|
4184
|
+
width: 100%;
|
|
4185
|
+
height: 100%;
|
|
4186
|
+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
4187
|
+
animation: promoShine 3s infinite;
|
|
4188
|
+
}
|
|
4189
|
+
|
|
4190
|
+
@keyframes promoGradientShift {
|
|
4191
|
+
0% { background-position: 0% 50%; }
|
|
4192
|
+
50% { background-position: 100% 50%; }
|
|
4193
|
+
100% { background-position: 0% 50%; }
|
|
4194
|
+
}
|
|
4195
|
+
|
|
4196
|
+
@keyframes promoShine {
|
|
4197
|
+
0% { left: -100%; }
|
|
4198
|
+
100% { left: 100%; }
|
|
4199
|
+
}
|
|
4200
|
+
|
|
4201
|
+
.promo-banner .banner-content {
|
|
4202
|
+
display: flex;
|
|
4203
|
+
align-items: center;
|
|
4204
|
+
justify-content: center;
|
|
4205
|
+
gap: 15px;
|
|
4206
|
+
max-width: 1200px;
|
|
4207
|
+
margin: 0 auto;
|
|
4208
|
+
position: relative;
|
|
4209
|
+
z-index: 2;
|
|
4210
|
+
}
|
|
4211
|
+
|
|
4212
|
+
.promo-banner .banner-icon {
|
|
4213
|
+
font-size: 24px;
|
|
4214
|
+
animation: promoBounce 2s infinite;
|
|
4215
|
+
}
|
|
4216
|
+
|
|
4217
|
+
@keyframes promoBounce {
|
|
4218
|
+
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
|
4219
|
+
40% { transform: translateY(-5px); }
|
|
4220
|
+
60% { transform: translateY(-3px); }
|
|
4221
|
+
}
|
|
4222
|
+
|
|
4223
|
+
.promo-banner .banner-text {
|
|
4224
|
+
color: white;
|
|
4225
|
+
font-size: 16px;
|
|
4226
|
+
font-weight: 600;
|
|
4227
|
+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
4228
|
+
letter-spacing: 0.5px;
|
|
4229
|
+
}
|
|
4230
|
+
|
|
4231
|
+
.promo-banner .highlight {
|
|
4232
|
+
color: #ffd700;
|
|
4233
|
+
font-weight: 700;
|
|
4234
|
+
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
|
4235
|
+
}
|
|
4236
|
+
|
|
4237
|
+
.promo-banner .cta-button {
|
|
4238
|
+
background: linear-gradient(45deg, #f59e0b, #d97706);
|
|
4239
|
+
color: #fff;
|
|
4240
|
+
padding: 5px 15px;
|
|
4241
|
+
border-radius: 25px;
|
|
4242
|
+
text-decoration: none;
|
|
4243
|
+
font-weight: 700;
|
|
4244
|
+
font-size: 14px;
|
|
4245
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
4246
|
+
transition: all 0.3s ease;
|
|
4247
|
+
position: relative;
|
|
4248
|
+
overflow: hidden;
|
|
4249
|
+
text-transform: uppercase;
|
|
4250
|
+
letter-spacing: 1px;
|
|
4251
|
+
}
|
|
4252
|
+
|
|
4253
|
+
.promo-banner .cta-button::before {
|
|
4254
|
+
content: '';
|
|
4255
|
+
position: absolute;
|
|
4256
|
+
top: 0;
|
|
4257
|
+
left: -100%;
|
|
4258
|
+
width: 100%;
|
|
4259
|
+
height: 100%;
|
|
4260
|
+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
4261
|
+
transition: left 0.5s;
|
|
4262
|
+
}
|
|
4263
|
+
|
|
4264
|
+
.promo-banner .cta-button:hover::before {
|
|
4265
|
+
left: 100%;
|
|
4266
|
+
}
|
|
4267
|
+
|
|
4268
|
+
.promo-banner .cta-button:hover {
|
|
4269
|
+
color: #000;
|
|
4270
|
+
transform: translateY(-2px);
|
|
4271
|
+
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
|
|
4272
|
+
border-color: rgba(255, 255, 255, 0.4);
|
|
4273
|
+
}
|
|
4274
|
+
|
|
4275
|
+
.promo-banner .close-btn {
|
|
4276
|
+
background: rgba(255, 255, 255, 0.2);
|
|
4277
|
+
border: none;
|
|
4278
|
+
color: white;
|
|
4279
|
+
font-size: 18px;
|
|
4280
|
+
width: 30px;
|
|
4281
|
+
height: 30px;
|
|
4282
|
+
border-radius: 50%;
|
|
4283
|
+
cursor: pointer;
|
|
4284
|
+
transition: all 0.3s ease;
|
|
4285
|
+
position: absolute;
|
|
4286
|
+
right: 15px;
|
|
4287
|
+
top: 50%;
|
|
4288
|
+
transform: translateY(-50%);
|
|
4289
|
+
}
|
|
4290
|
+
|
|
4291
|
+
.promo-banner .close-btn:hover {
|
|
4292
|
+
background: rgba(255, 255, 255, 0.3);
|
|
4293
|
+
transform: translateY(-50%) rotate(90deg);
|
|
4294
|
+
}
|
|
4295
|
+
|
|
4296
|
+
/* Floating particles effect */
|
|
4297
|
+
.promo-banner .particle {
|
|
4298
|
+
position: absolute;
|
|
4299
|
+
background: rgba(255, 255, 255, 0.1);
|
|
4300
|
+
border-radius: 50%;
|
|
4301
|
+
pointer-events: none;
|
|
4302
|
+
}
|
|
4303
|
+
|
|
4304
|
+
.promo-banner .particle:nth-child(1) {
|
|
4305
|
+
width: 6px;
|
|
4306
|
+
height: 6px;
|
|
4307
|
+
top: 20%;
|
|
4308
|
+
left: 10%;
|
|
4309
|
+
animation: promoFloat 6s infinite ease-in-out;
|
|
4310
|
+
}
|
|
4311
|
+
|
|
4312
|
+
.promo-banner .particle:nth-child(2) {
|
|
4313
|
+
width: 4px;
|
|
4314
|
+
height: 4px;
|
|
4315
|
+
top: 60%;
|
|
4316
|
+
left: 80%;
|
|
4317
|
+
animation: promoFloat 4s infinite ease-in-out reverse;
|
|
4318
|
+
}
|
|
4319
|
+
|
|
4320
|
+
.promo-banner .particle:nth-child(3) {
|
|
4321
|
+
width: 8px;
|
|
4322
|
+
height: 8px;
|
|
4323
|
+
top: 40%;
|
|
4324
|
+
left: 20%;
|
|
4325
|
+
animation: promoFloat 5s infinite ease-in-out;
|
|
4326
|
+
}
|
|
4327
|
+
|
|
4328
|
+
@keyframes promoFloat {
|
|
4329
|
+
0%, 100% { transform: translateY(0px); }
|
|
4330
|
+
50% { transform: translateY(-10px); }
|
|
4331
|
+
}
|
|
4332
|
+
|
|
4333
|
+
/* Mobile Responsive */
|
|
4334
|
+
@media (max-width: 768px) {
|
|
4335
|
+
.promo-banner {
|
|
4336
|
+
padding: 8px 15px;
|
|
4337
|
+
}
|
|
4338
|
+
|
|
4339
|
+
.promo-banner .banner-content {
|
|
4340
|
+
gap: 10px;
|
|
4341
|
+
flex-wrap: wrap;
|
|
4342
|
+
}
|
|
4343
|
+
|
|
4344
|
+
.promo-banner .banner-text {
|
|
4345
|
+
font-size: 14px;
|
|
4346
|
+
text-align: center;
|
|
4347
|
+
flex: 1 1 100%;
|
|
4348
|
+
}
|
|
4349
|
+
|
|
4350
|
+
.promo-banner .cta-button {
|
|
4351
|
+
padding: 8px 20px;
|
|
4352
|
+
font-size: 12px;
|
|
4353
|
+
}
|
|
4354
|
+
|
|
4355
|
+
.promo-banner .banner-icon {
|
|
4356
|
+
font-size: 20px;
|
|
4357
|
+
}
|
|
4358
|
+
|
|
4359
|
+
.promo-banner .close-btn {
|
|
4360
|
+
position: relative;
|
|
4361
|
+
right: auto;
|
|
4362
|
+
top: auto;
|
|
4363
|
+
transform: none;
|
|
4364
|
+
margin-left: auto;
|
|
4365
|
+
}
|
|
4366
|
+
}
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: appscms-tools-theme
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 5.7.
|
|
4
|
+
version: 5.7.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- vivek-appscms
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2026-09-
|
|
11
|
+
date: 2026-09-29 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|