ourworld_web/www_circl
20
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
sasha-astiadi 2025-05-07 14:54:45 +02:00
parent e3d6b2f0f9
commit e1d084aca5
3 changed files with 67 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
dist/output.css vendored
View File

@ -1568,6 +1568,50 @@ body:is(.dark *) {
transition-duration: 500ms; transition-duration: 500ms;
} }
.pricing-card {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 500ms;
}
.pricing-card:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
background-color: rgb(255 255 255 / 0.05);
}
.pricing-card {
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}
.pricing-card:hover {
box-shadow: 0 0 60px rgba(255, 255, 255, 0.15);
}
.pricing-card.popular {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 500ms;
}
.pricing-card.popular:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
background-color: rgb(255 255 255 / 0.15);
}
.pricing-card.popular {
box-shadow: 0 0 30px rgba(107, 114, 128, 0.3);
border: 1px solid transparent;
}
.pricing-card.popular:hover {
box-shadow: 0 0 100px rgba(107, 114, 128, 0.5);
border-color: rgba(255, 255, 255, 0.1);
}
.fade-up { .fade-up {
opacity: 0; opacity: 0;
transform: translateY(30px); transform: translateY(30px);

6
src/index.html
View File

@ -245,7 +245,7 @@
</fieldset> </fieldset>
</div> </div>
<div class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3"> <div class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<div class="rounded-3xl p-8 ring-1 ring-white/10 xl:p-10"> <div class="pricing-card rounded-3xl p-8 ring-1 ring-white/10 xl:p-10">
<div class="flex items-center justify-between gap-x-4"> <div class="flex items-center justify-between gap-x-4">
<h3 id="tier-freelancer" class="text-lg/8 font-semibold text-white">For Teams</h3> <h3 id="tier-freelancer" class="text-lg/8 font-semibold text-white">For Teams</h3>
</div> </div>
@ -290,7 +290,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="rounded-3xl bg-white/5 p-8 ring-2 ring-gray-400 xl:p-10"> <div class="pricing-card popular rounded-3xl bg-white/5 p-8 ring-2 ring-gray-400 xl:p-10">
<div class="flex items-center justify-between gap-x-4"> <div class="flex items-center justify-between gap-x-4">
<h3 id="tier-startup" class="text-lg/8 font-semibold text-white">For Companies</h3> <h3 id="tier-startup" class="text-lg/8 font-semibold text-white">For Companies</h3>
<p class="rounded-full bg-gray-500 px-2.5 py-1 text-xs/5 font-semibold text-white">Most popular</p> <p class="rounded-full bg-gray-500 px-2.5 py-1 text-xs/5 font-semibold text-white">Most popular</p>
@ -336,7 +336,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="rounded-3xl p-8 ring-1 ring-white/10 xl:p-10"> <div class="pricing-card rounded-3xl p-8 ring-1 ring-white/10 xl:p-10">
<div class="flex items-center justify-between gap-x-4"> <div class="flex items-center justify-between gap-x-4">
<h3 id="tier-enterprise" class="text-lg/8 font-semibold text-white">For Businesses</h3> <h3 id="tier-enterprise" class="text-lg/8 font-semibold text-white">For Businesses</h3>
</div> </div>

20
src/input.css
View File

@ -135,6 +135,26 @@
} }
@layer utilities { @layer utilities {
.pricing-card {
@apply transition-all duration-500 hover:scale-105 hover:bg-white/5;
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}
.pricing-card:hover {
box-shadow: 0 0 60px rgba(255, 255, 255, 0.15);
}
.pricing-card.popular {
@apply transition-all duration-500 hover:scale-105 hover:bg-white/15;
box-shadow: 0 0 30px rgba(107, 114, 128, 0.3);
border: 1px solid transparent;
}
.pricing-card.popular:hover {
box-shadow: 0 0 100px rgba(107, 114, 128, 0.5);
border-color: rgba(255, 255, 255, 0.1);
}
.fade-up { .fade-up {
opacity: 0; opacity: 0;
transform: translateY(30px); transform: translateY(30px);