@shohojdhara/atomix 0.2.1 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (201) hide show
  1. package/README.md +1 -28
  2. package/dist/atomix.css +1500 -241
  3. package/dist/atomix.min.css +6 -6
  4. package/dist/index.d.ts +1052 -194
  5. package/dist/index.esm.js +12201 -6066
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.js +5481 -2827
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.min.js +1 -1
  10. package/dist/index.min.js.map +1 -1
  11. package/dist/themes/boomdevs.css +1500 -301
  12. package/dist/themes/boomdevs.min.css +60 -8
  13. package/dist/themes/esrar.css +1500 -241
  14. package/dist/themes/esrar.min.css +6 -6
  15. package/dist/themes/mashroom.css +1496 -237
  16. package/dist/themes/mashroom.min.css +8 -8
  17. package/dist/themes/shaj-default.css +1451 -192
  18. package/dist/themes/shaj-default.min.css +6 -6
  19. package/package.json +66 -15
  20. package/src/components/Accordion/Accordion.stories.tsx +137 -0
  21. package/src/components/Accordion/Accordion.tsx +33 -3
  22. package/src/components/AtomixGlass/AtomixGlass.stories.tsx +3011 -0
  23. package/src/components/AtomixGlass/AtomixGlass.test.tsx +199 -0
  24. package/src/components/AtomixGlass/AtomixGlass.tsx +1281 -0
  25. package/src/components/AtomixGlass/AtomixGlassComprehensivePreview.stories.tsx +1369 -0
  26. package/src/components/AtomixGlass/README.md +134 -0
  27. package/src/components/AtomixGlass/index.ts +10 -0
  28. package/src/components/AtomixGlass/shader-utils.ts +140 -0
  29. package/src/components/AtomixGlass/utils.ts +8 -0
  30. package/src/components/Badge/Badge.stories.tsx +169 -0
  31. package/src/components/Badge/Badge.tsx +27 -2
  32. package/src/components/Button/Button.stories.tsx +345 -0
  33. package/src/components/Button/Button.tsx +35 -3
  34. package/src/components/Button/README.md +216 -0
  35. package/src/components/Callout/Callout.stories.tsx +813 -78
  36. package/src/components/Callout/Callout.test.tsx +368 -0
  37. package/src/components/Callout/Callout.tsx +26 -7
  38. package/src/components/Callout/README.md +409 -0
  39. package/src/components/Card/Card.stories.tsx +140 -0
  40. package/src/components/Card/Card.tsx +19 -3
  41. package/src/components/DatePicker/DatePicker copy.tsx +551 -0
  42. package/src/components/DatePicker/DatePicker.stories.tsx +188 -0
  43. package/src/components/DatePicker/DatePicker.tsx +379 -332
  44. package/src/components/DatePicker/readme.md +110 -1
  45. package/src/components/DatePicker/types.ts +8 -0
  46. package/src/components/Dropdown/Dropdown.stories.tsx +145 -0
  47. package/src/components/Dropdown/Dropdown.tsx +34 -5
  48. package/src/components/Footer/Footer.stories.tsx +388 -0
  49. package/src/components/Footer/Footer.tsx +197 -0
  50. package/src/components/Footer/FooterLink.tsx +72 -0
  51. package/src/components/Footer/FooterSection.tsx +87 -0
  52. package/src/components/Footer/FooterSocialLink.tsx +117 -0
  53. package/src/components/Footer/README.md +261 -0
  54. package/src/components/Footer/index.ts +13 -0
  55. package/src/components/Form/Checkbox.stories.tsx +101 -0
  56. package/src/components/Form/Checkbox.tsx +26 -2
  57. package/src/components/Form/Input.stories.tsx +124 -0
  58. package/src/components/Form/Input.tsx +36 -7
  59. package/src/components/Form/Radio.stories.tsx +139 -0
  60. package/src/components/Form/Radio.tsx +26 -2
  61. package/src/components/Form/Select.stories.tsx +110 -0
  62. package/src/components/Form/Select.tsx +26 -2
  63. package/src/components/Form/Textarea.stories.tsx +104 -0
  64. package/src/components/Form/Textarea.tsx +36 -7
  65. package/src/components/Hero/Hero.stories.tsx +54 -1
  66. package/src/components/Hero/Hero.tsx +70 -11
  67. package/src/components/Modal/Modal.stories.tsx +235 -0
  68. package/src/components/Modal/Modal.tsx +64 -35
  69. package/src/components/Pagination/Pagination.stories.tsx +101 -0
  70. package/src/components/Pagination/Pagination.tsx +25 -1
  71. package/src/components/Popover/Popover.stories.tsx +94 -0
  72. package/src/components/Popover/Popover.tsx +30 -4
  73. package/src/components/Rating/Rating.stories.tsx +112 -0
  74. package/src/components/Rating/Rating.tsx +25 -1
  75. package/src/components/SectionIntro/SectionIntro.tsx +9 -11
  76. package/src/components/Slider/Slider.stories.tsx +634 -50
  77. package/src/components/Slider/Slider.tsx +5 -3
  78. package/src/components/Steps/Steps.stories.tsx +119 -0
  79. package/src/components/Steps/Steps.tsx +32 -1
  80. package/src/components/Tab/Tab.stories.tsx +88 -0
  81. package/src/components/Tab/Tab.tsx +32 -1
  82. package/src/components/Toggle/Toggle.stories.tsx +92 -0
  83. package/src/components/Toggle/Toggle.tsx +32 -1
  84. package/src/components/Tooltip/Tooltip.stories.tsx +131 -0
  85. package/src/components/Tooltip/Tooltip.tsx +43 -7
  86. package/src/components/VideoPlayer/VideoPlayer.stories.tsx +1002 -196
  87. package/src/components/VideoPlayer/VideoPlayer.tsx +161 -4
  88. package/src/components/index.ts +14 -0
  89. package/src/layouts/Grid/Grid.stories.tsx +226 -159
  90. package/src/lib/composables/index.ts +4 -0
  91. package/src/lib/composables/useAtomixGlass.ts +71 -0
  92. package/src/lib/composables/useButton.ts +3 -1
  93. package/src/lib/composables/useCallout.ts +4 -1
  94. package/src/lib/composables/useFooter.ts +85 -0
  95. package/src/lib/composables/useGlassContainer.ts +168 -0
  96. package/src/lib/composables/useSlider.ts +191 -4
  97. package/src/lib/constants/components.ts +173 -0
  98. package/src/lib/types/components.ts +622 -0
  99. package/src/lib/utils/displacement-generator.ts +86 -0
  100. package/src/styles/01-settings/_index.scss +1 -0
  101. package/src/styles/01-settings/_settings.accordion.scss +20 -19
  102. package/src/styles/01-settings/_settings.animations.scss +5 -5
  103. package/src/styles/01-settings/_settings.avatar-group.scss +1 -1
  104. package/src/styles/01-settings/_settings.avatar.scss +17 -18
  105. package/src/styles/01-settings/_settings.background.scss +10 -0
  106. package/src/styles/01-settings/_settings.badge.scss +1 -1
  107. package/src/styles/01-settings/_settings.breadcrumb.scss +8 -2
  108. package/src/styles/01-settings/_settings.callout.scss +7 -7
  109. package/src/styles/01-settings/_settings.card.scss +2 -2
  110. package/src/styles/01-settings/_settings.chart.scss +7 -7
  111. package/src/styles/01-settings/_settings.checkbox-group.scss +5 -2
  112. package/src/styles/01-settings/_settings.checkbox.scss +10 -4
  113. package/src/styles/01-settings/_settings.countdown.scss +6 -4
  114. package/src/styles/01-settings/_settings.dropdown.scss +9 -7
  115. package/src/styles/01-settings/_settings.edge-panel.scss +3 -2
  116. package/src/styles/01-settings/_settings.footer.scss +125 -0
  117. package/src/styles/01-settings/_settings.form-group.scss +3 -1
  118. package/src/styles/01-settings/_settings.form.scss +4 -2
  119. package/src/styles/01-settings/_settings.hero.scss +9 -7
  120. package/src/styles/01-settings/_settings.input.scss +9 -7
  121. package/src/styles/01-settings/_settings.list-group.scss +4 -2
  122. package/src/styles/01-settings/_settings.list.scss +4 -2
  123. package/src/styles/01-settings/_settings.menu.scss +10 -8
  124. package/src/styles/01-settings/_settings.messages.scss +19 -17
  125. package/src/styles/01-settings/_settings.modal.scss +6 -4
  126. package/src/styles/01-settings/_settings.nav.scss +6 -4
  127. package/src/styles/01-settings/_settings.navbar.scss +8 -5
  128. package/src/styles/01-settings/_settings.pagination.scss +5 -3
  129. package/src/styles/01-settings/_settings.popover.scss +6 -4
  130. package/src/styles/01-settings/_settings.rating.scss +5 -3
  131. package/src/styles/01-settings/_settings.river.scss +8 -6
  132. package/src/styles/01-settings/_settings.sectionintro.scss +8 -6
  133. package/src/styles/01-settings/_settings.select.scss +7 -5
  134. package/src/styles/01-settings/_settings.side-menu.scss +15 -13
  135. package/src/styles/01-settings/_settings.spacing.scss +4 -0
  136. package/src/styles/01-settings/_settings.steps.scss +7 -5
  137. package/src/styles/01-settings/_settings.tabs.scss +7 -5
  138. package/src/styles/01-settings/_settings.testimonials.scss +6 -4
  139. package/src/styles/01-settings/_settings.toggle.scss +3 -1
  140. package/src/styles/01-settings/_settings.tooltip.scss +5 -3
  141. package/src/styles/01-settings/_settings.upload.scss +22 -20
  142. package/src/styles/02-tools/_tools.animations.scss +19 -0
  143. package/src/styles/02-tools/_tools.background.scss +87 -0
  144. package/src/styles/02-tools/_tools.glass.scss +1 -0
  145. package/src/styles/02-tools/_tools.rem.scss +18 -5
  146. package/src/styles/02-tools/_tools.utility-api.scss +32 -26
  147. package/src/styles/03-generic/_generic.root.scss +15 -2
  148. package/src/styles/04-elements/_elements.body.scss +6 -0
  149. package/src/styles/06-components/_components.accordion.scss +24 -4
  150. package/src/styles/06-components/_components.atomix-glass.scss +0 -0
  151. package/src/styles/06-components/_components.avatar-group.scss +2 -1
  152. package/src/styles/06-components/_components.avatar.scss +2 -1
  153. package/src/styles/06-components/_components.badge.scss +36 -1
  154. package/src/styles/06-components/_components.breadcrumb.scss +2 -1
  155. package/src/styles/06-components/_components.button.scss +14 -3
  156. package/src/styles/06-components/_components.callout.scss +44 -4
  157. package/src/styles/06-components/_components.card.scss +21 -2
  158. package/src/styles/06-components/_components.chart.scss +3 -2
  159. package/src/styles/06-components/_components.checkbox.scss +2 -1
  160. package/src/styles/06-components/_components.color-mode-toggle.scss +3 -2
  161. package/src/styles/06-components/_components.countdown.scss +2 -1
  162. package/src/styles/06-components/_components.data-table.scss +7 -6
  163. package/src/styles/06-components/_components.datepicker.scss +20 -1
  164. package/src/styles/06-components/_components.dropdown.scss +11 -4
  165. package/src/styles/06-components/_components.edge-panel.scss +4 -3
  166. package/src/styles/06-components/_components.footer.scss +825 -0
  167. package/src/styles/06-components/_components.form-group.scss +1 -0
  168. package/src/styles/06-components/_components.hero.scss +4 -4
  169. package/src/styles/06-components/_components.image-gallery.scss +1 -0
  170. package/src/styles/06-components/_components.input.scss +33 -2
  171. package/src/styles/06-components/_components.list-group.scss +3 -2
  172. package/src/styles/06-components/_components.list.scss +2 -1
  173. package/src/styles/06-components/_components.menu.scss +5 -4
  174. package/src/styles/06-components/_components.messages.scss +8 -7
  175. package/src/styles/06-components/_components.modal.scss +3 -2
  176. package/src/styles/06-components/_components.nav.scss +6 -5
  177. package/src/styles/06-components/_components.navbar.scss +4 -3
  178. package/src/styles/06-components/_components.pagination.scss +2 -1
  179. package/src/styles/06-components/_components.photoviewer.scss +4 -3
  180. package/src/styles/06-components/_components.popover.scss +3 -2
  181. package/src/styles/06-components/_components.product-review.scss +3 -2
  182. package/src/styles/06-components/_components.progress.scss +3 -2
  183. package/src/styles/06-components/_components.river.scss +3 -2
  184. package/src/styles/06-components/_components.sectionintro.scss +2 -1
  185. package/src/styles/06-components/_components.select.scss +5 -4
  186. package/src/styles/06-components/_components.side-menu.scss +8 -7
  187. package/src/styles/06-components/_components.skeleton.scss +3 -2
  188. package/src/styles/06-components/_components.slider.scss +7 -6
  189. package/src/styles/06-components/_components.spinner.scss +1 -0
  190. package/src/styles/06-components/_components.steps.scss +3 -2
  191. package/src/styles/06-components/_components.tabs.scss +4 -3
  192. package/src/styles/06-components/_components.testimonials.scss +2 -1
  193. package/src/styles/06-components/_components.todo.scss +3 -2
  194. package/src/styles/06-components/_components.toggle.scss +5 -4
  195. package/src/styles/06-components/_components.tooltip.scss +3 -2
  196. package/src/styles/06-components/_components.upload.scss +4 -3
  197. package/src/styles/06-components/_components.video-player.scss +50 -27
  198. package/src/styles/06-components/_index.scss +2 -0
  199. package/src/styles/99-utilities/_utilities.glass-fixes.scss +48 -0
  200. package/dist/themes/yabai.css +0 -13711
  201. package/dist/themes/yabai.min.css +0 -189
@@ -39,6 +39,23 @@
39
39
  background-position: 0 50%;
40
40
  }
41
41
  }
