@sankhyatronics/sankhya-ui 0.0.7 → 0.0.8
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.
- package/LICENSE +1 -1
- package/README.md +118 -9
- package/dist/components/Footer/Footer.d.ts +2 -0
- package/dist/index.css +1 -1
- package/dist/index.es.js +343 -332
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +8 -8
- package/dist/index.umd.js.map +1 -1
- package/package.json +16 -1
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,26 +1,70 @@
|
|
|
1
1
|
# @sankhyatronics/SankhyaUI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@sankhyatronics/sankhya-ui)
|
|
4
|
+
|
|
5
|
+
The core UI library for the SankhyaUI system. Build **dynamic, JSON-driven portals** with ease.
|
|
6
|
+
**Pure view React components (React 19)** designed for seamless integration with **headless CMS** platforms like **Storyblok**, **Contentful**, or any custom API.
|
|
7
|
+
|
|
8
|
+
[**Explore the Docs & Storybook »**](https://sankhyaui.sankhyatronics.com/?path=/docs/introduction--docs)
|
|
9
|
+
|
|
10
|
+
## Features
|
|
11
|
+
|
|
12
|
+
- **Highly Modular**: Each component is independent and purely visual.
|
|
13
|
+
- **CMS Ready**: Designed to work with Storyblok, Contentful, or custom JSON backends.
|
|
14
|
+
- **Tailwind Integrated**: Uses Tailwind CSS for modern, responsive designs.
|
|
15
|
+
- **Dynamic Rendering**: Includes a `DynamicRenderer` to map JSON data directly to React components.
|
|
4
16
|
|
|
5
17
|
## Installation
|
|
6
18
|
|
|
19
|
+
Using pnpm (recommended):
|
|
20
|
+
```bash
|
|
21
|
+
pnpm add @sankhyatronics/sankhya-ui
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Using npm:
|
|
25
|
+
```bash
|
|
26
|
+
npm install @sankhyatronics/sankhya-ui
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Using yarn:
|
|
7
30
|
```bash
|
|
8
|
-
|
|
31
|
+
yarn add @sankhyatronics/sankhya-ui
|
|
9
32
|
```
|
|
10
33
|
|
|
11
34
|
## Quick Start
|
|
12
35
|
|
|
36
|
+
### 1. Import Styles
|
|
37
|
+
|
|
38
|
+
Import the CSS file at the root of your application (e.g., `main.tsx` or `App.tsx`):
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import '@sankhyatronics/sankhya-ui/styles';
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### 2. Using DynamicRenderer
|
|
45
|
+
|
|
46
|
+
The `DynamicRenderer` is the heart of SankhyaUI for CMS-driven pages. It iterates over a list of content blocks and renders the appropriate component.
|
|
47
|
+
|
|
13
48
|
```tsx
|
|
14
|
-
import { DynamicRenderer } from '@sankhyatronics/
|
|
15
|
-
import '@sankhyatronics/SankhyaUI/styles';
|
|
49
|
+
import { DynamicRenderer } from '@sankhyatronics/sankhya-ui';
|
|
16
50
|
|
|
51
|
+
// Example data usually fetched from a CMS API
|
|
17
52
|
const pageData = [
|
|
18
53
|
{
|
|
19
|
-
type: "Hero",
|
|
54
|
+
type: "Hero", // Matches the component name
|
|
20
55
|
data: {
|
|
21
56
|
Title: "Hello World",
|
|
22
57
|
SubTitle: "Welcome to my portal"
|
|
23
58
|
}
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
type: "Stats",
|
|
62
|
+
data: {
|
|
63
|
+
items: [
|
|
64
|
+
{ label: "Users", value: "10k+" },
|
|
65
|
+
{ label: "Revenue", value: "$5M" }
|
|
66
|
+
]
|
|
67
|
+
}
|
|
24
68
|
}
|
|
25
69
|
];
|
|
26
70
|
|
|
@@ -29,7 +73,72 @@ function App() {
|
|
|
29
73
|
}
|
|
30
74
|
```
|
|
31
75
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
76
|
+
### 3. Using Individual Components
|
|
77
|
+
|
|
78
|
+
You can also import and use components individually:
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
import { Hero, Card } from '@sankhyatronics/sankhya-ui';
|
|
82
|
+
|
|
83
|
+
function LandingPage() {
|
|
84
|
+
return (
|
|
85
|
+
<>
|
|
86
|
+
<Hero data={{ Title: "My Landing Page", SubTitle: "Built with SankhyaUI" }} />
|
|
87
|
+
<Card title="Feature 1" description="Amazing feature" />
|
|
88
|
+
</>
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## Available Components
|
|
94
|
+
|
|
95
|
+
### Layout & Structure
|
|
96
|
+
- **BentoGrid**: A flexible grid layout for displaying varied content.
|
|
97
|
+
- **Card**: Standard card component for items.
|
|
98
|
+
- **ContentBlock**: Generic content container.
|
|
99
|
+
- **FeatureSplit**: Left/right split content for features.
|
|
100
|
+
- **FeaturesSection**: A full section to showcase multiple features.
|
|
101
|
+
- **FeatureItem**: Individual item within a features section.
|
|
102
|
+
- **ItemsAccordion**: Accordion-style list for FAQs or details.
|
|
103
|
+
|
|
104
|
+
### Navigation
|
|
105
|
+
- **Header**: Main site header.
|
|
106
|
+
- **Footer**: Site footer.
|
|
107
|
+
- **MenuGrid**: Grid-based menu layout.
|
|
108
|
+
- **MenuGridItem**: Individual item providing navigation within a grid.
|
|
109
|
+
- **MenuItem**: Standard menu item.
|
|
110
|
+
- **Dropdown**: Dropdown menu component.
|
|
111
|
+
|
|
112
|
+
### Inputs & Actions
|
|
113
|
+
- **CTASection**: Call-to-Action section to drive user engagement.
|
|
114
|
+
- **IconButton**: Button with an icon.
|
|
115
|
+
- **Select**: Dropdown selection input.
|
|
116
|
+
|
|
117
|
+
### Branding & Marketing
|
|
118
|
+
- **Hero**: Top-of-page hero section.
|
|
119
|
+
- **Stats**: Section to display statistics or numbers.
|
|
120
|
+
- **Testimonials**: Section for user feedback and reviews.
|
|
121
|
+
|
|
122
|
+
## Development
|
|
123
|
+
|
|
124
|
+
To run the project locally for development:
|
|
125
|
+
|
|
126
|
+
```bash
|
|
127
|
+
pnpm dev
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
To build the library:
|
|
131
|
+
|
|
132
|
+
```bash
|
|
133
|
+
pnpm build
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
To run the linter:
|
|
137
|
+
|
|
138
|
+
```bash
|
|
139
|
+
pnpm lint
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
## License
|
|
143
|
+
|
|
144
|
+
Distributed under the MIT License. See `LICENSE` for more information.
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer sankhya-ui{:root{--color-primary-50: #f0f9ff;--color-primary-100: #e0f2fe;--color-primary-200: #bae6fd;--color-primary-300: #7dd3fc;--color-primary-400: #38bdf8;--color-primary-500: #0ea5e9;--color-primary-600: #0284c7;--color-primary-700: #0369a1;--color-primary-800: #075985;--color-primary-900: #0c4a6e;--color-primary-950: #082f49;--color-primary: #ffffff;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--text-6xl: 3.75rem;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800}}.bento-grid-section{padding:80px 24px;background-color:var(--color-primary)}.bento-grid-container{max-width:1200px;margin:0 auto}.bento-grid-header{text-align:center;margin-bottom:48px}.bento-grid-title{margin:0 0 16px}.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(240px,auto);gap:24px}.bento-card{background-color:var(--color-primary);border:1px solid var(--color-primary-100);border-radius:24px;overflow:hidden;position:relative;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease;text-decoration:none}.bento-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px -10px var(--color-primary-800);z-index:1}.bento-card-image-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.bento-card-image{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.bento-card:hover .bento-card-image{transform:scale(1.05)}.bento-card-image-wrapper:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#0000,#0009)}.bento-card-content{position:relative;z-index:1;margin-top:auto;padding:24px;display:flex;flex-direction:column;gap:16px}.bento-card:not(:has(.bento-card-image-wrapper)){background-color:var(--color-primary-950)}.bento-card:has(.bento-card-image-wrapper) .bento-card-title,.bento-card:has(.bento-card-image-wrapper) .bento-card-description,.bento-card:has(.bento-card-image-wrapper) .bento-card-icon{color:var(--color-primary)}.bento-card-icon{width:40px;height:40px;border-radius:10px;background-color:var(--color-primary-100);color:var(--color-primary-600);display:flex;align-items:center;justify-content:center}.bento-card:has(.bento-card-image-wrapper) .bento-card-icon{background-color:var(--color-primary-900);color:var(--color-primary-100);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.bento-card-text{border-radius:8px;padding:16px;color:var(--color-primary)}.bento-card-title{font-size:1rem}.bento-card-description{font-size:.875rem}.col-span-1{grid-column:span 1}.col-span-2{grid-column:span 2}.col-span-3{grid-column:span 3}.col-span-4{grid-column:span 4}.row-span-1{grid-row:span 1}.row-span-2{grid-row:span 2}@media(max-width:1024px){.bento-grid{grid-template-columns:repeat(2,1fr)}.col-span-3,.col-span-4{grid-column:span 2}}@media(max-width:640px){.bento-grid{grid-template-columns:1fr}.col-span-1,.col-span-2,.col-span-3,.col-span-4{grid-column:span 1}}.card{background-color:var(--color-primary);border-radius:12px;overflow:hidden;position:relative;transition:all .3s ease;border:1px solid var(--color-primary-100)}.card.theme-inverted{background-color:var(--color-primary-900);border-color:var(--color-primary-800)}.card-bordered{border:1px solid var(--color-primary-200)}.card-elevation-sm{box-shadow:0 1px 2px #0000000d}.card-elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.card-elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.card-hoverable:hover{transform:translateY(-4px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-color:var(--color-primary-300)}.card-padding-none{padding:0}.card-padding-sm{padding:16px}.card-padding-md{padding:24px}.card-padding-lg{padding:32px}@keyframes headerSlideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes headerFadeIn{0%{opacity:0}to{opacity:1}}.header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:1rem;position:relative;background-color:var(--color-primary);z-index:1000}.header.header-sticky{position:fixed;top:0;left:0;right:0;box-shadow:0 2px 8px #0000001a}.header-logo-wrapper{display:flex;align-items:center;flex-shrink:0}.header-logo-img{width:auto;height:auto;max-height:48px}.header-toggle{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:.5rem;font-size:1.5rem;color:var(--color-primary-950);z-index:1002}.header-nav-container{position:fixed;inset:0;background-color:var(--color-primary);display:none;flex-direction:column;padding:5rem 1.5rem 2rem;gap:2rem;z-index:1001;overflow-y:auto}.header-nav-container.active{display:flex;animation:headerFadeIn .3s ease}.header-nav{display:flex;flex-direction:column;gap:1.5rem}.header-utility{display:flex;flex-direction:column;gap:1.5rem;padding-top:1.5rem;border-top:1px solid var(--color-primary-200)}@media(min-width:768px){.header{padding:1rem 2rem}.header-toggle{display:none}.header-nav-container{position:static;display:flex;flex-direction:row;flex-grow:1;padding:0;margin-left:4rem;gap:1rem;background:none;overflow:visible}.header-nav{flex-direction:row;flex-grow:1;gap:1.5rem}.header-utility{flex-direction:row;padding-top:0;margin-left:1.5rem;padding-left:1.5rem;border-top:none;border-left:1px solid var(--color-primary-200)}}.btn{padding:12px 24px;border-radius:4px;display:inline-block;border:none;cursor:pointer;font-family:inherit;text-decoration:none;text-align:center;transition:all .2s ease}.btn-outline{background-color:transparent;border:2px solid currentColor}.delay-100{transition-delay:.1s}.delay-200{transition-delay:.2s}.delay-300{transition-delay:.3s}.delay-400{transition-delay:.4s}.delay-500{transition-delay:.5s}.duration-fast{transition-duration:.2s}.duration-normal{transition-duration:.3s}.duration-slow{transition-duration:.5s}.ease-in{transition-timing-function:ease-in}.ease-out{transition-timing-function:ease-out}.ease-in-out{transition-timing-function:ease-in-out}.will-change-opacity{will-change:opacity}.will-change-transform{will-change:transform}.fade-in{opacity:0;transition:opacity .3s ease-out}.fade-in.visible{opacity:1}.slide-up{opacity:0;transform:translateY(20px);transition:opacity .3s ease-out,transform .3s ease-out}.slide-up.visible{opacity:1;transform:translateY(0)}.hidden{display:none}.visible{display:block}.invisible{visibility:hidden}.hover-lift:hover{transform:translateY(-2px);transition:transform .2s ease}.hover-scale:hover{transform:scale(1.05);transition:transform .2s ease}.active-scale:active{transform:scale(.98)}.section-title{font-size:var(--text-4xl, 2.25rem);font-weight:var(--font-weight-bold, 700);color:var(--color-primary-950, #011d41);margin-bottom:1rem;line-height:1.2}.section-subtitle{font-size:var(--text-lg, 1.125rem);color:var(--color-primary-600, #2f87fd);line-height:1.6;margin-bottom:2rem}.hero-title{font-size:1.5rem;font-weight:700;line-height:1.2;margin-bottom:1rem}.hero-subtitle{font-size:.875rem;line-height:1.6;margin-bottom:1.5rem}@media(min-width:640px){.hero-title{font-size:1.875rem}.hero-subtitle{font-size:1rem}}@media(min-width:768px){.hero-title{font-size:2.25rem}.hero-subtitle{font-size:1.125rem}}@media(min-width:1024px){.hero-title{font-size:3rem}.hero-subtitle{font-size:1.25rem}}@media(min-width:1280px){.hero-title{font-size:3.75rem}}.card-title{font-size:var(--text-xl, 1.25rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-primary-950, #011d41);margin-bottom:.5rem}.card-description{font-size:var(--text-sm, .875rem);color:var(--color-primary-600, #2f87fd);line-height:1.5}.theme-inverted .section-title,.theme-inverted .card-title,.theme-inverted .hero-title{color:var(--color-primary, #f0f7ff)}.theme-inverted .section-subtitle,.theme-inverted .card-description,.theme-inverted .hero-subtitle{color:var(--color-primary-300, #93c5fd)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.p-none{padding:0}.p-small{padding:1rem}.p-medium{padding:1.5rem}.p-large{padding:2rem}@media(min-width:768px){.p-small{padding:1.5rem}.p-medium{padding:2rem}.p-large{padding:3rem}}@media(min-width:1024px){.p-medium{padding:3rem}.p-large{padding:4rem}}.menu-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;font-size:var(--text-sm);text-decoration:none;border-radius:6px;transition:all .15s ease;box-sizing:border-box}.menu-item.active{background-color:var(--color-primary-100);color:var(--color-primary-900);border-left:4px solid var(--color-primary-600)}.menu-item-icon{flex-shrink:0;margin-top:2px}.menu-item-icon svg{width:16px;height:16px}.menu-item-content{flex:1;min-width:0}.menu-item-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.menu-item-title{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.menu-item-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;font-size:var(--text-xs);font-weight:500;border-radius:9999px;flex-shrink:0}.menu-item-description{margin-top:4px;font-size:var(--text-xs);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}.menu-item.compact{padding:8px 12px;gap:8px}.menu-item.compact .menu-item-icon svg{width:14px;height:14px}.menu-item.compact .menu-item-title,.menu-item.compact .menu-item-description{font-size:var(--text-xs)}.menu-item.no-description{align-items:center}.menu-item.no-description .menu-item-icon{margin-top:0}.menu-grid-container{width:100%}.menu-grid{display:grid;gap:12px}.menu-grid.columns-1{grid-template-columns:repeat(1,1fr)}.menu-grid.columns-2{grid-template-columns:repeat(2,1fr)}.menu-grid.columns-3{grid-template-columns:repeat(3,1fr)}.menu-grid.columns-4{grid-template-columns:repeat(4,1fr)}@media(max-width:768px){.menu-grid.columns-2,.menu-grid.columns-3,.menu-grid.columns-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.menu-grid.columns-1,.menu-grid.columns-2,.menu-grid.columns-3,.menu-grid.columns-4{grid-template-columns:1fr}}.menu-grid-item{display:flex;flex-direction:column;border-radius:8px;position:relative;overflow:hidden;transition:all .2s ease}.menu-grid-item.regular{padding:16px}.menu-grid-item.compact{padding:12px}.menu-grid-item:hover{transform:translateY(-2px)}.menu-grid-link{display:flex;flex-direction:column;text-decoration:none;width:100%;height:100%;gap:8px}.menu-grid-badge{position:absolute;top:2px;right:8px;font-size:.5rem;padding:2px 8px;border-radius:9999px;font-weight:500;z-index:1;background-color:var(--color-primary-950);color:var(--color-primary)}.menu-grid-header{display:flex;align-items:center;gap:12px;width:100%}.menu-grid-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;transition:background-color .2s ease;flex-shrink:0;padding:0;margin-bottom:0}.menu-grid-icon svg{width:18px;height:18px}.menu-grid-title{font-size:var(--text-sm);font-weight:500;transition:color .2s ease;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:0}.menu-grid-description{font-size:var(--text-xs);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;transition:color .2s ease}.menu-grid-children{padding-top:12px;margin-top:12px}.menu-grid-children>*{margin:4px 0}.menu-grid-item.compact .menu-grid-header{gap:8px}.menu-grid-item.compact .menu-grid-icon{width:24px;height:24px}.menu-grid-item.compact .menu-grid-icon svg{width:14px;height:14px}.menu-grid-item.compact .menu-grid-title,.menu-grid-item.compact .menu-grid-description{font-size:var(--text-xs)}.menu-grid-item:has(.menu-grid-icon):not(:has(.menu-grid-title)) .menu-grid-header{justify-content:center}.menu-grid-item:has(.menu-grid-title):not(:has(.menu-grid-icon)) .menu-grid-header{justify-content:flex-start}@media(max-width:480px){.menu-grid-header{gap:8px}.menu-grid-icon{width:28px;height:28px}.menu-grid-icon svg{width:16px;height:16px}}.hero-image{background-position:center;background-repeat:no-repeat;background-size:cover;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;width:100%}.hero-text{display:flex;flex-direction:column;gap:20px;text-align:center;z-index:2;position:relative;width:80%;margin:0 auto}.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#0006,#0003,#0006);z-index:1}.hero-text-primary{color:var(--color-primary)}.hero-actions{display:flex;flex-direction:column;gap:1rem;justify-content:center;align-items:center;width:100%}.hero-btn-primary{background-color:var(--color-primary-600);color:var(--color-primary);font-size:.875rem;padding:.5rem 1rem}.hero-btn-primary:hover{background-color:var(--color-primary-500)}@media(min-width:640px){.hero-actions{flex-direction:row}.hero-btn-primary{font-size:1rem;padding:.5rem 1.5rem}}@media(min-width:768px){.hero-text{padding:2rem}.hero-btn-primary{font-size:1.125rem}}@media(min-width:1024px){.hero-text{padding:3rem}}.select-options-group{padding:.5rem;display:flex;flex-direction:column;gap:.25rem}.select-option{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;cursor:pointer;border-radius:.375rem;transition:all .2s ease}.option-icon{display:flex;align-items:center;font-size:1.25rem}.option-label{flex:1}.feature-split-section{padding:24px;background-color:var(--color-primary)}.feature-split-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.feature-split-section.image-left .feature-split-container{direction:rtl}.feature-split-section.image-left .feature-split-content{direction:ltr}.feature-split-section.image-top .feature-split-container{grid-template-columns:1fr;gap:48px;text-align:center}.feature-split-section.image-top .feature-split-content{align-items:center}.feature-split-section.image-top .feature-split-image-wrapper{order:-1;max-width:800px;margin:0 auto;min-height:400px}.feature-split-content{display:flex;flex-direction:column;gap:32px}.feature-split-title{line-height:1.2;margin:0}.feature-split-description{font-size:var(--text-base);color:var(--color-primary-600);line-height:1.6;margin:0}.feature-split-description p{margin-bottom:1em}.feature-split-description p:last-child{margin-bottom:0}.feature-split-section.theme-inverted{background-color:var(--color-primary-950)}.feature-split-section.theme-inverted .feature-split-title{color:var(--color-primary)!important}.feature-split-section.theme-inverted .feature-split-description{color:var(--color-primary-100)!important}.feature-split-section.theme-inverted .feature-split-item-title{color:var(--color-primary)!important}.feature-split-section.theme-inverted .feature-split-item-description{color:var(--color-primary-100)!important}.feature-split-section.theme-inverted .feature-split-icon-wrapper{background-color:var(--color-primary-800);color:var(--color-primary-100)}.feature-split-actions{margin-top:16px}.feature-split-actions button{color:var(--color-primary-950);background-color:var(--color-primary-100);padding:16px;border-radius:12px}.feature-split-list{display:flex;flex-direction:column;gap:24px;margin-top:16px}.feature-split-item{display:flex;gap:16px;align-items:flex-start}.feature-split-icon-wrapper{flex-shrink:0;width:48px;height:48px;border-radius:12px;background-color:var(--color-primary-100);color:var(--color-primary-600);display:flex;align-items:center;justify-content:center}.feature-split-item-title{margin:0 0 8px}.feature-split-item-description{font-size:var(--text-sm);color:var(--color-primary-600);line-height:1.5;margin:0}.feature-split-image-wrapper{width:100%;height:100%;min-height:400px;border-radius:24px;overflow:hidden;box-shadow:0 20px 40px -12px #0000001a}.feature-split-image{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.feature-split-image:hover{transform:scale(1.02)}@media(max-width:1024px){.feature-split-container{gap:48px}}@media(max-width:768px){.feature-split-section{padding:64px 24px}.feature-split-container{grid-template-columns:1fr;gap:48px;direction:ltr!important}.feature-split-image-wrapper{min-height:300px;order:-1}}.content-block-section{padding:24px;background-color:var(--color-primary)}.content-block-container{max-width:1440px;padding:0 48px;margin:0 auto}.content-block-header{text-align:center;margin-bottom:48px}.content-block-title{margin:0 0 16px;line-height:1.1}.content-block-featured-image{margin-bottom:48px;border-radius:16px;overflow:hidden}.content-block-featured-image img{width:100%;height:auto;display:block}.content-block-featured-image figcaption{padding:12px;text-align:center;color:var(--color-primary-500);font-size:var(--text-xs)}.content-block-body{color:var(--color-primary-800);font-size:var(--text-base);line-height:1.7}.content-block-body h2{font-size:var(--text-2xl);font-weight:var(--font-weight-bold);color:var(--color-primary-900);margin:48px 0 24px}.content-block-body h3{font-size:var(--text-xl);font-weight:var(--font-weight-semibold);color:var(--color-primary-900);margin:32px 0 16px}.content-block-body p{margin-bottom:24px}.content-block-body ul,.content-block-body ol{margin-bottom:24px;padding-left:24px}.content-block-body li{margin-bottom:8px}.content-block-body a{color:var(--color-primary-600);text-decoration:underline;text-underline-offset:4px}.content-block-body a:hover{color:var(--color-primary-800)}.content-block-body img{max-width:100%;height:auto;border-radius:8px;margin:32px 0}.content-block-body blockquote{border-left:4px solid var(--color-primary-300);margin:32px 0;padding-left:24px;font-style:italic;color:var(--color-primary-700)}@media(max-width:768px){.content-block-section{padding:48px 24px}.content-block-body{font-size:var(--text-base)}}.features-section{padding:80px 24px;background-color:var(--color-primary)}.features-container{max-width:1200px;margin:0 auto}.features-header{text-align:center;margin-bottom:64px}.features-title{margin:0;color:var(--color-primary-950)}.features-subtitle{margin:0 auto;color:var(--color-primary-600)}.features-section.theme-inverted{background-color:var(--color-primary-950)}.features-section.theme-inverted .features-title,.features-section.theme-inverted .section-title{color:var(--color-primary)!important}.features-section.theme-inverted .features-subtitle,.features-section.theme-inverted .section-subtitle{color:var(--color-primary-200)!important}.features-grid{display:grid;grid-template-columns:repeat(var(--features-columns, 2),1fr);gap:32px}.feature-card-content{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.feature-icon-wrapper{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background-color:var(--color-primary-100);color:var(--color-primary-900);margin-bottom:8px}.feature-title{margin:0}.feature-link{display:flex;align-items:center;gap:4px;margin-top:auto;color:var(--color-primary-600);font-weight:500;font-size:var(--text-sm);text-decoration:none;transition:color .2s ease}.feature-link:hover{color:var(--color-primary-900);text-decoration:underline}.feature-description{margin:0}.card.theme-inverted .feature-icon-wrapper{background-color:var(--color-primary-800);color:var(--color-primary-100)}.card.theme-inverted .feature-link{color:var(--color-primary-300)}.card.theme-inverted .feature-link:hover{color:var(--color-primary-100)}@media(max-width:768px){.features-section{padding:48px 20px}.features-grid{grid-template-columns:1fr!important}}.menu{display:block;position:relative}.menu-title{display:flex;align-items:center;justify-content:center;min-height:40px;padding:12px;text-align:center;width:fit-content;transition:background-color .3s ease;cursor:pointer;gap:8px;white-space:nowrap}.menu-title .arrow{display:inline-block;margin-left:8px;font-size:var(--text-xs);transition:transform .3s ease}.menu-title[aria-expanded=true] .arrow{transform:rotate(180deg)}.menu-dropdown{position:absolute;top:100%;left:0;z-index:100;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s ease,visibility .3s ease,transform .3s ease;pointer-events:none}.menu-dropdown.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.touch-device .menu-dropdown{display:none;position:relative;width:100%;opacity:1;visibility:visible;transform:none}.touch-device .menu-dropdown.show{display:block;pointer-events:auto}@media(max-width:768px){.menu-dropdown{width:100vw;left:0;right:0}}.menu-dropdown>*{overflow:hidden;transition:all .3s cubic-bezier(.73,.32,.34,1.5)}.stats-section{padding:64px 24px;background-color:var(--color-primary);border-top:1px solid var(--color-primary-100);border-bottom:1px solid var(--color-primary-100)}.stats-container{max-width:1200px;margin:0 auto}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px}.stat-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}.stat-value{font-size:var(--text-2xl);font-weight:var(--font-weight-bold);color:var(--color-primary-950);line-height:1;letter-spacing:-.02em}.stat-label{font-size:var(--text-base);font-weight:var(--font-weight-semibold);color:var(--color-primary-600);text-transform:uppercase;letter-spacing:.05em}.stat-description{font-size:var(--text-sm);color:var(--color-primary-500);max-width:200px}@media(max-width:768px){.stats-section{padding:40px 24px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:24px}.stat-value{font-size:var(--text-xl)}}.cta-section{padding:100px 24px;background-color:var(--color-primary-950);color:var(--color-primary);text-align:center;border-radius:24px;margin:40px auto;max-width:1200px;width:calc(100% - 48px)}.cta-container{max-width:800px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:32px}.cta-title{margin:0;letter-spacing:-.02em}.cta-description{margin:0}.cta-actions{display:flex;gap:16px;margin-top:16px}@media(max-width:768px){.cta-section{padding:60px 24px;margin:24px;width:auto;border-radius:16px}.cta-actions{flex-direction:column;width:100%}.cta-actions>button{width:100%}}.testimonials-section{padding:80px 24px;background-color:var(--color-primary-100)}.testimonials-container{max-width:1200px;margin:0 auto}.testimonials-header{text-align:center;margin-bottom:64px}.testimonials-title{margin-bottom:16px;letter-spacing:-.02em}.testimonials-subtitle{margin:0 auto}.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px}.testimonial-card-content{display:flex;flex-direction:column;gap:24px}.testimonial-stars{display:flex;gap:4px;color:#fbbf24}.testimonial-quote{font-size:var(--text-sm);line-height:1.6;color:var(--color-primary-700);font-style:italic;margin:0}.testimonial-author{display:flex;align-items:center;gap:12px;margin-top:auto}.testimonial-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background-color:var(--color-primary-200)}.testimonial-avatar-placeholder{width:48px;height:48px;border-radius:50%;background-color:var(--color-primary-200);display:flex;align-items:center;justify-content:center;color:var(--color-primary-600);font-weight:var(--font-weight-semibold);font-size:var(--text-lg)}.testimonial-author-info{display:flex;flex-direction:column}.testimonial-name{font-weight:var(--font-weight-semibold);color:var(--color-primary-950);font-size:var(--text-lg)}.testimonial-role{font-size:var(--text-sm);color:var(--color-primary-500)}@media(max-width:768px){.testimonials-section{padding:48px 20px}}.footer{background-color:var(--color-primary);padding:64px 24px 32px;border-top:1px solid var(--color-primary-100)}.footer-container{max-width:1200px;margin:0 auto}.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:64px;margin-bottom:64px}.footer-brand{display:flex;flex-direction:column;gap:16px}.footer-logo{font-size:var(--text-xl);font-weight:var(--font-weight-bold);color:var(--color-primary-950)}.footer-logo-container{display:flex;align-items:center;gap:8px;font-size:var(--text-xl);font-weight:var(--font-weight-bold)}.footer-logo-img{height:32px;width:auto}.footer-description{color:var(--color-primary-600);line-height:1.6;max-width:300px}.footer-social{display:flex;gap:16px;margin-top:16px}.footer-social-link{color:var(--color-primary-500);transition:color .2s ease}.footer-social-link:hover{color:var(--color-primary-900)}.footer-column-title{font-size:var(--text-xs);font-weight:var(--font-weight-semibold);color:var(--color-primary-900);text-transform:uppercase;letter-spacing:.05em;margin-bottom:24px}.footer-links{display:flex;flex-direction:column;gap:16px}.footer-link{color:var(--color-primary-600);text-decoration:none;transition:color .2s ease;font-size:var(--text-sm)}.footer-link:hover{color:var(--color-primary-900)}.footer-bottom{padding-top:32px;border-top:1px solid var(--color-primary-200);display:flex;justify-content:space-between;align-items:center;color:var(--color-primary-500);font-size:var(--text-xs)}@media(max-width:1024px){.footer-grid{grid-template-columns:1fr repeat(2,1fr);gap:48px}}@media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:40px}.footer-bottom{flex-direction:column;gap:16px;text-align:center}}.footer.theme-inverted{background-color:var(--color-primary-950);border-top:1px solid var(--color-primary-900)}.footer.theme-inverted .footer-logo{color:var(--color-primary-100)}.footer.theme-inverted .footer-description{color:var(--color-primary-300)}.footer.theme-inverted .footer-column-title{color:var(--color-primary-100)}.footer.theme-inverted .footer-link{color:var(--color-primary-400)}.footer.theme-inverted .footer-link:hover{color:var(--color-primary-100)}.footer.theme-inverted .footer-social-link{color:var(--color-primary-400)}.footer.theme-inverted .footer-social-link:hover{color:var(--color-primary-100)}.footer.theme-inverted .footer-bottom{border-top:1px solid var(--color-primary-900);color:var(--color-primary-500)}.accordion-section{padding:80px 24px;background-color:var(--color-primary)}.accordion-container{max-width:800px;margin:0 auto}.accordion-header-section{text-align:center;margin-bottom:48px}.accordion-title{font-size:var(--text-2xl);font-weight:var(--font-weight-bold);color:var(--color-primary-950);margin-bottom:12px}.accordion-subtitle{font-size:var(--text-base);color:var(--color-primary-600)}.accordion-list{display:flex;flex-direction:column;gap:16px}.accordion-item{border:1px solid var(--color-primary-200);border-radius:8px;background-color:var(--color-primary);overflow:hidden;transition:all .2s ease}.accordion-item.open{border-color:var(--color-primary-400);box-shadow:0 4px 6px -1px #0000000d}.accordion-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;padding:24px;background:none;border:none;cursor:pointer;text-align:left;font-size:var(--text-lg);font-weight:var(--font-weight-semibold);color:var(--color-primary-900)}.accordion-trigger:hover{background-color:var(--color-primary-100)}.accordion-icon{transition:transform .3s ease;color:var(--color-primary-500);flex-shrink:0;margin-left:16px}.accordion-icon.rotate{transform:rotate(180deg)}.accordion-content{height:0;overflow:hidden;transition:height .3s ease}.accordion-content-inner{padding:0 24px 24px;color:var(--color-primary-700);line-height:1.6}@media(max-width:768px){.accordion-section{padding:48px 20px}.accordion-title{font-size:var(--text-xl)}}
|
|
1
|
+
@layer sankhya-ui{:root{--color-primary-50: #f0f9ff;--color-primary-100: #e0f2fe;--color-primary-200: #bae6fd;--color-primary-300: #7dd3fc;--color-primary-400: #38bdf8;--color-primary-500: #0ea5e9;--color-primary-600: #0284c7;--color-primary-700: #0369a1;--color-primary-800: #075985;--color-primary-900: #0c4a6e;--color-primary-950: #082f49;--color-primary: #ffffff;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--text-6xl: 3.75rem;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800}}.bento-grid-section{padding:80px 24px;background-color:var(--color-primary)}.bento-grid-container{max-width:1200px;margin:0 auto}.bento-grid-header{text-align:center;margin-bottom:48px}.bento-grid-title{margin:0 0 16px}.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(240px,auto);gap:24px}.bento-card{background-color:var(--color-primary);border:1px solid var(--color-primary-100);border-radius:24px;overflow:hidden;position:relative;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease;text-decoration:none}.bento-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px -10px var(--color-primary-800);z-index:1}.bento-card-image-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.bento-card-image{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.bento-card:hover .bento-card-image{transform:scale(1.05)}.bento-card-image-wrapper:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#0000,#0009)}.bento-card-content{position:relative;z-index:1;margin-top:auto;padding:24px;display:flex;flex-direction:column;gap:16px}.bento-card:not(:has(.bento-card-image-wrapper)){background-color:var(--color-primary-950)}.bento-card:has(.bento-card-image-wrapper) .bento-card-title,.bento-card:has(.bento-card-image-wrapper) .bento-card-description,.bento-card:has(.bento-card-image-wrapper) .bento-card-icon{color:var(--color-primary)}.bento-card-icon{width:40px;height:40px;border-radius:10px;background-color:var(--color-primary-100);color:var(--color-primary-600);display:flex;align-items:center;justify-content:center}.bento-card:has(.bento-card-image-wrapper) .bento-card-icon{background-color:var(--color-primary-900);color:var(--color-primary-100);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.bento-card-text{border-radius:8px;padding:16px;color:var(--color-primary)}.bento-card-title{font-size:1rem}.bento-card-description{font-size:.875rem}.col-span-1{grid-column:span 1}.col-span-2{grid-column:span 2}.col-span-3{grid-column:span 3}.col-span-4{grid-column:span 4}.row-span-1{grid-row:span 1}.row-span-2{grid-row:span 2}@media(max-width:1024px){.bento-grid{grid-template-columns:repeat(2,1fr)}.col-span-3,.col-span-4{grid-column:span 2}}@media(max-width:640px){.bento-grid{grid-template-columns:1fr}.col-span-1,.col-span-2,.col-span-3,.col-span-4{grid-column:span 1}}.card{background-color:var(--color-primary);border-radius:12px;overflow:hidden;position:relative;transition:all .3s ease;border:1px solid var(--color-primary-100)}.card.theme-inverted{background-color:var(--color-primary-900);border-color:var(--color-primary-800)}.card-bordered{border:1px solid var(--color-primary-200)}.card-elevation-sm{box-shadow:0 1px 2px #0000000d}.card-elevation-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.card-elevation-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.card-hoverable:hover{transform:translateY(-4px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-color:var(--color-primary-300)}.card-padding-none{padding:0}.card-padding-sm{padding:16px}.card-padding-md{padding:24px}.card-padding-lg{padding:32px}@keyframes headerSlideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes headerFadeIn{0%{opacity:0}to{opacity:1}}.header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:1rem;position:relative;background-color:var(--color-primary);z-index:1000}.header.header-sticky{position:fixed;top:0;left:0;right:0;box-shadow:0 2px 8px #0000001a}.header-logo-wrapper{display:flex;align-items:center;flex-shrink:0}.header-logo-img{width:auto;height:auto;max-height:48px}.header-toggle{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:.5rem;font-size:1.5rem;color:var(--color-primary-950);z-index:1002}.header-nav-container{position:fixed;inset:0;background-color:var(--color-primary);display:none;flex-direction:column;padding:5rem 1.5rem 2rem;gap:2rem;z-index:1001;overflow-y:auto}.header-nav-container.active{display:flex;animation:headerFadeIn .3s ease}.header-nav{display:flex;flex-direction:column;gap:1.5rem}.header-utility{display:flex;flex-direction:column;gap:1.5rem;padding-top:1.5rem;border-top:1px solid var(--color-primary-200)}@media(min-width:768px){.header{padding:1rem 2rem}.header-toggle{display:none}.header-nav-container{position:static;display:flex;flex-direction:row;flex-grow:1;padding:0;margin-left:4rem;gap:1rem;background:none;overflow:visible}.header-nav{flex-direction:row;flex-grow:1;gap:1.5rem}.header-utility{flex-direction:row;padding-top:0;margin-left:1.5rem;padding-left:1.5rem;border-top:none;border-left:1px solid var(--color-primary-200)}}.btn{padding:12px 24px;border-radius:4px;display:inline-block;border:none;cursor:pointer;font-family:inherit;text-decoration:none;text-align:center;transition:all .2s ease}.btn-outline{background-color:transparent;border:2px solid currentColor}.delay-100{transition-delay:.1s}.delay-200{transition-delay:.2s}.delay-300{transition-delay:.3s}.delay-400{transition-delay:.4s}.delay-500{transition-delay:.5s}.duration-fast{transition-duration:.2s}.duration-normal{transition-duration:.3s}.duration-slow{transition-duration:.5s}.ease-in{transition-timing-function:ease-in}.ease-out{transition-timing-function:ease-out}.ease-in-out{transition-timing-function:ease-in-out}.will-change-opacity{will-change:opacity}.will-change-transform{will-change:transform}.fade-in{opacity:0;transition:opacity .3s ease-out}.fade-in.visible{opacity:1}.slide-up{opacity:0;transform:translateY(20px);transition:opacity .3s ease-out,transform .3s ease-out}.slide-up.visible{opacity:1;transform:translateY(0)}.hidden{display:none}.visible{display:block}.invisible{visibility:hidden}.hover-lift:hover{transform:translateY(-2px);transition:transform .2s ease}.hover-scale:hover{transform:scale(1.05);transition:transform .2s ease}.active-scale:active{transform:scale(.98)}.section-title{font-size:var(--text-4xl, 2.25rem);font-weight:var(--font-weight-bold, 700);color:var(--color-primary-950, #011d41);margin-bottom:1rem;line-height:1.2}.section-subtitle{font-size:var(--text-lg, 1.125rem);color:var(--color-primary-600, #2f87fd);line-height:1.6;margin-bottom:2rem}.hero-title{font-size:1.5rem;font-weight:700;line-height:1.2;margin-bottom:1rem}.hero-subtitle{font-size:.875rem;line-height:1.6;margin-bottom:1.5rem}@media(min-width:640px){.hero-title{font-size:1.875rem}.hero-subtitle{font-size:1rem}}@media(min-width:768px){.hero-title{font-size:2.25rem}.hero-subtitle{font-size:1.125rem}}@media(min-width:1024px){.hero-title{font-size:3rem}.hero-subtitle{font-size:1.25rem}}@media(min-width:1280px){.hero-title{font-size:3.75rem}}.card-title{font-size:var(--text-xl, 1.25rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-primary-950, #011d41);margin-bottom:.5rem}.card-description{font-size:var(--text-sm, .875rem);color:var(--color-primary-600, #2f87fd);line-height:1.5}.theme-inverted .section-title,.theme-inverted .card-title,.theme-inverted .hero-title{color:var(--color-primary, #f0f7ff)}.theme-inverted .section-subtitle,.theme-inverted .card-description,.theme-inverted .hero-subtitle{color:var(--color-primary-300, #93c5fd)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.p-none{padding:0}.p-small{padding:1rem}.p-medium{padding:1.5rem}.p-large{padding:2rem}@media(min-width:768px){.p-small{padding:1.5rem}.p-medium{padding:2rem}.p-large{padding:3rem}}@media(min-width:1024px){.p-medium{padding:3rem}.p-large{padding:4rem}}.menu-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;font-size:var(--text-sm);text-decoration:none;border-radius:6px;transition:all .15s ease;box-sizing:border-box}.menu-item.active{background-color:var(--color-primary-100);color:var(--color-primary-900);border-left:4px solid var(--color-primary-600)}.menu-item-icon{flex-shrink:0;margin-top:2px}.menu-item-icon svg{width:16px;height:16px}.menu-item-content{flex:1;min-width:0}.menu-item-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.menu-item-title{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.menu-item-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;font-size:var(--text-xs);font-weight:500;border-radius:9999px;flex-shrink:0}.menu-item-description{margin-top:4px;font-size:var(--text-xs);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}.menu-item.compact{padding:8px 12px;gap:8px}.menu-item.compact .menu-item-icon svg{width:14px;height:14px}.menu-item.compact .menu-item-title,.menu-item.compact .menu-item-description{font-size:var(--text-xs)}.menu-item.no-description{align-items:center}.menu-item.no-description .menu-item-icon{margin-top:0}.menu-grid-container{width:100%}.menu-grid{display:grid;gap:12px}.menu-grid.columns-1{grid-template-columns:repeat(1,1fr)}.menu-grid.columns-2{grid-template-columns:repeat(2,1fr)}.menu-grid.columns-3{grid-template-columns:repeat(3,1fr)}.menu-grid.columns-4{grid-template-columns:repeat(4,1fr)}@media(max-width:768px){.menu-grid.columns-2,.menu-grid.columns-3,.menu-grid.columns-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.menu-grid.columns-1,.menu-grid.columns-2,.menu-grid.columns-3,.menu-grid.columns-4{grid-template-columns:1fr}}.menu-grid-item{display:flex;flex-direction:column;border-radius:8px;position:relative;overflow:hidden;transition:all .2s ease}.menu-grid-item.regular{padding:16px}.menu-grid-item.compact{padding:12px}.menu-grid-item:hover{transform:translateY(-2px)}.menu-grid-link{display:flex;flex-direction:column;text-decoration:none;width:100%;height:100%;gap:8px}.menu-grid-badge{position:absolute;top:2px;right:8px;font-size:.5rem;padding:2px 8px;border-radius:9999px;font-weight:500;z-index:1;background-color:var(--color-primary-950);color:var(--color-primary)}.menu-grid-header{display:flex;align-items:center;gap:12px;width:100%}.menu-grid-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;transition:background-color .2s ease;flex-shrink:0;padding:0;margin-bottom:0}.menu-grid-icon svg{width:18px;height:18px}.menu-grid-title{font-size:var(--text-sm);font-weight:500;transition:color .2s ease;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:0}.menu-grid-description{font-size:var(--text-xs);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;transition:color .2s ease}.menu-grid-children{padding-top:12px;margin-top:12px}.menu-grid-children>*{margin:4px 0}.menu-grid-item.compact .menu-grid-header{gap:8px}.menu-grid-item.compact .menu-grid-icon{width:24px;height:24px}.menu-grid-item.compact .menu-grid-icon svg{width:14px;height:14px}.menu-grid-item.compact .menu-grid-title,.menu-grid-item.compact .menu-grid-description{font-size:var(--text-xs)}.menu-grid-item:has(.menu-grid-icon):not(:has(.menu-grid-title)) .menu-grid-header{justify-content:center}.menu-grid-item:has(.menu-grid-title):not(:has(.menu-grid-icon)) .menu-grid-header{justify-content:flex-start}@media(max-width:480px){.menu-grid-header{gap:8px}.menu-grid-icon{width:28px;height:28px}.menu-grid-icon svg{width:16px;height:16px}}.hero-image{background-position:center;background-repeat:no-repeat;background-size:cover;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;width:100%}.hero-text{display:flex;flex-direction:column;gap:20px;text-align:center;z-index:2;position:relative;width:80%;margin:0 auto}.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#0006,#0003,#0006);z-index:1}.hero-text-primary{color:var(--color-primary)}.hero-actions{display:flex;flex-direction:column;gap:1rem;justify-content:center;align-items:center;width:100%}.hero-btn-primary{background-color:var(--color-primary-600);color:var(--color-primary);font-size:.875rem;padding:.5rem 1rem}.hero-btn-primary:hover{background-color:var(--color-primary-500)}@media(min-width:640px){.hero-actions{flex-direction:row}.hero-btn-primary{font-size:1rem;padding:.5rem 1.5rem}}@media(min-width:768px){.hero-text{padding:2rem}.hero-btn-primary{font-size:1.125rem}}@media(min-width:1024px){.hero-text{padding:3rem}}.select-options-group{padding:.5rem;display:flex;flex-direction:column;gap:.25rem}.select-option{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;cursor:pointer;border-radius:.375rem;transition:all .2s ease}.option-icon{display:flex;align-items:center;font-size:1.25rem}.option-label{flex:1}.feature-split-section{padding:24px;background-color:var(--color-primary)}.feature-split-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.feature-split-section.image-left .feature-split-container{direction:rtl}.feature-split-section.image-left .feature-split-content{direction:ltr}.feature-split-section.image-top .feature-split-container{grid-template-columns:1fr;gap:48px;text-align:center}.feature-split-section.image-top .feature-split-content{align-items:center}.feature-split-section.image-top .feature-split-image-wrapper{order:-1;max-width:800px;margin:0 auto;min-height:400px}.feature-split-content{display:flex;flex-direction:column;gap:32px}.feature-split-title{line-height:1.2;margin:0}.feature-split-description{font-size:var(--text-base);color:var(--color-primary-600);line-height:1.6;margin:0}.feature-split-description p{margin-bottom:1em}.feature-split-description p:last-child{margin-bottom:0}.feature-split-section.theme-inverted{background-color:var(--color-primary-950)}.feature-split-section.theme-inverted .feature-split-title{color:var(--color-primary)!important}.feature-split-section.theme-inverted .feature-split-description{color:var(--color-primary-100)!important}.feature-split-section.theme-inverted .feature-split-item-title{color:var(--color-primary)!important}.feature-split-section.theme-inverted .feature-split-item-description{color:var(--color-primary-100)!important}.feature-split-section.theme-inverted .feature-split-icon-wrapper{background-color:var(--color-primary-800);color:var(--color-primary-100)}.feature-split-actions{margin-top:16px}.feature-split-actions button{color:var(--color-primary-950);background-color:var(--color-primary-100);padding:16px;border-radius:12px}.feature-split-list{display:flex;flex-direction:column;gap:24px;margin-top:16px}.feature-split-item{display:flex;gap:16px;align-items:flex-start}.feature-split-icon-wrapper{flex-shrink:0;width:48px;height:48px;border-radius:12px;background-color:var(--color-primary-100);color:var(--color-primary-600);display:flex;align-items:center;justify-content:center}.feature-split-item-title{margin:0 0 8px}.feature-split-item-description{font-size:var(--text-sm);color:var(--color-primary-600);line-height:1.5;margin:0}.feature-split-image-wrapper{width:100%;height:100%;min-height:400px;border-radius:24px;overflow:hidden;box-shadow:0 20px 40px -12px #0000001a}.feature-split-image{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.feature-split-image:hover{transform:scale(1.02)}@media(max-width:1024px){.feature-split-container{gap:48px}}@media(max-width:768px){.feature-split-section{padding:64px 24px}.feature-split-container{grid-template-columns:1fr;gap:48px;direction:ltr!important}.feature-split-image-wrapper{min-height:300px;order:-1}}.content-block-section{padding:24px;background-color:var(--color-primary)}.content-block-container{max-width:1440px;padding:0 48px;margin:0 auto}.content-block-header{text-align:center;margin-bottom:48px}.content-block-title{margin:0 0 16px;line-height:1.1}.content-block-featured-image{margin-bottom:48px;border-radius:16px;overflow:hidden}.content-block-featured-image img{width:100%;height:auto;display:block}.content-block-featured-image figcaption{padding:12px;text-align:center;color:var(--color-primary-500);font-size:var(--text-xs)}.content-block-body{color:var(--color-primary-800);font-size:var(--text-base);line-height:1.7}.content-block-body h2{font-size:var(--text-2xl);font-weight:var(--font-weight-bold);color:var(--color-primary-900);margin:48px 0 24px}.content-block-body h3{font-size:var(--text-xl);font-weight:var(--font-weight-semibold);color:var(--color-primary-900);margin:32px 0 16px}.content-block-body p{margin-bottom:24px}.content-block-body ul,.content-block-body ol{margin-bottom:24px;padding-left:24px}.content-block-body li{margin-bottom:8px}.content-block-body a{color:var(--color-primary-600);text-decoration:underline;text-underline-offset:4px}.content-block-body a:hover{color:var(--color-primary-800)}.content-block-body img{max-width:100%;height:auto;border-radius:8px;margin:32px 0}.content-block-body blockquote{border-left:4px solid var(--color-primary-300);margin:32px 0;padding-left:24px;font-style:italic;color:var(--color-primary-700)}@media(max-width:768px){.content-block-section{padding:48px 24px}.content-block-body{font-size:var(--text-base)}}.features-section{padding:80px 24px;background-color:var(--color-primary)}.features-container{max-width:1200px;margin:0 auto}.features-header{text-align:center;margin-bottom:64px}.features-title{margin:0;color:var(--color-primary-950)}.features-subtitle{margin:0 auto;color:var(--color-primary-600)}.features-section.theme-inverted{background-color:var(--color-primary-950)}.features-section.theme-inverted .features-title,.features-section.theme-inverted .section-title{color:var(--color-primary)!important}.features-section.theme-inverted .features-subtitle,.features-section.theme-inverted .section-subtitle{color:var(--color-primary-200)!important}.features-grid{display:grid;grid-template-columns:repeat(var(--features-columns, 2),1fr);gap:32px}.feature-card-content{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.feature-icon-wrapper{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background-color:var(--color-primary-100);color:var(--color-primary-900);margin-bottom:8px}.feature-title{margin:0}.feature-link{display:flex;align-items:center;gap:4px;margin-top:auto;color:var(--color-primary-600);font-weight:500;font-size:var(--text-sm);text-decoration:none;transition:color .2s ease}.feature-link:hover{color:var(--color-primary-900);text-decoration:underline}.feature-description{margin:0}.card.theme-inverted .feature-icon-wrapper{background-color:var(--color-primary-800);color:var(--color-primary-100)}.card.theme-inverted .feature-link{color:var(--color-primary-300)}.card.theme-inverted .feature-link:hover{color:var(--color-primary-100)}@media(max-width:768px){.features-section{padding:48px 20px}.features-grid{grid-template-columns:1fr!important}}.menu{display:block;position:relative}.menu-title{display:flex;align-items:center;justify-content:center;min-height:40px;padding:12px;text-align:center;width:fit-content;transition:background-color .3s ease;cursor:pointer;gap:8px;white-space:nowrap}.menu-title .arrow{display:inline-block;margin-left:8px;font-size:var(--text-xs);transition:transform .3s ease}.menu-title[aria-expanded=true] .arrow{transform:rotate(180deg)}.menu-dropdown{position:absolute;top:100%;left:0;z-index:100;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s ease,visibility .3s ease,transform .3s ease;pointer-events:none}.menu-dropdown.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.touch-device .menu-dropdown{display:none;position:relative;width:100%;opacity:1;visibility:visible;transform:none}.touch-device .menu-dropdown.show{display:block;pointer-events:auto}@media(max-width:768px){.menu-dropdown{width:100vw;left:0;right:0}}.menu-dropdown>*{overflow:hidden;transition:all .3s cubic-bezier(.73,.32,.34,1.5)}.stats-section{padding:64px 24px;background-color:var(--color-primary);border-top:1px solid var(--color-primary-100);border-bottom:1px solid var(--color-primary-100)}.stats-container{max-width:1200px;margin:0 auto}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px}.stat-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}.stat-value{font-size:var(--text-2xl);font-weight:var(--font-weight-bold);color:var(--color-primary-950);line-height:1;letter-spacing:-.02em}.stat-label{font-size:var(--text-base);font-weight:var(--font-weight-semibold);color:var(--color-primary-600);text-transform:uppercase;letter-spacing:.05em}.stat-description{font-size:var(--text-sm);color:var(--color-primary-500);max-width:200px}@media(max-width:768px){.stats-section{padding:40px 24px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:24px}.stat-value{font-size:var(--text-xl)}}.cta-section{padding:100px 24px;background-color:var(--color-primary-950);color:var(--color-primary);text-align:center;border-radius:24px;margin:40px auto;max-width:1200px;width:calc(100% - 48px)}.cta-container{max-width:800px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:32px}.cta-title{margin:0;letter-spacing:-.02em}.cta-description{margin:0}.cta-actions{display:flex;gap:16px;margin-top:16px}@media(max-width:768px){.cta-section{padding:60px 24px;margin:24px;width:auto;border-radius:16px}.cta-actions{flex-direction:column;width:100%}.cta-actions>button{width:100%}}.testimonials-section{padding:80px 24px;background-color:var(--color-primary-100)}.testimonials-container{max-width:1200px;margin:0 auto}.testimonials-header{text-align:center;margin-bottom:64px}.testimonials-title{margin-bottom:16px;letter-spacing:-.02em}.testimonials-subtitle{margin:0 auto}.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px}.testimonial-card-content{display:flex;flex-direction:column;gap:24px}.testimonial-stars{display:flex;gap:4px;color:#fbbf24}.testimonial-quote{font-size:var(--text-sm);line-height:1.6;color:var(--color-primary-700);font-style:italic;margin:0}.testimonial-author{display:flex;align-items:center;gap:12px;margin-top:auto}.testimonial-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background-color:var(--color-primary-200)}.testimonial-avatar-placeholder{width:48px;height:48px;border-radius:50%;background-color:var(--color-primary-200);display:flex;align-items:center;justify-content:center;color:var(--color-primary-600);font-weight:var(--font-weight-semibold);font-size:var(--text-lg)}.testimonial-author-info{display:flex;flex-direction:column}.testimonial-name{font-weight:var(--font-weight-semibold);color:var(--color-primary-950);font-size:var(--text-lg)}.testimonial-role{font-size:var(--text-sm);color:var(--color-primary-500)}@media(max-width:768px){.testimonials-section{padding:48px 20px}}.footer{background-color:var(--color-primary);padding:64px 24px 32px;border-top:1px solid var(--color-primary-100)}.footer-container{max-width:1200px;margin:0 auto}.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:64px;margin-bottom:64px}.footer-brand{display:flex;flex-direction:column;gap:16px}.footer-logo{font-size:var(--text-xl);font-weight:var(--font-weight-bold);color:var(--color-primary-950)}.footer-logo-container{display:flex;align-items:center;gap:8px;font-size:var(--text-xl);font-weight:var(--font-weight-bold)}.footer-logo-img{height:32px;width:auto}.footer-description{color:var(--color-primary-600);line-height:1.6;max-width:300px}.footer-social{display:flex;gap:16px;margin-top:16px}.footer-social-link{color:var(--color-primary-500);transition:color .2s ease}.footer-social-link:hover{color:var(--color-primary-900)}.footer-column-title{font-size:var(--text-xs);font-weight:var(--font-weight-semibold);color:var(--color-primary-900);text-transform:uppercase;letter-spacing:.05em;margin-bottom:24px}.footer-links{display:flex;flex-direction:column;gap:16px}.footer-link{color:var(--color-primary-600);text-decoration:none;transition:color .2s ease;font-size:var(--text-sm)}.footer-link:hover{color:var(--color-primary-900)}.footer-copyright{display:flex;flex-direction:column;gap:4px}.footer-bottom{padding-top:32px;border-top:1px solid var(--color-primary-200);display:flex;justify-content:space-between;align-items:center;color:var(--color-primary-500);font-size:var(--text-xs)}@media(max-width:1024px){.footer-grid{grid-template-columns:1fr repeat(2,1fr);gap:48px}}@media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:40px}.footer-bottom{flex-direction:column;gap:16px;text-align:center}}.footer.theme-inverted{background-color:var(--color-primary-950);border-top:1px solid var(--color-primary-900)}.footer.theme-inverted .footer-logo{color:var(--color-primary-100)}.footer.theme-inverted .footer-description{color:var(--color-primary-300)}.footer.theme-inverted .footer-column-title{color:var(--color-primary-100)}.footer.theme-inverted .footer-link{color:var(--color-primary-400)}.footer.theme-inverted .footer-link:hover{color:var(--color-primary-100)}.footer.theme-inverted .footer-social-link{color:var(--color-primary-400)}.footer.theme-inverted .footer-social-link:hover{color:var(--color-primary-100)}.footer.theme-inverted .footer-bottom{border-top:1px solid var(--color-primary-900);color:var(--color-primary-500)}.footer-powered-by{font-size:.85em;opacity:.8;margin-top:4px}.accordion-section{padding:80px 24px;background-color:var(--color-primary)}.accordion-container{max-width:800px;margin:0 auto}.accordion-header-section{text-align:center;margin-bottom:48px}.accordion-title{font-size:var(--text-2xl);font-weight:var(--font-weight-bold);color:var(--color-primary-950);margin-bottom:12px}.accordion-subtitle{font-size:var(--text-base);color:var(--color-primary-600)}.accordion-list{display:flex;flex-direction:column;gap:16px}.accordion-item{border:1px solid var(--color-primary-200);border-radius:8px;background-color:var(--color-primary);overflow:hidden;transition:all .2s ease}.accordion-item.open{border-color:var(--color-primary-400);box-shadow:0 4px 6px -1px #0000000d}.accordion-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;padding:24px;background:none;border:none;cursor:pointer;text-align:left;font-size:var(--text-lg);font-weight:var(--font-weight-semibold);color:var(--color-primary-900)}.accordion-trigger:hover{background-color:var(--color-primary-100)}.accordion-icon{transition:transform .3s ease;color:var(--color-primary-500);flex-shrink:0;margin-left:16px}.accordion-icon.rotate{transform:rotate(180deg)}.accordion-content{height:0;overflow:hidden;transition:height .3s ease}.accordion-content-inner{padding:0 24px 24px;color:var(--color-primary-700);line-height:1.6}@media(max-width:768px){.accordion-section{padding:48px 20px}.accordion-title{font-size:var(--text-xl)}}
|