1  /* ===== SHARED BLOG PAGE STYLES ===== */
  2  
  3  /* Base Styles */
  4  html, body {
  5    height: 100%;
  6    background: #fff;
  7    color: #111;
  8    font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif;
  9    margin: 0;
 10    padding: 0;
 11    min-height: 100vh;
 12    scroll-behavior: smooth;
 13    overflow-x: hidden;
 14    scroll-snap-type: y mandatory;
 15    cursor: none !important;
 16  }
 17  
 18  body {
 19    opacity: 1;
 20    transition: opacity 0.4s;
 21  }
 22  
 23  body.fade {
 24    opacity: 0;
 25    transition: opacity 0.4s;
 26  }
 27  
 28  * {
 29    box-sizing: border-box;
 30    user-select: none !important;
 31    -webkit-user-select: none !important;
 32    -ms-user-select: none !important;
 33    -moz-user-select: none !important;
 34    -webkit-user-drag: none !important;
 35    touch-action: manipulation;
 36  }
 37  
 38  /* Typography */
 39  @font-face {
 40    font-family: 'NeueHaasGrotesk';
 41    src: url('../fonts/neuehaasgrotdispround-75bold.otf') format('opentype');
 42    font-weight: 700;
 43    font-style: normal;
 44    font-display: swap;
 45  }
 46  
 47  @font-face {
 48    font-family: 'SuperBrigadeCond';
 49    src: url('../fonts/superbrigadecond.ttf') format('truetype');
 50    font-weight: normal;
 51    font-style: normal;
 52    font-display: swap;
 53  }
 54  
 55  /* Custom Cursor */
 56  .custom-cursor {
 57    position: fixed;
 58    width: 20px;
 59    height: 20px;
 60    background-color: #111;
 61    border-radius: 50%;
 62    pointer-events: none;
 63    z-index: 10001;
 64    transition: transform 0.15s, background-color 0.25s;
 65    transform: translate(-50%, -50%) scale(1);
 66  }
 67  
 68  .custom-cursor.expand {
 69    transform: translate(-50%, -50%) scale(2.5);
 70    background-color: #11111144;
 71  }
 72  
 73  .custom-cursor.cursor-hover {
 74    transform: translate(-50%, -50%) scale(1.5);
 75    background-color: #111111cc;
 76  }
 77  
 78  /* Header */
 79  .main-header {
 80    position: fixed;
 81    top: 0;
 82    left: 0;
 83    width: 100vw;
 84    background: #000;
 85    color: #fff;
 86    z-index: 9999;
 87    display: flex;
 88    flex-direction: column;
 89    align-items: center;
 90    justify-content: flex-start;
 91    padding: 0.6rem 0 0.4rem 0;
 92    border-bottom: 1px solid #222;
 93  }
 94  
 95  .main-header-title {
 96    font-family: 'SuperBrigadeCond', sans-serif;
 97    font-size: 1.1rem;
 98    letter-spacing: normal;
 99    line-height: 1.5;
100    text-align: center;
101    font-weight: bold;
102  }
103  
104  .main-header-nav {
105    margin-top: 0.5rem;
106    display: flex;
107    gap: 2rem;
108    align-items: center;
109  }
110  
111  .main-header-nav a {
112    color: #fff;
113    text-decoration: none;
114    font-size: 1rem;
115    transition: color 0.2s ease;
116  }
117  
118  .main-header-nav a:hover {
119    color: #ccc;
120  }
121  
122  /* Breadcrumb Navigation */
123  .breadcrumb {
124    background: #f8f8f8;
125    padding: 1rem 8vw;
126    border-bottom: 1px solid #e0e0e0;
127    margin-top: 2.2rem;
128    font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif;
129  }
130  
131  .breadcrumb a {
132    color: #666;
133    text-decoration: none;
134    font-size: 0.9rem;
135    transition: color 0.2s ease;
136  }
137  
138  .breadcrumb a:hover {
139    color: #111;
140  }
141  
142  /* Main Content */
143  .blog-section {
144    min-height: 100vh;
145    width: 100vw;
146    display: flex;
147    align-items: center;
148    justify-content: center;
149    position: relative;
150    padding: 0;
151    overflow: hidden;
152    color: #111;
153    background-size: cover;
154    background-position: center center;
155    transition: background-image 0.5s ease;
156  }
157  
158  .blog-content {
159    width: 90vw;
160    max-width: 1200px;
161    display: flex;
162    flex-direction: column;
163    align-items: center;
164    justify-content: center;
165    text-align: center;
166    z-index: 2;
167    position: relative;
168  }
169  
170  .blog-title {
171    font-size: 4rem;
172    font-weight: 900;
173    margin-bottom: 2rem;
174    line-height: 1.2;
175    color: #111;
176  }
177  
178  .blog-subtitle {
179    font-size: 1.5rem;
180    font-weight: 700;
181    margin-bottom: 3rem;
182    line-height: 1.4;
183    color: #666;
184    max-width: 600px;
185  }
186  
187  .blog-description {
188    font-size: 1.1rem;
189    font-weight: 500;
190    margin-bottom: 3rem;
191    line-height: 1.6;
192    color: #444;
193    max-width: 800px;
194  }
195  
196  /* Blog Cards */
197  .blog-cards {
198    display: grid;
199    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
200    gap: 2rem;
201    width: 100%;
202    max-width: 1200px;
203    margin-top: 3rem;
204  }
205  
206  .blog-card {
207    background: #fff;
208    border: 2px solid #e0e0e0;
209    border-radius: 12px;
210    padding: 2rem;
211    text-decoration: none;
212    color: inherit;
213    transition: all 0.3s ease;
214    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
215  }
216  
217  .blog-card:hover {
218    border-color: #111;
219    transform: translateY(-4px);
220    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
221  }
222  
223  .blog-card-image {
224    width: 100%;
225    height: 200px;
226    object-fit: cover;
227    border-radius: 8px;
228    margin-bottom: 1.5rem;
229  }
230  
231  .blog-card-content {
232    text-align: left;
233  }
234  
235  .blog-card-tags {
236    display: flex;
237    gap: 0.5rem;
238    margin-bottom: 1rem;
239    flex-wrap: wrap;
240  }
241  
242  .blog-card-tag {
243    background: #f0f0f0;
244    color: #666;
245    padding: 0.3rem 0.8rem;
246    border-radius: 20px;
247    font-size: 0.8rem;
248    font-weight: 600;
249  }
250  
251  .blog-card-title {
252    font-size: 1.3rem;
253    font-weight: 700;
254    margin-bottom: 1rem;
255    color: #111;
256    line-height: 1.3;
257  }
258  
259  .blog-card-excerpt {
260    font-size: 0.95rem;
261    color: #666;
262    line-height: 1.5;
263    margin-bottom: 1rem;
264  }
265  
266  .blog-card-date {
267    font-size: 0.85rem;
268    color: #999;
269    font-weight: 600;
270  }
271  
272  /* Back Button */
273  .back-btn {
274    position: fixed;
275    top: 2rem;
276    left: 2rem;
277    background: #111;
278    color: #fff;
279    border: none;
280    padding: 1rem 2rem;
281    border-radius: 8px;
282    font-size: 1rem;
283    font-weight: 700;
284    cursor: none !important;
285    text-decoration: none;
286    transition: all 0.3s ease;
287    z-index: 1000;
288  }
289  
290  .back-btn:hover {
291    background: #333;
292    transform: translateY(-2px);
293  }
294  
295  /* Tag Filters */
296  .tag-filters {
297    display: flex;
298    gap: 1rem;
299    margin-bottom: 2rem;
300    flex-wrap: wrap;
301    justify-content: center;
302  }
303  
304  .tag-filter {
305    background: #f0f0f0;
306    color: #666;
307    border: 2px solid transparent;
308    padding: 0.5rem 1rem;
309    border-radius: 25px;
310    font-size: 0.9rem;
311    font-weight: 600;
312    cursor: none !important;
313    transition: all 0.3s ease;
314  }
315  
316  .tag-filter:hover {
317    background: #e0e0e0;
318    color: #444;
319  }
320  
321  .tag-filter.active {
322    background: #111;
323    color: #fff;
324    border-color: #111;
325  }
326  
327  /* Mobile Responsiveness */
328  @media (max-width: 768px) {
329    .custom-cursor {
330      display: none !important;
331    }
332    
333    html, body {
334      cursor: none !important;
335    }
336    
337    * {
338      cursor: none !important;
339    }
340    
341    /* Ensure side menu cursor visibility even on mobile */
342    .side-menu,
343    .side-menu * {
344      cursor: none !important;
345    }
346    
347    .side-menu-close,
348    .side-menu-link,
349    .side-menu-bottom-link,
350    .side-menu-social-link {
351      cursor: none !important;
352    }
353    
354    /* Ensure custom cursor is visible when side menu is active */
355    .side-menu.active ~ .custom-cursor {
356      z-index: 10002 !important;
357      opacity: 1 !important;
358      visibility: visible !important;
359    }
360    
361    /* Ensure cursor visibility when hovering over side menu elements */
362    .side-menu:hover,
363    .side-menu *:hover {
364      cursor: none !important;
365    }
366    
367    .side-menu-close:hover,
368    .side-menu-link:hover,
369    .side-menu-bottom-link:hover,
370    .side-menu-social-link:hover {
371      cursor: none !important;
372    }
373    
374    .blog-title {
375      font-size: 2.5rem;
376      margin-bottom: 1.5rem;
377    }
378    
379    .blog-subtitle {
380      font-size: 1.2rem;
381      margin-bottom: 2rem;
382    }
383    
384    .blog-description {
385      font-size: 1rem;
386      margin-bottom: 2rem;
387    }
388    
389    .blog-cards {
390      grid-template-columns: 1fr;
391      gap: 1.5rem;
392    }
393    
394    .back-btn {
395      top: 1rem;
396      left: 1rem;
397      padding: 0.8rem 1.5rem;
398      font-size: 0.9rem;
399    }
400    
401    .tag-filters {
402      gap: 0.8rem;
403      margin-bottom: 1.5rem;
404    }
405    
406    .tag-filter {
407      padding: 0.4rem 0.8rem;
408      font-size: 0.8rem;
409    }
410  }
411  
412  @media (max-width: 600px) {
413    .breadcrumb {
414      padding: 0.8rem 4vw;
415      margin-top: 2.7rem;
416    }
417    
418    .blog-title {
419      font-size: 2rem;
420      margin-bottom: 1rem;
421    }
422    
423    .blog-subtitle {
424      font-size: 1.1rem;
425      margin-bottom: 1.5rem;
426    }
427    
428    .blog-description {
429      font-size: 0.9rem;
430      margin-bottom: 1.5rem;
431    }
432    
433    .back-btn {
434      top: 0.5rem;
435      left: 0.5rem;
436      padding: 0.6rem 1.2rem;
437      font-size: 0.8rem;
438    }
439    
440    .main-header-nav {
441      gap: 1rem;
442      flex-direction: column;
443      margin-top: 0.3rem;
444    }
445    
446    .main-header-nav a {
447      font-size: 0.9rem;
448    }
449  }