This repository has no description
1/* src/components/Definitions/Definitions.css */
2
3.definitions-page {
4 margin: 20px auto 20px;
5 max-width: 450px;
6 padding: 20px;
7}
8
9.definitions-page .alt-card {
10 text-align: left;
11 }
12
13.definitions-page ul {
14 list-style: none;
15 text-align: center;
16 margin: 0px auto;
17 padding: 0px;
18 width: 100%;
19 opacity: 0.5;
20 }
21
22 .definitions-page {
23 margin: 20px auto 40px;
24 max-width: 450px;
25 padding: 20px;
26 }
27
28 .definitions-page .alt-card {
29 text-align: left;
30 }
31
32 .definitions-page h1 {
33 margin-bottom: 20px;
34 }
35
36 .definitions-page h2 {
37 margin-top: 30px;
38 margin-bottom: 20px;
39 }
40
41 .definitions-page p {
42 line-height: 1.5;
43 }
44
45 .intro-text {
46 margin-bottom: 30px;
47 font-size: 1.1em;
48 }
49
50 .back-to-methodology {
51 margin: 20px 0;
52 }
53
54 .back-to-methodology a {
55 color: var(--button-bg);
56 text-decoration: none;
57 display: inline-block;
58 transition: all 0.2s ease;
59 padding: 6px 12px;
60 border-radius: 4px;
61 background-color: rgba(59, 154, 248, 0.1);
62 }
63
64 .back-to-methodology a:hover {
65 background-color: rgba(59, 154, 248, 0.2);
66 text-decoration: underline;
67 }
68
69 .definitions-section {
70 margin-bottom: 20px;
71 }
72
73 /* Definition accordion styles */
74 .definitions-container {
75 margin-top: 20px;
76 overflow: hidden;
77 }
78
79 .definition-item {
80 margin-bottom: 10px;
81 border-radius: 6px;
82 background-color: var(--navbar-bg);
83 overflow: hidden;
84 transition: all 0.3s ease;
85 border: 1px solid var(--card-border);
86 }
87
88 .definition-term {
89 padding: 12px 15px;
90 display: flex;
91 justify-content: space-between;
92 align-items: center;
93 font-weight: 600;
94 cursor: pointer;
95 background-color: var(--navbar-bg);
96 color: var(--text);
97 transition: background-color 0.3s ease, color 0.3s ease;
98 font-family: articulat-cf;
99 }
100
101 .toggle-icon {
102 font-size: 16px;
103 font-weight: bold;
104 color: var(--button-bg);
105 transition: color 0.3s ease;
106 }
107
108 .definition-description {
109 max-height: 0;
110 margin-left: 0;
111 overflow: hidden;
112 padding: 0 15px;
113 transition: all 0.3s ease;
114 color: var(--text);
115 }
116
117 .definition-description.expanded {
118 max-height: 500px;
119 padding: 15px;
120 border-top: 1px solid var(--card-border);
121 margin-left: 0px;
122 font-family: articulat-cf;
123 }
124
125 .definition-item:hover {
126 border-color: var(--button-bg);
127 }
128
129 .definition-term:hover {
130 background-color: var(--background);
131 }
132
133 /* Social status styles */
134 .social-statuses-container {
135 margin-top: 15px;
136 margin-bottom: 30px;
137 }
138
139 .social-statuses-container .definition-term {
140 font-weight: 700;
141 }
142
143 /* Social status color indicators */
144 .social-statuses-container .definition-item:nth-child(1) .definition-term {
145 border-left: 4px solid #e2e8f0; /* Lightest - Newcomer */
146 }
147
148 .social-statuses-container .definition-item:nth-child(2) .definition-term {
149 border-left: 4px solid #004F84; /* Explorer */
150 }
151
152 .social-statuses-container .definition-item:nth-child(3) .definition-term {
153 border-left: 4px solid #3B9AF8; /* Pathfinder */
154 }
155
156 .social-statuses-container .definition-item:nth-child(4) .definition-term {
157 border-left: 4px solid #FFA500; /* Guide */
158 }
159
160 .social-statuses-container .definition-item:nth-child(5) .definition-term {
161 border-left: 4px solid #FFD700; /* Darkest - Leader */
162 }
163
164 /* Learn more link styles */
165 .learn-more-link {
166 margin-top: 12px;
167 font-size: 0.9em;
168 text-align: right;
169 }
170
171 .learn-more-link a {
172 color: var(--button-bg);
173 text-decoration: none;
174 display: inline-block;
175 transition: all 0.2s ease;
176 padding: 4px 8px;
177 border-radius: 4px;
178 }
179
180 .learn-more-link a:hover {
181 background-color: rgba(59, 154, 248, 0.1);
182 text-decoration: underline;
183 }
184
185 /* Dark mode specific overrides */
186 .dark-mode .definition-item {
187 background-color: var(--navbar-bg);
188 border-color: var(--card-border);
189 }
190
191 .dark-mode .definition-term {
192 background-color: var(--navbar-bg);
193 }
194
195 .dark-mode .definition-term:hover {
196 background-color: #2d2d2d;
197 }
198
199 .dark-mode .toggle-icon {
200 color: var(--button-bg);
201 }
202
203 .dark-mode .definition-description.expanded {
204 border-top-color: var(--card-border);
205 }
206
207 .dark-mode .learn-more-link a {
208 color: var(--button-bg);
209 }
210
211 .dark-mode .learn-more-link a:hover {
212 background-color: rgba(59, 154, 248, 0.15);
213 }
214
215 .dark-mode .back-to-methodology a {
216 color: var(--button-bg);
217 background-color: rgba(59, 154, 248, 0.15);
218 }
219
220 .dark-mode .back-to-methodology a:hover {
221 background-color: rgba(59, 154, 248, 0.25);
222 }