@zhang_jifan/fanui 2.1.0

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 (127) hide show
  1. package/ACCESSIBILITY.md +61 -0
  2. package/CHANGELOG.md +112 -0
  3. package/COMMERCIAL-LICENSE.md +71 -0
  4. package/DESIGN-SYSTEM.md +294 -0
  5. package/LICENSE +661 -0
  6. package/README.md +348 -0
  7. package/USAGE.md +1926 -0
  8. package/_index.scss +20 -0
  9. package/dist/fanui.cjs +15 -0
  10. package/dist/fanui.css +28209 -0
  11. package/dist/fanui.d.ts +353 -0
  12. package/dist/fanui.esm.js +71 -0
  13. package/dist/fanui.js +4782 -0
  14. package/dist/fanui.min.css +1 -0
  15. package/dist/fanui.mjs +71 -0
  16. package/dist/modules/fanui-advanced.css +830 -0
  17. package/dist/modules/fanui-advanced.min.css +129 -0
  18. package/dist/modules/fanui-alert.css +575 -0
  19. package/dist/modules/fanui-alert.min.css +122 -0
  20. package/dist/modules/fanui-badge.css +426 -0
  21. package/dist/modules/fanui-badge.min.css +77 -0
  22. package/dist/modules/fanui-base.css +1394 -0
  23. package/dist/modules/fanui-base.min.css +236 -0
  24. package/dist/modules/fanui-blog.css +762 -0
  25. package/dist/modules/fanui-blog.min.css +108 -0
  26. package/dist/modules/fanui-button.css +526 -0
  27. package/dist/modules/fanui-button.min.css +56 -0
  28. package/dist/modules/fanui-card.css +291 -0
  29. package/dist/modules/fanui-card.min.css +52 -0
  30. package/dist/modules/fanui-choice.css +539 -0
  31. package/dist/modules/fanui-choice.min.css +83 -0
  32. package/dist/modules/fanui-dashboard.css +1057 -0
  33. package/dist/modules/fanui-dashboard.min.css +160 -0
  34. package/dist/modules/fanui-data.css +687 -0
  35. package/dist/modules/fanui-data.min.css +125 -0
  36. package/dist/modules/fanui-feedback.css +432 -0
  37. package/dist/modules/fanui-feedback.min.css +79 -0
  38. package/dist/modules/fanui-form.css +779 -0
  39. package/dist/modules/fanui-form.min.css +123 -0
  40. package/dist/modules/fanui-glass.css +497 -0
  41. package/dist/modules/fanui-glass.min.css +46 -0
  42. package/dist/modules/fanui-input-plus.css +799 -0
  43. package/dist/modules/fanui-input-plus.min.css +124 -0
  44. package/dist/modules/fanui-interactive.css +960 -0
  45. package/dist/modules/fanui-interactive.min.css +138 -0
  46. package/dist/modules/fanui-layout.css +4399 -0
  47. package/dist/modules/fanui-layout.min.css +1172 -0
  48. package/dist/modules/fanui-marketing.css +1125 -0
  49. package/dist/modules/fanui-marketing.min.css +144 -0
  50. package/dist/modules/fanui-nav.css +458 -0
  51. package/dist/modules/fanui-nav.min.css +76 -0
  52. package/dist/modules/fanui-overlay.css +547 -0
  53. package/dist/modules/fanui-overlay.min.css +91 -0
  54. package/dist/modules/fanui-table.css +290 -0
  55. package/dist/modules/fanui-table.min.css +62 -0
  56. package/dist/modules/fanui-tabs.css +333 -0
  57. package/dist/modules/fanui-tabs.min.css +58 -0
  58. package/dist/modules/fanui-themes.css +2728 -0
  59. package/dist/modules/fanui-themes.min.css +40 -0
  60. package/dist/modules/fanui-tokens.css +587 -0
  61. package/dist/modules/fanui-tokens.min.css +3 -0
  62. package/dist/modules/fanui-utilities.css +6557 -0
  63. package/dist/modules/fanui-utilities.min.css +1762 -0
  64. package/dist/modules/sizes.json +103 -0
  65. package/docs/MIGRATION-v2.md +179 -0
  66. package/examples/01-script-tag.html +149 -0
  67. package/examples/02-react/README.md +39 -0
  68. package/examples/02-react/index.html +12 -0
  69. package/examples/02-react/package.json +20 -0
  70. package/examples/02-react/src/App.jsx +108 -0
  71. package/examples/02-react/src/main.jsx +13 -0
  72. package/examples/02-react/src/useFanUI.js +87 -0
  73. package/examples/02-react/vite.config.js +6 -0
  74. package/examples/03-vue3/README.md +67 -0
  75. package/examples/03-vue3/index.html +12 -0
  76. package/examples/03-vue3/package.json +19 -0
  77. package/examples/03-vue3/src/App.vue +93 -0
  78. package/examples/03-vue3/src/main.js +8 -0
  79. package/examples/03-vue3/src/useFanUI.js +85 -0
  80. package/examples/03-vue3/vite.config.js +6 -0
  81. package/examples/04-vue2-cdn.html +93 -0
  82. package/examples/README.md +34 -0
  83. package/package.json +127 -0
  84. package/src/_functions.scss +319 -0
  85. package/src/_mixins.scss +1202 -0
  86. package/src/_tokens.scss +180 -0
  87. package/src/_variables.scss +491 -0
  88. package/src/base/_animations.scss +210 -0
  89. package/src/base/_reset.scss +359 -0
  90. package/src/base/_rtl.scss +133 -0
  91. package/src/base/_typography.scss +353 -0
  92. package/src/components/_advanced.scss +763 -0
  93. package/src/components/_alert.scss +322 -0
  94. package/src/components/_badge.scss +279 -0
  95. package/src/components/_blog.scss +693 -0
  96. package/src/components/_button.scss +351 -0
  97. package/src/components/_capabilities.scss +463 -0
  98. package/src/components/_card.scss +281 -0
  99. package/src/components/_choice.scss +444 -0
  100. package/src/components/_dashboard.scss +950 -0
  101. package/src/components/_data.scss +618 -0
  102. package/src/components/_feedback.scss +403 -0
  103. package/src/components/_form.scss +408 -0
  104. package/src/components/_glass.scss +374 -0
  105. package/src/components/_input-plus.scss +730 -0
  106. package/src/components/_interactive.scss +885 -0
  107. package/src/components/_marketing.scss +982 -0
  108. package/src/components/_nav.scss +480 -0
  109. package/src/components/_overlay.scss +517 -0
  110. package/src/components/_table.scss +276 -0
  111. package/src/components/_tabs.scss +338 -0
  112. package/src/fanui.d.ts +353 -0
  113. package/src/fanui.js +4782 -0
  114. package/src/fanui.scss +79 -0
  115. package/src/glass/_switches.scss +36 -0
  116. package/src/glass/_tokens.scss +259 -0
  117. package/src/layout/_container.scss +111 -0
  118. package/src/layout/_flex.scss +164 -0
  119. package/src/layout/_grid.scss +180 -0
  120. package/src/themes/_accents.scss +201 -0
  121. package/src/themes/_palettes.scss +180 -0
  122. package/src/utilities/_borders.scss +104 -0
  123. package/src/utilities/_display.scss +145 -0
  124. package/src/utilities/_effects.scss +210 -0
  125. package/src/utilities/_sizing.scss +123 -0
  126. package/src/utilities/_spacing.scss +118 -0
  127. package/src/utilities/_texture.scss +323 -0