42
+ @keyframes backgroundMoving {
43
+ 0% {
44
+ background-position: 0 0%;
45
+ }
46
+ 250% {
47
+ background-position: 100% 100%;
48
+ }
49
+ 50% {
50
+ background-position: 100% 0%;
51
+ }
52
+ 75% {
53
+ background-position: 0% 100%;
54
+ }
55
+ 100% {
56
+ background-position: 100% 100%;
57
+ }
58
+ }
42
59
  @keyframes component-spin {
43
60
  0% {
44
61
  transform: rotate(0deg);
@@ -453,9 +470,17 @@ summary {
453
470
  --atomix-success-hover: #008c52;
454
471
  --atomix-warning-hover: #997700;
455
472
  --atomix-info-hover: #004499;
473
+ --atomix-primary-gradient: linear-gradient(135deg, #f0d8ff, #e2b0ff, #d080ff);
474
+ --atomix-secondary-gradient: linear-gradient(135deg, #f3f4f6, #e5e7eb, #d1d5db);
475
+ --atomix-light-gradient: linear-gradient(135deg, #f9fafb, #f3f4f6, #e5e7eb);
476
+ --atomix-dark-gradient: linear-gradient(135deg, #4b5563, #1f2937, #000000);
477
+ --atomix-success-gradient: linear-gradient(135deg, #d0ffeb, #50ffbb, #00ff9d);
478
+ --atomix-info-gradient: linear-gradient(135deg, #d0f8ff, #90e8ff, #00b4ff);
479
+ --atomix-warning-gradient: linear-gradient(135deg, #ffffd8, #ffffb0, #ffdd20);
480
+ --atomix-error-gradient: linear-gradient(135deg, #fff0f5, #ffe0eb, #ffc0d5);
481
+ --atomix-gradient: linear-gradient(135deg, #f9fafb, #f3f4f6, #e5e7eb);
456
482
  --atomix-font-sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
457
483
  --atomix-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
458
- --atomix-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
459
484
  --atomix-body-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
460
485
  --atomix-body-font-size: 1rem;
461
486
  --atomix-body-font-weight: 400;
@@ -549,6 +574,15 @@ summary {
549
574
  --atomix-success-hover: #50ffbb;
550
575
  --atomix-warning-hover: #ffdd20;
551
576
  --atomix-info-hover: #40d0ff;
577
+ --atomix-primary-gradient: linear-gradient(135deg, #26003d, #400066, #5e0099);
578
+ --atomix-secondary-gradient: linear-gradient(135deg, #374151, #6b7280, #d1d5db);
579
+ --atomix-light-gradient: linear-gradient(135deg, #9ca3af, #6b7280, #9ca3af);
580
+ --atomix-dark-gradient: linear-gradient(135deg, #000000, #4b5563, #1f2937);
581
+ --atomix-success-gradient: linear-gradient(135deg, #004020, #00b36b, #006638);
582
+ --atomix-info-gradient: linear-gradient(135deg, #001f3d, #004499, #003366);
583
+ --atomix-warning-gradient: linear-gradient(135deg, #332c00, #997700, #665500);
584
+ --atomix-error-gradient: linear-gradient(135deg, #660033, #d9006f, #660033);
585
+ --atomix-gradient: linear-gradient(135deg, #4b5563, #1f2937, #000000);
552
586
  --atomix-box-shadow: 0px 8px 40px -8px rgba(30, 30, 30, 0.7), 0px 4px 20px 0px rgba(30, 30, 30, 0.8);
553
587
  --atomix-box-shadow-xs: 0px 1px 2px 0px rgba(30, 30, 30, 0.5), 0px 2px 4px 0px rgba(30, 30, 30, 0.5);
554
588
  --atomix-box-shadow-sm: 0px 2px 4px -2px rgba(30, 30, 30, 0.5), 0px 4px 8px -2px rgba(30, 30, 30, 0.5);
@@ -15987,12 +16021,17 @@ a, a:hover {
15987
16021
  display: flex;
15988
16022
  align-items: center;
15989
16023
  justify-content: space-between;
16024
+ width: 100%;
15990
16025
  color: var(--atomix-accordion-header-color);
15991
16026
  padding: var(--atomix-accordion-header-padding-y) var(--atomix-accordion-header-padding-x);
15992
- background-color: var(--atomix-accordion-header-bg);
15993
16027
  border: none;
16028
+ outline: none;
15994
16029
  cursor: pointer;
15995
- width: 100%;
16030
+ transition-property: background;
16031
+ transition-duration: 0.2s;
16032
+ transition-timing-function: ease-in-out;
16033
+ transition-delay: 0s;
16034
+ background-color: var(--atomix-accordion-header-bg);
15996
16035
  }
15997
16036
  .c-accordion__header--icon-left {
15998
16037
  flex-direction: row-reverse;
@@ -16026,8 +16065,8 @@ a, a:hover {
16026
16065
  .c-accordion__body {
16027
16066
  color: var(--atomix-accordion-body-color);
16028
16067
  padding: var(--atomix-accordion-body-padding-y) var(--atomix-accordion-body-padding-x);
16029
- background-color: var(--atomix-accordion-body-bg);
16030
16068
  border-radius: 0 0 var(--atomix-accordion-border-radius) var(--atomix-accordion-border-radius);
16069
+ background-color: var(--atomix-accordion-body-bg);
16031
16070
  }
16032
16071
  .c-accordion:focus, .c-accordion.is-focused {
16033
16072
  --atomix-accordion-border-color: var(--atomix-focus-border-color);
@@ -16044,6 +16083,15 @@ a, a:hover {
16044
16083
  --atomix-accordion-body-color: var(--atomix-accordion-disable-color);
16045
16084
  --atomix-accordion-icon-color: var(--atomix-accordion-disable-color);
16046
16085
  }
16086
+ .c-accordion--glass {
16087
+ border-color: transparent;
16088
+ }
16089
+ .c-accordion--glass .c-accordion__header {
16090
+ background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 50%, transparent);
16091
+ }
16092
+ .c-accordion--glass .c-accordion__body {
16093
+ background-color: color-mix(in srgb, var(--atomix-accordion-header-bg) 50%, transparent);
16094
+ }
16047
16095
  .c-avatar {
16048
16096
  --atomix-avatar-fit: cover;
16049
16097
  --atomix-avatar-size: 2.75rem;
@@ -16256,6 +16304,10 @@ a, a:hover {
16256
16304
  .c-badge--lg {
16257
16305
  --atomix-tag-padding-y: 8px;
16258
16306
  }
16307
+ .c-badge--glass {
16308
+ background-color: color-mix(in srgb, var(--atomix-tag-bg-color) 80%, transparent);
16309
+ border: 1px solid color-mix(in srgb, var(--atomix-tag-color) 20%, transparent);
16310
+ }
16259
16311
  .c-badge--primary {
16260
16312
  --atomix-tag-bg-color: var(--atomix-brand-bg-subtle);
16261
16313
  --atomix-tag-color: var(--atomix-brand-text-emphasis);
@@ -16283,10 +16335,16 @@ a, a:hover {
16283
16335
  .c-badge--light {
16284
16336
  --atomix-tag-bg-color: var(--atomix-light);
16285
16337
  --atomix-tag-color: var(--atomix-dark);
16338
+ border: 1px solid var(--atomix-light);
16286
16339
  }
16287
16340
  .c-badge--dark {
16288
16341
  --atomix-tag-bg-color: var(--atomix-dark);
16289
16342
  --atomix-tag-color: var(--atomix-light);
16343
+ border: 1px solid var(--atomix-dark);
16344
+ }
16345
+ .c-badge-glass {
16346
+ box-shadow: inset 1px 2px 3px rgba(255, 255, 255, 0.1), inset 0 -2px 2px rgba(0, 0, 0, 0.3);
16347
+ border-radius: 999px;
16290
16348
  }
16291
16349
  .c-breadcrumb {
16292
16350
  --atomix-breadcrumb-font-size: 0.875rem;
@@ -16685,6 +16743,12 @@ a, a:hover {
16685
16743
  border-color: var(--atomix-btn-disabled-border-color);
16686
16744
  opacity: var(--atomix-btn-disabled-opacity);
16687
16745
  }
16746
+ .c-btn--glass {
16747
+ background-color: color-mix(in srgb, var(--atomix-btn-bg) 50%, transparent);
16748
+ }
16749
+ .c-btn--glass:hover {
16750
+ background-color: color-mix(in srgb, var(--atomix-btn-hover-bg) 50%, transparent);
16751
+ }
16688
16752
  .c-datepicker {
16689
16753
  --atomix-datepicker-width: 22rem;
16690
16754
  --atomix-datepicker-padding-x: 0.75rem;
@@ -16807,6 +16871,24 @@ a, a:hover {
16807
16871
  .c-datepicker__calendar--right-end {
16808
16872
  bottom: 0;
16809
16873
  }
16874
+ .c-datepicker__calendar--glass {
16875
+ z-index: auto;
16876
+ z-index: initial;
16877
+ box-shadow: none;
16878
+ border: none;
16879
+ border-radius: 0;
16880
+ padding: 0;
16881
+ background: transparent;
16882
+ }
16883
+ .c-datepicker__glass-content {
16884
+ z-index: auto;
16885
+ z-index: initial;
16886
+ box-shadow: none;
16887
+ border: none;
16888
+ border-radius: var(--atomix-datepicker-border-radius);
16889
+ padding: var(--atomix-datepicker-padding-y) var(--atomix-datepicker-padding-x);
16890
+ background: color-mix(in srgb, var(--atomix-datepicker-bg) 50%, transparent 0%);
16891
+ }
16810
16892
  .c-datepicker--inline {
16811
16893
  --atomix-datepicker-width: calc(
16812
16894
  var(--atomix-datepicker-width) + var(--atomix-datepicker-week-width)
@@ -17124,11 +17206,11 @@ a, a:hover {
17124
17206
  padding: var(--atomix-card-spacer-y) var(--atomix-card-spacer-x);
17125
17207
  border: var(--atomix-card-border-width) solid var(--atomix-card-border-color);
17126
17208
  border-radius: var(--atomix-card-border-radius);
17127
- background-color: var(--atomix-card-bg);
17128
17209
  transition-property: all;
17129
17210
  transition-duration: 0.2s;
17130
17211
  transition-timing-function: ease-in-out;
17131
17212
  transition-delay: 0s;
17213
+ background-color: var(--atomix-card-bg);
17132
17214
  }
17133
17215
  .c-card__header {
17134
17216
  margin-bottom: var(--atomix-card-header-spacer-y);
@@ -17209,6 +17291,21 @@ a, a:hover {
17209
17291
  padding: var(--atomix-card-row-spacer-y) var(--atomix-card-row-spacer-x);
17210
17292
  padding-top: 0;
17211
17293
  }
17294
+ .c-card--glass {
17295
+ background-color: transparent;
17296
+ padding: 0;
17297
+ border: none;
17298
+ display: block;
17299
+ border-radius: 0;
17300
+ }
17301
+ .c-card--glass .c-card__glass-content {
17302
+ padding: var(--atomix-card-spacer-y) var(--atomix-card-spacer-x);
17303
+ max-width: var(--atomix-card-width);
17304
+ border-radius: var(--atomix-card-border-radius);
17305
+ width: 100%;
17306
+ background-color: color-mix(in srgb, var(--atomix-card-bg) 50%, transparent);
17307
+ background-blend-mode: overlay;
17308
+ }
17212
17309
  .is-elevated .c-card {
17213
17310
  box-shadow: var(--atomix-box-shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.175));
17214
17311
  z-index: 1;
@@ -17220,7 +17317,7 @@ a, a:hover {
17220
17317
  --atomix-chart-border-radius: 0.625rem;
17221
17318
  --atomix-chart-padding: 1rem;
17222
17319
  --atomix-chart-gap: 0.5rem;
17223
- --atomix-chart-border-width: 1px;
17320
+ --atomix-chart-border-width: var(--atomix-border-width);
17224
17321
  --atomix-chart-border-color: var(--atomix-border-color);
17225
17322
  --atomix-chart-bg: var(--atomix-body-bg);
17226
17323
  --atomix-chart-min-height: 13rem;
@@ -17253,7 +17350,7 @@ a, a:hover {
17253
17350
  border-color: var(--atomix-primary-border-subtle);
17254
17351
  }
17255
17352
  .c-chart:focus-visible {
17256
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 0 3px var(--atomix-primary-border-subtle);
17353
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 0 calc(var(--atomix-border-width) * 3) var(--atomix-primary-border-subtle);
17257
17354
  }
17258
17355
  .c-chart--xs {
17259
17356
  --atomix-chart-min-height: 7rem;
@@ -17436,8 +17533,8 @@ a, a:hover {
17436
17533
  .c-chart__header {
17437
17534
  padding: var(--atomix-chart-padding);
17438
17535
  border-bottom: var(--atomix-chart-border-width) solid var(--atomix-brand-bg-subtle);
17439
- -webkit-backdrop-filter: blur(12px);
17440
- backdrop-filter: blur(12px);
17536
+ -webkit-backdrop-filter: blur(0.75rem);
17537
+ backdrop-filter: blur(0.75rem);
17441
17538
  position: relative;
17442
17539
  display: flex;
17443
17540
  align-items: flex-start;
@@ -17686,7 +17783,7 @@ a, a:hover {
17686
17783
  right: 0;
17687
17784
  bottom: 0;
17688
17785
  background-image: radial-gradient(circle at 1px 1px, var(--atomix-primary-border-subtle) 1px, transparent 0);
17689
- background-size: 20px 20px;
17786
+ background-size: 1.25rem 1.25rem;
17690
17787
  opacity: 0.03;
17691
17788
  pointer-events: none;
17692
17789
  z-index: 0;
@@ -17864,8 +17961,8 @@ a, a:hover {
17864
17961
  position: fixed;
17865
17962
  top: 0;
17866
17963
  left: 0;
17867
- -webkit-backdrop-filter: blur(16px);
17868
- backdrop-filter: blur(16px);
17964
+ -webkit-backdrop-filter: blur(1rem);
17965
+ backdrop-filter: blur(1rem);
17869
17966
  border-radius: 0.625rem;
17870
17967
  padding: 0.75rem 1rem;
17871
17968
  box-shadow: var(--atomix-box-shadow);
@@ -18943,7 +19040,7 @@ a, a:hover {
18943
19040
  animation: none;
18944
19041
  }
18945
19042
  }
18946
- .c-chart:focus-within__data-point:focus {
19043
+ .c-chart:focus-within .c-chart__data-point:focus {
18947
19044
  outline: 2px solid var(--atomix-primary-6);
18948
19045
  outline-offset: 2px;
18949
19046
  z-index: 10;
@@ -19383,7 +19480,6 @@ a, a:hover {
19383
19480
  .c-dropdown__menu-wrapper {
19384
19481
  position: absolute;
19385
19482
  left: 0;
19386
- z-index: 99;
19387
19483
  display: flex;
19388
19484
  opacity: 0;
19389
19485
  visibility: hidden;
@@ -19465,11 +19561,16 @@ a, a:hover {
19465
19561
  padding: var(--atomix-dropdown-padding-y) var(--atomix-dropdown-padding-x);
19466
19562
  list-style: none;
19467
19563
  margin-bottom: 0rem;
19564
+ border: 1px solid rgba(255, 255, 255, 0.08);
19468
19565
  background-color: var(--atomix-dropdown-bg);
19469
19566
  border-radius: var(--atomix-dropdown-border-radius);
19470
19567
  box-shadow: var(--atomix-dropdown-box-shadow);
19471
19568
  overflow: hidden;
19472
19569
  }
19570
+ .c-dropdown__menu--glass {
19571
+ background-color: color-mix(in srgb, var(--atomix-dropdown-bg) 50%, transparent);
19572
+ box-shadow: var(--atomix-dropdown-box-shadow);
19573
+ }
19473
19574
  .c-dropdown__menu-item {
19474
19575
  display: block;
19475
19576
  width: 100%;
@@ -19589,7 +19690,7 @@ a, a:hover {
19589
19690
  .c-edge-panel__backdrop {
19590
19691
  position: absolute;
19591
19692
  inset: 0;
19592
- background: var(--atomix-edge-panel-backdrop-bg);
19693
+ background-color: var(--atomix-edge-panel-backdrop-bg);
19593
19694
  -webkit-backdrop-filter: blur(var(--atomix-edge-panel-backdrop-blur));
19594
19695
  backdrop-filter: blur(var(--atomix-edge-panel-backdrop-blur));
19595
19696
  opacity: 0;
@@ -19829,142 +19930,1129 @@ a, a:hover {
19829
19930
  transform: translateY(100%);
19830
19931
  }
19831
19932
  }
19832
- .c-form {
19833
- --atomix-form-width: 100%;
19834
- --atomix-form-items-spacer-y: 1.5rem;
19835
- --atomix-form-items-spacer-x: 1rem;
19933
+ .c-footer {
19934
+ --atomix-footer-padding-x: 1rem;
19935
+ --atomix-footer-padding-y: 3rem;
19936
+ --atomix-footer-container-max-width: 1200px;
19937
+ --atomix-footer-bg: var(--atomix-surface);
19938
+ --atomix-footer-color: var(--atomix-text);
19939
+ --atomix-footer-border-width: 1px;
19940
+ --atomix-footer-border-color: var(--atomix-border);
19941
+ --atomix-footer-brand-margin-bottom: 1.5rem;
19942
+ --atomix-footer-section-margin-bottom: 2rem;
19943
+ --atomix-footer-social-gap: 0.75rem;
19944
+ --atomix-footer-newsletter-padding: 1.5rem;
19945
+ --atomix-footer-bottom-padding-top: 1.5rem;
19946
+ --atomix-footer-bottom-margin-top: 2rem;
19947
+ background-color: var(--atomix-footer-bg);
19948
+ color: var(--atomix-footer-color);
19949
+ border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
19950
+ padding: var(--atomix-footer-padding-y) 0;
19951
+ position: relative;
19952
+ }
19953
+ .c-footer__container {
19954
+ display: flex;
19955
+ flex-direction: column;
19836
19956
  width: 100%;
19837
- max-width: var(--atomix-form-width);
19957
+ max-width: var(--atomix-footer-container-max-width);
19958
+ margin: 0 auto;
19959
+ padding: 0 var(--atomix-footer-padding-x);
19838
19960
  }
19839
- .c-form > * + * {
19840
- margin-top: var(--atomix-form-items-spacer-y);
19961
+ .c-footer__sections {
19962
+ display: grid;
19963
+ grid-gap: var(--atomix-footer-section-margin-bottom);
19964
+ gap: var(--atomix-footer-section-margin-bottom);
19965
+ margin-bottom: var(--atomix-footer-bottom-margin-top);
19966
+ grid-template-columns: 1fr;
19841
19967
  }
19842
- .c-form .o-grid {
19843
- --atomix-gutter-x: var(--atomix-form-items-spacer-x);
19844
- --atomix-gutter-y: var(--atomix-form-items-spacer-y);
19968
+ @media (min-width: 768px) {
19969
+ .c-footer__sections {
19970
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
19971
+ gap: clamp(2rem, 4vw, 3rem);
19972
+ }
19845
19973
  }
19846
- .c-hero {
19847
- --atomix-hero-padding-x: 0rem;
19848
- --atomix-hero-padding-y: 4rem;
19849
- --atomix-hero-bg: var(--atomix-body-bg);
19850
- --atomix-hero-overlay: var(--atomix-brand-bg-subtle);
19851
- --atomix-hero-overlay-opacity: 0.6;
19852
- --atomix-hero-subtitle-font-size: 18px;
19853
- --atomix-hero-title-font-size: 56px;
19854
- --atomix-hero-text-font-size: 18px;
19855
- --atomix-hero-subtitle-color: var(--atomix-secondary-text-emphasis);
19856
- --atomix-hero-title-color: var(--atomix-body-color);
19857
- --atomix-hero-text-color: var(--atomix-secondary-color-text-emphasis);
19858
- --atomix-hero-subtitle-font-weight: 500;
19859
- --atomix-hero-title-font-weight: 700;
19860
- --atomix-hero-text-font-weight: 400;
19861
- --atomix-hero-subtitle-margin-bottom: 16px;
19862
- --atomix-hero-text-margin-top: 1rem;
19863
- --atomix-hero-actions-margin-top: 2rem;
19864
- --atomix-hero-actions-inner-gap: 1rem;
19865
- --atomix-hero-grid-gutter: 5rem;
19866
- --atomix-hero-content-width: 40rem;
19867
- position: relative;
19868
- display: grid;
19869
- place-items: center;
19870
- padding: var(--atomix-hero-padding-y) var(--atomix-hero-padding-x);
19871
- background-color: var(--atomix-hero-bg);
19872
- overflow: hidden;
19974
+ .c-footer__brand {
19975
+ margin-bottom: var(--atomix-footer-brand-margin-bottom);
19873
19976
  }
19874
- .c-hero__bg {
19875
- position: absolute;
19876
- inset: 0;
19877
- overflow: hidden;
19878
- z-index: 0;
19977
+ .c-footer__brand-logo {
19978
+ display: inline-block;
19979
+ margin-bottom: 1rem;
19980
+ transition: opacity 0.2s ease;
19879
19981
  }
19880
- .c-hero__bg-image, .c-hero__video {
19881
- position: absolute;
19882
- inset: 0;
19883
- width: 100%;
19884
- height: 100%;
19885
- -o-object-fit: cover;
19886
- object-fit: cover;
19887
- -o-object-position: center;
19888
- object-position: center;
19889
- z-index: 0;
19982
+ .c-footer__brand-logo:hover {
19983
+ opacity: 0.8;
19890
19984
  }
19891
- .c-hero__overlay {
19892
- position: absolute;
19893
- inset: 0;
19894
- background: var(--atomix-hero-overlay);
19895
- opacity: var(--atomix-hero-overlay-opacity);
19896
- z-index: 1;
19985
+ .c-footer__brand-logo img {
19986
+ max-width: 200px;
19987
+ max-height: 60px;
19988
+ height: auto;
19989
+ -o-object-fit: contain;
19990
+ object-fit: contain;
19897
19991
  }
19898
- .c-hero__container {
19899
- position: relative;
19900
- z-index: 2;
19992
+ .c-footer__brand-name h3 {
19993
+ margin: 0;
19994
+ font-size: clamp(1.25rem, 2.5vw, 1.5rem);
19995
+ font-weight: 600;
19996
+ color: var(--atomix-text-emphasis);
19997
+ line-height: 1.2;
19901
19998
  }
19902
- .c-hero__grid {
19903
- --atomix-gutter-x: var(--atomix-hero-grid-gutter);
19999
+ .c-footer__brand-description {
20000
+ margin-top: 0.5rem;
20001
+ font-size: 0.875rem;
20002
+ color: var(--atomix-text-muted);
20003
+ line-height: 1.6;
20004
+ max-width: 35ch;
20005
+ }
20006
+ .c-footer__section {
20007
+ margin-bottom: var(--atomix-footer-section-margin-bottom);
20008
+ }
20009
+ .c-footer__section-header {
20010
+ margin-bottom: 1rem;
20011
+ }
20012
+ .c-footer__section-header-content {
20013
+ display: flex;
19904
20014
  align-items: center;
20015
+ gap: 0.5rem;
19905
20016
  }
19906
- .c-hero__content {
20017
+ .c-footer__section-toggle {
20018
+ display: flex;
20019
+ align-items: center;
20020
+ justify-content: space-between;
19907
20021
  width: 100%;
19908
- max-width: var(--atomix-hero-content-width);
20022
+ padding: 0.75rem 0;
20023
+ background: none;
20024
+ border: none;
20025
+ cursor: pointer;
20026
+ color: inherit;
20027
+ font: inherit;
20028
+ text-align: left;
20029
+ border-radius: 0.25rem;
20030
+ transition: color 0.2s ease;
19909
20031
  }
19910
- .c-hero__subtitle {
19911
- color: var(--atomix-hero-subtitle-color);
19912
- font-size: var(--atomix-hero-subtitle-font-size);
19913
- font-weight: var(--atomix-hero-subtitle-font-weight);
19914
- margin-bottom: var(--atomix-hero-subtitle-margin-bottom);
20032
+ .c-footer__section-toggle:hover {
20033
+ color: var(--atomix-primary);
19915
20034
  }
19916
- .c-hero__title {
19917
- font-size: calc(2.15625rem + 1.5vw);
19918
- color: var(--atomix-hero-title-color);
19919
- font-weight: var(--atomix-hero-title-font-weight);
19920
- letter-spacing: -1px;
20035
+ .c-footer__section-toggle:focus-visible {
20036
+ outline: 2px solid var(--atomix-primary);
20037
+ outline-offset: 2px;
19921
20038
  }
19922
- @media (min-width: 768px) {
19923
- .c-hero__title {
19924
- font-size: var(--atomix-hero-title-font-size);
19925
- line-height: 72px;
20039
+ .c-footer__section-title {
20040
+ margin: 0;
20041
+ font-size: 1.125rem;
20042
+ font-weight: 600;
20043
+ color: var(--atomix-text-emphasis);
20044
+ line-height: 1.3;
20045
+ }
20046
+ .c-footer__section-icon {
20047
+ display: flex;
20048
+ align-items: center;
20049
+ margin-right: 0.5rem;
20050
+ font-size: 1.1em;
20051
+ }
20052
+ .c-footer__section-chevron {
20053
+ font-size: 0.875rem;
20054
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
20055
+ color: var(--atomix-text-muted);
20056
+ }
20057
+ .c-footer__section-content {
20058
+ display: flex;
20059
+ flex-direction: column;
20060
+ gap: 0.5rem;
20061
+ }
20062
+ @media (max-width: 767.98px) {
20063
+ .c-footer__section--collapsible .c-footer__section-content {
20064
+ overflow: hidden;
20065
+ transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
20066
+ }
20067
+ .c-footer__section--collapsible.c-footer__section--collapsed .c-footer__section-content {
20068
+ max-height: 0;
20069
+ }
20070
+ .c-footer__section--collapsible.c-footer__section--collapsed .c-footer__section-chevron {
20071
+ transform: rotate(-90deg);
20072
+ }
20073
+ .c-footer__section--collapsible:not(.c-footer__section--collapsed) .c-footer__section-content {
20074
+ max-height: 500px;
19926
20075
  }
19927
20076
  }
19928
- .c-hero__text {
19929
- color: var(--atomix-hero-text-color);
19930
- font-size: var(--atomix-hero-text-font-size);
19931
- font-weight: var(--atomix-hero-text-font-weight);
19932
- margin-top: var(--atomix-hero-text-margin-top);
20077
+ @media (min-width: 768px) {
20078
+ .c-footer__section--collapsible .c-footer__section-toggle {
20079
+ pointer-events: none;
20080
+ }
20081
+ .c-footer__section--collapsible .c-footer__section-chevron {
20082
+ display: none;
20083
+ }
19933
20084
  }
19934
- .c-hero__actions {
20085
+ .c-footer__link {
19935
20086
  display: inline-flex;
19936
- gap: var(--atomix-hero-actions-inner-gap);
19937
- margin-top: var(--atomix-hero-actions-margin-top);
19938
- }
19939
- .c-hero__image {
19940
- width: 100%;
19941
- max-width: none;
19942
- height: 380px;
19943
- -o-object-fit: cover;
19944
- object-fit: cover;
19945
- -o-object-position: center;
19946
- object-position: center;
20087
+ align-items: center;
20088
+ gap: 0.5rem;
20089
+ padding: 0.25rem 0;
20090
+ color: var(--atomix-text);
20091
+ text-decoration: none;
20092
+ transition: color 0.15s ease-in-out;
20093
+ border-radius: 0.25rem;
20094
+ position: relative;
19947
20095
  }
19948
- .c-hero--center {
19949
- text-align: center;
20096
+ .c-footer__link::before {
20097
+ content: "";
20098
+ position: absolute;
20099
+ left: 0;
20100
+ bottom: 0;
20101
+ width: 0;
20102
+ height: 2px;
20103
+ background-color: var(--atomix-primary);
20104
+ transition: width 0.3s ease;
19950
20105
  }
19951
- .c-hero--center .c-hero__content {
19952
- margin-left: auto;
19953
- margin-right: auto;
20106
+ .c-footer__link:hover, .c-footer__link:focus {
20107
+ color: var(--atomix-primary);
20108
+ text-decoration: underline;
19954
20109
  }
19955
- .c-hero--center .c-hero__image-wrapper {
19956
- margin-top: var(--atomix-hero-grid-gutter);
20110
+ .c-footer__link:hover::before, .c-footer__link:focus::before {
20111
+ width: 100%;
19957
20112
  }
19958
- .c-hero--end {
19959
- text-align: right;
20113
+ .c-footer__link:focus-visible {
20114
+ outline: 2px solid var(--atomix-primary);
20115
+ outline-offset: 2px;
19960
20116
  }
19961
- .c-hero--end .c-hero__content {
19962
- margin-left: auto;
20117
+ .c-footer__link--active {
20118
+ color: var(--atomix-primary);
20119
+ font-weight: 500;
19963
20120
  }
19964
- .c-hero--full-vh {
19965
- min-height: 100vh;
20121
+ .c-footer__link--active::before {
20122
+ width: 100%;
19966
20123
  }
19967
- .c-form-group {
20124
+ .c-footer__link--disabled {
20125
+ color: var(--atomix-text-disabled);
20126
+ cursor: not-allowed;
20127
+ pointer-events: none;
20128
+ opacity: 0.6;
20129
+ }
20130
+ .c-footer__link-icon {
20131
+ display: flex;
20132
+ align-items: center;
20133
+ font-size: 0.875em;
20134
+ transition: transform 0.2s ease;
20135
+ }
20136
+ .c-footer__link:hover .c-footer__link-icon {
20137
+ transform: translateX(2px);
20138
+ }
20139
+ .c-footer__link-text {
20140
+ flex: 1 1;
20141
+ }
20142
+ .c-footer__link-external {
20143
+ font-size: 0.75em;
20144
+ opacity: 0.7;
20145
+ margin-left: auto;
20146
+ }
20147
+ .c-footer__social {
20148
+ display: flex;
20149
+ flex-wrap: wrap;
20150
+ gap: var(--atomix-footer-social-gap);
20151
+ margin-top: 1rem;
20152
+ }
20153
+ .c-footer__social-link {
20154
+ display: flex;
20155
+ align-items: center;
20156
+ justify-content: center;
20157
+ width: 2.5rem;
20158
+ height: 2.5rem;
20159
+ background-color: var(--atomix-surface-variant);
20160
+ color: var(--atomix-text);
20161
+ border-radius: 50%;
20162
+ text-decoration: none;
20163
+ transition: all 0.15s ease-in-out;
20164
+ position: relative;
20165
+ overflow: hidden;
20166
+ }
20167
+ .c-footer__social-link::before {
20168
+ content: "";
20169
+ position: absolute;
20170
+ inset: 0;
20171
+ background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
20172
+ transform: translateX(-100%);
20173
+ transition: transform 0.6s ease;
20174
+ }
20175
+ .c-footer__social-link:hover, .c-footer__social-link:focus {
20176
+ background-color: var(--atomix-primary);
20177
+ color: var(--atomix-primary-contrast);
20178
+ transform: translateY(-3px) scale(1.05);
20179
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
20180
+ }
20181
+ .c-footer__social-link:hover::before, .c-footer__social-link:focus::before {
20182
+ transform: translateX(100%);
20183
+ }
20184
+ .c-footer__social-link:focus-visible {
20185
+ outline: 2px solid var(--atomix-primary);
20186
+ outline-offset: 2px;
20187
+ }
20188
+ .c-footer__social-link--sm {
20189
+ width: 2rem;
20190
+ height: 2rem;
20191
+ }
20192
+ .c-footer__social-link--lg {
20193
+ width: 3rem;
20194
+ height: 3rem;
20195
+ }
20196
+ .c-footer__social-link--disabled {
20197
+ opacity: 0.5;
20198
+ cursor: not-allowed;
20199
+ pointer-events: none;
20200
+ }
20201
+ .c-footer__social-link-icon {
20202
+ font-size: 1.25em;
20203
+ z-index: 1;
20204
+ }
20205
+ .c-footer__social-link-label {
20206
+ position: absolute;
20207
+ width: 1px;
20208
+ height: 1px;
20209
+ padding: 0;
20210
+ margin: -1px;
20211
+ overflow: hidden;
20212
+ clip: rect(0, 0, 0, 0);
20213
+ white-space: nowrap;
20214
+ border: 0;
20215
+ }
20216
+ .c-footer__social-link--facebook:hover {
20217
+ background: linear-gradient(135deg, #1877f2, #42a5f5);
20218
+ }
20219
+ .c-footer__social-link--twitter:hover {
20220
+ background: linear-gradient(135deg, #1da1f2, #64b5f6);
20221
+ }
20222
+ .c-footer__social-link--instagram:hover {
20223
+ background: linear-gradient(135deg, #e4405f, #f06292, #ba68c8);
20224
+ }
20225
+ .c-footer__social-link--linkedin:hover {
20226
+ background: linear-gradient(135deg, #0077b5, #42a5f5);
20227
+ }
20228
+ .c-footer__social-link--youtube:hover {
20229
+ background: linear-gradient(135deg, #ff0000, #ff5722);
20230
+ }
20231
+ .c-footer__social-link--github:hover {
20232
+ background: linear-gradient(135deg, #333, #666);
20233
+ }
20234
+ .c-footer__social-link--discord:hover {
20235
+ background: linear-gradient(135deg, #5865f2, #7289da);
20236
+ }
20237
+ .c-footer__social-link--tiktok:hover {
20238
+ background: linear-gradient(135deg, #000, #ff0050);
20239
+ }
20240
+ .c-footer__social-link--whatsapp:hover {
20241
+ background: linear-gradient(135deg, #25d366, #66bb6a);
20242
+ }
20243
+ .c-footer__newsletter {
20244
+ background-color: linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8));
20245
+ padding: 1.5rem;
20246
+ border-radius: 0.5rem;
20247
+ border: 1px solid var(--atomix-border-subtle);
20248
+ position: relative;
20249
+ overflow: hidden;
20250
+ }
20251
+ .c-footer__newsletter::before {
20252
+ content: "";
20253
+ position: absolute;
20254
+ top: 0;
20255
+ left: 0;
20256
+ right: 0;
20257
+ height: 1px;
20258
+ background: linear-gradient(90deg, transparent, var(--atomix-primary), transparent);
20259
+ }
20260
+ .c-footer__newsletter-title {
20261
+ margin: 0 0 0.5rem 0;
20262
+ font-size: clamp(1.125rem, 2vw, 1.125rem);
20263
+ font-weight: 600;
20264
+ color: var(--atomix-text-emphasis);
20265
+ line-height: 1.3;
20266
+ }
20267
+ .c-footer__newsletter-description {
20268
+ margin: 0 0 1rem 0;
20269
+ font-size: 0.875rem;
20270
+ color: var(--atomix-text-muted);
20271
+ line-height: 1.6;
20272
+ max-width: 45ch;
20273
+ }
20274
+ .c-footer__newsletter-form {
20275
+ display: flex;
20276
+ gap: 0.75rem;
20277
+ align-items: flex-end;
20278
+ }
20279
+ @media (max-width: 575.98px) {
20280
+ .c-footer__newsletter-form {
20281
+ flex-direction: column;
20282
+ align-items: stretch;
20283
+ }
20284
+ }
20285
+ .c-footer__newsletter-input-group {
20286
+ display: flex;
20287
+ flex: 1 1;
20288
+ gap: 0.75rem;
20289
+ position: relative;
20290
+ }
20291
+ @media (max-width: 575.98px) {
20292
+ .c-footer__newsletter-input-group {
20293
+ flex-direction: column;
20294
+ }
20295
+ }
20296
+ .c-footer__newsletter-input {
20297
+ flex: 1 1;
20298
+ padding: 0.75rem 1rem;
20299
+ font-size: 0.875rem;
20300
+ background-color: var(--atomix-surface);
20301
+ color: var(--atomix-text);
20302
+ border: 1px solid var(--atomix-border);
20303
+ border-radius: 0.375rem;
20304
+ outline: none;
20305
+ transition: all 0.3s ease;
20306
+ }
20307
+ .c-footer__newsletter-input:focus {
20308
+ border-color: var(--atomix-primary);
20309
+ box-shadow: 0 0 0 0.125rem rgba(var(--atomix-primary-rgb), 0.25);
20310
+ transform: translateY(-1px);
20311
+ }
20312
+ .c-footer__newsletter-input::-moz-placeholder {
20313
+ color: var(--atomix-text-muted);
20314
+ -moz-transition: opacity 0.3s ease;
20315
+ transition: opacity 0.3s ease;
20316
+ }
20317
+ .c-footer__newsletter-input::placeholder {
20318
+ color: var(--atomix-text-muted);
20319
+ transition: opacity 0.3s ease;
20320
+ }
20321
+ .c-footer__newsletter-input:focus::-moz-placeholder {
20322
+ opacity: 0.7;
20323
+ }
20324
+ .c-footer__newsletter-input:focus::placeholder {
20325
+ opacity: 0.7;
20326
+ }
20327
+ .c-footer__newsletter-button {
20328
+ padding: 0.75rem 1.5rem;
20329
+ background-color: var(--atomix-primary);
20330
+ color: var(--atomix-primary-contrast);
20331
+ border: none;
20332
+ border-radius: 0.375rem;
20333
+ font-weight: 500;
20334
+ cursor: pointer;
20335
+ transition: background-color 0.15s ease-in-out;
20336
+ white-space: nowrap;
20337
+ position: relative;
20338
+ overflow: hidden;
20339
+ }
20340
+ .c-footer__newsletter-button::before {
20341
+ content: "";
20342
+ position: absolute;
20343
+ inset: 0;
20344
+ background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
20345
+ transform: translateX(-100%);
20346
+ transition: transform 0.6s ease;
20347
+ }
20348
+ .c-footer__newsletter-button:hover, .c-footer__newsletter-button:focus {
20349
+ background-color: var(--atomix-primary-hover);
20350
+ transform: translateY(-2px);
20351
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
20352
+ }
20353
+ .c-footer__newsletter-button:hover::before, .c-footer__newsletter-button:focus::before {
20354
+ transform: translateX(100%);
20355
+ }
20356
+ .c-footer__newsletter-button:focus-visible {
20357
+ outline: 2px solid var(--atomix-primary);
20358
+ outline-offset: 2px;
20359
+ }
20360
+ .c-footer__bottom {
20361
+ display: flex;
20362
+ align-items: center;
20363
+ justify-content: space-between;
20364
+ padding-top: var(--atomix-footer-bottom-padding-top);
20365
+ border-top: 1px solid var(--atomix-border);
20366
+ position: relative;
20367
+ }
20368
+ @media (max-width: 575.98px) {
20369
+ .c-footer__bottom {
20370
+ flex-direction: column;
20371
+ gap: 1.5rem;
20372
+ text-align: center;
20373
+ }
20374
+ }
20375
+ .c-footer__copyright {
20376
+ font-size: 0.875rem;
20377
+ color: var(--atomix-text-muted);
20378
+ line-height: 1.5;
20379
+ }
20380
+ .c-footer__copyright a {
20381
+ color: inherit;
20382
+ text-decoration: underline;
20383
+ text-decoration-color: transparent;
20384
+ transition: text-decoration-color 0.3s ease;
20385
+ }
20386
+ .c-footer__copyright a:hover, .c-footer__copyright a:focus {
20387
+ text-decoration-color: currentColor;
20388
+ }
20389
+ .c-footer__back-to-top {
20390
+ display: flex;
20391
+ align-items: center;
20392
+ gap: 0.5rem;
20393
+ padding: 0.75rem 1.25rem;
20394
+ background-color: var(--atomix-surface-variant);
20395
+ border: 1px solid var(--atomix-border-subtle);
20396
+ color: var(--atomix-text);
20397
+ font-size: 0.875rem;
20398
+ font-weight: 500;
20399
+ cursor: pointer;
20400
+ transition: color 0.15s ease-in-out;
20401
+ border-radius: 2rem;
20402
+ position: relative;
20403
+ overflow: hidden;
20404
+ }
20405
+ .c-footer__back-to-top::before {
20406
+ content: "";
20407
+ position: absolute;
20408
+ inset: 0;
20409
+ background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
20410
+ transform: translateX(-100%);
20411
+ transition: transform 0.6s ease;
20412
+ }
20413
+ .c-footer__back-to-top:hover, .c-footer__back-to-top:focus {
20414
+ color: var(--atomix-primary);
20415
+ background-color: var(--atomix-primary);
20416
+ border-color: var(--atomix-primary);
20417
+ transform: translateY(-2px);
20418
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
20419
+ }
20420
+ .c-footer__back-to-top:hover::before, .c-footer__back-to-top:focus::before {
20421
+ transform: translateX(100%);
20422
+ }
20423
+ .c-footer__back-to-top:hover .c-footer__back-to-top-icon, .c-footer__back-to-top:focus .c-footer__back-to-top-icon {
20424
+ transform: translateY(-2px);
20425
+ }
20426
+ .c-footer__back-to-top:focus-visible {
20427
+ outline: 2px solid var(--atomix-primary);
20428
+ outline-offset: 2px;
20429
+ }
20430
+ .c-footer__back-to-top-icon {
20431
+ font-size: 1.25em;
20432
+ font-weight: bold;
20433
+ transition: transform 0.3s ease;
20434
+ }
20435
+ @media (max-width: 575.98px) {
20436
+ .c-footer__back-to-top-text {
20437
+ display: none;
20438
+ }
20439
+ }
20440
+ .c-footer__divider {
20441
+ margin: 2rem 0;
20442
+ border: none;
20443
+ height: 1px;
20444
+ background: linear-gradient(90deg, transparent, 1px solid var(--atomix-border), transparent);
20445
+ opacity: 0.5;
20446
+ }
20447
+ @media (min-width: 768px) {
20448
+ .c-footer--columns .c-footer__sections {
20449
+ display: grid;
20450
+ grid-template-columns: minmax(300px, 1fr) 2fr minmax(250px, 1fr);
20451
+ grid-gap: clamp(2rem, 5vw, 4rem);
20452
+ gap: clamp(2rem, 5vw, 4rem);
20453
+ align-items: start;
20454
+ }
20455
+ }
20456
+ @media (min-width: 992px) {
20457
+ .c-footer--columns .c-footer__sections {
20458
+ grid-template-columns: minmax(350px, 1fr) 3fr minmax(300px, 1fr);
20459
+ }
20460
+ }
20461
+ .c-footer--centered {
20462
+ text-align: center;
20463
+ }
20464
+ .c-footer--centered .c-footer__sections {
20465
+ justify-content: center;
20466
+ align-items: center;
20467
+ }
20468
+ .c-footer--centered .c-footer__social {
20469
+ justify-content: center;
20470
+ }
20471
+ .c-footer--centered .c-footer__brand-description {
20472
+ margin-left: auto;
20473
+ margin-right: auto;
20474
+ }
20475
+ .c-footer--minimal {
20476
+ --atomix-footer-padding-y: 2rem;
20477
+ }
20478
+ .c-footer--minimal .c-footer__sections {
20479
+ margin-bottom: 1rem;
20480
+ gap: 1.5rem;
20481
+ }
20482
+ .c-footer--minimal .c-footer__section {
20483
+ margin-bottom: 1rem;
20484
+ }
20485
+ .c-footer--minimal .c-footer__newsletter {
20486
+ padding: 1.5rem;
20487
+ }
20488
+ .c-footer--stacked .c-footer__sections {
20489
+ display: flex;
20490
+ flex-direction: column;
20491
+ align-items: center;
20492
+ text-align: center;
20493
+ gap: clamp(1.5rem, 4vw, 2.5rem);
20494
+ max-width: 600px;
20495
+ margin-left: auto;
20496
+ margin-right: auto;
20497
+ }
20498
+ .c-footer--sm {
20499
+ --atomix-footer-padding-y: 2rem;
20500
+ --atomix-footer-section-margin-bottom: 1.5rem;
20501
+ --atomix-footer-brand-margin-bottom: 1rem;
20502
+ --atomix-footer-social-gap: 0.75rem;
20503
+ }
20504
+ .c-footer--md {
20505
+ --atomix-footer-padding-y: 3rem;
20506
+ --atomix-footer-section-margin-bottom: 2rem;
20507
+ }
20508
+ .c-footer--lg {
20509
+ --atomix-footer-padding-y: 4rem;
20510
+ --atomix-footer-section-margin-bottom: 2.5rem;
20511
+ --atomix-footer-brand-margin-bottom: 2rem;
20512
+ --atomix-footer-social-gap: 1.25rem;
20513
+ }
20514
+ .c-footer--lg .c-footer__sections {
20515
+ gap: clamp(2.5rem, 5vw, 4rem);
20516
+ }
20517
+ .c-footer--primary {
20518
+ --atomix-footer-bg: var(--atomix-primary-bg-subtle);
20519
+ --atomix-footer-border-color: var(--atomix-primary-border-subtle);
20520
+ --atomix-footer-color: var(--atomix-primary-text);
20521
+ }
20522
+ .c-footer--primary .c-footer__brand-name h3,
20523
+ .c-footer--primary .c-footer__section-title {
20524
+ color: var(--atomix-primary-text-emphasis);
20525
+ }
20526
+ .c-footer--primary .c-footer__brand-description,
20527
+ .c-footer--primary .c-footer__copyright {
20528
+ color: var(--atomix-primary-text-muted);
20529
+ }
20530
+ .c-footer--primary .c-footer__link {
20531
+ color: var(--atomix-primary-text);
20532
+ }
20533
+ .c-footer--primary .c-footer__link:hover, .c-footer--primary .c-footer__link:focus {
20534
+ color: var(--atomix-primary);
20535
+ }
20536
+ .c-footer--primary .c-footer__link::before {
20537
+ background-color: var(--atomix-primary);
20538
+ }
20539
+ .c-footer--primary .c-footer__newsletter {
20540
+ background: linear-gradient(135deg, var(--atomix-primary-bg), rgba(var(--atomix-primary-bg-rgb), 0.8));
20541
+ border-color: var(--atomix-primary-border);
20542
+ }
20543
+ .c-footer--primary .c-footer__newsletter::before {
20544
+ background: linear-gradient(90deg, transparent, var(--atomix-primary), transparent);
20545
+ }
20546
+ .c-footer--secondary {
20547
+ --atomix-footer-bg: var(--atomix-secondary-bg-subtle);
20548
+ --atomix-footer-border-color: var(--atomix-secondary-border-subtle);
20549
+ --atomix-footer-color: var(--atomix-secondary-text);
20550
+ }
20551
+ .c-footer--secondary .c-footer__brand-name h3,
20552
+ .c-footer--secondary .c-footer__section-title {
20553
+ color: var(--atomix-secondary-text-emphasis);
20554
+ }
20555
+ .c-footer--secondary .c-footer__brand-description,
20556
+ .c-footer--secondary .c-footer__copyright {
20557
+ color: var(--atomix-secondary-text-muted);
20558
+ }
20559
+ .c-footer--secondary .c-footer__link {
20560
+ color: var(--atomix-secondary-text);
20561
+ }
20562
+ .c-footer--secondary .c-footer__link:hover, .c-footer--secondary .c-footer__link:focus {
20563
+ color: var(--atomix-secondary);
20564
+ }
20565
+ .c-footer--secondary .c-footer__link::before {
20566
+ background-color: var(--atomix-secondary);
20567
+ }
20568
+ .c-footer--secondary .c-footer__newsletter {
20569
+ background: linear-gradient(135deg, var(--atomix-secondary-bg), rgba(var(--atomix-secondary-bg-rgb), 0.8));
20570
+ border-color: var(--atomix-secondary-border);
20571
+ }
20572
+ .c-footer--secondary .c-footer__newsletter::before {
20573
+ background: linear-gradient(90deg, transparent, var(--atomix-secondary), transparent);
20574
+ }
20575
+ .c-footer--tertiary {
20576
+ --atomix-footer-bg: var(--atomix-tertiary-bg-subtle);
20577
+ --atomix-footer-border-color: var(--atomix-tertiary-border-subtle);
20578
+ --atomix-footer-color: var(--atomix-tertiary-text);
20579
+ }
20580
+ .c-footer--tertiary .c-footer__brand-name h3,
20581
+ .c-footer--tertiary .c-footer__section-title {
20582
+ color: var(--atomix-tertiary-text-emphasis);
20583
+ }
20584
+ .c-footer--tertiary .c-footer__brand-description,
20585
+ .c-footer--tertiary .c-footer__copyright {
20586
+ color: var(--atomix-tertiary-text-muted);
20587
+ }
20588
+ .c-footer--tertiary .c-footer__link {
20589
+ color: var(--atomix-tertiary-text);
20590
+ }
20591
+ .c-footer--tertiary .c-footer__link:hover, .c-footer--tertiary .c-footer__link:focus {
20592
+ color: var(--atomix-tertiary);
20593
+ }
20594
+ .c-footer--tertiary .c-footer__link::before {
20595
+ background-color: var(--atomix-tertiary);
20596
+ }
20597
+ .c-footer--tertiary .c-footer__newsletter {
20598
+ background: linear-gradient(135deg, var(--atomix-tertiary-bg), rgba(var(--atomix-tertiary-bg-rgb), 0.8));
20599
+ border-color: var(--atomix-tertiary-border);
20600
+ }
20601
+ .c-footer--tertiary .c-footer__newsletter::before {
20602
+ background: linear-gradient(90deg, transparent, var(--atomix-tertiary), transparent);
20603
+ }
20604
+ .c-footer--invert {
20605
+ --atomix-footer-bg: var(--atomix-invert-bg-subtle);
20606
+ --atomix-footer-border-color: var(--atomix-invert-border-subtle);
20607
+ --atomix-footer-color: var(--atomix-invert-text);
20608
+ }
20609
+ .c-footer--invert .c-footer__brand-name h3,
20610
+ .c-footer--invert .c-footer__section-title {
20611
+ color: var(--atomix-invert-text-emphasis);
20612
+ }
20613
+ .c-footer--invert .c-footer__brand-description,
20614
+ .c-footer--invert .c-footer__copyright {
20615
+ color: var(--atomix-invert-text-muted);
20616
+ }
20617
+ .c-footer--invert .c-footer__link {
20618
+ color: var(--atomix-invert-text);
20619
+ }
20620
+ .c-footer--invert .c-footer__link:hover, .c-footer--invert .c-footer__link:focus {
20621
+ color: var(--atomix-invert);
20622
+ }
20623
+ .c-footer--invert .c-footer__link::before {
20624
+ background-color: var(--atomix-invert);
20625
+ }
20626
+ .c-footer--invert .c-footer__newsletter {
20627
+ background: linear-gradient(135deg, var(--atomix-invert-bg), rgba(var(--atomix-invert-bg-rgb), 0.8));
20628
+ border-color: var(--atomix-invert-border);
20629
+ }
20630
+ .c-footer--invert .c-footer__newsletter::before {
20631
+ background: linear-gradient(90deg, transparent, var(--atomix-invert), transparent);
20632
+ }
20633
+ .c-footer--brand {
20634
+ --atomix-footer-bg: var(--atomix-brand-bg-subtle);
20635
+ --atomix-footer-border-color: var(--atomix-brand-border-subtle);
20636
+ --atomix-footer-color: var(--atomix-brand-text);
20637
+ }
20638
+ .c-footer--brand .c-footer__brand-name h3,
20639
+ .c-footer--brand .c-footer__section-title {
20640
+ color: var(--atomix-brand-text-emphasis);
20641
+ }
20642
+ .c-footer--brand .c-footer__brand-description,
20643
+ .c-footer--brand .c-footer__copyright {
20644
+ color: var(--atomix-brand-text-muted);
20645
+ }
20646
+ .c-footer--brand .c-footer__link {
20647
+ color: var(--atomix-brand-text);
20648
+ }
20649
+ .c-footer--brand .c-footer__link:hover, .c-footer--brand .c-footer__link:focus {
20650
+ color: var(--atomix-brand);
20651
+ }
20652
+ .c-footer--brand .c-footer__link::before {
20653
+ background-color: var(--atomix-brand);
20654
+ }
20655
+ .c-footer--brand .c-footer__newsletter {
20656
+ background: linear-gradient(135deg, var(--atomix-brand-bg), rgba(var(--atomix-brand-bg-rgb), 0.8));
20657
+ border-color: var(--atomix-brand-border);
20658
+ }
20659
+ .c-footer--brand .c-footer__newsletter::before {
20660
+ background: linear-gradient(90deg, transparent, var(--atomix-brand), transparent);
20661
+ }
20662
+ .c-footer--error {
20663
+ --atomix-footer-bg: var(--atomix-error-bg-subtle);
20664
+ --atomix-footer-border-color: var(--atomix-error-border-subtle);
20665
+ --atomix-footer-color: var(--atomix-error-text);
20666
+ }
20667
+ .c-footer--error .c-footer__brand-name h3,
20668
+ .c-footer--error .c-footer__section-title {
20669
+ color: var(--atomix-error-text-emphasis);
20670
+ }
20671
+ .c-footer--error .c-footer__brand-description,
20672
+ .c-footer--error .c-footer__copyright {
20673
+ color: var(--atomix-error-text-muted);
20674
+ }
20675
+ .c-footer--error .c-footer__link {
20676
+ color: var(--atomix-error-text);
20677
+ }
20678
+ .c-footer--error .c-footer__link:hover, .c-footer--error .c-footer__link:focus {
20679
+ color: var(--atomix-error);
20680
+ }
20681
+ .c-footer--error .c-footer__link::before {
20682
+ background-color: var(--atomix-error);
20683
+ }
20684
+ .c-footer--error .c-footer__newsletter {
20685
+ background: linear-gradient(135deg, var(--atomix-error-bg), rgba(var(--atomix-error-bg-rgb), 0.8));
20686
+ border-color: var(--atomix-error-border);
20687
+ }
20688
+ .c-footer--error .c-footer__newsletter::before {
20689
+ background: linear-gradient(90deg, transparent, var(--atomix-error), transparent);
20690
+ }
20691
+ .c-footer--success {
20692
+ --atomix-footer-bg: var(--atomix-success-bg-subtle);
20693
+ --atomix-footer-border-color: var(--atomix-success-border-subtle);
20694
+ --atomix-footer-color: var(--atomix-success-text);
20695
+ }
20696
+ .c-footer--success .c-footer__brand-name h3,
20697
+ .c-footer--success .c-footer__section-title {
20698
+ color: var(--atomix-success-text-emphasis);
20699
+ }
20700
+ .c-footer--success .c-footer__brand-description,
20701
+ .c-footer--success .c-footer__copyright {
20702
+ color: var(--atomix-success-text-muted);
20703
+ }
20704
+ .c-footer--success .c-footer__link {
20705
+ color: var(--atomix-success-text);
20706
+ }
20707
+ .c-footer--success .c-footer__link:hover, .c-footer--success .c-footer__link:focus {
20708
+ color: var(--atomix-success);
20709
+ }
20710
+ .c-footer--success .c-footer__link::before {
20711
+ background-color: var(--atomix-success);
20712
+ }
20713
+ .c-footer--success .c-footer__newsletter {
20714
+ background: linear-gradient(135deg, var(--atomix-success-bg), rgba(var(--atomix-success-bg-rgb), 0.8));
20715
+ border-color: var(--atomix-success-border);
20716
+ }
20717
+ .c-footer--success .c-footer__newsletter::before {
20718
+ background: linear-gradient(90deg, transparent, var(--atomix-success), transparent);
20719
+ }
20720
+ .c-footer--warning {
20721
+ --atomix-footer-bg: var(--atomix-warning-bg-subtle);
20722
+ --atomix-footer-border-color: var(--atomix-warning-border-subtle);
20723
+ --atomix-footer-color: var(--atomix-warning-text);
20724
+ }
20725
+ .c-footer--warning .c-footer__brand-name h3,
20726
+ .c-footer--warning .c-footer__section-title {
20727
+ color: var(--atomix-warning-text-emphasis);
20728
+ }
20729
+ .c-footer--warning .c-footer__brand-description,
20730
+ .c-footer--warning .c-footer__copyright {
20731
+ color: var(--atomix-warning-text-muted);
20732
+ }
20733
+ .c-footer--warning .c-footer__link {
20734
+ color: var(--atomix-warning-text);
20735
+ }
20736
+ .c-footer--warning .c-footer__link:hover, .c-footer--warning .c-footer__link:focus {
20737
+ color: var(--atomix-warning);
20738
+ }
20739
+ .c-footer--warning .c-footer__link::before {
20740
+ background-color: var(--atomix-warning);
20741
+ }
20742
+ .c-footer--warning .c-footer__newsletter {
20743
+ background: linear-gradient(135deg, var(--atomix-warning-bg), rgba(var(--atomix-warning-bg-rgb), 0.8));
20744
+ border-color: var(--atomix-warning-border);
20745
+ }
20746
+ .c-footer--warning .c-footer__newsletter::before {
20747
+ background: linear-gradient(90deg, transparent, var(--atomix-warning), transparent);
20748
+ }
20749
+ .c-footer--info {
20750
+ --atomix-footer-bg: var(--atomix-info-bg-subtle);
20751
+ --atomix-footer-border-color: var(--atomix-info-border-subtle);
20752
+ --atomix-footer-color: var(--atomix-info-text);
20753
+ }
20754
+ .c-footer--info .c-footer__brand-name h3,
20755
+ .c-footer--info .c-footer__section-title {
20756
+ color: var(--atomix-info-text-emphasis);
20757
+ }
20758
+ .c-footer--info .c-footer__brand-description,
20759
+ .c-footer--info .c-footer__copyright {
20760
+ color: var(--atomix-info-text-muted);
20761
+ }
20762
+ .c-footer--info .c-footer__link {
20763
+ color: var(--atomix-info-text);
20764
+ }
20765
+ .c-footer--info .c-footer__link:hover, .c-footer--info .c-footer__link:focus {
20766
+ color: var(--atomix-info);
20767
+ }
20768
+ .c-footer--info .c-footer__link::before {
20769
+ background-color: var(--atomix-info);
20770
+ }
20771
+ .c-footer--info .c-footer__newsletter {
20772
+ background: linear-gradient(135deg, var(--atomix-info-bg), rgba(var(--atomix-info-bg-rgb), 0.8));
20773
+ border-color: var(--atomix-info-border);
20774
+ }
20775
+ .c-footer--info .c-footer__newsletter::before {
20776
+ background: linear-gradient(90deg, transparent, var(--atomix-info), transparent);
20777
+ }
20778
+ .c-footer--light {
20779
+ --atomix-footer-bg: var(--atomix-light-bg-subtle);
20780
+ --atomix-footer-border-color: var(--atomix-light-border-subtle);
20781
+ --atomix-footer-color: var(--atomix-light-text);
20782
+ }
20783
+ .c-footer--light .c-footer__brand-name h3,
20784
+ .c-footer--light .c-footer__section-title {
20785
+ color: var(--atomix-light-text-emphasis);
20786
+ }
20787
+ .c-footer--light .c-footer__brand-description,
20788
+ .c-footer--light .c-footer__copyright {
20789
+ color: var(--atomix-light-text-muted);
20790
+ }
20791
+ .c-footer--light .c-footer__link {
20792
+ color: var(--atomix-light-text);
20793
+ }
20794
+ .c-footer--light .c-footer__link:hover, .c-footer--light .c-footer__link:focus {
20795
+ color: var(--atomix-light);
20796
+ }
20797
+ .c-footer--light .c-footer__link::before {
20798
+ background-color: var(--atomix-light);
20799
+ }
20800
+ .c-footer--light .c-footer__newsletter {
20801
+ background: linear-gradient(135deg, var(--atomix-light-bg), rgba(var(--atomix-light-bg-rgb), 0.8));
20802
+ border-color: var(--atomix-light-border);
20803
+ }
20804
+ .c-footer--light .c-footer__newsletter::before {
20805
+ background: linear-gradient(90deg, transparent, var(--atomix-light), transparent);
20806
+ }
20807
+ .c-footer--dark {
20808
+ --atomix-footer-bg: var(--atomix-dark-bg-subtle);
20809
+ --atomix-footer-border-color: var(--atomix-dark-border-subtle);
20810
+ --atomix-footer-color: var(--atomix-dark-text);
20811
+ }
20812
+ .c-footer--dark .c-footer__brand-name h3,
20813
+ .c-footer--dark .c-footer__section-title {
20814
+ color: var(--atomix-dark-text-emphasis);
20815
+ }
20816
+ .c-footer--dark .c-footer__brand-description,
20817
+ .c-footer--dark .c-footer__copyright {
20818
+ color: var(--atomix-dark-text-muted);
20819
+ }
20820
+ .c-footer--dark .c-footer__link {
20821
+ color: var(--atomix-dark-text);
20822
+ }
20823
+ .c-footer--dark .c-footer__link:hover, .c-footer--dark .c-footer__link:focus {
20824
+ color: var(--atomix-dark);
20825
+ }
20826
+ .c-footer--dark .c-footer__link::before {
20827
+ background-color: var(--atomix-dark);
20828
+ }
20829
+ .c-footer--dark .c-footer__newsletter {
20830
+ background: linear-gradient(135deg, var(--atomix-dark-bg), rgba(var(--atomix-dark-bg-rgb), 0.8));
20831
+ border-color: var(--atomix-dark-border);
20832
+ }
20833
+ .c-footer--dark .c-footer__newsletter::before {
20834
+ background: linear-gradient(90deg, transparent, var(--atomix-dark), transparent);
20835
+ }
20836
+ .c-footer--sticky {
20837
+ position: sticky;
20838
+ bottom: 0;
20839
+ z-index: 10;
20840
+ box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
20841
+ -webkit-backdrop-filter: blur(10px);
20842
+ backdrop-filter: blur(10px);
20843
+ background-color: rgba(var(--atomix-footer-bg-rgb), 0.95);
20844
+ }
20845
+ @media (prefers-color-scheme: dark) {
20846
+ .c-footer {
20847
+ --atomix-footer-bg: var(--atomix-surface-dark);
20848
+ --atomix-footer-color: var(--atomix-text-dark);
20849
+ --atomix-footer-border-color: var(--atomix-border-dark);
20850
+ }
20851
+ }
20852
+ .dark-mode .c-footer {
20853
+ --atomix-footer-bg: var(--atomix-surface-dark);
20854
+ --atomix-footer-color: var(--atomix-text-dark);
20855
+ --atomix-footer-border-color: var(--atomix-border-dark);
20856
+ }
20857
+ .dark-mode .c-footer .c-footer__newsletter {
20858
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
20859
+ border-color: rgba(255, 255, 255, 0.1);
20860
+ }
20861
+ .dark-mode .c-footer .c-footer__social-link {
20862
+ background-color: rgba(255, 255, 255, 0.1);
20863
+ }
20864
+ .dark-mode .c-footer .c-footer__social-link:hover {
20865
+ background-color: rgba(255, 255, 255, 0.2);
20866
+ }
20867
+ @media (prefers-reduced-motion: reduce) {
20868
+ .c-footer *,
20869
+ .c-footer *::before,
20870
+ .c-footer *::after {
20871
+ animation-duration: 0.01ms !important;
20872
+ animation-iteration-count: 1 !important;
20873
+ transition-duration: 0.01ms !important;
20874
+ scroll-behavior: auto !important;
20875
+ }
20876
+ .c-footer .c-footer__social-link:hover,
20877
+ .c-footer .c-footer__back-to-top:hover,
20878
+ .c-footer .c-footer__newsletter-button:hover {
20879
+ transform: none;
20880
+ }
20881
+ }
20882
+ @media (prefers-contrast: high) {
20883
+ .c-footer .c-footer__link,
20884
+ .c-footer .c-footer__social-link,
20885
+ .c-footer .c-footer__back-to-top {
20886
+ border: 2px solid currentColor;
20887
+ }
20888
+ }
20889
+ @media print {
20890
+ .c-footer {
20891
+ background: white !important;
20892
+ color: black !important;
20893
+ box-shadow: none !important;
20894
+ }
20895
+ .c-footer .c-footer__back-to-top,
20896
+ .c-footer .c-footer__newsletter,
20897
+ .c-footer .c-footer__section-toggle {
20898
+ display: none !important;
20899
+ }
20900
+ .c-footer .c-footer__social-link::after {
20901
+ content: " (" attr(href) ")";
20902
+ font-size: 0.8em;
20903
+ color: inherit;
20904
+ }
20905
+ .c-footer .c-footer__section--collapsible .c-footer__section-content {
20906
+ max-height: none !important;
20907
+ overflow: visible !important;
20908
+ }
20909
+ }
20910
+ @container (min-width: 768px) {
20911
+ .c-footer .c-footer__sections {
20912
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
20913
+ }
20914
+ }
20915
+ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
20916
+ .c-footer .c-footer__brand-logo img {
20917
+ image-rendering: -webkit-optimize-contrast;
20918
+ image-rendering: crisp-edges;
20919
+ }
20920
+ }
20921
+ .c-form {
20922
+ --atomix-form-width: 100%;
20923
+ --atomix-form-items-spacer-y: 1.5rem;
20924
+ --atomix-form-items-spacer-x: 1rem;
20925
+ width: 100%;
20926
+ max-width: var(--atomix-form-width);
20927
+ }
20928
+ .c-form > * + * {
20929
+ margin-top: var(--atomix-form-items-spacer-y);
20930
+ }
20931
+ .c-form .o-grid {
20932
+ --atomix-gutter-x: var(--atomix-form-items-spacer-x);
20933
+ --atomix-gutter-y: var(--atomix-form-items-spacer-y);
20934
+ }
20935
+ .c-hero {
20936
+ --atomix-hero-padding-x: 0rem;
20937
+ --atomix-hero-padding-y: 4rem;
20938
+ --atomix-hero-bg: var(--atomix-body-bg);
20939
+ --atomix-hero-overlay: var(--atomix-brand-bg-subtle);
20940
+ --atomix-hero-overlay-opacity: 0.6;
20941
+ --atomix-hero-subtitle-font-size: 18px;
20942
+ --atomix-hero-title-font-size: 56px;
20943
+ --atomix-hero-text-font-size: 18px;
20944
+ --atomix-hero-subtitle-color: var(--atomix-secondary-text-emphasis);
20945
+ --atomix-hero-title-color: var(--atomix-body-color);
20946
+ --atomix-hero-text-color: var(--atomix-secondary-color-text-emphasis);
20947
+ --atomix-hero-subtitle-font-weight: 500;
20948
+ --atomix-hero-title-font-weight: 700;
20949
+ --atomix-hero-text-font-weight: 400;
20950
+ --atomix-hero-subtitle-margin-bottom: 16px;
20951
+ --atomix-hero-text-margin-top: 1rem;
20952
+ --atomix-hero-actions-margin-top: 2rem;
20953
+ --atomix-hero-actions-inner-gap: 1rem;
20954
+ --atomix-hero-grid-gutter: 5rem;
20955
+ --atomix-hero-content-width: 40rem;
20956
+ position: relative;
20957
+ display: grid;
20958
+ place-items: center;
20959
+ padding: var(--atomix-hero-padding-y) var(--atomix-hero-padding-x);
20960
+ background-color: var(--atomix-hero-bg);
20961
+ overflow: hidden;
20962
+ }
20963
+ .c-hero__bg {
20964
+ position: absolute;
20965
+ inset: 0;
20966
+ overflow: hidden;
20967
+ z-index: 0;
20968
+ }
20969
+ .c-hero__bg-image, .c-hero__video {
20970
+ position: absolute;
20971
+ inset: 0;
20972
+ width: 100%;
20973
+ height: 100%;
20974
+ -o-object-fit: cover;
20975
+ object-fit: cover;
20976
+ -o-object-position: center;
20977
+ object-position: center;
20978
+ z-index: 0;
20979
+ }
20980
+ .c-hero__overlay {
20981
+ position: absolute;
20982
+ inset: 0;
20983
+ background-color: var(--atomix-hero-overlay);
20984
+ opacity: var(--atomix-hero-overlay-opacity);
20985
+ z-index: 0;
20986
+ }
20987
+ .c-hero__container {
20988
+ position: relative;
20989
+ }
20990
+ .c-hero__grid {
20991
+ --atomix-gutter-x: var(--atomix-hero-grid-gutter);
20992
+ align-items: center;
20993
+ }
20994
+ .c-hero__content {
20995
+ width: 100%;
20996
+ max-width: var(--atomix-hero-content-width);
20997
+ }
20998
+ .c-hero__subtitle {
20999
+ color: var(--atomix-hero-subtitle-color);
21000
+ font-size: var(--atomix-hero-subtitle-font-size);
21001
+ font-weight: var(--atomix-hero-subtitle-font-weight);
21002
+ margin-bottom: var(--atomix-hero-subtitle-margin-bottom);
21003
+ }
21004
+ .c-hero__title {
21005
+ font-size: calc(2.15625rem + 1.5vw);
21006
+ color: var(--atomix-hero-title-color);
21007
+ font-weight: var(--atomix-hero-title-font-weight);
21008
+ letter-spacing: -1px;
21009
+ }
21010
+ @media (min-width: 768px) {
21011
+ .c-hero__title {
21012
+ font-size: var(--atomix-hero-title-font-size);
21013
+ line-height: 72px;
21014
+ }
21015
+ }
21016
+ .c-hero__text {
21017
+ color: var(--atomix-hero-text-color);
21018
+ font-size: var(--atomix-hero-text-font-size);
21019
+ font-weight: var(--atomix-hero-text-font-weight);
21020
+ margin-top: var(--atomix-hero-text-margin-top);
21021
+ }
21022
+ .c-hero__actions {
21023
+ display: inline-flex;
21024
+ gap: var(--atomix-hero-actions-inner-gap);
21025
+ margin-top: var(--atomix-hero-actions-margin-top);
21026
+ }
21027
+ .c-hero__image {
21028
+ width: 100%;
21029
+ max-width: none;
21030
+ height: 380px;
21031
+ -o-object-fit: cover;
21032
+ object-fit: cover;
21033
+ -o-object-position: center;
21034
+ object-position: center;
21035
+ }
21036
+ .c-hero--center {
21037
+ text-align: center;
21038
+ }
21039
+ .c-hero--center .c-hero__content {
21040
+ margin-left: auto;
21041
+ margin-right: auto;
21042
+ }
21043
+ .c-hero--center .c-hero__image-wrapper {
21044
+ margin-top: var(--atomix-hero-grid-gutter);
21045
+ }
21046
+ .c-hero--end {
21047
+ text-align: right;
21048
+ }
21049
+ .c-hero--end .c-hero__content {
21050
+ margin-left: auto;
21051
+ }
21052
+ .c-hero--full-vh {
21053
+ min-height: 100vh;
21054
+ }
21055
+ .c-form-group {
19968
21056
  --atomix-input-group-width: 100%;
19969
21057
  --atomix-input-group-label-color: var(--atomix-secondary-text-emphasis);
19970
21058
  --atomix-input-group-label-font-size: 14px;
@@ -20012,7 +21100,7 @@ a, a:hover {
20012
21100
  --atomix-input-padding-x: 1rem;
20013
21101
  --atomix-input-padding-y: 0.75rem;
20014
21102
  --atomix-input-border-color: var(--atomix-primary-border-subtle);
20015
- --atomix-input-border-width: 1px;
21103
+ --atomix-input-border-width: var(--atomix-border-width);
20016
21104
  --atomix-input-border-radius: 8px;
20017
21105
  --atomix-input-bg: var(--atomix-body-bg);
20018
21106
  --atomix-input-textarea-height: 120px;
@@ -20097,6 +21185,21 @@ a, a:hover {
20097
21185
  --atomix-input-bg: var(--atomix-secondary-bg-subtle);
20098
21186
  pointer-events: none;
20099
21187
  }
21188
+ .c-input--glass {
21189
+ background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
21190
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
21191
+ }
21192
+ .c-input--glass:focus, .c-input--glass:hover {
21193
+ background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
21194
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 0 0 2px rgba(var(--atomix-primary-rgb, 122, 255, 215), 0.3);
21195
+ }
21196
+ .c-input--glass.c-input--textarea {
21197
+ resize: vertical;
21198
+ }
21199
+ .c-input--glass:disabled, .c-input--glass.is-disabled {
21200
+ background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
21201
+ opacity: 0.6;
21202
+ }
20100
21203
  .c-list-group {
20101
21204
  --atomix-list-group-width: 100%;
20102
21205
  --atomix-list-group-bg: ;
@@ -20115,14 +21218,14 @@ a, a:hover {
20115
21218
  list-style: none;
20116
21219
  width: 100%;
20117
21220
  max-width: var(--atomix-list-group-width);
20118
- background: var(--atomix-list-group-bg);
21221
+ background-color: var(--atomix-list-group-bg);
20119
21222
  }
20120
21223
  .c-list-group__item {
20121
21224
  padding: var(--atomix-list-group-item-padding-y) var(--atomix-list-group-item-padding-x);
20122
21225
  font-size: var(--atomix-list-group-item-font-size);
20123
21226
  color: var(--atomix-list-group-item-color);
20124
21227
  border-bottom: var(--atomix-list-group-item-border-width) solid var(--atomix-list-group-item-border-color);
20125
- background: var(--atomix-list-group-item-bg);
21228
+ background-color: var(--atomix-list-group-item-bg);
20126
21229
  }
20127
21230
  .c-list-group__item--primary {
20128
21231
  --atomix-list-group-item-bg: var(--atomix-brand-bg-subtle);
@@ -20187,7 +21290,7 @@ a, a:hover {
20187
21290
  left: 0;
20188
21291
  width: var(--atomix-list-item-dash-width);
20189
21292
  height: var(--atomix-list-item-dash-height);
20190
- background: var(--atomix-list-color);
21293
+ background-color: var(--atomix-list-color);
20191
21294
  transform: translateY(-50%);
20192
21295
  }
20193
21296
  .c-list--number {
@@ -20514,7 +21617,7 @@ a, a:hover {
20514
21617
  flex-wrap: wrap;
20515
21618
  padding: var(--atomix-messages-file-padding-y) var(--atomix-messages-file-padding-x);
20516
21619
  border-radius: 0.25rem var(--atomix-messages-file-border-radius) var(--atomix-messages-file-border-radius) 0.25rem;
20517
- background: var(--atomix-messages-file-bg);
21620
+ background-color: var(--atomix-messages-file-bg);
20518
21621
  }
20519
21622
  .c-messages__file-icon {
20520
21623
  display: grid !important;
@@ -20890,14 +21993,14 @@ a, a:hover {
20890
21993
  left: 50%;
20891
21994
  transform: translateX(-50%);
20892
21995
  z-index: 1000;
20893
- background: var(--atomix-body-bg);
21996
+ background-color: var(--atomix-body-bg);
20894
21997
  border: 1px solid var(--atomix-border-color);
20895
21998
  border-radius: 50rem;
20896
21999
  box-shadow: var(--atomix-box-shadow-lg);
20897
22000
  padding: 0.5rem 1rem;
20898
22001
  -webkit-backdrop-filter: blur(10px);
20899
22002
  backdrop-filter: blur(10px);
20900
- background: rgba(var(--atomix-body-bg-rgb), 0.95);
22003
+ background-color: rgba(var(--atomix-body-bg-rgb), 0.95);
20901
22004
  }
20902
22005
  .c-nav--float-top-center .c-nav__item + .c-nav--float-top-center .c-nav__item, .c-nav--float-top-center .c-nav__item + .c-nav--float-bottom-center .c-nav__item, .c-nav--float-bottom-center .c-nav__item + .c-nav--float-top-center .c-nav__item, .c-nav--float-bottom-center .c-nav__item + .c-nav--float-bottom-center .c-nav__item {
20903
22006
  margin-left: 0.25rem;
@@ -21305,7 +22408,7 @@ a, a:hover {
21305
22408
  max-width: var(--atomix-callout-width);
21306
22409
  gap: var(--atomix-callout-actions-spacer);
21307
22410
  padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
21308
- background: var(--atomix-callout-bg);
22411
+ background-color: var(--atomix-callout-bg);
21309
22412
  border-radius: var(--atomix-callout-border-radius);
21310
22413
  border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
21311
22414
  transition: opacity var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing), transform var(--atomix-callout-transition-duration) var(--atomix-callout-transition-timing);
@@ -21344,9 +22447,9 @@ a, a:hover {
21344
22447
  .c-callout__actions {
21345
22448
  display: flex;
21346
22449
  align-items: center;
21347
- flex-wrap: wrap;
21348
22450
  gap: var(--atomix-callout-actions-spacer);
21349
22451
  margin-left: auto;
22452
+ margin-right: 10px;
21350
22453
  }
21351
22454
  .c-callout__close-btn {
21352
22455
  display: inline-flex;
@@ -21448,9 +22551,35 @@ a, a:hover {
21448
22551
  --atomix-callout-title-color: var(--atomix-light);
21449
22552
  --atomix-callout-text-color: #d1d5db;
21450
22553
  --atomix-callout-bg: var(--atomix-dark);
21451
- --atomix-callout-border-color: var(--atomix-primary-border-subtle);
22554
+ --atomix-callout-border-color: var(--atomix-dark-border-subtle);
21452
22555
  --atomix-callout-icon-color: var(--atomix-light);
21453
22556
  }
22557
+ .c-callout--glass {
22558
+ background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
22559
+ padding: 0;
22560
+ border: none;
22561
+ display: block;
22562
+ }
22563
+ .c-callout--glass .c-callout__glass-content {
22564
+ display: flex;
22565
+ justify-content: center;
22566
+ align-items: center;
22567
+ padding: var(--atomix-callout-padding-y) var(--atomix-callout-padding-x);
22568
+ border: var(--atomix-callout-border-witdh) solid var(--atomix-callout-border-color);
22569
+ max-width: var(--atomix-callout-width);
22570
+ border-radius: var(--atomix-callout-border-radius);
22571
+ width: 100%;
22572
+ }
22573
+ .c-callout--glass .c-callout__title {
22574
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
22575
+ }
22576
+ .c-callout--glass .c-callout__text {
22577
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
22578
+ }
22579
+ .c-callout--glass.c-callout--toast {
22580
+ background-color: color-mix(in srgb, var(--atomix-callout-bg) 50%, transparent);
22581
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
22582
+ }
21454
22583
  .c-callout.is-hide {
21455
22584
  opacity: 0;
21456
22585
  transform: translateY(-10px);
@@ -21675,7 +22804,7 @@ a, a:hover {
21675
22804
  flex-direction: column;
21676
22805
  gap: var(--atomix-popover-inner-gap-y) var(--atomix-popover-inner-gap-x);
21677
22806
  padding: var(--atomix-popover-padding-y) var(--atomix-popover-padding-x);
21678
- background: var(--atomix-popover-bg);
22807
+ background-color: var(--atomix-popover-bg);
21679
22808
  border-radius: var(--atomix-popover-border-radius);
21680
22809
  box-shadow: var(--atomix-popover-box-shadow);
21681
22810
  }
@@ -21683,7 +22812,7 @@ a, a:hover {
21683
22812
  position: absolute;
21684
22813
  width: var(--atomix-popover-arrow-size);
21685
22814
  height: var(--atomix-popover-arrow-size);
21686
- background: var(--atomix-popover-bg);
22815
+ background-color: var(--atomix-popover-bg);
21687
22816
  box-shadow: var(--atomix-popover-box-shadow);
21688
22817
  z-index: 1;
21689
22818
  transform-origin: center;
@@ -22068,7 +23197,7 @@ a, a:hover {
22068
23197
  .c-river__overlay {
22069
23198
  position: absolute;
22070
23199
  inset: 0;
22071
- background: var(--atomix-river-overlay);
23200
+ background-color: var(--atomix-river-overlay);
22072
23201
  opacity: var(--atomix-river-overlay-opacity);
22073
23202
  border-radius: var(--atomix-river-border-radius);
22074
23203
  }
@@ -22484,7 +23613,7 @@ a, a:hover {
22484
23613
  --atomix-side-menu-inner-padding-top: 1.5rem;
22485
23614
  width: 100%;
22486
23615
  padding: var(--atomix-side-menu-padding-y) var(--atomix-side-menu-padding-x);
22487
- background: var(--atomix-side-menu-bg);
23616
+ background-color: var(--atomix-side-menu-bg);
22488
23617
  border-radius: var(--atomix-side-menu-border-radius);
22489
23618
  border: var(--atomix-side-menu-border-width) solid var(--atomix-side-menu-border-color);
22490
23619
  box-shadow: var(--atomix-side-menu-box-shadow);
@@ -22522,7 +23651,7 @@ a, a:hover {
22522
23651
  justify-content: space-between;
22523
23652
  width: 100%;
22524
23653
  padding: var(--atomix-side-menu-toggler-padding-y) var(--atomix-side-menu-toggler-padding-x);
22525
- background: var(--atomix-side-menu-toggler-bg);
23654
+ background-color: var(--atomix-side-menu-toggler-bg);
22526
23655
  border: none;
22527
23656
  border-radius: var(--atomix-side-menu-toggler-border-radius);
22528
23657
  cursor: pointer;
@@ -22538,7 +23667,7 @@ a, a:hover {
22538
23667
  }
22539
23668
  }
22540
23669
  .c-side-menu__toggler:hover {
22541
- background: var(--atomix-side-menu-toggler-hover-bg);
23670
+ background-color: var(--atomix-side-menu-toggler-hover-bg);
22542
23671
  }
22543
23672
  .c-side-menu__toggler:focus {
22544
23673
  outline: 2px solid var(--atomix-focus-ring-color);
@@ -22576,7 +23705,7 @@ a, a:hover {
22576
23705
  color: var(--atomix-side-menu-item-color);
22577
23706
  font-size: var(--atomix-side-menu-item-font-size);
22578
23707
  font-weight: var(--atomix-side-menu-item-font-weight);
22579
- background: var(--atomix-side-menu-item-bg);
23708
+ background-color: var(--atomix-side-menu-item-bg);
22580
23709
  border: none;
22581
23710
  border-radius: var(--atomix-side-menu-item-border-radius);
22582
23711
  text-decoration: none;
@@ -22585,7 +23714,7 @@ a, a:hover {
22585
23714
  }
22586
23715
  .c-side-menu__link:hover {
22587
23716
  color: var(--atomix-side-menu-item-hover-color);
22588
- background: var(--atomix-side-menu-item-hover-bg);
23717
+ background-color: var(--atomix-side-menu-item-hover-bg);
22589
23718
  text-decoration: none;
22590
23719
  }
22591
23720
  .c-side-menu__link:focus {
@@ -22597,12 +23726,12 @@ a, a:hover {
22597
23726
  }
22598
23727
  .c-side-menu__link.is-active {
22599
23728
  color: var(--atomix-side-menu-item-active-color);
22600
- background: var(--atomix-side-menu-item-active-bg);
23729
+ background-color: var(--atomix-side-menu-item-active-bg);
22601
23730
  font-weight: 500;
22602
23731
  }
22603
23732
  .c-side-menu__link.is-disabled, .c-side-menu__link[aria-disabled=true] {
22604
23733
  color: var(--atomix-side-menu-item-disabled-color);
22605
- background: var(--atomix-side-menu-item-disabled-bg);
23734
+ background-color: var(--atomix-side-menu-item-disabled-bg);
22606
23735
  cursor: not-allowed;
22607
23736
  pointer-events: none;
22608
23737
  opacity: 0.6;
@@ -22646,7 +23775,7 @@ a, a:hover {
22646
23775
  display: inline-block;
22647
23776
  width: var(--atomix-skeleton-width);
22648
23777
  min-height: var(--atomix-skeleton-height);
22649
- background: linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%);
23778
+ background-color: linear-gradient(90deg, var(--atomix-skeleton-gradient-from-color) 25%, var(--atomix-skeleton-gradient-to-color) 37%, var(--atomix-skeleton-gradient-from-color) 63%);
22650
23779
  background-size: 400% 100%;
22651
23780
  border-radius: var(--atomix-skeleton-border-radius);
22652
23781
  animation-name: atomix--skeleton-loading;
@@ -22742,7 +23871,7 @@ a, a:hover {
22742
23871
  display: flex;
22743
23872
  align-items: center;
22744
23873
  justify-content: center;
22745
- background: var(--atomix-secondary-bg-subtle);
23874
+ background-color: var(--atomix-secondary-bg-subtle);
22746
23875
  border: 2px dashed var(--atomix-primary-border-subtle);
22747
23876
  border-radius: 0.25rem;
22748
23877
  }
@@ -22782,7 +23911,7 @@ a, a:hover {
22782
23911
  height: var(--atomix-slider-nav-size);
22783
23912
  border: none;
22784
23913
  border-radius: 50rem;
22785
- background: var(--atomix-primary-bg-subtle);
23914
+ background-color: var(--atomix-primary-bg-subtle);
22786
23915
  color: var(--atomix-primary-text);
22787
23916
  cursor: pointer;
22788
23917
  pointer-events: auto;
@@ -22795,7 +23924,7 @@ a, a:hover {
22795
23924
  }
22796
23925
  .c-slider__navigation-prev:hover,
22797
23926
  .c-slider__navigation-next:hover {
22798
- background: var(--atomix-secondary-bg-subtle);
23927
+ background-color: var(--atomix-secondary-bg-subtle);
22799
23928
  transform: translateY(-50%) scale(1.05);
22800
23929
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
22801
23930
  }
@@ -22847,20 +23976,20 @@ a, a:hover {
22847
23976
  height: 0.5rem;
22848
23977
  border-radius: 50rem;
22849
23978
  border: none;
22850
- background: var(--atomix-tertiary-bg-subtle);
23979
+ background-color: var(--atomix-tertiary-bg-subtle);
22851
23980
  cursor: pointer;
22852
23981
  pointer-events: auto;
22853
23982
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
22854
23983
  }
22855
23984
  .c-slider__pagination-bullet:hover {
22856
- background: var(--atomix-secondary-bg-subtle);
23985
+ background-color: var(--atomix-secondary-bg-subtle);
22857
23986
  transform: scale(1.2);
22858
23987
  }
22859
23988
  .c-slider__pagination-bullet:active {
22860
23989
  transform: scale(1.1);
22861
23990
  }
22862
23991
  .c-slider__pagination-bullet--active {
22863
- background: var(--atomix-primary);
23992
+ background-color: var(--atomix-primary);
22864
23993
  transform: scale(1.2);
22865
23994
  }
22866
23995
  .c-slider__empty-message {
@@ -23173,7 +24302,7 @@ a, a:hover {
23173
24302
  width: 100%;
23174
24303
  max-width: var(--atomix-testimonial-width);
23175
24304
  padding: var(--atomix-testimonial-padding-y) var(--atomix-testimonial-padding-x);
23176
- background: var(--atomix-testimonial-bg);
24305
+ background-color: var(--atomix-testimonial-bg);
23177
24306
  }
23178
24307
  .c-testimonial__quote {
23179
24308
  color: var(--atomix-testimonial-quote-color);
@@ -23364,7 +24493,7 @@ a, a:hover {
23364
24493
  width: var(--atomix-toggle-switch-handle-width);
23365
24494
  height: var(--atomix-toggle-switch-handle-height);
23366
24495
  margin: var(--atomix-toggle-switch-handle-margin);
23367
- background: var(--atomix-toggle-switch-handle-bg);
24496
+ background-color: var(--atomix-toggle-switch-handle-bg);
23368
24497
  border-radius: var(--atomix-toggle-switch-handle-border-radius);
23369
24498
  transition-property: all;
23370
24499
  transition-duration: 0.2s;
@@ -23385,7 +24514,7 @@ a, a:hover {
23385
24514
  pointer-events: none;
23386
24515
  }
23387
24516
  .c-toggle.is-disabled:not(.is-on) .c-toggle__switch {
23388
- background: var(--atomix-toggle-switch-disabled-bg);
24517
+ background-color: var(--atomix-toggle-switch-disabled-bg);
23389
24518
  }
23390
24519
  .c-toggle.is-disabled.is-on {
23391
24520
  pointer-events: none;
@@ -23394,7 +24523,7 @@ a, a:hover {
23394
24523
  content: "";
23395
24524
  position: absolute;
23396
24525
  inset: 0;
23397
- background: rgba(107, 114, 128, 0.6);
24526
+ background-color: rgba(107, 114, 128, 0.6);
23398
24527
  border-radius: var(--atomix-toggle-switch-handle-border-radius);
23399
24528
  }
23400
24529
  .c-tooltip {
@@ -23718,34 +24847,34 @@ a, a:hover {
23718
24847
  pointer-events: none;
23719
24848
  }
23720
24849
  .c-video-player {
23721
- --atomix-video-player-bg: #000;
23722
- --atomix-video-player-border-radius: 8px;
23723
- --atomix-video-player-controls-padding: 20px 16px 16px;
23724
- --atomix-video-player-progress-height: 4px;
23725
- --atomix-video-player-button-size: 40px;
23726
- --atomix-video-player-font-size: 14px;
23727
- --atomix-video-player-transition: all 0.3s ease;
23728
- --atomix-video-player-volume-width: 80px;
23729
- --atomix-video-player-volume-width-mobile: 60px;
23730
- --atomix-video-player-volume-height: 4px;
23731
- --atomix-video-player-volume-height-hover: 6px;
23732
- --atomix-video-player-volume-thumb-size: 12px;
23733
- --atomix-video-player-volume-bg: rgba(255, 255, 255, 0.3);
23734
- --atomix-video-player-volume-bg-hover: rgba(255, 255, 255, 0.5);
23735
- --atomix-video-player-volume-fill: var(--atomix-color-primary);
23736
- --atomix-video-player-volume-fill-hover: var(--atomix-color-primary-light);
23737
- --atomix-video-player-volume-fill-active: var(--atomix-color-primary-dark);
23738
- --atomix-video-player-subtitle-bg: rgba(0, 0, 0, 0.85);
23739
- --atomix-video-player-subtitle-color: #ffffff;
23740
- --atomix-video-player-subtitle-font-size: 18px;
23741
- --atomix-video-player-subtitle-font-weight: 500;
23742
- --atomix-video-player-subtitle-line-height: 1.5;
23743
- --atomix-video-player-subtitle-border-radius: 6px;
23744
- --atomix-video-player-subtitle-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
23745
- --atomix-video-player-subtitle-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
24850
+ --atomix--video-player-bg: #000;
24851
+ --atomix--video-player-border-radius: 8px;
24852
+ --atomix--video-player-controls-padding: 20px 16px 16px;
24853
+ --atomix--video-player-progress-height: 4px;
24854
+ --atomix--video-player-button-size: 40px;
24855
+ --atomix--video-player-font-size: 14px;
24856
+ --atomix--video-player-transition: all 0.3s ease;
24857
+ --atomix--video-player-volume-width: 80px;
24858
+ --atomix--video-player-volume-width-mobile: 60px;
24859
+ --atomix--video-player-volume-height: 4px;
24860
+ --atomix--video-player-volume-height-hover: 6px;
24861
+ --atomix--video-player-volume-thumb-size: 12px;
24862
+ --atomix--video-player-volume-bg: rgba(255, 255, 255, 0.3);
24863
+ --atomix--video-player-volume-bg-hover: rgba(255, 255, 255, 0.5);
24864
+ --atomix--video-player-volume-fill: var(--atomix-color-primary);
24865
+ --atomix--video-player-volume-fill-hover: var(--atomix-color-primary-light);
24866
+ --atomix--video-player-volume-fill-active: var(--atomix-color-primary-dark);
24867
+ --atomix--video-player-subtitle-bg: rgba(0, 0, 0, 0.85);
24868
+ --atomix--video-player-subtitle-color: #ffffff;
24869
+ --atomix--video-player-subtitle-font-size: 18px;
24870
+ --atomix--video-player-subtitle-font-weight: 500;
24871
+ --atomix--video-player-subtitle-line-height: 1.5;
24872
+ --atomix--video-player-subtitle-border-radius: 6px;
24873
+ --atomix--video-player-subtitle-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
24874
+ --atomix--video-player-subtitle-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
23746
24875
  position: relative;
23747
24876
  width: 100%;
23748
- background: var(--atomix--video-player-bg, #000);
24877
+ background-color: var(--atomix--video-player-bg, #000);
23749
24878
  border-radius: var(--atomix--video-player-border-radius, 0.5rem);
23750
24879
  overflow: hidden;
23751
24880
  font-family: var(--atomix--font-family-base);
@@ -23999,7 +25128,7 @@ a, a:hover {
23999
25128
  bottom: 3.125rem;
24000
25129
  right: 0;
24001
25130
  min-width: 12.5rem;
24002
- background: rgba(var(--atomix-primary-rgb), 0.7);
25131
+ background-color: rgba(var(--atomix-primary-rgb), 0.7);
24003
25132
  border-radius: 0.5rem;
24004
25133
  padding: 0.5rem;
24005
25134
  -webkit-backdrop-filter: blur(10px);
@@ -24195,6 +25324,24 @@ a, a:hover {
24195
25324
  .c-video-player--ambient .c-video-player__ambient-canvas {
24196
25325
  display: block;
24197
25326
  }
25327
+ .c-video-player--glass {
25328
+ position: relative;
25329
+ }
25330
+ .c-video-player__glass-overlay {
25331
+ overflow: hidden;
25332
+ position: absolute;
25333
+ top: 0;
25334
+ left: 0;
25335
+ border-radius: var(--atomix--video-player-border-radius, 0.5rem);
25336
+ }
25337
+ .c-video-player__glass-content {
25338
+ position: absolute;
25339
+ top: 0;
25340
+ left: 0;
25341
+ right: 0;
25342
+ bottom: 0;
25343
+ pointer-events: auto;
25344
+ }
24198
25345
  .c-video-player__subtitles {
24199
25346
  position: absolute;
24200
25347
  bottom: 5rem;
@@ -24249,7 +25396,7 @@ a, a:hover {
24249
25396
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
24250
25397
  }
24251
25398
  .c-photo-viewer__container {
24252
- background: var(--atomix-body-bg);
25399
+ background-color: var(--atomix-body-bg);
24253
25400
  border: 1px solid var(--atomix-primary-border-subtle);
24254
25401
  border-radius: 0.625rem;
24255
25402
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
@@ -24303,7 +25450,7 @@ a, a:hover {
24303
25450
  border: 2px solid transparent;
24304
25451
  border-radius: 8px;
24305
25452
  padding: 0;
24306
- background: transparent;
25453
+ background-color: transparent;
24307
25454
  cursor: pointer;
24308
25455
  overflow: hidden;
24309
25456
  position: relative;
@@ -24361,7 +25508,7 @@ body.is-open-photoviewer {
24361
25508
  width: 100vw;
24362
25509
  height: 100vh;
24363
25510
  z-index: 1000;
24364
- background: transparent;
25511
+ background-color: transparent;
24365
25512
  opacity: 1;
24366
25513
  transition-property: opacity;
24367
25514
  }
@@ -25930,19 +27077,19 @@ body.is-open-photoviewer {
25930
27077
  .u-m-1 {
25931
27078
  margin: 0.25rem;
25932
27079
  }
25933
- .u-m-1\.5 {
27080
+ .u-m-2 {
25934
27081
  margin: 0.375rem;
25935
27082
  }
25936
27083
  .u-m-2 {
25937
27084
  margin: 0.5rem;
25938
27085
  }
25939
- .u-m-2\.5 {
27086
+ .u-m-3 {
25940
27087
  margin: 0.625rem;
25941
27088
  }
25942
27089
  .u-m-3 {
25943
27090
  margin: 0.75rem;
25944
27091
  }
25945
- .u-m-3\.5 {
27092
+ .u-m-4 {
25946
27093
  margin: 0.875rem;
25947
27094
  }
25948
27095
  .u-m-4 {
@@ -25951,12 +27098,18 @@ body.is-open-photoviewer {
25951
27098
  .u-m-5 {
25952
27099
  margin: 1.25rem;
25953
27100
  }
27101
+ .u-m-6 {
27102
+ margin: 1.375rem;
27103
+ }
25954
27104
  .u-m-6 {
25955
27105
  margin: 1.5rem;
25956
27106
  }
25957
27107
  .u-m-7 {
25958
27108
  margin: 1.75rem;
25959
27109
  }
27110
+ .u-m-8 {
27111
+ margin: 1.875rem;
27112
+ }
25960
27113
  .u-m-8 {
25961
27114
  margin: 2rem;
25962
27115
  }
@@ -26037,7 +27190,7 @@ body.is-open-photoviewer {
26037
27190
  margin-right: 0.25rem;
26038
27191
  margin-left: 0.25rem;
26039
27192
  }
26040
- .u-mx-1\.5 {
27193
+ .u-mx-2 {
26041
27194
  margin-right: 0.375rem;
26042
27195
  margin-left: 0.375rem;
26043
27196
  }
@@ -26045,7 +27198,7 @@ body.is-open-photoviewer {
26045
27198
  margin-right: 0.5rem;
26046
27199
  margin-left: 0.5rem;
26047
27200
  }
26048
- .u-mx-2\.5 {
27201
+ .u-mx-3 {
26049
27202
  margin-right: 0.625rem;
26050
27203
  margin-left: 0.625rem;
26051
27204
  }
@@ -26053,7 +27206,7 @@ body.is-open-photoviewer {
26053
27206
  margin-right: 0.75rem;
26054
27207
  margin-left: 0.75rem;
26055
27208
  }
26056
- .u-mx-3\.5 {
27209
+ .u-mx-4 {
26057
27210
  margin-right: 0.875rem;
26058
27211
  margin-left: 0.875rem;
26059
27212
  }
@@ -26065,6 +27218,10 @@ body.is-open-photoviewer {
26065
27218
  margin-right: 1.25rem;
26066
27219
  margin-left: 1.25rem;
26067
27220
  }
27221
+ .u-mx-6 {
27222
+ margin-right: 1.375rem;
27223
+ margin-left: 1.375rem;
27224
+ }
26068
27225
  .u-mx-6 {
26069
27226
  margin-right: 1.5rem;
26070
27227
  margin-left: 1.5rem;
@@ -26073,6 +27230,10 @@ body.is-open-photoviewer {
26073
27230
  margin-right: 1.75rem;
26074
27231
  margin-left: 1.75rem;
26075
27232
  }
27233
+ .u-mx-8 {
27234
+ margin-right: 1.875rem;
27235
+ margin-left: 1.875rem;
27236
+ }
26076
27237
  .u-mx-8 {
26077
27238
  margin-right: 2rem;
26078
27239
  margin-left: 2rem;
@@ -26177,7 +27338,7 @@ body.is-open-photoviewer {
26177
27338
  margin-top: 0.25rem;
26178
27339
  margin-bottom: 0.25rem;
26179
27340
  }
26180
- .u-my-1\.5 {
27341
+ .u-my-2 {
26181
27342
  margin-top: 0.375rem;
26182
27343
  margin-bottom: 0.375rem;
26183
27344
  }
@@ -26185,7 +27346,7 @@ body.is-open-photoviewer {
26185
27346
  margin-top: 0.5rem;
26186
27347
  margin-bottom: 0.5rem;
26187
27348
  }
26188
- .u-my-2\.5 {
27349
+ .u-my-3 {
26189
27350
  margin-top: 0.625rem;
26190
27351
  margin-bottom: 0.625rem;
26191
27352
  }
@@ -26193,7 +27354,7 @@ body.is-open-photoviewer {
26193
27354
  margin-top: 0.75rem;
26194
27355
  margin-bottom: 0.75rem;
26195
27356
  }
26196
- .u-my-3\.5 {
27357
+ .u-my-4 {
26197
27358
  margin-top: 0.875rem;
26198
27359
  margin-bottom: 0.875rem;
26199
27360
  }
@@ -26205,6 +27366,10 @@ body.is-open-photoviewer {
26205
27366
  margin-top: 1.25rem;
26206
27367
  margin-bottom: 1.25rem;
26207
27368
  }
27369
+ .u-my-6 {
27370
+ margin-top: 1.375rem;
27371
+ margin-bottom: 1.375rem;
27372
+ }
26208
27373
  .u-my-6 {
26209
27374
  margin-top: 1.5rem;
26210
27375
  margin-bottom: 1.5rem;
@@ -26213,6 +27378,10 @@ body.is-open-photoviewer {
26213
27378
  margin-top: 1.75rem;
26214
27379
  margin-bottom: 1.75rem;
26215
27380
  }
27381
+ .u-my-8 {
27382
+ margin-top: 1.875rem;
27383
+ margin-bottom: 1.875rem;
27384
+ }
26216
27385
  .u-my-8 {
26217
27386
  margin-top: 2rem;
26218
27387
  margin-bottom: 2rem;
@@ -26315,19 +27484,19 @@ body.is-open-photoviewer {
26315
27484
  .u-mt-1 {
26316
27485
  margin-top: 0.25rem;
26317
27486
  }
26318
- .u-mt-1\.5 {
27487
+ .u-mt-2 {
26319
27488
  margin-top: 0.375rem;
26320
27489
  }
26321
27490
  .u-mt-2 {
26322
27491
  margin-top: 0.5rem;
26323
27492
  }
26324
- .u-mt-2\.5 {
27493
+ .u-mt-3 {
26325
27494
  margin-top: 0.625rem;
26326
27495
  }
26327
27496
  .u-mt-3 {
26328
27497
  margin-top: 0.75rem;
26329
27498
  }
26330
- .u-mt-3\.5 {
27499
+ .u-mt-4 {
26331
27500
  margin-top: 0.875rem;
26332
27501
  }
26333
27502
  .u-mt-4 {
@@ -26336,12 +27505,18 @@ body.is-open-photoviewer {
26336
27505
  .u-mt-5 {
26337
27506
  margin-top: 1.25rem;
26338
27507
  }
27508
+ .u-mt-6 {
27509
+ margin-top: 1.375rem;
27510
+ }
26339
27511
  .u-mt-6 {
26340
27512
  margin-top: 1.5rem;
26341
27513
  }
26342
27514
  .u-mt-7 {
26343
27515
  margin-top: 1.75rem;
26344
27516
  }
27517
+ .u-mt-8 {
27518
+ margin-top: 1.875rem;
27519
+ }
26345
27520
  .u-mt-8 {
26346
27521
  margin-top: 2rem;
26347
27522
  }
@@ -26420,19 +27595,19 @@ body.is-open-photoviewer {
26420
27595
  .u-me-1 {
26421
27596
  margin-right: 0.25rem;
26422
27597
  }
26423
- .u-me-1\.5 {
27598
+ .u-me-2 {
26424
27599
  margin-right: 0.375rem;
26425
27600
  }
26426
27601
  .u-me-2 {
26427
27602
  margin-right: 0.5rem;
26428
27603
  }
26429
- .u-me-2\.5 {
27604
+ .u-me-3 {
26430
27605
  margin-right: 0.625rem;
26431
27606
  }
26432
27607
  .u-me-3 {
26433
27608
  margin-right: 0.75rem;
26434
27609
  }
26435
- .u-me-3\.5 {
27610
+ .u-me-4 {
26436
27611
  margin-right: 0.875rem;
26437
27612
  }
26438
27613
  .u-me-4 {
@@ -26441,12 +27616,18 @@ body.is-open-photoviewer {
26441
27616
  .u-me-5 {
26442
27617
  margin-right: 1.25rem;
26443
27618
  }
27619
+ .u-me-6 {
27620
+ margin-right: 1.375rem;
27621
+ }
26444
27622
  .u-me-6 {
26445
27623
  margin-right: 1.5rem;
26446
27624
  }
26447
27625
  .u-me-7 {
26448
27626
  margin-right: 1.75rem;
26449
27627
  }
27628
+ .u-me-8 {
27629
+ margin-right: 1.875rem;
27630
+ }
26450
27631
  .u-me-8 {
26451
27632
  margin-right: 2rem;
26452
27633
  }
@@ -26525,19 +27706,19 @@ body.is-open-photoviewer {
26525
27706
  .u-mb-1 {
26526
27707
  margin-bottom: 0.25rem;
26527
27708
  }
26528
- .u-mb-1\.5 {
27709
+ .u-mb-2 {
26529
27710
  margin-bottom: 0.375rem;
26530
27711
  }
26531
27712
  .u-mb-2 {
26532
27713
  margin-bottom: 0.5rem;
26533
27714
  }
26534
- .u-mb-2\.5 {
27715
+ .u-mb-3 {
26535
27716
  margin-bottom: 0.625rem;
26536
27717
  }
26537
27718
  .u-mb-3 {
26538
27719
  margin-bottom: 0.75rem;
26539
27720
  }
26540
- .u-mb-3\.5 {
27721
+ .u-mb-4 {
26541
27722
  margin-bottom: 0.875rem;
26542
27723
  }
26543
27724
  .u-mb-4 {
@@ -26546,12 +27727,18 @@ body.is-open-photoviewer {
26546
27727
  .u-mb-5 {
26547
27728
  margin-bottom: 1.25rem;
26548
27729
  }
27730
+ .u-mb-6 {
27731
+ margin-bottom: 1.375rem;
27732
+ }
26549
27733
  .u-mb-6 {
26550
27734
  margin-bottom: 1.5rem;
26551
27735
  }
26552
27736
  .u-mb-7 {
26553
27737
  margin-bottom: 1.75rem;
26554
27738
  }
27739
+ .u-mb-8 {
27740
+ margin-bottom: 1.875rem;
27741
+ }
26555
27742
  .u-mb-8 {
26556
27743
  margin-bottom: 2rem;
26557
27744
  }
@@ -26630,19 +27817,19 @@ body.is-open-photoviewer {
26630
27817
  .u-ms-1 {
26631
27818
  margin-left: 0.25rem;
26632
27819
  }
26633
- .u-ms-1\.5 {
27820
+ .u-ms-2 {
26634
27821
  margin-left: 0.375rem;
26635
27822
  }
26636
27823
  .u-ms-2 {
26637
27824
  margin-left: 0.5rem;
26638
27825
  }
26639
- .u-ms-2\.5 {
27826
+ .u-ms-3 {
26640
27827
  margin-left: 0.625rem;
26641
27828
  }
26642
27829
  .u-ms-3 {
26643
27830
  margin-left: 0.75rem;
26644
27831
  }
26645
- .u-ms-3\.5 {
27832
+ .u-ms-4 {
26646
27833
  margin-left: 0.875rem;
26647
27834
  }
26648
27835
  .u-ms-4 {
@@ -26651,12 +27838,18 @@ body.is-open-photoviewer {
26651
27838
  .u-ms-5 {
26652
27839
  margin-left: 1.25rem;
26653
27840
  }
27841
+ .u-ms-6 {
27842
+ margin-left: 1.375rem;
27843
+ }
26654
27844
  .u-ms-6 {
26655
27845
  margin-left: 1.5rem;
26656
27846
  }
26657
27847
  .u-ms-7 {
26658
27848
  margin-left: 1.75rem;
26659
27849
  }
27850
+ .u-ms-8 {
27851
+ margin-left: 1.875rem;
27852
+ }
26660
27853
  .u-ms-8 {
26661
27854
  margin-left: 2rem;
26662
27855
  }
@@ -26735,19 +27928,19 @@ body.is-open-photoviewer {
26735
27928
  .u-p-1 {
26736
27929
  padding: 0.25rem;
26737
27930
  }
26738
- .u-p-1\.5 {
27931
+ .u-p-2 {
26739
27932
  padding: 0.375rem;
26740
27933
  }
26741
27934
  .u-p-2 {
26742
27935
  padding: 0.5rem;
26743
27936
  }
26744
- .u-p-2\.5 {
27937
+ .u-p-3 {
26745
27938
  padding: 0.625rem;
26746
27939
  }
26747
27940
  .u-p-3 {
26748
27941
  padding: 0.75rem;
26749
27942
  }
26750
- .u-p-3\.5 {
27943
+ .u-p-4 {
26751
27944
  padding: 0.875rem;
26752
27945
  }
26753
27946
  .u-p-4 {
@@ -26756,12 +27949,18 @@ body.is-open-photoviewer {
26756
27949
  .u-p-5 {
26757
27950
  padding: 1.25rem;
26758
27951
  }
27952
+ .u-p-6 {
27953
+ padding: 1.375rem;
27954
+ }
26759
27955
  .u-p-6 {
26760
27956
  padding: 1.5rem;
26761
27957
  }
26762
27958
  .u-p-7 {
26763
27959
  padding: 1.75rem;
26764
27960
  }
27961
+ .u-p-8 {
27962
+ padding: 1.875rem;
27963
+ }
26765
27964
  .u-p-8 {
26766
27965
  padding: 2rem;
26767
27966
  }
@@ -26839,7 +28038,7 @@ body.is-open-photoviewer {
26839
28038
  padding-right: 0.25rem;
26840
28039
  padding-left: 0.25rem;
26841
28040
  }
26842
- .u-px-1\.5 {
28041
+ .u-px-2 {
26843
28042
  padding-right: 0.375rem;
26844
28043
  padding-left: 0.375rem;
26845
28044
  }
@@ -26847,7 +28046,7 @@ body.is-open-photoviewer {
26847
28046
  padding-right: 0.5rem;
26848
28047
  padding-left: 0.5rem;
26849
28048
  }
26850
- .u-px-2\.5 {
28049
+ .u-px-3 {
26851
28050
  padding-right: 0.625rem;
26852
28051
  padding-left: 0.625rem;
26853
28052
  }
@@ -26855,7 +28054,7 @@ body.is-open-photoviewer {
26855
28054
  padding-right: 0.75rem;
26856
28055
  padding-left: 0.75rem;
26857
28056
  }
26858
- .u-px-3\.5 {
28057
+ .u-px-4 {
26859
28058
  padding-right: 0.875rem;
26860
28059
  padding-left: 0.875rem;
26861
28060
  }
@@ -26867,6 +28066,10 @@ body.is-open-photoviewer {
26867
28066
  padding-right: 1.25rem;
26868
28067
  padding-left: 1.25rem;
26869
28068
  }
28069
+ .u-px-6 {
28070
+ padding-right: 1.375rem;
28071
+ padding-left: 1.375rem;
28072
+ }
26870
28073
  .u-px-6 {
26871
28074
  padding-right: 1.5rem;
26872
28075
  padding-left: 1.5rem;
@@ -26875,6 +28078,10 @@ body.is-open-photoviewer {
26875
28078
  padding-right: 1.75rem;
26876
28079
  padding-left: 1.75rem;
26877
28080
  }
28081
+ .u-px-8 {
28082
+ padding-right: 1.875rem;
28083
+ padding-left: 1.875rem;
28084
+ }
26878
28085
  .u-px-8 {
26879
28086
  padding-right: 2rem;
26880
28087
  padding-left: 2rem;
@@ -26975,7 +28182,7 @@ body.is-open-photoviewer {
26975
28182
  padding-top: 0.25rem;
26976
28183
  padding-bottom: 0.25rem;
26977
28184
  }
26978
- .u-py-1\.5 {
28185
+ .u-py-2 {
26979
28186
  padding-top: 0.375rem;
26980
28187
  padding-bottom: 0.375rem;
26981
28188
  }
@@ -26983,7 +28190,7 @@ body.is-open-photoviewer {
26983
28190
  padding-top: 0.5rem;
26984
28191
  padding-bottom: 0.5rem;
26985
28192
  }
26986
- .u-py-2\.5 {
28193
+ .u-py-3 {
26987
28194
  padding-top: 0.625rem;
26988
28195
  padding-bottom: 0.625rem;
26989
28196
  }
@@ -26991,7 +28198,7 @@ body.is-open-photoviewer {
26991
28198
  padding-top: 0.75rem;
26992
28199
  padding-bottom: 0.75rem;
26993
28200
  }
26994
- .u-py-3\.5 {
28201
+ .u-py-4 {
26995
28202
  padding-top: 0.875rem;
26996
28203
  padding-bottom: 0.875rem;
26997
28204
  }
@@ -27003,6 +28210,10 @@ body.is-open-photoviewer {
27003
28210
  padding-top: 1.25rem;
27004
28211
  padding-bottom: 1.25rem;
27005
28212
  }
28213
+ .u-py-6 {
28214
+ padding-top: 1.375rem;
28215
+ padding-bottom: 1.375rem;
28216
+ }
27006
28217
  .u-py-6 {
27007
28218
  padding-top: 1.5rem;
27008
28219
  padding-bottom: 1.5rem;
@@ -27011,6 +28222,10 @@ body.is-open-photoviewer {
27011
28222
  padding-top: 1.75rem;
27012
28223
  padding-bottom: 1.75rem;
27013
28224
  }
28225
+ .u-py-8 {
28226
+ padding-top: 1.875rem;
28227
+ padding-bottom: 1.875rem;
28228
+ }
27014
28229
  .u-py-8 {
27015
28230
  padding-top: 2rem;
27016
28231
  padding-bottom: 2rem;
@@ -27109,19 +28324,19 @@ body.is-open-photoviewer {
27109
28324
  .u-pt-1 {
27110
28325
  padding-top: 0.25rem;
27111
28326
  }
27112
- .u-pt-1\.5 {
28327
+ .u-pt-2 {
27113
28328
  padding-top: 0.375rem;
27114
28329
  }
27115
28330
  .u-pt-2 {
27116
28331
  padding-top: 0.5rem;
27117
28332
  }
27118
- .u-pt-2\.5 {
28333
+ .u-pt-3 {
27119
28334
  padding-top: 0.625rem;
27120
28335
  }
27121
28336
  .u-pt-3 {
27122
28337
  padding-top: 0.75rem;
27123
28338
  }
27124
- .u-pt-3\.5 {
28339
+ .u-pt-4 {
27125
28340
  padding-top: 0.875rem;
27126
28341
  }
27127
28342
  .u-pt-4 {
@@ -27130,12 +28345,18 @@ body.is-open-photoviewer {
27130
28345
  .u-pt-5 {
27131
28346
  padding-top: 1.25rem;
27132
28347
  }
28348
+ .u-pt-6 {
28349
+ padding-top: 1.375rem;
28350
+ }
27133
28351
  .u-pt-6 {
27134
28352
  padding-top: 1.5rem;
27135
28353
  }
27136
28354
  .u-pt-7 {
27137
28355
  padding-top: 1.75rem;
27138
28356
  }
28357
+ .u-pt-8 {
28358
+ padding-top: 1.875rem;
28359
+ }
27139
28360
  .u-pt-8 {
27140
28361
  padding-top: 2rem;
27141
28362
  }
@@ -27211,19 +28432,19 @@ body.is-open-photoviewer {
27211
28432
  .u-pe-1 {
27212
28433
  padding-right: 0.25rem;
27213
28434
  }
27214
- .u-pe-1\.5 {
28435
+ .u-pe-2 {
27215
28436
  padding-right: 0.375rem;
27216
28437
  }
27217
28438
  .u-pe-2 {
27218
28439
  padding-right: 0.5rem;
27219
28440
  }
27220
- .u-pe-2\.5 {
28441
+ .u-pe-3 {
27221
28442
  padding-right: 0.625rem;
27222
28443
  }
27223
28444
  .u-pe-3 {
27224
28445
  padding-right: 0.75rem;
27225
28446
  }
27226
- .u-pe-3\.5 {
28447
+ .u-pe-4 {
27227
28448
  padding-right: 0.875rem;
27228
28449
  }
27229
28450
  .u-pe-4 {
@@ -27232,12 +28453,18 @@ body.is-open-photoviewer {
27232
28453
  .u-pe-5 {
27233
28454
  padding-right: 1.25rem;
27234
28455
  }
28456
+ .u-pe-6 {
28457
+ padding-right: 1.375rem;
28458
+ }
27235
28459
  .u-pe-6 {
27236
28460
  padding-right: 1.5rem;
27237
28461
  }
27238
28462
  .u-pe-7 {
27239
28463
  padding-right: 1.75rem;
27240
28464
  }
28465
+ .u-pe-8 {
28466
+ padding-right: 1.875rem;
28467
+ }
27241
28468
  .u-pe-8 {
27242
28469
  padding-right: 2rem;
27243
28470
  }
@@ -27313,19 +28540,19 @@ body.is-open-photoviewer {
27313
28540
  .u-pb-1 {
27314
28541
  padding-bottom: 0.25rem;
27315
28542
  }
27316
- .u-pb-1\.5 {
28543
+ .u-pb-2 {
27317
28544
  padding-bottom: 0.375rem;
27318
28545
  }
27319
28546
  .u-pb-2 {
27320
28547
  padding-bottom: 0.5rem;
27321
28548
  }
27322
- .u-pb-2\.5 {
28549
+ .u-pb-3 {
27323
28550
  padding-bottom: 0.625rem;
27324
28551
  }
27325
28552
  .u-pb-3 {
27326
28553
  padding-bottom: 0.75rem;
27327
28554
  }
27328
- .u-pb-3\.5 {
28555
+ .u-pb-4 {
27329
28556
  padding-bottom: 0.875rem;
27330
28557
  }
27331
28558
  .u-pb-4 {
@@ -27334,12 +28561,18 @@ body.is-open-photoviewer {
27334
28561
  .u-pb-5 {
27335
28562
  padding-bottom: 1.25rem;
27336
28563
  }
28564
+ .u-pb-6 {
28565
+ padding-bottom: 1.375rem;
28566
+ }
27337
28567
  .u-pb-6 {
27338
28568
  padding-bottom: 1.5rem;
27339
28569
  }
27340
28570
  .u-pb-7 {
27341
28571
  padding-bottom: 1.75rem;
27342
28572
  }
28573
+ .u-pb-8 {
28574
+ padding-bottom: 1.875rem;
28575
+ }
27343
28576
  .u-pb-8 {
27344
28577
  padding-bottom: 2rem;
27345
28578
  }
@@ -27415,19 +28648,19 @@ body.is-open-photoviewer {
27415
28648
  .u-ps-1 {
27416
28649
  padding-left: 0.25rem;
27417
28650
  }
27418
- .u-ps-1\.5 {
28651
+ .u-ps-2 {
27419
28652
  padding-left: 0.375rem;
27420
28653
  }
27421
28654
  .u-ps-2 {
27422
28655
  padding-left: 0.5rem;
27423
28656
  }
27424
- .u-ps-2\.5 {
28657
+ .u-ps-3 {
27425
28658
  padding-left: 0.625rem;
27426
28659
  }
27427
28660
  .u-ps-3 {
27428
28661
  padding-left: 0.75rem;
27429
28662
  }
27430
- .u-ps-3\.5 {
28663
+ .u-ps-4 {
27431
28664
  padding-left: 0.875rem;
27432
28665
  }
27433
28666
  .u-ps-4 {
@@ -27436,12 +28669,18 @@ body.is-open-photoviewer {
27436
28669
  .u-ps-5 {
27437
28670
  padding-left: 1.25rem;
27438
28671
  }
28672
+ .u-ps-6 {
28673
+ padding-left: 1.375rem;
28674
+ }
27439
28675
  .u-ps-6 {
27440
28676
  padding-left: 1.5rem;
27441
28677
  }
27442
28678
  .u-ps-7 {
27443
28679
  padding-left: 1.75rem;
27444
28680
  }
28681
+ .u-ps-8 {
28682
+ padding-left: 1.875rem;
28683
+ }
27445
28684
  .u-ps-8 {
27446
28685
  padding-left: 2rem;
27447
28686
  }
@@ -27517,19 +28756,19 @@ body.is-open-photoviewer {
27517
28756
  .u-gap-1 {
27518
28757
  gap: 0.25rem;
27519
28758
  }
27520
- .u-gap-1\.5 {
28759
+ .u-gap-2 {
27521
28760
  gap: 0.375rem;
27522
28761
  }
27523
28762
  .u-gap-2 {
27524
28763
  gap: 0.5rem;
27525
28764
  }
27526
- .u-gap-2\.5 {
28765
+ .u-gap-3 {
27527
28766
  gap: 0.625rem;
27528
28767
  }
27529
28768
  .u-gap-3 {
27530
28769
  gap: 0.75rem;
27531
28770
  }
27532
- .u-gap-3\.5 {
28771
+ .u-gap-4 {
27533
28772
  gap: 0.875rem;
27534
28773
  }
27535
28774
  .u-gap-4 {
@@ -27538,12 +28777,18 @@ body.is-open-photoviewer {
27538
28777
  .u-gap-5 {
27539
28778
  gap: 1.25rem;
27540
28779
  }
28780
+ .u-gap-6 {
28781
+ gap: 1.375rem;
28782
+ }
27541
28783
  .u-gap-6 {
27542
28784
  gap: 1.5rem;
27543
28785
  }
27544
28786
  .u-gap-7 {
27545
28787
  gap: 1.75rem;
27546
28788
  }
28789
+ .u-gap-8 {
28790
+ gap: 1.875rem;
28791
+ }
27547
28792
  .u-gap-8 {
27548
28793
  gap: 2rem;
27549
28794
  }
@@ -27619,19 +28864,19 @@ body.is-open-photoviewer {
27619
28864
  .u-row-gap-1 {
27620
28865
  row-gap: 0.25rem;
27621
28866
  }
27622
- .u-row-gap-1\.5 {
28867
+ .u-row-gap-2 {
27623
28868
  row-gap: 0.375rem;
27624
28869
  }
27625
28870
  .u-row-gap-2 {
27626
28871
  row-gap: 0.5rem;
27627
28872
  }
27628
- .u-row-gap-2\.5 {
28873
+ .u-row-gap-3 {
27629
28874
  row-gap: 0.625rem;
27630
28875
  }
27631
28876
  .u-row-gap-3 {
27632
28877
  row-gap: 0.75rem;
27633
28878
  }
27634
- .u-row-gap-3\.5 {
28879
+ .u-row-gap-4 {
27635
28880
  row-gap: 0.875rem;
27636
28881
  }
27637
28882
  .u-row-gap-4 {
@@ -27640,12 +28885,18 @@ body.is-open-photoviewer {
27640
28885
  .u-row-gap-5 {
27641
28886
  row-gap: 1.25rem;
27642
28887
  }
28888
+ .u-row-gap-6 {
28889
+ row-gap: 1.375rem;
28890
+ }
27643
28891
  .u-row-gap-6 {
27644
28892
  row-gap: 1.5rem;
27645
28893
  }
27646
28894
  .u-row-gap-7 {
27647
28895
  row-gap: 1.75rem;
27648
28896
  }
28897
+ .u-row-gap-8 {
28898
+ row-gap: 1.875rem;
28899
+ }
27649
28900
  .u-row-gap-8 {
27650
28901
  row-gap: 2rem;
27651
28902
  }
@@ -27723,7 +28974,7 @@ body.is-open-photoviewer {
27723
28974
  -moz-column-gap: 0.25rem;
27724
28975
  column-gap: 0.25rem;
27725
28976
  }
27726
- .u-column-gap-1\.5 {
28977
+ .u-column-gap-2 {
27727
28978
  -moz-column-gap: 0.375rem;
27728
28979
  column-gap: 0.375rem;
27729
28980
  }
@@ -27731,7 +28982,7 @@ body.is-open-photoviewer {
27731
28982
  -moz-column-gap: 0.5rem;
27732
28983
  column-gap: 0.5rem;
27733
28984
  }
27734
- .u-column-gap-2\.5 {
28985
+ .u-column-gap-3 {
27735
28986
  -moz-column-gap: 0.625rem;
27736
28987
  column-gap: 0.625rem;
27737
28988
  }
@@ -27739,7 +28990,7 @@ body.is-open-photoviewer {
27739
28990
  -moz-column-gap: 0.75rem;
27740
28991
  column-gap: 0.75rem;
27741
28992
  }
27742
- .u-column-gap-3\.5 {
28993
+ .u-column-gap-4 {
27743
28994
  -moz-column-gap: 0.875rem;
27744
28995
  column-gap: 0.875rem;
27745
28996
  }
@@ -27751,6 +29002,10 @@ body.is-open-photoviewer {
27751
29002
  -moz-column-gap: 1.25rem;
27752
29003
  column-gap: 1.25rem;
27753
29004
  }
29005
+ .u-column-gap-6 {
29006
+ -moz-column-gap: 1.375rem;
29007
+ column-gap: 1.375rem;
29008
+ }
27754
29009
  .u-column-gap-6 {
27755
29010
  -moz-column-gap: 1.5rem;
27756
29011
  column-gap: 1.5rem;
@@ -27759,6 +29014,10 @@ body.is-open-photoviewer {
27759
29014
  -moz-column-gap: 1.75rem;
27760
29015
  column-gap: 1.75rem;
27761
29016
  }
29017
+ .u-column-gap-8 {
29018
+ -moz-column-gap: 1.875rem;
29019
+ column-gap: 1.875rem;
29020
+ }
27762
29021
  .u-column-gap-8 {
27763
29022
  -moz-column-gap: 2rem;
27764
29023
  column-gap: 2rem;