an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
1.Card {
2 display: block;
3 text-decoration: none;
4 color: inherit;
5 will-change: opacity;
6}
7
8.Card-bg {
9 border-radius: 12px;
10 padding: 1.5rem;
11 position: relative;
12 transition: transform 0.2s ease;
13 isolation: isolate;
14 transform: translateY(0);
15 will-change: transform;
16 display: inline-block;
17 width: 100%;
18}
19
20.Card-bg::before {
21 content: "";
22 position: absolute;
23 inset: 0;
24 border-radius: 12px;
25 background-color: var(--bg-color);
26 border: 1.5px solid color-mix(in srgb, var(--accent-color) 15%, rgba(0, 0, 0, 0.08));
27 filter: var(--user-content-filter);
28 z-index: -2;
29 pointer-events: none;
30}
31
32.Card-bg::after {
33 content: "";
34 position: absolute;
35 inset: 0;
36 border-radius: 12px;
37 border: 1.5px solid var(--accent-color);
38 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
39 filter: var(--user-content-filter);
40 opacity: 0;
41 transition: opacity 0.2s ease;
42 will-change: opacity;
43 z-index: -1;
44 pointer-events: none;
45}
46
47@media (hover: hover) {
48 .Card:hover .Card-bg {
49 transform: translateY(-2px);
50 }
51
52 .Card:hover .Card-bg::after {
53 opacity: 1;
54 }
55
56 .Card-bg--pending {
57 transform: translateY(-2px);
58 }
59}
60
61.Card:active .Card-bg {
62 transform: scale(0.99);
63}
64
65.Card-bg--pending::after {
66 opacity: 1;
67 animation: card-glow 1.5s ease-in-out infinite;
68 animation-delay: 400ms;
69}
70
71@keyframes card-glow {
72 0%,
73 100% {
74 opacity: 1;
75 }
76 50% {
77 opacity: 0.5;
78 }
79}