@@ -0,0 +1,144 @@
1
+ @charset "UTF-8";.fanui-announcement{display:flex;align-items:center;justify-content:center;gap:var(--fanui-space-3);padding:var(--fanui-space-2) var(--fanui-space-4);font-size:var(--fanui-font-size-sm);color:var(--fanui-primary-fg);background-image:var(--fanui-brand-grad);text-align:center}
2
+ .fanui-announcement a{color:inherit;text-decoration:underline;text-underline-offset:2px}
3
+ .fanui-announcement__badge{padding:1px 8px;font-size:var(--fanui-font-size-xs);font-weight:var(--fanui-font-weight-semibold);border-radius:var(--fanui-radius-full);background-color:rgba(255,255,255,0.22);color:#ffffff}
4
+ .fanui-announcement__close{margin-inline-start:var(--fanui-space-2);border:0;background:transparent;color:inherit;opacity:0.7;cursor:pointer}
5
+ .fanui-announcement__close:hover{opacity:1}
6
+ .fanui-announcement--soft{background-image:none;background-color:var(--fanui-primary-soft);color:var(--fanui-primary-ink)}
7
+ .fanui-announcement--soft .fanui-announcement__badge{background-color:rgba(255,255,255,0.7);color:var(--fanui-primary-ink)}
8
+ .fanui-hero{position:relative;isolation:isolate;overflow:hidden;padding-block:var(--fanui-space-24) var(--fanui-space-20);text-align:center}
9
+ .fanui-hero__aurora{position:absolute;inset:-20% -10% auto -10%;height:140%;z-index:-2;pointer-events:none;background:radial-gradient(42% 46% at 24% 26%,var(--fanui-brand-aura-a),transparent 62%),radial-gradient(38% 42% at 76% 22%,var(--fanui-brand-aura-b),transparent 60%),radial-gradient(52% 48% at 50% 84%,var(--fanui-primary-soft),transparent 68%);filter:blur(28px);opacity:0.9}
10
+ .fanui-hero__grid{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(100,116,139,0.1) 1px,transparent 1px),linear-gradient(90deg,rgba(100,116,139,0.1) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000 0%,transparent 100%);mask-image:radial-gradient(70% 60% at 50% 30%,#000 0%,transparent 100%)}
11
+ .fanui-hero__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--fanui-space-5);max-width:820px;margin-inline:auto}
12
+ .fanui-hero__eyebrow{display:inline-flex;align-items:center;gap:var(--fanui-space-2);padding:5px 12px 5px 6px;font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted);border-radius:var(--fanui-radius-full);position:relative;isolation:isolate;background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:radial-gradient(calc(var(--fanui-glass-specular-size-base) + var(--fanui-glass-specular-size-k) * var(--fanui-glass-intensity)) circle at var(--fanui-glass-mx,30%) var(--fanui-glass-my,0%),rgba(var(--fanui-glass-specular-rgb),calc(var(--fanui-glass-specular-a) * var(--fanui-glass-intensity) * var(--fanui-glass-specular-alpha))),transparent 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);background-repeat:no-repeat;background-size:100% 100%;border:1px solid rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));border-radius:var(--fanui-glass-radius,12px);color:var(--fanui-color-text);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))));transition:background-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,transform 300ms cubic-bezier(0.4,0,0.2,1) 0s}
13
+ .fanui-hero__eyebrow::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;padding:var(--fanui-glass-edge-width,calc(1px + 0.5px * var(--fanui-glass-intensity)));background:linear-gradient(var(--fanui-glass-edge-angle,150deg),rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 0%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 38%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 62%,rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--fanui-glass-edge-alpha,1)}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-hero__eyebrow{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
14
+ .fanui-hero__eyebrow{--fanui-glass-radius:9999px;--fanui-glass-intensity:0.6}
15
+ .fanui-hero__eyebrow-tag{padding:1px 8px;font-size:var(--fanui-font-size-xs);font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-primary-fg);background-color:var(--fanui-primary);border-radius:var(--fanui-radius-full)}
16
+ .fanui-hero__title{margin:0;font-size:clamp(2.25rem,5.2vw,4rem);font-weight:var(--fanui-font-weight-extrabold);line-height:1.1;letter-spacing:var(--fanui-tracking-tight);color:var(--fanui-color-text-strong);text-wrap:balance}
17
+ .fanui-hero__title em{font-style:normal;background-image:linear-gradient(100deg,var(--fanui-brand-grad-a),var(--fanui-brand-grad-b));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
18
+ .fanui-hero__lead{max-width:620px;margin:0;font-size:clamp(1rem,1.4vw,1.1875rem);line-height:var(--fanui-line-height-relaxed);color:var(--fanui-color-text-muted);text-wrap:pretty}
19
+ .fanui-hero__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--fanui-space-3)}
20
+ .fanui-hero__note{font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle)}
21
+ .fanui-hero__media{position:relative;width:100%;max-width:1080px;margin-top:var(--fanui-space-10);border-radius:var(--fanui-radius-2xl);overflow:hidden}
22
+ .fanui-hero__media img{display:block;width:100%;height:auto}
23
+ .fanui-hero__media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,0.5)}
24
+ .fanui-hero--split{text-align:start}
25
+ .fanui-hero--split .fanui-hero__inner{flex-direction:row;align-items:center;gap:var(--fanui-space-16);max-width:1200px;text-align:start}
26
+ .fanui-hero--split .fanui-hero__copy{flex:1 1 46%;display:flex;flex-direction:column;gap:var(--fanui-space-5);align-items:flex-start}
27
+ .fanui-hero--split .fanui-hero__media{flex:1 1 54%;margin-top:0}
28
+ .fanui-hero--split .fanui-hero__actions{justify-content:flex-start}@media (max-width:767.95px){.fanui-hero--split .fanui-hero__inner{flex-direction:column;gap:var(--fanui-space-10)}
29
+ .fanui-hero--split .fanui-hero__copy{align-items:center;text-align:center}
30
+ .fanui-hero--split .fanui-hero__actions{justify-content:center}}
31
+ .fanui-hero--compact{padding-block:var(--fanui-space-16) var(--fanui-space-12)}
32
+ .fanui-section-head{display:flex;flex-direction:column;gap:var(--fanui-space-3);max-width:680px;margin-bottom:var(--fanui-space-10)}
33
+ .fanui-section-head__eyebrow{font-size:var(--fanui-font-size-sm);font-weight:var(--fanui-font-weight-semibold);letter-spacing:var(--fanui-tracking-wider);text-transform:uppercase;color:var(--fanui-primary)}
34
+ .fanui-section-head__title{margin:0;font-size:clamp(1.5rem,3vw,2.25rem);font-weight:var(--fanui-font-weight-bold);line-height:1.2;letter-spacing:var(--fanui-tracking-tight);color:var(--fanui-color-text-strong);text-wrap:balance}
35
+ .fanui-section-head__desc{margin:0;font-size:var(--fanui-font-size-md);line-height:var(--fanui-line-height-relaxed);color:var(--fanui-color-text-muted)}
36
+ .fanui-section-head--center{align-items:center;margin-inline:auto;text-align:center}
37
+ .fanui-feature{display:flex;flex-direction:column;gap:var(--fanui-space-3);padding:var(--fanui-space-5);border-radius:var(--fanui-radius-xl);transition:transform 200ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 200ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 200ms cubic-bezier(0.4,0,0.2,1) 0s}
38
+ .fanui-feature__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--fanui-radius-lg);color:var(--fanui-primary-fg);background-image:var(--fanui-brand-grad);font-size:var(--fanui-font-size-lg);box-shadow:0 6px 16px -8px var(--fanui-primary-glow)}
39
+ .fanui-feature__title{margin:0;font-size:var(--fanui-font-size-md);font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-color-text-strong)}
40
+ .fanui-feature__desc{margin:0;font-size:var(--fanui-font-size-sm);line-height:var(--fanui-line-height-relaxed);color:var(--fanui-color-text-muted)}
41
+ .fanui-feature__link{margin-top:auto;font-size:var(--fanui-font-size-sm);color:var(--fanui-primary);text-decoration:none}
42
+ .fanui-feature__link::after{content:" →";transition:transform 150ms cubic-bezier(0.4,0,0.2,1) 0s;display:inline-block}
43
+ .fanui-feature__link:hover::after{transform:translateX(3px)}
44
+ .fanui-feature--plain{padding:0}
45
+ .fanui-feature--glass{position:relative;isolation:isolate;background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:radial-gradient(calc(var(--fanui-glass-specular-size-base) + var(--fanui-glass-specular-size-k) * var(--fanui-glass-intensity)) circle at var(--fanui-glass-mx,30%) var(--fanui-glass-my,0%),rgba(var(--fanui-glass-specular-rgb),calc(var(--fanui-glass-specular-a) * var(--fanui-glass-intensity) * var(--fanui-glass-specular-alpha))),transparent 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);background-repeat:no-repeat;background-size:100% 100%;border:1px solid rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));border-radius:var(--fanui-glass-radius,12px);color:var(--fanui-color-text);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))));transition:background-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,transform 300ms cubic-bezier(0.4,0,0.2,1) 0s}
46
+ .fanui-feature--glass::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;padding:var(--fanui-glass-edge-width,calc(1px + 0.5px * var(--fanui-glass-intensity)));background:linear-gradient(var(--fanui-glass-edge-angle,150deg),rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 0%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 38%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 62%,rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--fanui-glass-edge-alpha,1)}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-feature--glass{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
47
+ .fanui-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--fanui-space-4)}
48
+ .fanui-bento>*{grid-column:span var(--fanui-bento-cols,4);grid-row:span var(--fanui-bento-rows,1);min-width:0}
49
+ .fanui-bento__cell{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--fanui-space-2);padding:var(--fanui-space-5);border-radius:var(--fanui-radius-xl);position:relative;isolation:isolate;background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:radial-gradient(calc(var(--fanui-glass-specular-size-base) + var(--fanui-glass-specular-size-k) * var(--fanui-glass-intensity)) circle at var(--fanui-glass-mx,30%) var(--fanui-glass-my,0%),rgba(var(--fanui-glass-specular-rgb),calc(var(--fanui-glass-specular-a) * var(--fanui-glass-intensity) * var(--fanui-glass-specular-alpha))),transparent 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);background-repeat:no-repeat;background-size:100% 100%;border:1px solid rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));border-radius:var(--fanui-glass-radius,12px);color:var(--fanui-color-text);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))));transition:background-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,transform 300ms cubic-bezier(0.4,0,0.2,1) 0s}
50
+ .fanui-bento__cell::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;padding:var(--fanui-glass-edge-width,calc(1px + 0.5px * var(--fanui-glass-intensity)));background:linear-gradient(var(--fanui-glass-edge-angle,150deg),rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 0%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 38%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 62%,rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--fanui-glass-edge-alpha,1)}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-bento__cell{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
51
+ .fanui-bento__cell{transition:transform 200ms cubic-bezier(0.4,0,0.2,1) 0s}
52
+ .fanui-bento__cell:hover{transform:translateY(-2px)}
53
+ .fanui-bento__title{margin:0;font-size:var(--fanui-font-size-lg);font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-color-text-strong)}
54
+ .fanui-bento__desc{margin:0;font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted)}
55
+ .fanui-bento__media{margin-top:auto;border-radius:var(--fanui-radius-lg);overflow:hidden}
56
+ .fanui-bento__media img{display:block;width:100%;height:100%;object-fit:cover}
57
+ .fanui-bento__cell--brand{background-image:var(--fanui-brand-grad);color:var(--fanui-primary-fg);border-color:transparent}
58
+ .fanui-bento__cell--brand .fanui-bento__title,.fanui-bento__cell--brand .fanui-bento__desc{color:inherit}
59
+ .fanui-bento__cell--span-6{--fanui-bento-cols:6}
60
+ .fanui-bento__cell--span-8{--fanui-bento-cols:8}
61
+ .fanui-bento__cell--span-12{--fanui-bento-cols:12}
62
+ .fanui-bento__cell--tall{--fanui-bento-rows:2}@media (max-width:991.95px){.fanui-bento>*{--fanui-bento-cols:6}}@media (max-width:575.95px){.fanui-bento>*{--fanui-bento-cols:12}}
63
+ .fanui-flow{display:grid;grid-template-columns:repeat(var(--fanui-flow-cols,3),minmax(0,1fr));gap:var(--fanui-space-6);counter-reset:fanui-flow}@media (max-width:767.95px){.fanui-flow{grid-template-columns:1fr}}
64
+ .fanui-flow__step{position:relative;counter-increment:fanui-flow;display:flex;flex-direction:column;gap:var(--fanui-space-2);padding-top:var(--fanui-space-4)}
65
+ .fanui-flow__step::before{content:"";position:absolute;top:0;left:0;right:calc(var(--fanui-space-6) * -1 + 1px);height:2px;background-image:linear-gradient(to right,var(--fanui-primary),var(--fanui-primary-vivid));border-radius:var(--fanui-radius-full)}
66
+ .fanui-flow__step:last-child::before{right:0}
67
+ .fanui-flow__index{display:grid;place-items:center;width:30px;height:30px;font-size:var(--fanui-font-size-sm);font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-primary-ink);background-color:var(--fanui-primary-soft-2);border-radius:var(--fanui-radius-full)}
68
+ .fanui-flow__title{margin:0;font-size:var(--fanui-font-size-md);font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-color-text-strong)}
69
+ .fanui-flow__desc{margin:0;font-size:var(--fanui-font-size-sm);line-height:var(--fanui-line-height-relaxed);color:var(--fanui-color-text-muted)}
70
+ .fanui-marquee{display:flex;overflow:hidden;gap:var(--fanui-marquee-gap,var(--fanui-space-12));-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
71
+ .fanui-marquee__track{display:flex;align-items:center;gap:inherit;flex:0 0 auto;min-width:100%;animation:fanui-marquee var(--fanui-marquee-duration,36s) linear infinite}
72
+ .fanui-marquee:hover .fanui-marquee__track{animation-play-state:paused}
73
+ .fanui-marquee__item{display:grid;place-items:center;flex:0 0 auto;height:40px;color:var(--fanui-color-text-subtle);font-size:var(--fanui-font-size-lg);font-weight:var(--fanui-font-weight-semibold);letter-spacing:var(--fanui-tracking-tight);filter:grayscale(1);opacity:0.72;transition:filter 200ms cubic-bezier(0.4,0,0.2,1) 0s,opacity 200ms cubic-bezier(0.4,0,0.2,1) 0s,color 200ms cubic-bezier(0.4,0,0.2,1) 0s}
74
+ .fanui-marquee__item:hover{filter:none;opacity:1;color:var(--fanui-color-text)}
75
+ .fanui-marquee__item img{max-height:32px;width:auto}
76
+ .fanui-marquee--reverse .fanui-marquee__track{animation-direction:reverse}@media (prefers-reduced-motion:reduce){.fanui-marquee__track{animation:none}}@keyframes fanui-marquee{from{transform:translateX(0)}
77
+ to{transform:translateX(calc(-100% - var(--fanui-marquee-gap,48px)))}}
78
+ .fanui-stat-band{display:grid;grid-template-columns:repeat(var(--fanui-stat-cols,4),minmax(0,1fr));gap:var(--fanui-space-6);padding:var(--fanui-space-8);border-radius:var(--fanui-radius-2xl);position:relative;isolation:isolate;background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:radial-gradient(calc(var(--fanui-glass-specular-size-base) + var(--fanui-glass-specular-size-k) * var(--fanui-glass-intensity)) circle at var(--fanui-glass-mx,30%) var(--fanui-glass-my,0%),rgba(var(--fanui-glass-specular-rgb),calc(var(--fanui-glass-specular-a) * var(--fanui-glass-intensity) * var(--fanui-glass-specular-alpha))),transparent 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);background-repeat:no-repeat;background-size:100% 100%;border:1px solid rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));border-radius:var(--fanui-glass-radius,12px);color:var(--fanui-color-text);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))));transition:background-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,transform 300ms cubic-bezier(0.4,0,0.2,1) 0s}
79
+ .fanui-stat-band::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;padding:var(--fanui-glass-edge-width,calc(1px + 0.5px * var(--fanui-glass-intensity)));background:linear-gradient(var(--fanui-glass-edge-angle,150deg),rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 0%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 38%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 62%,rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--fanui-glass-edge-alpha,1)}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-stat-band{background-color:var(--fanui-glass-fallback-bg);background-image:none}}@media (max-width:767.95px){.fanui-stat-band{grid-template-columns:repeat(2,minmax(0,1fr))}}
80
+ .fanui-stat-band__item{display:flex;flex-direction:column;gap:var(--fanui-space-1);text-align:center}
81
+ .fanui-stat-band__value{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:var(--fanui-font-weight-extrabold);line-height:1.1;letter-spacing:var(--fanui-tracking-tight);font-variant-numeric:tabular-nums;background-image:linear-gradient(120deg,var(--fanui-brand-grad-a),var(--fanui-brand-grad-b));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
82
+ .fanui-stat-band__label{font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted)}
83
+ .fanui-pricing__switch{display:inline-flex;align-items:center;gap:var(--fanui-space-3);margin:0 auto var(--fanui-space-8)}
84
+ .fanui-pricing__save{padding:2px 8px;font-size:var(--fanui-font-size-xs);color:var(--fanui-success-ink);background-color:var(--fanui-success-soft);border-radius:var(--fanui-radius-full)}
85
+ .fanui-pricing__grid{display:grid;grid-template-columns:repeat(var(--fanui-pricing-cols,3),minmax(0,1fr));gap:var(--fanui-space-5);align-items:start}@media (max-width:991.95px){.fanui-pricing__grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
86
+ .fanui-pricing__plan{position:relative;display:flex;flex-direction:column;gap:var(--fanui-space-4);padding:var(--fanui-space-6);border-radius:var(--fanui-radius-2xl);position:relative;isolation:isolate;background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:radial-gradient(calc(var(--fanui-glass-specular-size-base) + var(--fanui-glass-specular-size-k) * var(--fanui-glass-intensity)) circle at var(--fanui-glass-mx,30%) var(--fanui-glass-my,0%),rgba(var(--fanui-glass-specular-rgb),calc(var(--fanui-glass-specular-a) * var(--fanui-glass-intensity) * var(--fanui-glass-specular-alpha))),transparent 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);background-repeat:no-repeat;background-size:100% 100%;border:1px solid rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));border-radius:var(--fanui-glass-radius,12px);color:var(--fanui-color-text);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))));transition:background-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,transform 300ms cubic-bezier(0.4,0,0.2,1) 0s}
87
+ .fanui-pricing__plan::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;padding:var(--fanui-glass-edge-width,calc(1px + 0.5px * var(--fanui-glass-intensity)));background:linear-gradient(var(--fanui-glass-edge-angle,150deg),rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 0%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 38%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 62%,rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--fanui-glass-edge-alpha,1)}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-pricing__plan{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
88
+ .fanui-pricing__plan{transition:transform 200ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 200ms cubic-bezier(0.4,0,0.2,1) 0s}
89
+ .fanui-pricing__plan:hover{transform:translateY(-3px)}
90
+ .fanui-pricing__plan--featured{border-color:transparent;box-shadow:0 0 0 2px var(--fanui-primary),var(--fanui-glass-shadow)}@media (min-width:992px){.fanui-pricing__plan--featured{transform:scale(1.03)}}
91
+ .fanui-pricing__plan--featured:hover{transform:translateY(-3px) scale(1.03)}
92
+ .fanui-pricing__tag{position:absolute;inset-block-start:-12px;inset-inline-start:var(--fanui-space-6);padding:3px 10px;font-size:var(--fanui-font-size-xs);font-weight:var(--fanui-font-weight-semibold);color:#fff;background-image:var(--fanui-brand-grad);border-radius:var(--fanui-radius-full)}
93
+ .fanui-pricing__name{font-size:var(--fanui-font-size-md);font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-color-text-strong)}
94
+ .fanui-pricing__desc{font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted)}
95
+ .fanui-pricing__price{display:flex;align-items:flex-end;gap:var(--fanui-space-1);font-variant-numeric:tabular-nums}
96
+ .fanui-pricing__price strong{font-size:clamp(2rem,3.4vw,2.75rem);font-weight:var(--fanui-font-weight-extrabold);line-height:1;letter-spacing:var(--fanui-tracking-tight);color:var(--fanui-color-text-strong)}
97
+ .fanui-pricing__price span{font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-subtle);padding-bottom:4px}
98
+ .fanui-pricing__features{display:flex;flex-direction:column;gap:var(--fanui-space-2);margin:0;padding:0;list-style:none;font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted)}
99
+ .fanui-pricing__features li{display:flex;align-items:flex-start;gap:var(--fanui-space-2)}
100
+ .fanui-pricing__features li::before{content:"✓";flex:0 0 auto;font-size:var(--fanui-font-size-sm);color:var(--fanui-primary);font-weight:var(--fanui-font-weight-bold)}
101
+ .fanui-pricing__features li.is-off{opacity:0.5;text-decoration:line-through}
102
+ .fanui-pricing__features li.is-off::before{content:"—";color:var(--fanui-color-text-subtle)}
103
+ .fanui-pricing__foot{margin-top:auto}
104
+ .fanui-pricing .fanui-price--yearly{display:none}
105
+ .fanui-pricing.is-yearly .fanui-price--monthly{display:none}
106
+ .fanui-pricing.is-yearly .fanui-price--yearly{display:flex}
107
+ .fanui-testimonial{display:flex;flex-direction:column;gap:var(--fanui-space-4);padding:var(--fanui-space-6);border-radius:var(--fanui-radius-xl);position:relative;isolation:isolate;background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:radial-gradient(calc(var(--fanui-glass-specular-size-base) + var(--fanui-glass-specular-size-k) * var(--fanui-glass-intensity)) circle at var(--fanui-glass-mx,30%) var(--fanui-glass-my,0%),rgba(var(--fanui-glass-specular-rgb),calc(var(--fanui-glass-specular-a) * var(--fanui-glass-intensity) * var(--fanui-glass-specular-alpha))),transparent 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);background-repeat:no-repeat;background-size:100% 100%;border:1px solid rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));border-radius:var(--fanui-glass-radius,12px);color:var(--fanui-color-text);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))));transition:background-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,transform 300ms cubic-bezier(0.4,0,0.2,1) 0s}
108
+ .fanui-testimonial::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;padding:var(--fanui-glass-edge-width,calc(1px + 0.5px * var(--fanui-glass-intensity)));background:linear-gradient(var(--fanui-glass-edge-angle,150deg),rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 0%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 38%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 62%,rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--fanui-glass-edge-alpha,1)}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-testimonial{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
109
+ .fanui-testimonial__quote{margin:0;font-size:var(--fanui-font-size-md);line-height:var(--fanui-line-height-relaxed);color:var(--fanui-color-text);text-wrap:pretty}
110
+ .fanui-testimonial__quote::before{content:"“";display:block;font-size:40px;line-height:0.6;color:var(--fanui-primary);opacity:0.5}
111
+ .fanui-testimonial__person{display:flex;align-items:center;gap:var(--fanui-space-3);margin-top:auto;padding-top:var(--fanui-space-3);border-top:1px solid var(--fanui-glass-divider)}
112
+ .fanui-testimonial__name{font-size:var(--fanui-font-size-sm);font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-color-text-strong)}
113
+ .fanui-testimonial__role{font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle)}
114
+ .fanui-testimonial--brand{background-image:var(--fanui-brand-grad);color:var(--fanui-primary-fg);border-color:transparent}
115
+ .fanui-testimonial--brand .fanui-testimonial__quote,.fanui-testimonial--brand .fanui-testimonial__name,.fanui-testimonial--brand .fanui-testimonial__role{color:inherit}
116
+ .fanui-testimonial--brand .fanui-testimonial__quote::before{color:inherit;opacity:0.4}
117
+ .fanui-testimonial--brand .fanui-testimonial__person{border-top-color:rgba(255,255,255,0.25)}
118
+ .fanui-cta{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:var(--fanui-space-4);padding:var(--fanui-space-16) var(--fanui-space-6);text-align:center;border-radius:var(--fanui-radius-2xl);position:relative;isolation:isolate;background-color:rgba(var(--fanui-glass-tint-rgb),calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));background-image:radial-gradient(calc(var(--fanui-glass-specular-size-base) + var(--fanui-glass-specular-size-k) * var(--fanui-glass-intensity)) circle at var(--fanui-glass-mx,30%) var(--fanui-glass-my,0%),rgba(var(--fanui-glass-specular-rgb),calc(var(--fanui-glass-specular-a) * var(--fanui-glass-intensity) * var(--fanui-glass-specular-alpha))),transparent 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%,rgba(255,255,255,0) 46%);background-repeat:no-repeat;background-size:100% 100%;border:1px solid rgba(var(--fanui-glass-border-rgb),calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));border-radius:var(--fanui-glass-radius,12px);color:var(--fanui-color-text);backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));-webkit-backdrop-filter:blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k,1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));box-shadow:0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb),calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))),inset 0 1px 0 rgba(255,255,255,calc(var(--fanui-glass-inner-hi) * min(1,var(--fanui-glass-intensity))));transition:background-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 300ms cubic-bezier(0.4,0,0.2,1) 0s,transform 300ms cubic-bezier(0.4,0,0.2,1) 0s}
119
+ .fanui-cta::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;padding:var(--fanui-glass-edge-width,calc(1px + 0.5px * var(--fanui-glass-intensity)));background:linear-gradient(var(--fanui-glass-edge-angle,150deg),rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 0%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 38%,rgba(255,255,255,calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 62%,rgba(255,255,255,calc(var(--fanui-glass-edge-hi-a) * min(1,var(--fanui-glass-intensity)))) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--fanui-glass-edge-alpha,1)}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fanui-cta{background-color:var(--fanui-glass-fallback-bg);background-image:none}}
120
+ .fanui-cta__glow{position:absolute;inset:-30% -10%;z-index:-1;pointer-events:none;background:radial-gradient(40% 44% at 20% 30%,var(--fanui-brand-aura-a),transparent 60%),radial-gradient(36% 40% at 80% 70%,var(--fanui-brand-aura-b),transparent 58%);filter:blur(30px)}
121
+ .fanui-cta__title{margin:0;max-width:640px;font-size:clamp(1.5rem,3vw,2.25rem);font-weight:var(--fanui-font-weight-bold);letter-spacing:var(--fanui-tracking-tight);color:var(--fanui-color-text-strong);text-wrap:balance}
122
+ .fanui-cta__desc{margin:0;max-width:520px;font-size:var(--fanui-font-size-md);color:var(--fanui-color-text-muted)}
123
+ .fanui-cta__actions{display:flex;flex-wrap:wrap;gap:var(--fanui-space-3);justify-content:center}
124
+ .fanui-faq{display:flex;flex-direction:column;gap:var(--fanui-space-2)}
125
+ .fanui-faq__item{border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-lg);background-color:var(--fanui-color-surface);overflow:hidden;transition:border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
126
+ .fanui-faq__item[open]{border-color:var(--fanui-primary-border);background-color:var(--fanui-primary-soft)}
127
+ .fanui-faq__q{display:flex;align-items:center;justify-content:space-between;gap:var(--fanui-space-3);padding:var(--fanui-space-4) var(--fanui-space-5);font-size:var(--fanui-font-size-sm);font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-color-text-strong);cursor:pointer;list-style:none}
128
+ .fanui-faq__q::-webkit-details-marker{display:none}
129
+ .fanui-faq__q::after{content:"+";flex:0 0 auto;font-size:18px;font-weight:var(--fanui-font-weight-normal);color:var(--fanui-color-text-muted);transition:transform 200ms cubic-bezier(0.4,0,0.2,1) 0s}
130
+ .fanui-faq__item[open] .fanui-faq__q::after{transform:rotate(45deg)}
131
+ .fanui-faq__a{padding:0 var(--fanui-space-5) var(--fanui-space-4);font-size:var(--fanui-font-size-sm);line-height:var(--fanui-line-height-relaxed);color:var(--fanui-color-text-muted)}
132
+ .fanui-footer{padding-block:var(--fanui-space-16) var(--fanui-space-8);border-top:1px solid var(--fanui-color-border);background-color:var(--fanui-color-bg-subtle);font-size:var(--fanui-font-size-sm)}
133
+ .fanui-footer__grid{display:grid;grid-template-columns:1.6fr repeat(var(--fanui-footer-cols,3),1fr);gap:var(--fanui-space-8)}@media (max-width:767.95px){.fanui-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
134
+ .fanui-footer__brand{display:flex;flex-direction:column;gap:var(--fanui-space-3);max-width:320px}
135
+ .fanui-footer__logo{display:inline-flex;align-items:center;gap:var(--fanui-space-2);font-size:var(--fanui-font-size-lg);font-weight:var(--fanui-font-weight-bold);color:var(--fanui-color-text-strong);text-decoration:none}
136
+ .fanui-footer__desc{margin:0;line-height:var(--fanui-line-height-relaxed);color:var(--fanui-color-text-muted)}
137
+ .fanui-footer__title{margin:0 0 var(--fanui-space-3);font-size:var(--fanui-font-size-sm);font-weight:var(--fanui-font-weight-semibold);color:var(--fanui-color-text-strong)}
138
+ .fanui-footer__list{display:flex;flex-direction:column;gap:var(--fanui-space-2);margin:0;padding:0;list-style:none}
139
+ .fanui-footer__list a{color:var(--fanui-color-text-muted);text-decoration:none;transition:color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
140
+ .fanui-footer__list a:hover{color:var(--fanui-primary)}
141
+ .fanui-footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--fanui-space-3);margin-top:var(--fanui-space-10);padding-top:var(--fanui-space-5);border-top:1px solid var(--fanui-color-border-subtle);font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle)}
142
+ .fanui-footer__social{display:flex;gap:var(--fanui-space-2)}
143
+ .fanui-footer__social a{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--fanui-radius-full);color:var(--fanui-color-text-muted);background-color:var(--fanui-color-surface);border:1px solid var(--fanui-color-border);text-decoration:none;transition:color 150ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,transform 150ms cubic-bezier(0.4,0,0.2,1) 0s}
144
+ .fanui-footer__social a:hover{color:var(--fanui-primary);border-color:var(--fanui-primary-border);transform:translateY(-2px)}
@@ -0,0 +1,458 @@
1
+ /* fanUI v2.1.0 · module: nav(独立产物,自带令牌) */
2
+ @charset "UTF-8";
3
+ .fanui-navbar {
4
+ --fanui-navbar-height: 56px;
5
+ --fanui-navbar-bg: var(--fanui-color-surface);
6
+ --fanui-navbar-border: var(--fanui-color-border);
7
+ position: relative;
8
+ display: flex;
9
+ align-items: center;
10
+ gap: var(--fanui-space-4);
11
+ min-height: var(--fanui-navbar-height);
12
+ padding: 0 var(--fanui-container-px, 16px);
13
+ background-color: var(--fanui-navbar-bg);
14
+ border-bottom: 1px solid var(--fanui-navbar-border);
15
+ box-sizing: border-box;
16
+ z-index: var(--fanui-z-sticky, 1020);
17
+ }
18
+ .fanui-navbar--sticky {
19
+ position: sticky;
20
+ top: 0;
21
+ }
22
+ .fanui-navbar--fixed {
23
+ position: fixed;
24
+ top: 0;
25
+ right: 0;
26
+ left: 0;
27
+ }
28
+ .fanui-navbar--glass {
29
+ background-color: rgba(255, 255, 255, 0.78);
30
+ backdrop-filter: blur(14px) saturate(180%);
31
+ -webkit-backdrop-filter: blur(14px) saturate(180%);
32
+ border-bottom-color: rgba(15, 23, 42, 0.06);
33
+ }
34
+ :root[data-fanui-theme=dark] .fanui-navbar--glass {
35
+ background-color: rgba(15, 23, 42, 0.72);
36
+ backdrop-filter: blur(14px) saturate(180%);
37
+ -webkit-backdrop-filter: blur(14px) saturate(180%);
38
+ border-bottom-color: rgba(255, 255, 255, 0.08);
39
+ }
40
+ .fanui-navbar--dark {
41
+ --fanui-navbar-bg: #0f172a;
42
+ --fanui-navbar-border: rgba(255, 255, 255, 0.08);
43
+ color: #f1f5f9;
44
+ }
45
+ .fanui-navbar--borderless {
46
+ border-bottom-color: transparent;
47
+ }
48
+ .fanui-navbar__inner {
49
+ display: flex;
50
+ align-items: center;
51
+ gap: var(--fanui-space-4);
52
+ width: 100%;
53
+ max-width: var(--fanui-navbar-max-width, none);
54
+ margin: 0 auto;
55
+ }
56
+ .fanui-navbar__brand {
57
+ display: inline-flex;
58
+ align-items: center;
59
+ gap: var(--fanui-space-2);
60
+ flex: 0 0 auto;
61
+ font-size: var(--fanui-font-size-md);
62
+ font-weight: 700;
63
+ color: var(--fanui-color-text-strong);
64
+ text-decoration: none;
65
+ white-space: nowrap;
66
+ letter-spacing: -0.01em;
67
+ }
68
+ .fanui-navbar__brand:hover {
69
+ text-decoration: none;
70
+ }
71
+ .fanui-navbar__brand img, .fanui-navbar__brand svg {
72
+ height: 24px;
73
+ width: auto;
74
+ }
75
+ .fanui-navbar__menu {
76
+ display: flex;
77
+ align-items: center;
78
+ gap: var(--fanui-space-1);
79
+ flex: 1 1 auto;
80
+ min-width: 0;
81
+ }
82
+ .fanui-navbar__actions {
83
+ display: flex;
84
+ align-items: center;
85
+ gap: var(--fanui-space-2);
86
+ flex: 0 0 auto;
87
+ margin-inline-start: auto;
88
+ }
89
+ .fanui-navbar__toggle {
90
+ display: none;
91
+ flex: 0 0 auto;
92
+ }
93
+ @media (max-width: 767.95px) {
94
+ .fanui-navbar__toggle {
95
+ display: inline-flex;
96
+ }
97
+ }
98
+ .fanui-navbar__divider {
99
+ width: 1px;
100
+ height: 20px;
101
+ background-color: var(--fanui-color-border);
102
+ flex: 0 0 auto;
103
+ }
104
+ @media (max-width: 767.95px) {
105
+ .fanui-navbar__menu {
106
+ display: none;
107
+ }
108
+ .fanui-navbar__menu.is-open {
109
+ display: flex;
110
+ position: absolute;
111
+ top: 100%;
112
+ left: 0;
113
+ right: 0;
114
+ flex-direction: column;
115
+ align-items: stretch;
116
+ padding: var(--fanui-space-2);
117
+ background-color: var(--fanui-color-surface);
118
+ border-bottom: 1px solid var(--fanui-color-border);
119
+ box-shadow: var(--fanui-shadow-lg);
120
+ }
121
+ }
122
+
123
+ .fanui-nav {
124
+ display: flex;
125
+ align-items: center;
126
+ gap: var(--fanui-space-1);
127
+ list-style: none;
128
+ margin: 0;
129
+ padding: 0;
130
+ }
131
+ .fanui-nav--vertical {
132
+ flex-direction: column;
133
+ align-items: stretch;
134
+ }
135
+ .fanui-nav--pill {
136
+ padding: 3px;
137
+ background-color: var(--fanui-color-surface-sunken);
138
+ border-radius: var(--fanui-radius-md);
139
+ }
140
+ .fanui-nav--underline {
141
+ gap: var(--fanui-space-5);
142
+ }
143
+
144
+ .fanui-nav__item {
145
+ position: relative;
146
+ display: inline-flex;
147
+ align-items: center;
148
+ gap: 8px;
149
+ padding: 8px 12px;
150
+ font-size: var(--fanui-font-size-base);
151
+ font-weight: 500;
152
+ line-height: 1.4;
153
+ color: var(--fanui-color-text-muted);
154
+ text-decoration: none;
155
+ border-radius: var(--fanui-radius-base);
156
+ cursor: pointer;
157
+ white-space: nowrap;
158
+ box-sizing: border-box;
159
+ transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
160
+ }
161
+ .fanui-nav__item:hover {
162
+ color: var(--fanui-color-text-strong);
163
+ background-color: var(--fanui-color-hover);
164
+ text-decoration: none;
165
+ }
166
+ .fanui-nav__item:focus-visible {
167
+ outline: 0;
168
+ box-shadow: 0 0 0 var(--fanui-focus-ring-offset, 1px) var(--fanui-color-surface, #fff), 0 0 0 calc(var(--fanui-focus-ring-offset, 1px) + var(--fanui-focus-ring-width, 3px)) var(--fanui-focus-ring-color, rgba(14, 116, 144, 0.3));
169
+ }
170
+ @media (forced-colors: active) {
171
+ .fanui-nav__item:focus-visible {
172
+ outline: 2px solid transparent;
173
+ outline-offset: 2px;
174
+ }
175
+ }
176
+ .fanui-nav__item.is-active, .fanui-nav__item[aria-current=page] {
177
+ color: var(--fanui-primary);
178
+ background-color: var(--fanui-primary-soft);
179
+ font-weight: 600;
180
+ }
181
+ .fanui-nav__item.is-disabled, .fanui-nav__item[aria-disabled=true] {
182
+ color: var(--fanui-color-disabled-text);
183
+ pointer-events: none;
184
+ cursor: not-allowed;
185
+ }
186
+ .fanui-nav__item__icon {
187
+ display: inline-flex;
188
+ flex: 0 0 auto;
189
+ font-size: 1.1em;
190
+ line-height: 1;
191
+ }
192
+ .fanui-nav__item__badge {
193
+ margin-inline-start: auto;
194
+ }
195
+ .fanui-nav--underline .fanui-nav__item {
196
+ padding: 10px 0;
197
+ background: none;
198
+ border-radius: 0;
199
+ }
200
+ .fanui-nav--underline .fanui-nav__item:hover {
201
+ background: none;
202
+ }
203
+ .fanui-nav--underline .fanui-nav__item::after {
204
+ content: "";
205
+ position: absolute;
206
+ left: 0;
207
+ right: 0;
208
+ bottom: -1px;
209
+ height: 2px;
210
+ background-color: transparent;
211
+ border-radius: 2px;
212
+ transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
213
+ }
214
+ .fanui-nav--underline .fanui-nav__item.is-active::after, .fanui-nav--underline .fanui-nav__item[aria-current=page]::after {
215
+ background-color: var(--fanui-primary);
216
+ }
217
+ .fanui-nav--vertical .fanui-nav__item {
218
+ width: 100%;
219
+ justify-content: flex-start;
220
+ }
221
+ .fanui-nav--pill .fanui-nav__item.is-active {
222
+ color: var(--fanui-color-text-strong);
223
+ background-color: var(--fanui-color-surface);
224
+ box-shadow: var(--fanui-shadow-xs);
225
+ }
226
+ .fanui-nav__item--sm {
227
+ padding: 5px 9px;
228
+ font-size: var(--fanui-font-size-sm);
229
+ }
230
+ .fanui-nav__item--lg {
231
+ padding: 11px 16px;
232
+ font-size: var(--fanui-font-size-md);
233
+ }
234
+
235
+ .fanui-sidebar {
236
+ --fanui-sidebar-width: 240px;
237
+ display: flex;
238
+ flex-direction: column;
239
+ width: var(--fanui-sidebar-width);
240
+ flex: 0 0 auto;
241
+ padding: var(--fanui-space-4) var(--fanui-space-3);
242
+ gap: var(--fanui-space-1);
243
+ background-color: var(--fanui-color-surface);
244
+ border-inline-end: 1px solid var(--fanui-color-border);
245
+ box-sizing: border-box;
246
+ overflow-y: auto;
247
+ scrollbar-width: thin;
248
+ scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
249
+ }
250
+ .fanui-sidebar::-webkit-scrollbar {
251
+ width: 8px;
252
+ height: 8px;
253
+ }
254
+ .fanui-sidebar::-webkit-scrollbar-track {
255
+ background: transparent;
256
+ }
257
+ .fanui-sidebar::-webkit-scrollbar-thumb {
258
+ background: rgba(100, 116, 139, 0.45);
259
+ border-radius: 9999px;
260
+ }
261
+ .fanui-sidebar::-webkit-scrollbar-thumb:hover {
262
+ background: rgba(100, 116, 139, 0.7);
263
+ }
264
+ .fanui-sidebar--end {
265
+ border-inline-end: 0;
266
+ border-inline-start: 1px solid var(--fanui-color-border);
267
+ }
268
+ .fanui-sidebar--sunken {
269
+ background-color: var(--fanui-color-surface-sunken);
270
+ }
271
+ .fanui-sidebar--bordered-none {
272
+ border: 0;
273
+ }
274
+ .fanui-sidebar__section {
275
+ margin-top: var(--fanui-space-4);
276
+ }
277
+ .fanui-sidebar__section:first-child {
278
+ margin-top: 0;
279
+ }
280
+ .fanui-sidebar__title {
281
+ padding: var(--fanui-space-2) var(--fanui-space-3);
282
+ font-size: var(--fanui-font-size-xs);
283
+ font-weight: 600;
284
+ letter-spacing: 0.06em;
285
+ text-transform: uppercase;
286
+ color: var(--fanui-color-text-subtle);
287
+ }
288
+ .fanui-sidebar__item {
289
+ display: flex;
290
+ align-items: center;
291
+ gap: 10px;
292
+ width: 100%;
293
+ padding: 8px 12px;
294
+ font-size: var(--fanui-font-size-base);
295
+ color: var(--fanui-color-text-muted);
296
+ text-decoration: none;
297
+ border-radius: var(--fanui-radius-base);
298
+ cursor: pointer;
299
+ box-sizing: border-box;
300
+ transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
301
+ }
302
+ .fanui-sidebar__item:hover {
303
+ color: var(--fanui-color-text-strong);
304
+ background-color: var(--fanui-color-hover);
305
+ text-decoration: none;
306
+ }
307
+ .fanui-sidebar__item.is-active {
308
+ color: var(--fanui-primary);
309
+ background-color: var(--fanui-primary-soft);
310
+ font-weight: 600;
311
+ }
312
+ .fanui-sidebar__item__icon {
313
+ flex: 0 0 auto;
314
+ display: inline-flex;
315
+ width: 18px;
316
+ justify-content: center;
317
+ }
318
+ .fanui-sidebar__item__text {
319
+ flex: 1 1 auto;
320
+ min-width: 0;
321
+ overflow: hidden;
322
+ text-overflow: ellipsis;
323
+ white-space: nowrap;
324
+ }
325
+ .fanui-sidebar__item__badge {
326
+ flex: 0 0 auto;
327
+ }
328
+ .fanui-sidebar__item__arrow {
329
+ flex: 0 0 auto;
330
+ font-size: 12px;
331
+ opacity: 0.6;
332
+ transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
333
+ }
334
+ .fanui-sidebar__item[aria-expanded=true] .fanui-sidebar__item__arrow {
335
+ transform: rotate(90deg);
336
+ }
337
+ .fanui-sidebar__sub {
338
+ display: flex;
339
+ flex-direction: column;
340
+ gap: 2px;
341
+ padding-inline-start: var(--fanui-space-6);
342
+ margin-top: 2px;
343
+ }
344
+ .fanui-sidebar--collapsed {
345
+ --fanui-sidebar-width: 64px;
346
+ }
347
+ .fanui-sidebar--collapsed .fanui-sidebar__item {
348
+ justify-content: center;
349
+ padding: 10px 0;
350
+ }
351
+ .fanui-sidebar--collapsed .fanui-sidebar__item__text, .fanui-sidebar--collapsed .fanui-sidebar__title, .fanui-sidebar--collapsed .fanui-sidebar__item__badge, .fanui-sidebar--collapsed .fanui-sidebar__item__arrow {
352
+ display: none;
353
+ }
354
+
355
+ .fanui-breadcrumb {
356
+ display: flex;
357
+ flex-wrap: wrap;
358
+ align-items: center;
359
+ gap: var(--fanui-space-2);
360
+ list-style: none;
361
+ margin: 0;
362
+ padding: 0;
363
+ font-size: var(--fanui-font-size-sm);
364
+ color: var(--fanui-color-text-muted);
365
+ }
366
+ .fanui-breadcrumb__item {
367
+ display: inline-flex;
368
+ align-items: center;
369
+ gap: var(--fanui-space-2);
370
+ }
371
+ .fanui-breadcrumb__item a {
372
+ color: var(--fanui-color-text-muted);
373
+ text-decoration: none;
374
+ }
375
+ .fanui-breadcrumb__item a:hover {
376
+ color: var(--fanui-primary);
377
+ text-decoration: none;
378
+ }
379
+ .fanui-breadcrumb__item + .fanui-breadcrumb__item::before, .fanui-breadcrumb__separator {
380
+ content: "/";
381
+ color: var(--fanui-color-text-subtle);
382
+ user-select: none;
383
+ }
384
+ .fanui-breadcrumb__item.is-active, .fanui-breadcrumb__item[aria-current=page] {
385
+ color: var(--fanui-color-text-strong);
386
+ font-weight: 500;
387
+ }
388
+ .fanui-breadcrumb--arrow .fanui-breadcrumb__separator {
389
+ content: "›";
390
+ }
391
+ .fanui-breadcrumb--chevron .fanui-breadcrumb__item + .fanui-breadcrumb__item::before {
392
+ content: "›";
393
+ }
394
+
395
+ .fanui-menu {
396
+ display: flex;
397
+ flex-direction: column;
398
+ gap: 2px;
399
+ list-style: none;
400
+ margin: 0;
401
+ padding: 0;
402
+ min-width: 160px;
403
+ }
404
+ .fanui-menu__item {
405
+ display: flex;
406
+ align-items: center;
407
+ gap: 10px;
408
+ padding: 7px 12px;
409
+ font-size: var(--fanui-font-size-base);
410
+ color: var(--fanui-color-text);
411
+ text-decoration: none;
412
+ border-radius: var(--fanui-radius-base);
413
+ cursor: pointer;
414
+ transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
415
+ }
416
+ .fanui-menu__item:hover {
417
+ background-color: var(--fanui-color-hover);
418
+ text-decoration: none;
419
+ color: var(--fanui-color-text-strong);
420
+ }
421
+ .fanui-menu__item.is-active {
422
+ color: var(--fanui-primary);
423
+ background-color: var(--fanui-primary-soft);
424
+ }
425
+ .fanui-menu__item.is-disabled {
426
+ color: var(--fanui-color-disabled-text);
427
+ pointer-events: none;
428
+ }
429
+ .fanui-menu__label {
430
+ flex: 1 1 auto;
431
+ min-width: 0;
432
+ overflow: hidden;
433
+ text-overflow: ellipsis;
434
+ white-space: nowrap;
435
+ }
436
+ .fanui-menu__shortcut {
437
+ flex: 0 0 auto;
438
+ font-size: var(--fanui-font-size-xs);
439
+ color: var(--fanui-color-text-subtle);
440
+ font-family: var(--fanui-font-mono);
441
+ }
442
+ .fanui-menu__divider {
443
+ height: 1px;
444
+ margin: 5px 2px;
445
+ background-color: var(--fanui-color-border-subtle);
446
+ }
447
+ .fanui-menu__group-title {
448
+ padding: 8px 12px 4px;
449
+ font-size: var(--fanui-font-size-xs);
450
+ font-weight: 600;
451
+ color: var(--fanui-color-text-subtle);
452
+ text-transform: uppercase;
453
+ letter-spacing: 0.05em;
454
+ }
455
+ .fanui-menu--horizontal {
456
+ flex-direction: row;
457
+ align-items: center;
458
+ }