an app to share curated trails
sidetrail.app
1.TrailCard {
2 display: block;
3 position: relative;
4}
5
6.TrailCard-underlay {
7 position: absolute;
8 inset: 0;
9}
10
11.TrailCard-bg {
12 border-radius: 12px;
13 padding: 1.5rem;
14 transition: all 0.2s ease;
15 position: relative;
16 pointer-events: none;
17 display: flex;
18 flex-direction: column;
19 gap: 0.75rem;
20}
21
22.TrailCard-bg::before {
23 content: "";
24 position: absolute;
25 inset: 0;
26 background-color: var(--bg-color);
27 border-radius: 12px;
28 border: 1.5px solid;
29 border-color: color-mix(in srgb, var(--accent-color) 15%, rgba(0, 0, 0, 0.08));
30 filter: var(--user-content-filter);
31 transition: all 0.2s ease;
32 z-index: 0;
33}
34
35.TrailCard-title,
36.TrailCard-description,
37.TrailCard-meta {
38 position: relative;
39 z-index: 1;
40}
41
42.TrailCard-activity {
43 display: flex;
44 align-items: center;
45 gap: 0.375rem;
46 pointer-events: auto;
47}
48
49.TrailCard-walkers {
50 display: flex;
51 gap: 0.25rem;
52 align-items: center;
53 padding: 0.25rem 0.45rem;
54 border-radius: 12px;
55 position: relative;
56 isolation: isolate;
57}
58
59.TrailCard-walkers::before {
60 content: "";
61 position: absolute;
62 inset: 0;
63 background: var(--accent-color-transparent);
64 border: 1px solid var(--accent-color-transparent);
65 border-radius: 12px;
66 filter: var(--user-content-filter);
67 z-index: -1;
68}
69
70.TrailCard:hover .TrailCard-bg {
71 transform: translateY(-2px);
72}
73
74.TrailCard:hover .TrailCard-bg::before {
75 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
76 border-color: var(--accent-color);
77}
78
79.TrailCard-title {
80 font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
81 font-size: 1.125rem;
82 font-weight: 500;
83 color: var(--accent-color);
84 margin: 0;
85 text-transform: lowercase;
86 letter-spacing: -0.01em;
87 filter: var(--user-content-filter);
88}
89
90.TrailCard-description {
91 font-size: 0.9375rem;
92 line-height: 1.5;
93 color: var(--text-secondary);
94 margin: 0;
95 flex: 1;
96}
97
98.TrailCard-meta {
99 display: flex;
100 justify-content: space-between;
101 align-items: center;
102 font-size: 0.8125rem;
103 color: var(--text-tertiary);
104 padding-top: 0.5rem;
105 border-top: 1px solid var(--border-subtle);
106}
107
108.TrailCard-creator,
109.TrailCard-steps {
110 text-transform: lowercase;
111}