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@media (hover: hover) {
71 .TrailCard:hover .TrailCard-bg {
72 transform: translateY(-2px);
73 }
74
75 .TrailCard:hover .TrailCard-bg::before {
76 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
77 border-color: var(--accent-color);
78 }
79}
80
81.TrailCard:active .TrailCard-bg::before {
82 border-color: var(--accent-color);
83 transition-duration: 0.05s;
84}
85
86.TrailCard-title {
87 font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
88 font-size: 1.125rem;
89 font-weight: 500;
90 color: var(--accent-color);
91 margin: 0;
92 text-transform: lowercase;
93 letter-spacing: -0.01em;
94 filter: var(--user-content-filter);
95}
96
97.TrailCard-description {
98 font-size: 0.9375rem;
99 line-height: 1.5;
100 color: var(--text-secondary);
101 margin: 0;
102 flex: 1;
103}
104
105.TrailCard-meta {
106 display: flex;
107 justify-content: space-between;
108 align-items: center;
109 font-size: 0.8125rem;
110 color: var(--text-tertiary);
111 padding-top: 0.5rem;
112 border-top: 1px solid var(--border-subtle);
113}
114
115.TrailCard-creator,
116.TrailCard-steps {
117 text-transform: lowercase;
118}