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