/* apps/demo/src/globals.css */
/**
* @fileoverview DNDev UI - Main CSS Export
* @description Main CSS file for consuming applications
* @path C:\ws\dndev\packages\core\ui\dndev.css
*
* This is the main entry point consumed by apps:
* @import '@dndev/ui/dndev.css';
*
* IMPORT ORDER IS CRITICAL:
* 1. Base design system (includes themes and variables)
* 2. Layout variables (override base with layout-specific values)
* 3. Layout components (use layout variables for positioning)
*/
/* 1. Base design system (includes themes, variables, base styles, components) */
/**
* @fileoverview DNDev Components CSS - Main Entry Point
* @description Complete CSS system for DNDev base design system
* @package @dndev/components
*
* Import order is critical for CSS cascade:
* 1. Design tokens (CSS custom properties)
* 2. Theme definitions (color overrides)
* 3. Base styles (document setup)
* 4. Component styles (interactive elements)
* 5. Utility classes (animations, helpers)
*
* This package provides the foundation design system.
* Layout-specific styles are provided by @dndev/ui package.
*/
/* 1. Core design tokens - foundation variables */
/**
* @fileoverview Core Design Tokens - Single Source of Truth
* @description Base CSS custom properties for the DNDev design system
* @package @dndev/components
*
* This is the SINGLE SOURCE OF TRUTH for all design tokens:
* - Interactive element sizing
* - Base spacing system
* - Default theme colors
* - Typography tokens and scale
* - Border radius system
* - Elevation/shadow system
* - Content-aware container widths
*
* Note: Layout-specific tokens are defined in @dndev/ui package
* and can override these values for specific layout presets.
*/
:root {
/* ===========================
BREAKPOINT VARIABLES - DRY APPROACH
Single source of truth for all breakpoint values
=========================== */
--breakpoint-mobile: 768px;
--breakpoint-tablet: 1024px;
--breakpoint-desktop: 1440px;
/* ===========================
INTERACTIVE ELEMENTS
=========================== */
--touch-target: 48px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
/* ===========================
SPACING SYSTEM
=========================== */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
/* Premium Spacing Scale (1.5 ratio for breathing room) */
/* Component-specific spacing */
--component-gap: var(--space-xl);
--section-gap: var(--space-3xl);
--hero-gap: var(--space-4xl);
/* ===========================
THEME COLORS (LIGHT DEFAULTS)
=========================== */
color-scheme: light dark;
/* Base colors */
--background: #ffffff;
--foreground: #000000;
--text-color: #000000;
/* Brand colors */
--primary: #2563eb;
--primary-foreground: #ffffff;
--secondary: #059669;
--secondary-foreground: #ffffff;
--accent: #3b82f6;
--accent-foreground: #ffffff;
/* Status colors */
--destructive: #dc2626;
--destructive-foreground: #ffffff;
/* UI colors */
--muted: #f5f5f5;
--muted-foreground: #555555;
--border: #e5e7eb;
--input: #e5e7eb;
--ring: #3b82f6;
--card: #ffffff;
--card-foreground: #000000;
--popover: #ffffff;
--popover-foreground: #000000;
/* Premium Color System */
/* Semantic colors */
/* ===========================
BORDER RADIUS
=========================== */
--radius: 0.5rem;
--radius-sm: 0.3rem;
--radius-lg: 0.8rem;
--radius-full: 9999px;
/* ===========================
TYPOGRAPHY
=========================== */
/* DRY: Default font for everything */
--font-family: var(--font-sans);
--font-sans:
'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
Arial, sans-serif;
--font-mono:
ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, Monaco,
'Liberation Mono', monospace;
/* Typography Scale (1.125 ratio) */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.875rem; /* 30px */
--font-size-4xl: 2.25rem; /* 36px */
--font-size-5xl: 3rem; /* 48px */
--font-size-6xl: 3.75rem; /* 60px */
/* Premium Typography Scale (1.2 ratio for more dramatic hierarchy) */ /* 64px - Hero headlines */ /* 56px - Section headlines */ /* 40px - Card titles */ /* 28px - Card subtitles */ /* 18px - Enhanced body text */ /* 14px - Captions, metadata */
/* Line Heights */
--line-height-tight: 1.25; /* Headings */
--line-height-normal: 1.5; /* Body text */
--line-height-relaxed: 1.75; /* Large text */
/* Character limits */
--text-max-width: 65ch; /* 65 characters */
/* ===========================
CONTENT-AWARE CONTAINERS
=========================== */
/* Content-specific max-widths for different content types */
--content-text: 65ch; /* ~600-800px for text content */
--content-form: 32rem; /* ~400-600px for forms */
--content-table: 80rem; /* ~1200px+ for data tables */
--content-dashboard: 100rem; /* Full width for dashboards */
/* ===========================
PREMIUM VISUAL DNA
=========================== */
/* Modern card corners */
--radius-2xl: 1.25rem; /* big, modern card corners */
--border-hairline: 1px; /* consistent thin borders */
/* Hairline lines (translucent, work on light & dark) */
--line-1: color-mix(in oklab, white 6%, transparent);
--line-2: color-mix(in oklab, white 10%, transparent);
/* Elevation shadows */
--shadow-1:
0 1px 0 rgba(255, 255, 255, 0.03), 0 6px 20px -6px rgba(0, 0, 0, 0.35);
--shadow-2:
0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 32px -8px rgba(0, 0, 0, 0.4);
/* Premium Shadow System */
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-md:
0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg:
0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl:
0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
/* Interactive shadows */
--shadow-interactive: 0 0 0 3px rgba(59, 130, 246, 0.1);
--shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.5);
/* Motion */
--ease-heavy: cubic-bezier(0.22, 1, 0.36, 1);
--dur-heavy: 0.7s;
/* Premium Animation System */
/* Optional surfaces (works with your themes) */
--surface-0: var(--background);
--surface-1: color-mix(in oklab, var(--background) 92%, black 8%);
--surface-2: color-mix(in oklab, var(--background) 85%, black 15%);
/* ===========================
Z-INDEX SYSTEM
=========================== */
--z-header: 100;
--z-sidebar: 90;
--z-footer: 1;
--z-overlay: 40;
--z-breadcrumbs: 10;
--z-dropdown: 50;
--z-modal: 1000;
--z-tooltip: 1100;
--z-toast: 1200;
/* ===========================
OPACITY SYSTEM
=========================== */
--opacity-disabled: 0.5;
--opacity-muted: 0.6;
/* ===========================
PREMIUM DESIGN SYSTEM
=========================== */
/* Premium Typography Scale */
--font-size-display: 4rem;
--font-size-hero: 3.5rem;
--font-size-title: 2.5rem;
--font-size-subtitle: 1.75rem;
--font-size-body: 1.125rem;
--font-size-caption: 0.875rem;
/* Premium Spacing Scale */
--space-2xl: 48px;
--space-3xl: 72px;
--space-4xl: 96px;
--space-5xl: 144px;
--component-gap: 32px;
--section-gap: 72px;
--hero-gap: 96px;
/* Premium Color System */
--accent-light: #dbeafe;
--accent-medium: #93c5fd;
--accent-dark: #1d4ed8;
--success: #10b981;
--success-foreground: #ffffff;
--warning: #f59e0b;
--warning-foreground: #ffffff;
--info: #3b82f6;
--info-foreground: #ffffff;
/* Premium Animation System */
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 0.15s;
--dur-normal: 0.3s;
--dur-slow: 0.5s;
--dur-hero: 1s;
/* Premium Shadow System - Professional DRY approach */
--shadow-color: color-mix(in oklab, var(--foreground) 15%, transparent);
--shadow-xs: 0 1px 2px 0 var(--shadow-color);
--shadow-sm: 0 1px 3px 0 var(--shadow-color), 0 1px 2px 0 var(--shadow-color);
--shadow-md:
0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color);
--shadow-lg:
0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px var(--shadow-color);
--shadow-xl:
0 20px 25px -5px var(--shadow-color), 0 10px 10px -5px var(--shadow-color);
--shadow-2xl: 0 25px 50px -12px var(--shadow-color);
--shadow-interactive: 0 0 0 3px
color-mix(in oklab, var(--ring) 20%, transparent);
--shadow-focus: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
/* 2. Theme system - color palette definitions */
/**
* @fileoverview Theme System - Complete Theme Definitions
* @description All visual themes for the DNDev design system
* @package @dndev/components
*
* Each theme explicitly defines all Tailwind design tokens.
* Copy any theme as a template to create new custom themes.
*/
/* ===========================
CORE THEMES
=========================== */
.dark,
:root.dark {
--theme-icon: 'Moon';
--theme-label: 'Dark';
--theme-is-dark: true;
--background: #0d1117;
--foreground: #f0f6fc;
--text-color: #f0f6fc;
--primary: #2f81f7;
--primary-foreground: #ffffff;
--secondary: #21262d;
--secondary-foreground: #7d8590;
--accent: #58a6ff;
--accent-foreground: #ffffff;
--destructive: #f85149;
--destructive-foreground: #ffffff;
--muted: #21262d;
--muted-foreground: #7d8590;
--border: #30363d;
--input: #21262d;
--ring: #2f81f7;
--card: #0d1117;
--card-foreground: #f0f6fc;
--popover: #0d1117;
--popover-foreground: #f0f6fc;
/* Premium Typography Scale */
--font-size-display: 4rem;
--font-size-hero: 3.5rem;
--font-size-title: 2.5rem;
--font-size-subtitle: 1.75rem;
--font-size-body: 1.125rem;
--font-size-caption: 0.875rem;
/* Premium Spacing Scale */
--space-2xl: 48px;
--space-3xl: 72px;
--space-4xl: 96px;
--space-5xl: 144px;
--component-gap: 32px;
--section-gap: 72px;
--hero-gap: 96px;
/* Premium Color System */
--accent-light: #1e3a8a;
--accent-medium: #3b82f6;
--accent-dark: #dbeafe;
--success: #059669;
--success-foreground: #ffffff;
--warning: #d97706;
--warning-foreground: #ffffff;
--info: #2563eb;
--info-foreground: #ffffff;
/* Premium Animation System */
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 0.15s;
--dur-normal: 0.3s;
--dur-slow: 0.5s;
--dur-hero: 1s;
/* Shadow color - automatically adapts to theme */
--shadow-color: color-mix(in oklab, var(--foreground) 25%, transparent);
}
/* 3. Base styles - document setup and resets */
/**
* @fileoverview Base Styles and Document Setup
* @description HTML element styles, resets, and document-level behavior
* @package @dndev/components
*
* Provides:
* - Tailwind base layer integration
* - Document and body element styles
* - Cross-browser scrollbar styling
* - Mobile viewport optimizations
* - Global transition settings
*/
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: #e5e7eb; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
font-feature-settings: normal; /* 2 */
font-variation-settings: normal; /* 3 */
font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-feature-settings: inherit; /* 1 */
font-variation-settings: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
letter-spacing: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
display: none;
}
/* ===========================
DOCUMENT STRUCTURE
=========================== */
html {
touch-action: manipulation;
height: 100%;
width: 100%;
}
body {
background-color: var(--background);
color: var(--foreground);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-duration: 300ms;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@supports (overscroll-behavior: none) {
body {
overscroll-behavior: none;
}
}
body {
width: 100%;
height: 100%;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#root {
height: 100%;
overflow-y: auto;
position: relative;
}
/* ===========================
SCROLLBAR STYLING
=========================== */
::-webkit-scrollbar {
width: 0.5rem;
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
:is(.dark *)::-webkit-scrollbar {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
::-webkit-scrollbar-thumb {
border-radius: var(--radius-full);
--tw-bg-opacity: 1;
background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
:is(.dark *)::-webkit-scrollbar-thumb {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
/* ===========================
GLOBAL TRANSITIONS
=========================== */
/* Removed global * transitions to prevent jank and hover delays */
/* Component-specific transitions are handled individually for better performance */
/* Reset and base styles */
:root {
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Remove default margin and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Set core body defaults */
body {
min-height: 100vh;
line-height: var(--line-height-normal);
text-rendering: optimizeSpeed;
font-size: var(--font-size-base);
}
/* Make images easier to work with */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* 4. Component styles - interactive elements */
/**
* @fileoverview Core Component Styles
* @description Production-ready component styles with comprehensive design system integration
* @package @dndev/components
* @version 1.0.0
* @since 1.0.0
* @author AMBROISE PARK Consulting
*
* Features:
* - Design token integration with CSS custom properties
* - Universal CSR/SSR compatibility
* - RTL/LTR language support with CSS logical properties
* - Hardware-accelerated animations using composited properties
* - Accessibility compliance (WCAG 2.1 AA)
* - Modern browser support with progressive enhancement
* - Animation system with reduced motion support
* - Container query and intrinsic web design patterns
* - Performance optimizations and render isolation
*/
.\!container {
width: 100% !important;
margin-right: auto !important;
margin-left: auto !important;
padding-right: 2rem !important;
padding-left: 2rem !important;
}
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 2rem;
padding-left: 2rem;
}
@media (min-width: 1400px) {
.\!container {
max-width: 1400px !important;
}
.container {
max-width: 1400px;
}
}
.dndev-container {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.dndev-container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.dndev-container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.dndev-container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.dndev-container {
max-width: 1280px;
}
}
/* ===========================
PERFORMANCE VARIABLES
=========================== */
:root {
/* Color-mix values for surface effects */
--surface-glow-start: color-mix(
in oklab,
var(--card-foreground) 25%,
transparent
);
--surface-glow-mid: color-mix(
in oklab,
var(--card-foreground) 8%,
transparent
);
--surface-glow-end: transparent;
--surface-ring: color-mix(
in oklab,
var(--card-foreground) 12%,
transparent
);
--accent-shadow: color-mix(in oklab, var(--accent) 25%, transparent);
--accent-shadow-active: color-mix(in oklab, var(--accent) 20%, transparent);
/* Animation tokens */
--will-change-transform: transform;
--will-change-none: auto;
/* Shadow presets */
--shadow-card-default: var(--shadow-xl);
--shadow-card-hover: var(--shadow-2xl);
--shadow-surface-rtl:
-20px 25px -5px rgba(0, 0, 0, 0.15), -10px 10px -5px rgba(0, 0, 0, 0.08);
/* Reveal animation constants */
--reveal-distance: 50vw;
--reveal-duration: 500ms;
--reveal-easing: cubic-bezier(0.16, 1, 0.3, 1);
}
/* ===========================
FORM COMPONENTS
=========================== */
.dndev-input {
padding: var(--space-sm);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background-color: var(--background);
color: var(--foreground);
transition:
border-color var(--dur-fast),
box-shadow var(--dur-fast);
}
.dndev-input:focus {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 2px var(--ring);
}
/* ===========================
SURFACE FOUNDATION
=========================== */
:where(.dndev-card, .dndev-surface, .dndev-floating) {
background: var(--surface-1);
color: var(--card-foreground);
border: var(--border-hairline) solid var(--line-2);
border-radius: var(--surface-radius, var(--radius-xl));
position: relative;
overflow: hidden;
/* Shadow system */
box-shadow: var(--surface-shadow, var(--shadow-card-default));
/* Performance */
contain: layout style;
transform: translateZ(0);
backface-visibility: hidden;
/* Transition */
transition:
transform var(--dur-normal) var(--ease-smooth),
box-shadow var(--dur-normal) var(--ease-smooth);
}
/* Pseudo-element combining glow and ring */
:where(.dndev-card, .dndev-surface)::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
/* Glow background and inner ring border */
background: linear-gradient(
135deg,
var(--surface-glow-end) 0%,
var(--surface-glow-mid) 50%,
var(--surface-glow-start) 100%
);
box-shadow: inset 0 0 0 1px var(--surface-ring);
opacity: 0.6;
}
/* ===========================
ROLE PRESETS
=========================== */
.dndev-card {
--surface-radius: var(--radius-2xl);
--surface-shadow: var(--shadow-card-default);
}
.dndev-floating {
--surface-radius: var(--radius-lg);
--surface-shadow: none;
will-change: var(--will-change-none);
}
.dndev-floating:hover {
transform: none;
}
/* ===========================
OVERLAY
=========================== */
.dndev-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: opacity var(--dur-normal) var(--ease-smooth);
will-change: opacity;
z-index: 1000;
}
/* ===========================
RTL-AWARE EFFECTS
=========================== */
.dndev-surface:dir(rtl),
.dndev-card:dir(rtl) {
box-shadow: var(--shadow-surface-rtl);
}
.dndev-surface:dir(rtl)::before,
.dndev-card:dir(rtl)::before {
background: linear-gradient(
135deg,
var(--surface-glow-start) 0%,
var(--surface-glow-mid) 50%,
var(--surface-glow-end) 100%
);
}
.dndev-floating:dir(rtl) {
box-shadow: -25px 50px -12px rgba(0, 0, 0, 0.25);
}
.dndev-card:dir(rtl):hover {
box-shadow: -35px 60px -15px rgba(0, 0, 0, 0.3);
}
/* ===========================
CARD VARIANTS
=========================== */
.dndev-card[data-variant='basic'] {
box-shadow: var(--shadow-md);
}
.dndev-card[data-variant='basic']:hover {
transform: scale(1.01);
}
.dndev-card[data-variant='flat'] {
box-shadow: none;
}
.dndev-card[data-variant='flat']:hover {
transform: none;
}
.dndev-card[data-variant='flat']::before {
display: none;
}
/* Elevation system */
.dndev-card[data-elevation='none'] {
box-shadow: none;
}
.dndev-card[data-elevation='low'] {
box-shadow: var(--shadow-lg);
}
.dndev-card[data-elevation='high'] {
box-shadow: var(--shadow-2xl);
}
.dndev-card[data-elevation='extreme'] {
box-shadow: 0 35px 70px -15px rgba(0, 0, 0, 0.35);
}
/* RTL elevation */
.dndev-card:dir(rtl)[data-elevation='low'] {
box-shadow:
-4px 6px -1px rgba(0, 0, 0, 0.1),
-2px 4px -1px rgba(0, 0, 0, 0.06);
}
.dndev-card:dir(rtl)[data-elevation='high'] {
box-shadow: var(--shadow-surface-rtl);
}
.dndev-card:dir(rtl)[data-elevation='extreme'] {
box-shadow: -25px 50px -12px rgba(0, 0, 0, 0.25);
}
/* ===========================
UTILITY OVERRIDES
=========================== */
.dndev-card.no-premium {
box-shadow: var(--shadow-sm);
}
.dndev-card.no-premium:hover {
transform: none;
}
.dndev-card.no-premium::before {
display: none;
}
/* Hover behaviors */
.dndev-card.hover-lift:hover {
transform: scale(1.05);
}
.dndev-card.hover-glow:hover {
box-shadow:
var(--shadow-card-hover),
0 0 40px rgba(0, 0, 0, 0.3);
}
.dndev-card.hover-border:hover {
border-color: var(--primary);
border-width: 2px;
}
.dndev-card.hover-accent:hover {
border-color: var(--accent);
border-width: 2px;
box-shadow:
var(--shadow-xl),
0 0 20px var(--accent-shadow);
}
/* RTL hover */
.dndev-card:dir(rtl).hover-glow:hover {
box-shadow:
var(--shadow-card-hover),
0 0 30px rgba(0, 0, 0, 0.2);
}
/* ===========================
INTERACTIVE VARIANTS
=========================== */
.dndev-card[data-variant='interactive'] {
cursor: pointer;
}
.dndev-card[data-variant='interactive']:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 2px;
}
.dndev-card[data-variant='elevated']:hover {
transform: scale(1.03);
box-shadow: var(--shadow-card-hover);
}
/* ===========================
UTILITY COMPONENTS
=========================== */
.dndev-spinner {
display: inline-block;
width: var(--icon-md);
height: var(--icon-md);
border: 2px solid currentColor;
border-radius: 50%;
border-right-color: transparent;
animation: spin 1s linear infinite;
}
.dndev-focus-ring:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--ring);
}
.dndev-button-accent:hover {
box-shadow: 0 4px 12px var(--accent-shadow);
transform: translateY(-1px);
}
.dndev-button-accent:active {
transform: translateY(0);
box-shadow: 0 2px 6px var(--accent-shadow-active);
}
.dndev-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ===========================
ANIMATION SYSTEM
=========================== */
:root {
--stack-number-height: 3.5rem;
/* Animation presets */
--anim-duration-fast: 0.6s;
--anim-duration-normal: 1s;
--anim-duration-slow: 8s;
--anim-duration-very-slow: 20s;
--anim-easing-smooth: ease-out;
--anim-easing-bounce: ease-in-out;
}
/* Universal animation framework */
@keyframes universal-float {
0%,
100% {
opacity: var(--opacity-start, 0.3);
transform: var(--transform-start, translateY(0) scale(1) rotate(0deg));
}
50% {
opacity: var(--opacity-mid, 0.8);
transform: var(
--transform-mid,
translateY(-10px) scale(1.1) rotate(180deg)
);
}
}
@keyframes universal-slide {
0% {
opacity: var(--opacity-start, 0);
transform: var(--transform-start, translateY(2rem));
}
100% {
opacity: var(--opacity-end, 1);
transform: var(--transform-end, translateY(0));
}
}
@keyframes universal-marquee {
from {
transform: var(--transform-start, translateX(0));
}
to {
transform: var(--transform-end, translateX(-50%));
}
}
/* Spin animation for spinner */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* ===========================
STACK SYSTEM
=========================== */
.stack {
min-height: var(--dynamic-height, 20rem);
height: auto;
contain: layout;
transform-origin: center top;
transform: translateY(
calc(-1 * var(--dynamic-height, 20rem) * max(var(--i) - var(--e), 0))
);
transition: transform var(--dur-heavy) var(--ease-heavy);
will-change: var(--will-change-transform);
}
/* Responsive heights */
.stack[data-size='small'] {
--dynamic-height: 24rem;
}
.stack[data-size='medium'] {
--dynamic-height: 28rem;
}
.stack[data-size='large'] {
--dynamic-height: 36rem;
}
@media (min-width: 1024px) {
.stack[data-size='small'] {
--dynamic-height: 16rem;
}
.stack[data-size='medium'] {
--dynamic-height: 20rem;
}
.stack[data-size='large'] {
--dynamic-height: 28rem;
}
}
/* Mobile collapsed state */
@media (max-width: 1023px) {
.stack.is-collapsed {
padding: 0;
overflow: hidden;
}
.stack.is-collapsed .stack-content,
.stack.is-collapsed .section-spacer {
display: none;
}
.stack.is-collapsed .section-number {
opacity: 1;
}
}
.stack:hover {
transform: translateY(
calc(-1 * var(--dynamic-height, 20rem) * max(var(--i) - var(--e), 0))
)
translateY(-8px);
}
.stack-content {
height: 100%;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.stack-content::-webkit-scrollbar {
display: none;
}
.stack .section-number,
.stack .section-spacer {
height: var(--stack-number-height);
}
/* ===========================
MARQUEE SYSTEM
=========================== */
/* Marquee track */
[data-marquee-track] {
will-change: var(--will-change-transform);
animation: universal-marquee var(--marquee-duration, 0ms)
var(--marquee-easing, linear) infinite;
animation-direction: var(--marquee-direction, normal);
}
/* Vertical marquee */
[data-marquee-track][data-marquee-direction='vertical'] {
--transform-start: translateY(0);
--transform-end: translateY(calc(-1 * var(--marquee-distance, 0px)));
}
/* Bounce behavior */
[data-marquee-track][data-marquee-behavior='bounce'] {
animation-name: universal-float;
--transform-start: translateX(0);
--transform-mid: translateX(calc(-1 * var(--marquee-distance, 0px)));
--opacity-start: 1;
--opacity-mid: 1;
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
[data-marquee-track] {
animation: none !important;
transform: none !important;
}
}
.group:hover [data-marquee-track],
.group:focus-within [data-marquee-track] {
animation-play-state: paused;
}
/* ===========================
HERO ANIMATIONS
=========================== */
.wave-flow {
background: linear-gradient(
45deg,
transparent 30%,
color-mix(in oklab, var(--accent) 20%, transparent) 50%,
transparent 70%
);
animation: universal-float var(--anim-duration-slow)
var(--anim-easing-bounce) infinite;
--transform-start: translateX(-20%) rotate(0deg);
--transform-mid: translateX(20%) rotate(3deg);
}
.particle-float {
animation: universal-slide 10s linear infinite;
--opacity-start: 0.2;
--opacity-end: 0;
--transform-start: translateY(0px) rotate(0deg);
--transform-end: translateY(-100px) rotate(360deg);
}
.geometric-rotate {
animation: universal-float var(--anim-duration-very-slow) linear infinite;
--opacity-start: 0.1;
--opacity-mid: 0.2;
--transform-start: rotate(0deg) scale(1);
--transform-mid: rotate(180deg) scale(1.1);
}
/* ===========================
ICON UTILITIES
=========================== */
.dndev-icon--sm {
width: var(--icon-sm);
height: var(--icon-sm);
}
.dndev-icon--md {
width: var(--icon-md);
height: var(--icon-md);
}
.dndev-icon--lg {
width: var(--icon-lg);
height: var(--icon-lg);
}
/* ===========================
REVEAL ANIMATIONS
=========================== */
.dndev-reveal-container {
/* Performance */
contain: layout style;
will-change: contents;
}
.dndev-reveal-item {
/* Default hidden state */
opacity: 0;
transform: translate3d(0, 0, 0);
/* Performance */
will-change: transform, opacity;
backface-visibility: hidden;
/* Transitions */
transition:
opacity var(--reveal-duration) var(--reveal-easing),
transform var(--reveal-duration) var(--reveal-easing);
/* Stagger timing */
transition-delay: var(--reveal-delay, 0ms);
}
/* Direction transforms */
.dndev-reveal-item[data-direction='left'] {
transform: translate3d(calc(-1 * var(--reveal-distance)), 0, 0);
}
.dndev-reveal-item[data-direction='right'] {
transform: translate3d(var(--reveal-distance), 0, 0);
}
.dndev-reveal-item[data-direction='top'] {
transform: translate3d(0, calc(-1 * var(--reveal-distance)), 0);
}
.dndev-reveal-item[data-direction='bottom'] {
transform: translate3d(0, var(--reveal-distance), 0);
}
.dndev-reveal-item[data-direction='fade-in'] {
transform: translate3d(0, 0, 0);
}
/* Visible state */
.dndev-reveal-container.dndev-reveal-visible .dndev-reveal-item,
.dndev-reveal-item[data-visible='true'] {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.dndev-reveal-item,
.dndev-reveal-container.dndev-reveal-visible .dndev-reveal-item {
transition: none !important;
opacity: 1 !important;
transform: none !important;
will-change: auto;
}
}
/* Performance cleanup */
.dndev-reveal-container.dndev-reveal-visible .dndev-reveal-item {
animation: dndev-reveal-cleanup var(--reveal-duration) var(--reveal-easing)
forwards;
}
@keyframes dndev-reveal-cleanup {
to {
will-change: auto;
}
}
/* ===========================
CRAWL SYSTEM - PERFORMANCE OPTIMIZED
=========================== */
/* ========== CRAWL CONFIGURATION VARIABLES ========== */
:root {
/* === CORE ANIMATION & VISUAL SETTINGS === */
--crawl-perspective: 600px;
--crawl-tilt: 40deg;
--crawl-body-size: 1.6rem;
--crawl-content-line: 1.2;
--crawl-body-margin: 0.9em;
--crawl-title-size: 3rem;
--crawl-title-margin: 3em;
/* === COLORS & EFFECTS === */
--crawl-intro-duration: 2000ms;
--crawl-intro-color: #4a9eff;
--crawl-intro-font-size: clamp(2rem, 4vw, 4rem);
--crawl-text-color: #ffc909;
--crawl-text-shadow: 0 0 8px rgba(255, 201, 9, 0.8);
--crawl-intro-shadow:
0 0 30px rgba(74, 158, 255, 0.9), 0 0 60px rgba(74, 158, 255, 0.6),
0 0 90px rgba(74, 158, 255, 0.4), 0 0 120px rgba(74, 158, 255, 0.2);
}
/* ========== RESPONSIVE OVERRIDES ========== */
@media (min-width: 768px) {
:root {
/* --crawl-perspective: 600px;
--crawl-tilt: 30deg; */
--crawl-body-size: 2.5rem;
--crawl-title-size: 4.5rem;
}
}
@media (min-width: 1024px) {
:root {
/* --crawl-perspective: 400px;
--crawl-tilt: 35deg; */
--crawl-body-size: 3rem;
--crawl-title-size: 8rem;
}
}
/* ========== CRAWL CONTAINER ========== */
.dndev-crawl-container {
position: relative;
overflow: hidden;
background: #000;
contain: layout style paint;
transform: translateZ(0);
backface-visibility: hidden;
}
/* ========== STAR FIELD CONTAINER ========== */
.dndev-crawl-stars {
position: absolute;
inset: 0;
z-index: 1;
contain: layout style paint;
pointer-events: none;
}
/* ========== STAR LAYERS ========== */
.dndev-crawl-stars-layer-1,
.dndev-crawl-stars-layer-2,
.dndev-crawl-stars-layer-3 {
position: absolute;
inset: 0;
background-image:
radial-gradient(1px 1px at 23px 17px, #fff, transparent),
radial-gradient(
1px 1px at 47px 89px,
rgba(255, 255, 255, 0.8),
transparent
),
radial-gradient(0.5px 0.5px at 91px 43px, #fff, transparent),
radial-gradient(
1px 1px at 131px 67px,
rgba(255, 255, 255, 0.6),
transparent
),
radial-gradient(0.5px 0.5px at 163px 19px, #ddd, transparent),
radial-gradient(1px 1px at 197px 73px, #fff, transparent),
radial-gradient(
0.5px 0.5px at 211px 41px,
rgba(255, 255, 255, 0.7),
transparent
),
radial-gradient(1px 1px at 233px 97px, #eee, transparent),
radial-gradient(0.5px 0.5px at 251px 13px, #fff, transparent),
radial-gradient(
1px 1px at 277px 59px,
rgba(255, 255, 255, 0.5),
transparent
),
radial-gradient(0.5px 0.5px at 293px 83px, #ddd, transparent),
radial-gradient(1px 1px at 317px 31px, #fff, transparent),
radial-gradient(
0.5px 0.5px at 337px 71px,
rgba(255, 255, 255, 0.8),
transparent
),
radial-gradient(1px 1px at 359px 7px, #eee, transparent),
radial-gradient(0.5px 0.5px at 373px 53px, #fff, transparent),
radial-gradient(
1px 1px at 389px 79px,
rgba(255, 255, 255, 0.6),
transparent
),
radial-gradient(0.5px 0.5px at 401px 23px, #ddd, transparent),
radial-gradient(1px 1px at 419px 61px, #fff, transparent),
radial-gradient(
0.5px 0.5px at 433px 37px,
rgba(255, 255, 255, 0.7),
transparent
),
radial-gradient(1px 1px at 449px 87px, #eee, transparent);
background-repeat: repeat;
background-size: 500px 300px;
animation: dndev-stars-twinkle var(--star-duration, 3s) ease-in-out infinite;
}
.dndev-crawl-stars-layer-1 {
--star-duration: 4s;
opacity: 0.9;
background-size: 400px 250px;
animation-delay: 0s;
}
.dndev-crawl-stars-layer-2 {
--star-duration: 2.5s;
opacity: 0.7;
background-size: 300px 200px;
animation-delay: 1s;
}
.dndev-crawl-stars-layer-3 {
--star-duration: 1.8s;
opacity: 0.5;
background-size: 200px 150px;
animation-delay: 2s;
}
@keyframes dndev-stars-twinkle {
0%,
100% {
opacity: 0.3;
filter: brightness(0.8);
}
25% {
opacity: 0.8;
filter: brightness(1.2);
}
50% {
opacity: 1;
filter: brightness(1.5);
}
75% {
opacity: 0.6;
filter: brightness(1.1);
}
}
/* ========== STATIC 3D CONTAINER (PERFORMANCE OPTIMIZED) ========== */
.dndev-crawl-3d-container {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
/* Perspective applied to container */
perspective: var(--crawl-perspective);
transform-style: preserve-3d;
/* Performance optimizations */
contain: layout style;
backface-visibility: hidden;
will-change: auto;
/* No animation on this container */
}
/* ========== ANIMATED TEXT CONTAINER (SIMPLIFIED) ========== */
.dndev-crawl-text {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
/* Static 3D tilt transform - cached by GPU */
transform: rotateX(var(--crawl-tilt)) translateZ(0);
transform-style: preserve-3d;
/* Only animates translateY on top of the static transform */
will-change: transform;
backface-visibility: hidden;
contain: layout style;
}
/* ========== CRAWL CONTENT ========== */
.dndev-crawl-content {
color: var(--crawl-text-color);
font-size: var(--crawl-body-size);
line-height: var(--crawl-content-line);
font-weight: bold;
text-align: center;
text-justify: inter-word;
position: relative;
z-index: 2;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: var(--crawl-text-shadow);
/* Match intro width constraint for visual consistency */
width: 60%;
max-width: 60%;
margin: 0 auto;
}
.dndev-crawl-content h1,
.dndev-crawl-content h2 {
text-align: center;
font-size: var(--crawl-title-size);
margin-bottom: var(--crawl-title-margin);
}
.dndev-crawl-content p {
margin-bottom: var(--crawl-body-margin);
}
/* ========== INTRO TEXT ========== */
/* Mobile intro - simple fade only */
/* Desktop intro - scale + fade */
.dndev-crawl-intro-content {
color: var(--crawl-intro-color);
font-size: var(--crawl-intro-font-size);
font-weight: 900;
text-align: center;
text-shadow: var(--crawl-intro-shadow);
letter-spacing: 0.1em;
line-height: 1.2;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 60%;
max-width: 60%;
margin: 0 auto;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
white-space: normal;
}
/* ========== OPTIMIZED ANIMATIONS ========== */
/* Mobile intro animation - simple fade only */
@keyframes dndev-intro-fade-mobile {
0% {
opacity: 1;
visibility: visible;
}
50% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
/* Desktop intro animation - scale + fade */
@keyframes dndev-intro-fade-desktop {
0% {
opacity: 1;
transform: scale(1);
visibility: visible;
}
50% {
opacity: 1;
transform: scale(1);
visibility: visible;
}
100% {
opacity: 0;
transform: scale(2);
visibility: hidden;
}
}
/* OPTIMIZED: Combined static rotateX with animated translateY */
@keyframes dndev-crawl-animation {
0% {
transform: rotateX(var(--crawl-tilt)) translateY(100vh) translateZ(0);
}
100% {
transform: rotateX(var(--crawl-tilt))
translateY(calc(-1 * var(--crawl-content-height, 150vh))) translateZ(0);
}
}
/* ========== ACCESSIBILITY & PERFORMANCE ========== */
@media (prefers-reduced-motion: reduce) {
.dndev-crawl-text {
animation: none !important;
}
.dndev-crawl-3d-container {
transform: rotateX(0deg) translateZ(0) !important;
}
.dndev-crawl-content {
position: static !important;
transform: none !important;
animation: none !important;
}
.dndev-crawl-intro-mobile,
.dndev-crawl-intro-desktop {
animation: none !important;
}
}
@media (prefers-contrast: high) {
.dndev-crawl-stars {
filter: contrast(1.5) brightness(1.2);
}
}
/* ========== REDUCED MOTION CLASS ========== */
.dndev-crawl-reduced-motion {
animation: none !important;
transform: none !important;
}
.dndev-crawl-reduced-motion .dndev-crawl-content {
position: static !important;
transform: none !important;
}
.dndev-crawl-reduced-motion .dndev-crawl-stars-layer-1,
.dndev-crawl-reduced-motion .dndev-crawl-stars-layer-2,
.dndev-crawl-reduced-motion .dndev-crawl-stars-layer-3 {
animation: none !important;
}
/* ========== LAYOUT OVERRIDES ========== */
.page-container > .dndev-crawl-container {
margin-top: 0 !important;
padding-block: 0 !important;
width: 150vw !important;
inset-inline-start: -25vw !important;
}
/* 5. Animation styles - imported by components.css */
/* 6. Utility classes - animations and helpers */
/**
* @fileoverview Animation Utilities and Custom Keyframes
* @description Non-layout utility classes and animations
* @package @dndev/components
*
* Provides:
* - Custom keyframe animations
* - Animation utility classes
* - Debug utilities (development only)
*
* Note: Layout utilities are provided by @dndev/ui package Tailwind plugins
*/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.pointer-events-none {
pointer-events: none;
}
.pointer-events-auto {
pointer-events: auto;
}
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
.collapse {
visibility: collapse;
}
.static {
position: static;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.inset-0 {
inset: 0px;
}
.inset-x-0 {
left: 0px;
right: 0px;
}
.inset-y-0 {
top: 0px;
bottom: 0px;
}
.-bottom-2 {
bottom: -0.5rem;
}
.-left-2 {
left: -0.5rem;
}
.-right-1 {
right: -0.25rem;
}
.-right-2 {
right: -0.5rem;
}
.-top-1 {
top: -0.25rem;
}
.-top-2 {
top: -0.5rem;
}
.bottom-0 {
bottom: 0px;
}
.bottom-12 {
bottom: 3rem;
}
.bottom-2 {
bottom: 0.5rem;
}
.bottom-4 {
bottom: 1rem;
}
.bottom-6 {
bottom: 1.5rem;
}
.bottom-full {
bottom: 100%;
}
.left-0 {
left: 0px;
}
.left-1\/2 {
left: 50%;
}
.left-2 {
left: 0.5rem;
}
.left-3 {
left: 0.75rem;
}
.left-4 {
left: 1rem;
}
.left-6 {
left: 1.5rem;
}
.left-\[50\%\] {
left: 50%;
}
.right-0 {
right: 0px;
}
.right-1 {
right: 0.25rem;
}
.right-2 {
right: 0.5rem;
}
.right-4 {
right: 1rem;
}
.right-6 {
right: 1.5rem;
}
.top-0 {
top: 0px;
}
.top-1 {
top: 0.25rem;
}
.top-1\/2 {
top: 50%;
}
.top-2 {
top: 0.5rem;
}
.top-4 {
top: 1rem;
}
.top-\[1px\] {
top: 1px;
}
.top-\[50\%\] {
top: 50%;
}
.top-\[60\%\] {
top: 60%;
}
.top-\[var\(--header-height\)\] {
top: var(--header-height);
}
.top-full {
top: 100%;
}
.-z-footer {
z-index: calc(var(--z-footer) * -1);
}
.-z-header {
z-index: calc(var(--z-header) * -1);
}
.-z-modal {
z-index: calc(var(--z-modal) * -1);
}
.-z-sidebar {
z-index: calc(var(--z-sidebar) * -1);
}
.-z-tooltip {
z-index: calc(var(--z-tooltip) * -1);
}
.z-0 {
z-index: 0;
}
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
.z-30 {
z-index: 30;
}
.z-40 {
z-index: 40;
}
.z-50 {
z-index: 50;
}
.z-\[10000\] {
z-index: 10000;
}
.z-\[100\] {
z-index: 100;
}
.z-\[1\] {
z-index: 1;
}
.z-\[9998\] {
z-index: 9998;
}
.z-\[9999\] {
z-index: 9999;
}
.z-\[var\(--z-header\)\] {
z-index: var(--z-header);
}
.z-\[var\(--z-modal\)\] {
z-index: var(--z-modal);
}
.z-\[var\(--z-tooltip\)\] {
z-index: var(--z-tooltip);
}
.z-header {
z-index: var(--z-header);
}
.z-modal {
z-index: var(--z-modal);
}
.z-overlay {
z-index: var(--z-overlay);
}
.z-sidebar {
z-index: var(--z-sidebar);
}
.z-toast {
z-index: var(--z-toast);
}
.z-tooltip {
z-index: var(--z-tooltip);
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.order-3 {
order: 3;
}
.row-span-3 {
grid-row: span 3 / span 3;
}
.m-0 {
margin: 0px;
}
.-mx-1 {
margin-left: -0.25rem;
margin-right: -0.25rem;
}
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.mx-8 {
margin-left: 2rem;
margin-right: 2rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-16 {
margin-bottom: 4rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mb-\[var\(--section-gap\)\] {
margin-bottom: var(--section-gap);
}
.me-1 {
margin-inline-end: 0.25rem;
}
.ml-1 {
margin-left: 0.25rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-3 {
margin-left: 0.75rem;
}
.ml-6 {
margin-left: 1.5rem;
}
.ml-\[var\(--space-lg\)\] {
margin-left: var(--space-lg);
}
.ml-\[var\(--space-sm\)\] {
margin-left: var(--space-sm);
}
.ml-auto {
margin-left: auto;
}
.mr-1 {
margin-right: 0.25rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mr-4 {
margin-right: 1rem;
}
.mr-\[var\(--space-sm\)\] {
margin-right: var(--space-sm);
}
.ms-1 {
margin-inline-start: 0.25rem;
}
.ms-2 {
margin-inline-start: 0.5rem;
}
.mt-0 {
margin-top: 0px;
}
.mt-0\.5 {
margin-top: 0.125rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-1\.5 {
margin-top: 0.375rem;
}
.mt-12 {
margin-top: 3rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-\[var\(--component-gap\)\] {
margin-top: var(--component-gap);
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.grid {
display: grid;
}
.contents {
display: contents;
}
.hidden {
display: none;
}
.aspect-square {
aspect-ratio: 1 / 1;
}
.h-0 {
height: 0px;
}
.h-1 {
height: 0.25rem;
}
.h-1\.5 {
height: 0.375rem;
}
.h-10 {
height: 2.5rem;
}
.h-11 {
height: 2.75rem;
}
.h-12 {
height: 3rem;
}
.h-14 {
height: 3.5rem;
}
.h-16 {
height: 4rem;
}
.h-2 {
height: 0.5rem;
}
.h-2\.5 {
height: 0.625rem;
}
.h-20 {
height: 5rem;
}
.h-24 {
height: 6rem;
}
.h-3 {
height: 0.75rem;
}
.h-32 {
height: 8rem;
}
.h-4 {
height: 1rem;
}
.h-5 {
height: 1.25rem;
}
.h-6 {
height: 1.5rem;
}
.h-64 {
height: 16rem;
}
.h-7 {
height: 1.75rem;
}
.h-8 {
height: 2rem;
}
.h-9 {
height: 2.25rem;
}
.h-96 {
height: 24rem;
}
.h-\[1px\] {
height: 1px;
}
.h-\[200px\] {
height: 200px;
}
.h-\[400px\] {
height: 400px;
}
.h-\[85vh\] {
height: 85vh;
}
.h-\[calc\(100vh-var\(--header-height\)\)\] {
height: calc(100vh - var(--header-height));
}
.h-\[var\(--header-height\)\] {
height: var(--header-height);
}
.h-\[var\(--icon-sm\)\] {
height: var(--icon-sm);
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
height: var(--radix-select-trigger-height);
}
.h-auto {
height: auto;
}
.h-footer {
height: var(--footer-height);
}
.h-full {
height: 100%;
}
.h-header {
height: var(--header-height);
}
.h-logo {
height: var(--logo-size);
}
.h-px {
height: 1px;
}
.max-h-32 {
max-height: 8rem;
}
.max-h-60 {
max-height: 15rem;
}
.max-h-64 {
max-height: 16rem;
}
.max-h-80 {
max-height: 20rem;
}
.max-h-96 {
max-height: 24rem;
}
.max-h-\[300px\] {
max-height: 300px;
}
.max-h-\[60vh\] {
max-height: 60vh;
}
.max-h-\[80vh\] {
max-height: 80vh;
}
.max-h-\[85vh\] {
max-height: 85vh;
}
.max-h-\[90vh\] {
max-height: 90vh;
}
.max-h-\[95vh\] {
max-height: 95vh;
}
.max-h-none {
max-height: none;
}
.max-h-screen {
max-height: 100vh;
}
.min-h-\[200px\] {
min-height: 200px;
}
.min-h-\[3rem\] {
min-height: 3rem;
}
.min-h-\[400px\] {
min-height: 400px;
}
.min-h-\[44px\] {
min-height: 44px;
}
.min-h-\[60vh\] {
min-height: 60vh;
}
.min-h-\[80px\] {
min-height: 80px;
}
.min-h-screen {
min-height: 100vh;
}
.w-0 {
width: 0px;
}
.w-1 {
width: 0.25rem;
}
.w-1\.5 {
width: 0.375rem;
}
.w-1\/2 {
width: 50%;
}
.w-10 {
width: 2.5rem;
}
.w-11 {
width: 2.75rem;
}
.w-12 {
width: 3rem;
}
.w-16 {
width: 4rem;
}
.w-2 {
width: 0.5rem;
}
.w-2\.5 {
width: 0.625rem;
}
.w-2\/3 {
width: 66.666667%;
}
.w-20 {
width: 5rem;
}
.w-24 {
width: 6rem;
}
.w-3 {
width: 0.75rem;
}
.w-3\/4 {
width: 75%;
}
.w-32 {
width: 8rem;
}
.w-4 {
width: 1rem;
}
.w-40 {
width: 10rem;
}
.w-5 {
width: 1.25rem;
}
.w-56 {
width: 14rem;
}
.w-6 {
width: 1.5rem;
}
.w-64 {
width: 16rem;
}
.w-7 {
width: 1.75rem;
}
.w-8 {
width: 2rem;
}
.w-80 {
width: 20rem;
}
.w-9 {
width: 2.25rem;
}
.w-96 {
width: 24rem;
}
.w-\[150px\] {
width: 150px;
}
.w-\[1px\] {
width: 1px;
}
.w-\[200px\] {
width: 200px;
}
.w-\[250px\] {
width: 250px;
}
.w-\[28rem\] {
width: 28rem;
}
.w-\[300px\] {
width: 300px;
}
.w-\[400px\] {
width: 400px;
}
.w-\[90vw\] {
width: 90vw;
}
.w-\[var\(--button-width\)\] {
width: var(--button-width);
}
.w-\[var\(--header-height\)\] {
width: var(--header-height);
}
.w-\[var\(--icon-sm\)\] {
width: var(--icon-sm);
}
.w-\[var\(--main-max-width\)\] {
width: var(--main-max-width);
}
.w-\[var\(--sidebar-width\)\] {
width: var(--sidebar-width);
}
.w-\[var\(--text-max-width\)\] {
width: var(--text-max-width);
}
.w-auto {
width: auto;
}
.w-full {
width: 100%;
}
.w-max {
width: -moz-max-content;
width: max-content;
}
.w-px {
width: 1px;
}
.w-sidebar {
width: var(--sidebar-width);
}
.min-w-0 {
min-width: 0px;
}
.min-w-\[120px\] {
min-width: 120px;
}
.min-w-\[200px\] {
min-width: 200px;
}
.min-w-\[80px\] {
min-width: 80px;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
min-width: var(--radix-select-trigger-width);
}
.min-w-\[var\(--space-2xl\)\] {
min-width: var(--space-2xl);
}
.max-w-2xl {
max-width: 42rem;
}
.max-w-3xl {
max-width: 48rem;
}
.max-w-4xl {
max-width: 56rem;
}
.max-w-5xl {
max-width: 64rem;
}
.max-w-6xl {
max-width: 72rem;
}
.max-w-7xl {
max-width: 80rem;
}
.max-w-\[450px\] {
max-width: 450px;
}
.max-w-\[95vw\] {
max-width: 95vw;
}
.max-w-\[var\(--content-dashboard\)\] {
max-width: var(--content-dashboard);
}
.max-w-\[var\(--content-table\)\] {
max-width: var(--content-table);
}
.max-w-\[var\(--content-text\)\] {
max-width: var(--content-text);
}
.max-w-\[var\(--main-max-width\)\] {
max-width: var(--main-max-width);
}
.max-w-full {
max-width: 100%;
}
.max-w-lg {
max-width: 32rem;
}
.max-w-main {
max-width: var(--main-max-width);
}
.max-w-max {
max-width: -moz-max-content;
max-width: max-content;
}
.max-w-md {
max-width: 28rem;
}
.max-w-none {
max-width: none;
}
.max-w-sm {
max-width: 24rem;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.shrink-0 {
flex-shrink: 0;
}
.grow {
flex-grow: 1;
}
.caption-bottom {
caption-side: bottom;
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0\.5 {
--tw-translate-x: 0.125rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-6 {
--tw-translate-x: 1.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-4 {
--tw-translate-y: 1rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-0 {
--tw-rotate: 0deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
--tw-rotate: 45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95 {
--tw-scale-x: .95;
--tw-scale-y: .95;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform-gpu {
transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform-none {
transform: none;
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8,0,1,1);
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0,0,0.2,1);
}
}
.animate-bounce {
animation: bounce 1s infinite;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animate-fade-in {
animation: fade-in 0.15s ease-out;
}
@keyframes pulse {
50% {
opacity: .5;
}
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
.cursor-default {
cursor: default;
}
.cursor-grab {
cursor: grab;
}
.cursor-grabbing {
cursor: grabbing;
}
.cursor-help {
cursor: help;
}
.cursor-not-allowed {
cursor: not-allowed;
}
.cursor-pointer {
cursor: pointer;
}
.touch-none {
touch-action: none;
}
.touch-manipulation {
touch-action: manipulation;
}
.select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.resize {
resize: both;
}
.list-inside {
list-style-position: inside;
}
.list-decimal {
list-style-type: decimal;
}
.list-disc {
list-style-type: disc;
}
.list-none {
list-style-type: none;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-col {
flex-direction: column;
}
.flex-col-reverse {
flex-direction: column-reverse;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-center {
align-items: center;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-1 {
gap: 0.25rem;
}
.gap-12 {
gap: 3rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
.gap-\[var\(--component-gap\)\] {
gap: var(--component-gap);
}
.gap-x-3 {
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
}
.gap-y-2 {
row-gap: 0.5rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1.5rem * var(--tw-space-x-reverse));
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-14 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(3.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(3.5rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.space-y-\[var\(--component-gap\)\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(var(--component-gap) * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(var(--component-gap) * var(--tw-space-y-reverse));
}
.space-y-\[var\(--space-lg\)\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(var(--space-lg) * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(var(--space-lg) * var(--tw-space-y-reverse));
}
.space-y-\[var\(--space-md\)\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(var(--space-md) * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(var(--space-md) * var(--tw-space-y-reverse));
}
.space-y-\[var\(--space-sm\)\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(var(--space-sm) * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(var(--space-sm) * var(--tw-space-y-reverse));
}
.space-y-\[var\(--space-xl\)\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(var(--space-xl) * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(var(--space-xl) * var(--tw-space-y-reverse));
}
.space-y-\[var\(--space-xs\)\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(var(--space-xs) * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(var(--space-xs) * var(--tw-space-y-reverse));
}
.space-y-\[var\(--text-spacing\)\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(var(--text-spacing) * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(var(--text-spacing) * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.self-stretch {
align-self: stretch;
}
.overflow-auto {
overflow: auto;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.whitespace-nowrap {
white-space: nowrap;
}
.whitespace-pre {
white-space: pre;
}
.whitespace-pre-wrap {
white-space: pre-wrap;
}
.break-words {
overflow-wrap: break-word;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-\[inherit\] {
border-radius: inherit;
}
.rounded-full {
border-radius: var(--radius-full);
}
.rounded-lg {
border-radius: var(--radius);
}
.rounded-md {
border-radius: calc(var(--radius) - 2px);
}
.rounded-sm {
border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-t-lg {
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
}
.rounded-tl-sm {
border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
border-width: 1px;
}
.border-0 {
border-width: 0px;
}
.border-2 {
border-width: 2px;
}
.border-4 {
border-width: 4px;
}
.border-\[8px\] {
border-width: 8px;
}
.border-b {
border-bottom-width: 1px;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-l {
border-left-width: 1px;
}
.border-l-2 {
border-left-width: 2px;
}
.border-l-4 {
border-left-width: 4px;
}
.border-r {
border-right-width: 1px;
}
.border-r-4 {
border-right-width: 4px;
}
.border-t {
border-top-width: 1px;
}
.border-t-4 {
border-top-width: 4px;
}
.border-dashed {
border-style: dashed;
}
.border-\[rgb\(from_var\(--accent\)_r_g_b_\/_0\.5\)\] {
border-color: rgb(from var(--accent) r g b / 0.5);
}
.border-\[rgb\(from_var\(--destructive\)_r_g_b_\/_0\.5\)\] {
border-color: rgb(from var(--destructive) r g b / 0.5);
}
.border-\[rgb\(from_var\(--success\)_r_g_b_\/_0\.5\)\] {
border-color: rgb(from var(--success) r g b / 0.5);
}
.border-\[rgb\(from_var\(--warning\)_r_g_b_\/_0\.5\)\] {
border-color: rgb(from var(--warning) r g b / 0.5);
}
.border-accent {
border-color: var(--accent);
}
.border-blue-200 {
--tw-border-opacity: 1;
border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-border {
border-color: var(--border);
}
.border-current {
border-color: currentColor;
}
.border-destructive {
border-color: var(--destructive);
}
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-600 {
--tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.border-gray-700 {
--tw-border-opacity: 1;
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.border-green-200 {
--tw-border-opacity: 1;
border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-input {
border-color: var(--input);
}
.border-muted {
border-color: var(--muted);
}
.border-muted-foreground {
border-color: var(--muted-foreground);
}
.border-primary {
border-color: var(--primary);
}
.border-red-200 {
--tw-border-opacity: 1;
border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-500 {
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-secondary {
border-color: var(--secondary);
}
.border-transparent {
border-color: transparent;
}
.border-white\/20 {
border-color: rgb(255 255 255 / 0.2);
}
.border-white\/40 {
border-color: rgb(255 255 255 / 0.4);
}
.border-yellow-200 {
--tw-border-opacity: 1;
border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}
.border-l-transparent {
border-left-color: transparent;
}
.border-t-popover {
border-top-color: var(--popover);
}
.border-t-primary {
border-top-color: var(--primary);
}
.border-t-transparent {
border-top-color: transparent;
}
.bg-\[rgb\(from_var\(--accent\)_r_g_b_\/_0\.1\)\] {
background-color: rgb(from var(--accent) r g b / 0.1);
}
.bg-\[rgb\(from_var\(--background\)_r_g_b_\/_0\.5\)\] {
background-color: rgb(from var(--background) r g b / 0.5);
}
.bg-\[rgb\(from_var\(--background\)_r_g_b_\/_0\.8\)\] {
background-color: rgb(from var(--background) r g b / 0.8);
}
.bg-\[rgb\(from_var\(--background\)_r_g_b_\/_0\.95\)\] {
background-color: rgb(from var(--background) r g b / 0.95);
}
.bg-\[rgb\(from_var\(--destructive\)_r_g_b_\/_0\.1\)\] {
background-color: rgb(from var(--destructive) r g b / 0.1);
}
.bg-\[rgb\(from_var\(--muted\)_r_g_b_\/_0\.5\)\] {
background-color: rgb(from var(--muted) r g b / 0.5);
}
.bg-\[rgb\(from_var\(--success\)_r_g_b_\/_0\.1\)\] {
background-color: rgb(from var(--success) r g b / 0.1);
}
.bg-\[rgb\(from_var\(--warning\)_r_g_b_\/_0\.1\)\] {
background-color: rgb(from var(--warning) r g b / 0.1);
}
.bg-accent {
background-color: var(--accent);
}
.bg-background {
background-color: var(--background);
}
.bg-black\/50 {
background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60 {
background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/90 {
background-color: rgb(0 0 0 / 0.9);
}
.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
--tw-bg-opacity: 1;
background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-500\/20 {
background-color: rgb(59 130 246 / 0.2);
}
.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-border {
background-color: var(--border);
}
.bg-card {
background-color: var(--card);
}
.bg-destructive {
background-color: var(--destructive);
}
.bg-foreground {
background-color: var(--foreground);
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-300 {
--tw-bg-opacity: 1;
background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-500 {
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.bg-gray-500\/20 {
background-color: rgb(107 114 128 / 0.2);
}
.bg-gray-600 {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-green-100 {
--tw-bg-opacity: 1;
background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
--tw-bg-opacity: 1;
background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-500\/20 {
background-color: rgb(34 197 94 / 0.2);
}
.bg-green-600 {
--tw-bg-opacity: 1;
background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-muted {
background-color: var(--muted);
}
.bg-orange-500 {
--tw-bg-opacity: 1;
background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-orange-500\/20 {
background-color: rgb(249 115 22 / 0.2);
}
.bg-popover {
background-color: var(--popover);
}
.bg-primary {
background-color: var(--primary);
}
.bg-purple-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-500 {
--tw-bg-opacity: 1;
background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-purple-600 {
--tw-bg-opacity: 1;
background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/20 {
background-color: rgb(239 68 68 / 0.2);
}
.bg-secondary {
background-color: var(--secondary);
}
.bg-teal-500 {
--tw-bg-opacity: 1;
background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
background-color: transparent;
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/20 {
background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/95 {
background-color: rgb(255 255 255 / 0.95);
}
.bg-yellow-100 {
--tw-bg-opacity: 1;
background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500 {
--tw-bg-opacity: 1;
background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500\/20 {
background-color: rgb(234 179 8 / 0.2);
}
.bg-gradient-to-b {
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-\[rgb\(from_var\(--muted\)_r_g_b_\/_0\.5\)\] {
--tw-gradient-from: rgb(from var(--muted) r g b / 0.5) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent {
--tw-gradient-from: var(--accent) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-foreground {
--tw-gradient-from: var(--foreground) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary {
--tw-gradient-from: var(--primary) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[rgb\(from_var\(--muted\)_r_g_b_\/_0\.3\)\] {
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(from var(--muted) r g b / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent {
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--accent) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-primary {
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--primary) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-secondary {
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--secondary) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[rgb\(from_var\(--muted\)_r_g_b_\/_0\.5\)\] {
--tw-gradient-to: rgb(from var(--muted) r g b / 0.5) var(--tw-gradient-to-position);
}
.to-accent {
--tw-gradient-to: var(--accent) var(--tw-gradient-to-position);
}
.to-foreground {
--tw-gradient-to: var(--foreground) var(--tw-gradient-to-position);
}
.to-muted {
--tw-gradient-to: var(--muted) var(--tw-gradient-to-position);
}
.bg-clip-text {
-webkit-background-clip: text;
background-clip: text;
}
.fill-current {
fill: currentColor;
}
.object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.object-cover {
-o-object-fit: cover;
object-fit: cover;
}
.p-0 {
padding: 0px;
}
.p-1 {
padding: 0.25rem;
}
.p-1\.5 {
padding: 0.375rem;
}
.p-12 {
padding: 3rem;
}
.p-2 {
padding: 0.5rem;
}
.p-2\.5 {
padding: 0.625rem;
}
.p-3 {
padding: 0.75rem;
}
.p-4 {
padding: 1rem;
}
.p-6 {
padding: 1.5rem;
}
.p-\[1px\] {
padding: 1px;
}
.px-0 {
padding-left: 0px;
padding-right: 0px;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-1\.5 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.px-\[var\(--content-padding\)\] {
padding-left: var(--content-padding);
padding-right: var(--content-padding);
}
.py-0\.5 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.py-\[var\(--section-gap\)\] {
padding-top: var(--section-gap);
padding-bottom: var(--section-gap);
}
.pb-2 {
padding-bottom: 0.5rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pb-\[var\(--space-md\)\] {
padding-bottom: var(--space-md);
}
.pl-10 {
padding-left: 2.5rem;
}
.pl-2\.5 {
padding-left: 0.625rem;
}
.pl-3 {
padding-left: 0.75rem;
}
.pl-4 {
padding-left: 1rem;
}
.pl-6 {
padding-left: 1.5rem;
}
.pl-8 {
padding-left: 2rem;
}
.pl-\[var\(--space-sm\)\] {
padding-left: var(--space-sm);
}
.pr-10 {
padding-right: 2.5rem;
}
.pr-2 {
padding-right: 0.5rem;
}
.pr-2\.5 {
padding-right: 0.625rem;
}
.pr-4 {
padding-right: 1rem;
}
.pr-6 {
padding-right: 1.5rem;
}
.pt-0 {
padding-top: 0px;
}
.pt-2 {
padding-top: 0.5rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.pt-4 {
padding-top: 1rem;
}
.pt-6 {
padding-top: 1.5rem;
}
.pt-8 {
padding-top: 2rem;
}
.pt-\[var\(--space-md\)\] {
padding-top: var(--space-md);
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-start {
text-align: start;
}
.align-middle {
vertical-align: middle;
}
.font {
font-family: var(--font-family), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font-mono {
font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-serif {
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.text-\[0\.8rem\] {
font-size: 0.8rem;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.font-bold {
font-weight: 700;
}
.font-medium {
font-weight: 500;
}
.font-normal {
font-weight: 400;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
.italic {
font-style: italic;
}
.leading-none {
line-height: 1;
}
.leading-normal {
line-height: 1.5;
}
.leading-relaxed {
line-height: 1.625;
}
.leading-snug {
line-height: 1.375;
}
.leading-tight {
line-height: 1.25;
}
.tracking-tight {
letter-spacing: -0.025em;
}
.tracking-wide {
letter-spacing: 0.025em;
}
.tracking-wider {
letter-spacing: 0.05em;
}
.tracking-widest {
letter-spacing: 0.1em;
}
.text-accent {
color: var(--accent);
}
.text-accent-foreground {
color: var(--accent-foreground);
}
.text-amber-500 {
--tw-text-opacity: 1;
color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
--tw-text-opacity: 1;
color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-background {
color: var(--background);
}
.text-blue-600 {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
--tw-text-opacity: 1;
color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-blue-900 {
--tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.text-current {
color: currentColor;
}
.text-destructive {
color: var(--destructive);
}
.text-destructive-foreground {
color: var(--destructive-foreground);
}
.text-emerald-500 {
--tw-text-opacity: 1;
color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
--tw-text-opacity: 1;
color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-foreground {
color: var(--foreground);
}
.text-gray-100 {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-400 {
--tw-text-opacity: 1;
color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-green-600 {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700 {
--tw-text-opacity: 1;
color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-green-800 {
--tw-text-opacity: 1;
color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-green-900 {
--tw-text-opacity: 1;
color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}
.text-indigo-600 {
--tw-text-opacity: 1;
color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
color: var(--muted-foreground);
}
.text-orange-500 {
--tw-text-opacity: 1;
color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
--tw-text-opacity: 1;
color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-popover-foreground {
color: var(--popover-foreground);
}
.text-primary {
color: var(--primary);
}
.text-primary-foreground {
color: var(--primary-foreground);
}
.text-purple-600 {
--tw-text-opacity: 1;
color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-purple-700 {
--tw-text-opacity: 1;
color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.text-purple-800 {
--tw-text-opacity: 1;
color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-400 {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
--tw-text-opacity: 1;
color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
--tw-text-opacity: 1;
color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-secondary {
color: var(--secondary);
}
.text-secondary-foreground {
color: var(--secondary-foreground);
}
.text-transparent {
color: transparent;
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-600 {
--tw-text-opacity: 1;
color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.text-yellow-700 {
--tw-text-opacity: 1;
color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.text-yellow-800 {
--tw-text-opacity: 1;
color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.text-yellow-900 {
--tw-text-opacity: 1;
color: rgb(113 63 18 / var(--tw-text-opacity, 1));
}
.underline {
text-decoration-line: underline;
}
.no-underline {
text-decoration-line: none;
}
.underline-offset-2 {
text-underline-offset: 2px;
}
.underline-offset-4 {
text-underline-offset: 4px;
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
opacity: 0;
}
.opacity-10 {
opacity: 0.1;
}
.opacity-100 {
opacity: 1;
}
.opacity-15 {
opacity: 0.15;
}
.opacity-20 {
opacity: 0.2;
}
.opacity-30 {
opacity: 0.3;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-60 {
opacity: 0.6;
}
.opacity-70 {
opacity: 0.7;
}
.opacity-75 {
opacity: 0.75;
}
.opacity-80 {
opacity: 0.8;
}
.opacity-90 {
opacity: 0.9;
}
.opacity-\[var\(--opacity-muted\)\] {
opacity: var(--opacity-muted);
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
}
.outline {
outline-style: solid;
}
.ring-0 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-primary {
--tw-ring-color: var(--primary);
}
.ring-offset-background {
--tw-ring-offset-color: var(--background);
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-sm {
--tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
--tw-backdrop-blur: blur(8px);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
--tw-backdrop-blur: blur(4px);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-xl {
--tw-backdrop-blur: blur(24px);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-none {
transition-property: none;
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-shadow {
transition-property: box-shadow;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-100 {
transition-duration: 100ms;
}
.duration-150 {
transition-duration: 150ms;
}
.duration-200 {
transition-duration: 200ms;
}
.duration-300 {
transition-duration: 300ms;
}
.duration-500 {
transition-duration: 500ms;
}
.ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
transition-timing-function: linear;
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@keyframes enter {
from {
opacity: var(--tw-enter-opacity, 1);
transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
}
}
@keyframes exit {
to {
opacity: var(--tw-exit-opacity, 1);
transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
}
}
.animate-in {
animation-name: enter;
animation-duration: 150ms;
--tw-enter-opacity: initial;
--tw-enter-scale: initial;
--tw-enter-rotate: initial;
--tw-enter-translate-x: initial;
--tw-enter-translate-y: initial;
}
.fade-in {
--tw-enter-opacity: 0;
}
.fade-in-0 {
--tw-enter-opacity: 0;
}
.fade-in-80 {
--tw-enter-opacity: 0.8;
}
.fade-out {
--tw-exit-opacity: 0;
}
.zoom-in-95 {
--tw-enter-scale: .95;
}
.duration-100 {
animation-duration: 100ms;
}
.duration-150 {
animation-duration: 150ms;
}
.duration-200 {
animation-duration: 200ms;
}
.duration-300 {
animation-duration: 300ms;
}
.duration-500 {
animation-duration: 500ms;
}
.ease-in {
animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
animation-timing-function: linear;
}
.ease-out {
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
animation-play-state: running;
}
.paused {
animation-play-state: paused;
}
h-header {
height: var(--header-height);
}
w-header {
width: var(--header-height);
}
pt-header {
padding-top: var(--header-height);
}
mt-header {
margin-top: var(--header-height);
}
h-header-icon {
height: var(--header-height);
}
w-sidebar {
width: var(--sidebar-width);
}
ml-sidebar {
margin-left: var(--sidebar-width);
}
pl-sidebar {
padding-left: var(--sidebar-width);
}
h-footer {
height: var(--footer-height);
}
pb-footer {
padding-bottom: var(--footer-height);
}
mb-footer {
margin-bottom: var(--footer-height);
}
size-logo {
width: var(--logo-size);
height: var(--logo-size);
}
size-icon-sm {
width: var(--icon-sm);
height: var(--icon-sm);
}
size-icon-md {
width: var(--icon-md);
height: var(--icon-md);
}
size-icon-lg {
width: var(--icon-lg);
height: var(--icon-lg);
}
size-touch {
width: var(--touch-target);
height: var(--touch-target);
}
min-h-touch {
min-height: var(--touch-target);
}
min-w-touch {
min-width: var(--touch-target);
}
gap-layout {
gap: var(--layout-gap);
}
gap-section {
gap: var(--section-gap);
}
gap-content {
gap: var(--content-gap);
}
p-main {
padding: var(--main-padding);
}
px-main {
padding-left: var(--main-padding);
padding-right: var(--main-padding);
}
py-main {
padding-top: var(--main-padding);
padding-bottom: var(--main-padding);
}
max-w-main {
max-width: var(--main-max-width);
}
/* ===========================
SCROLLBAR UTILITIES
=========================== */
/* ===========================
SCROLL-SNAP UTILITIES
=========================== */
/* ===========================
TRANSITION & ANIMATION UTILITIES
=========================== */
.ease-smooth {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.duration-500 {
transition-duration: 500ms;
}
/* ===========================
TRANSFORM UTILITIES
=========================== */
/* ===========================
KEYFRAME DEFINITIONS
=========================== */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-25%);
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes scale-in {
from {
transform: scale(0.95);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* ===========================
ANIMATION UTILITIES
=========================== */
.animate-spin {
animation: spin 1s linear infinite;
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-bounce {
animation: bounce 1s infinite;
}
.animate-fade-in {
animation: fade-in 0.3s ease-out;
}
.animate-slide-in {
animation: slide-in 0.3s ease-out;
}
.animate-scale-in {
animation: scale-in 0.2s ease-out;
}
/* Debug mode control - global scope required */
:root {
--debug-enabled: 0; /* 0 = off, 1 = on */
}
/* ===========================
DEBUG UTILITIES
=========================== */
.debug-layout {
outline: calc(var(--debug-enabled) * 2px) solid rgba(255, 0, 0, 0.5) !important;
}
.debug-flex {
outline: calc(var(--debug-enabled) * 2px) dashed rgba(255, 165, 0, 0.8) !important;
}
.debug-component {
outline: calc(var(--debug-enabled) * 1px) dotted rgba(0, 255, 0, 0.6) !important;
}
/* 2. Layout variables (override base variables with layout-specific values) */
/**
* @fileoverview Layout Variables - Layout-Specific Overrides
* @description CSS-only visual dimensions with preset overrides - Zero JavaScript duplication
* @package @dndev/ui
* @version 1.0.0
* @since 1.0.0
* @author AMBROISE PARK Consulting
*
* CLEAN SEPARATION ARCHITECTURE (v2.0):
* 1. @dndev/components/variables.css: ALL base design tokens (single source of truth)
* 2. This file: Layout-specific overrides and positioning rules only
* 3. TypeScript: Component behavior and user preferences
* 4. Runtime: Direct CSS variable injection via AppProviders layoutOverrides
*
* LAYOUT OVERRIDE SYSTEM:
* - Inherits all base tokens from @dndev/components
* - Only defines layout-specific dimensions (header, sidebar, main, footer)
* - Preset-specific overrides via [data-layout="preset"] selectors
* - Runtime overrides via document.documentElement.style (highest specificity)
*
* HOW IT WORKS:
* 1. Layout component sets [data-layout="preset"] on
* 2. CSS applies preset-specific variable overrides
* 3. Components use same CSS variable names, different values per preset
* 4. AppProviders can inject runtime overrides for customization
*
* EXAMPLE COMPONENT USAGE:
* - className="h-[var(--header-height)]"
* - style={{ height: 'var(--header-height)' }}
* - .my-component { padding: var(--main-padding); }
*
* EXAMPLE RUNTIME OVERRIDES:
*
*/
:root {
/* ===========================
BREAKPOINT VARIABLES - DRY APPROACH
Single source of truth for all breakpoint values
=========================== */
--breakpoint-mobile: 768px;
--breakpoint-tablet: 1024px; /* Key breakpoint for Reveal component */
--breakpoint-desktop: 1440px;
/* ===========================
RESPONSIVE BASE VARIABLES
Mobile-first responsive system that works for all presets
=========================== */
/* Layout structure dimensions */
--header-height: 60px;
--header-padding: 1rem;
--sidebar-width: 0px; /* Hidden by default on mobile */
--sidebar-padding: 0px;
--main-padding: 1rem;
--main-max-width: none; /* Default: full width */
--footer-height: 60px;
--footer-padding: 1rem;
/* ===========================
ZERO-CSS SPACING SYSTEM
Automatic spacing for all components
=========================== */
/* Section spacing - between major content blocks */ /* 32px - mobile default */
--section-gap-mobile: 2rem; /* 32px - mobile */
--section-gap-tablet: 3rem; /* 48px - tablet */
--section-gap-desktop: 4rem; /* 64px - desktop */
/* Component spacing - between components within sections */
--component-gap: 0.75rem; /* 12px - mobile default */
--component-gap-mobile: 0.75rem; /* 12px - mobile */
--component-gap-tablet: 1rem; /* 16px - tablet */
--component-gap-desktop: 1.5rem; /* 24px - desktop */
/* Content padding - page-level padding */
--content-padding: 1rem; /* 16px - mobile default */
--content-padding-mobile: 1rem; /* 16px - mobile */
--content-padding-tablet: 2rem; /* 32px - tablet */
--content-padding-desktop: 3rem; /* 48px - desktop */
/* Card padding - internal component padding */
--card-padding: 0.75rem; /* 12px - mobile default */
--card-padding-mobile: 0.75rem; /* 12px - mobile */
--card-padding-tablet: 1rem; /* 16px - tablet */
--card-padding-desktop: 1.5rem; /* 24px - desktop */
/* Text spacing - between text elements */
--text-spacing: 0.5rem; /* 8px - mobile default */
--text-spacing-mobile: 0.5rem; /* 8px - mobile */
--text-spacing-tablet: 0.75rem; /* 12px - tablet */
--text-spacing-desktop: 1rem; /* 16px - desktop */
/* Fallback values for presets that don't use certain components */
--header-height-fallback: 0px;
--sidebar-width-fallback: 0px;
--footer-height-fallback: 0px;
/* Visual elements */
--logo-size: 32px;
--layout-gap: 1rem;
--section-gap: 1.5rem;
--content-gap: 2rem;
/* Component-specific sizing (derived from layout dimensions) */
--header-icon-size: calc(var(--header-height) - 24px);
--header-logo-max-height: calc(var(--header-height) - 16px);
--sidebar-item-height: var(--touch-target);
--sidebar-icon-size: var(--icon-md);
/* Z-index layers (consistent across all presets) */
--z-header: 100;
--z-sidebar: 90;
--z-footer: 1;
--z-overlay: 40;
--z-breadcrumbs: 10;
--z-dropdown: 50;
--z-modal: 1000;
--z-tooltip: 1100;
--z-toast: 1200;
}
/* ===========================
RESPONSIVE SPACING SYSTEM
Progressive enhancement for larger screens
=========================== */
/* Tablet (768px+) */
@media (min-width: var(--breakpoint-mobile)) {
:root {
--header-height: 70px;
--header-padding: 1.5rem;
--logo-size: 40px;
--sidebar-width: 240px; /* Default sidebar appears */
--sidebar-padding: 1rem;
--main-padding: 1.5rem;
--footer-height: 70px;
--footer-padding: 1.5rem;
/* Tablet spacing */
--section-gap: var(--section-gap-tablet);
--component-gap: var(--component-gap-tablet);
--content-padding: var(--content-padding-tablet);
--card-padding: var(--card-padding-tablet);
--text-spacing: var(--text-spacing-tablet);
}
}
/* Desktop (1024px+) */
@media (min-width: var(--breakpoint-tablet)) {
:root {
--header-height: 80px;
--header-padding: 2rem;
--logo-size: 48px;
--sidebar-width: 280px; /* Wider sidebar on desktop */
--sidebar-padding: 1.5rem;
--main-padding: 2rem;
--footer-height: 80px;
--footer-padding: 2rem;
/* Desktop spacing */
--section-gap: var(--section-gap-desktop);
--component-gap: var(--component-gap-desktop);
--content-padding: var(--content-padding-desktop);
--card-padding: var(--card-padding-desktop);
--text-spacing: var(--text-spacing-desktop);
}
}
/* Large desktop (1280px+) */
@media (min-width: var(--breakpoint-desktop)) {
:root {
/* No changes - consistent across all breakpoints */
}
}
/* ===========================
AUTO-GENERATED SPACING UTILITIES
These will be auto-generated by the Vite plugin
=========================== */
/* PageContainer automatic child padding */
.page-container > * {
padding-block: var(--content-padding);
}
/* ===========================
AUTOMATIC SECTION SPACING
Zero-CSS composition with smart defaults
=========================== */
/* PageContainer becomes a flex container for automatic spacing */
.page-container {
display: flex;
flex-direction: column;
}
/* Automatic vertical spacing between direct children */
.page-container > * + * {
margin-top: var(--section-gap);
}
/* Smart spacing based on component types */
.page-container > section:first-child {
margin-top: 0; /* First section starts at top */
}
/* Marketing sections get standard spacing automatically */
.page-container > section + section {
margin-top: var(--section-gap);
}
/* Section spacing utilities */
.section-gap {
gap: var(--section-gap);
}
.space-y-section > * + * {
margin-top: var(--section-gap);
}
/* Section margin utilities */
.mb-section {
margin-bottom: var(--section-gap);
}
.mt-section {
margin-top: var(--section-gap);
}
/* Component spacing utilities */
.component-gap {
gap: var(--component-gap);
}
.space-y-component > * + * {
margin-top: var(--component-gap);
}
/* Content padding utilities */
.content-padding {
padding: var(--content-padding);
}
.content-padding-x {
padding-left: var(--content-padding);
padding-right: var(--content-padding);
}
.content-padding-y {
padding-top: var(--content-padding);
padding-bottom: var(--content-padding);
}
/* Card padding utilities */
.card-padding {
padding: var(--card-padding);
}
.card-padding-x {
padding-left: var(--card-padding);
padding-right: var(--card-padding);
}
.card-padding-y {
padding-top: var(--card-padding);
padding-bottom: var(--card-padding);
}
/* Text spacing utilities */
.text-spacing {
gap: var(--text-spacing);
}
.space-y-text > * + * {
margin-top: var(--text-spacing);
}
/* ===========================
LAYOUT CONTAINER
Relative positioning container for absolute positioned elements
=========================== */
.layout-container {
position: relative;
width: 100%;
height: 100vh;
}
/* ===========================
SIMPLE LAYOUT POSITIONING RULES
Follows logical flow: Header → Sidebar → Main → Footer
=========================== */
/* Header: Always at top, full width, defined height */
header[role='banner'] {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: var(--header-height, var(--header-height-fallback));
z-index: var(--z-header);
}
/* Sidebar: Underneath header, left = 0, defined width */
aside[role='navigation'] {
position: fixed;
top: var(--header-height, var(--header-height-fallback));
left: 0;
width: var(--sidebar-width, var(--sidebar-width-fallback));
height: calc(100vh - var(--header-height, var(--header-height-fallback)));
z-index: var(--z-sidebar);
overflow-y: auto;
}
/* Main content: Starts at header-height and sidebar-width */
main[role='main'] {
position: absolute;
top: var(--header-height, var(--header-height-fallback));
left: var(--sidebar-width, var(--sidebar-width-fallback));
right: 0;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
padding: var(--main-padding, 1rem);
}
main[role='main'] > *:first-child {
flex: 1 1 auto; /* Page content grows */
}
main[role='main'] > *:last-child {
flex-shrink: 0; /* Footer stays at bottom */
}
/* Footer: Underneath main content, width = 100% - sidebar-width */
footer[role='contentinfo'] {
position: absolute;
top: calc(100vh - var(--footer-height, var(--footer-height-fallback)));
left: var(--sidebar-width, var(--sidebar-width-fallback));
right: 0;
height: var(--footer-height, var(--footer-height-fallback));
z-index: var(--z-footer);
padding: var(--footer-padding);
}
/* ===========================
FOOTER POSITIONING OVERRIDES
Handle different footer positioning strategies
=========================== */
/* Fixed Footer: Spans 100% width, overlays content (always visible) */
[data-footer-position='fixed'] footer[role='contentinfo'] {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100vw;
z-index: var(--z-footer);
}
/* Auto footer positioning - layout-specific defaults */
[data-footer-position='auto'] footer[role='contentinfo'] {
/* Default to content positioning */
position: relative;
top: auto;
left: auto;
right: auto;
width: auto;
height: auto;
margin-top: auto;
}
/* Landing + Estate: Fixed footer (full-width, always visible) */
[data-layout='landing'][data-footer-position='auto'] footer[role='contentinfo'],
[data-layout='estate'][data-footer-position='auto'] footer[role='contentinfo'] {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100vw;
z-index: var(--z-footer);
}
/* Admin + Docs + Dashboard: Content footer (after content) */
[data-layout='admin'][data-footer-position='auto'] footer[role='contentinfo'],
[data-layout='docs'][data-footer-position='auto'] footer[role='contentinfo'],
[data-layout='dashboard'][data-footer-position='auto']
footer[role='contentinfo'] {
position: relative;
top: auto;
left: auto;
right: auto;
width: auto;
height: auto;
margin-top: auto;
}
/* Moolti: No footer (built into sidebar) */
[data-layout='moolti'][data-footer-position='auto'] footer[role='contentinfo'] {
display: none;
}
/* Plain: No footer */
[data-layout='plain'][data-footer-position='auto'] footer[role='contentinfo'] {
display: none;
}
/* Adjust main content height for fixed footer to prevent overlap */
[data-footer-position='fixed'] main[role='main'],
[data-layout='landing'][data-footer-position='auto'] main[role='main'],
[data-layout='estate'][data-footer-position='auto'] main[role='main'] {
bottom: var(--footer-height, var(--footer-height-fallback));
}
/* Content Footer: Natural document flow, positioned after content */
[data-footer-position='content'] footer[role='contentinfo'] {
position: relative;
top: auto;
left: auto;
right: auto;
width: auto;
height: auto;
margin-top: auto;
}
/* Mobile: Footer is always full width regardless of position */
@media (max-width: 767px) {
[data-footer-position='content'] footer[role='contentinfo'] {
left: 0;
}
}
/* ===========================
PRESET DEFINITIONS - SINGLE SOURCE OF TRUTH
=========================== */
/**
* ADMIN PRESET - Desktop/Tablet (768px+)
* Perfect for: Admin panels, dashboards, management interfaces
*/
[data-layout='admin'] {
--header-height: 80px;
--sidebar-width: 280px;
--main-padding: 32px;
--main-max-width: 1400px; /* Content-constrained for admin interfaces */
--footer-height: auto;
/* Admin spacing - tighter, more compact */
--section-gap: 2rem;
--component-gap: 1rem;
--content-padding: 2rem;
--card-padding: 1.5rem;
--text-spacing: 0.75rem;
}
/**
* MOOLTI PRESET - Desktop/Tablet (768px+)
* Perfect for: SaaS applications, productivity tools, focused workflows
*/
[data-layout='moolti'] {
--header-height: 0px;
--sidebar-width: 256px;
--main-padding: 4px;
--main-max-width: 1400px; /* Content-constrained for SaaS apps */
--footer-height: auto;
/* Moolti spacing - balanced, professional */
--section-gap: 3rem;
--component-gap: 1.5rem;
--content-padding: 2rem;
--card-padding: 1.5rem;
--text-spacing: 0.75rem;
}
/**
* DOCS PRESET - Desktop/Tablet (768px+)
* Perfect for: Documentation sites, knowledge bases, content platforms
*/
[data-layout='docs'] {
--header-height: 0px;
--sidebar-width: 320px;
--main-padding: 32px;
--main-max-width: 1400px; /* Content-constrained for documentation */
--footer-height: auto;
/* Docs spacing - comfortable reading */
--section-gap: 4rem;
--component-gap: 2rem;
--content-padding: 3rem;
--card-padding: 2rem;
--text-spacing: 1rem;
}
/**
* LANDING PRESET - Desktop/Tablet (768px+)
* Perfect for: Marketing sites, landing pages, public content
*/
[data-layout='landing'] {
--header-height: 96px;
--sidebar-width: 0px;
--main-padding: 0px;
--main-max-width: none; /* Full-width for marketing content */
--footer-height: 64px;
/* Landing spacing - generous breathing room for premium feel */
--section-gap: 6rem;
--component-gap: 2rem;
--content-padding: 1.5rem;
--card-padding: 2rem;
--text-spacing: 1rem;
}
/* Landing preset: Footer in content flow, not always visible */
/**
* ESTATE PRESET - Desktop/Tablet (768px+)
* Perfect for: Real estate sites, hotel booking, property showcases
*/
[data-layout='estate'] {
--header-height: 80px;
--sidebar-width: 0px;
--main-padding: 0px;
--main-max-width: none; /* Full-width for property showcases */
--footer-height: auto;
/* Estate spacing - showcase-friendly */
--section-gap: 5rem;
--component-gap: 2rem;
--content-padding: 3rem;
--card-padding: 2rem;
--text-spacing: 1rem;
}
/**
* PLAIN PRESET - Desktop/Tablet (768px+)
* Perfect for: Full-screen apps, embedded widgets, clean content
*/
[data-layout='plain'] {
--header-height: 0px;
--sidebar-width: 0px;
--main-padding: 0px;
--main-max-width: none; /* Full-width for full-screen apps */
--footer-height: 0px;
/* Plain spacing - minimal */
--section-gap: 1rem;
--component-gap: 0.5rem;
--content-padding: 0.5rem;
--card-padding: 0.5rem;
--text-spacing: 0.25rem;
}
/**
* DASHBOARD PRESET - Desktop/Tablet (768px+)
* Perfect for: Data-heavy dashboards, analytics, management interfaces
*/
[data-layout='dashboard'] {
--header-height: 80px;
--sidebar-width: 280px;
--main-padding: 32px;
--main-max-width: 1400px; /* Content-constrained for dashboards */
--footer-height: auto;
/* Dashboard spacing - data-dense */
--section-gap: 2rem;
--component-gap: 1rem;
--content-padding: 2rem;
--card-padding: 1.5rem;
--text-spacing: 0.75rem;
}
/* ===========================
TABLET-SPECIFIC OVERRIDES (768px - 1023px)
=========================== */
@media (min-width: 768px) and (max-width: 1023px) {
[data-layout='admin'] {
--header-height: 70px;
--sidebar-width: 240px;
--main-padding: 24px;
}
[data-layout='moolti'] {
--sidebar-width: 240px;
--main-padding: 8px;
}
[data-layout='docs'] {
--sidebar-width: 300px;
--main-padding: 24px;
}
[data-layout='estate'] {
--header-height: 72px;
}
[data-layout='plain'] {
/* No changes - consistent across all breakpoints */
}
}
/* ===========================
MOBILE-SPECIFIC OVERRIDES (< 768px)
=========================== */
/* Base mobile dimensions for all presets */
@media (max-width: 767px) {
:root {
--header-height: 56px;
--footer-height: 48px;
--main-padding: 16px;
--sidebar-width: 0px;
}
[data-layout='landing'] {
--header-height: 64px;
--main-padding: 0px;
}
[data-layout='admin'] {
--header-height: 60px;
--main-padding: 16px;
}
[data-layout='moolti'] {
--main-padding: 4px;
}
[data-layout='docs'] {
--main-padding: 16px;
}
[data-layout='estate'] {
--header-height: 64px;
}
[data-layout='plain'] {
--main-padding: 0px;
}
}
/* ===========================
CONTENT AREA CALCULATIONS
Useful for complex layouts
=========================== */
:root {
/* Content area calculations (useful for complex layouts) */
--content-width: calc(100vw - var(--sidebar-width, 0px));
--content-max-width: calc(var(--main-max-width) - var(--sidebar-width, 0px));
/* Header content area (excludes sidebar on some presets) */
--header-content-width: 100vw;
}
/* Header content width adjustments for sidebar layouts */
[data-layout='moolti'],
[data-layout='docs'] {
--header-content-width: calc(100vw - var(--sidebar-width));
}
/* ===========================
THEME INTEGRATION
Dark mode and theme-aware variables
=========================== */
/* Dark mode adjustments (if needed) */
@media (prefers-color-scheme: dark) {
:root {
/* Any dark mode specific dimension adjustments */
}
}
/* ===========================
ACCESSIBILITY ENHANCEMENTS
Improved accessibility for motion and touch
=========================== */
/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
:root {
/* Maintain dimensions but prepare for reduced animations */
}
}
/* High contrast mode adjustments */
@media (prefers-contrast: high) {
:root {
/* Any high contrast dimension adjustments */
}
}
/* ===========================
DEVELOPMENT UTILITIES
Debug and development helpers
=========================== */
/* Debug mode (activated by DebugTools component) */
:root[style*='--debug-enabled: 1'] * {
outline: 1px solid rgba(255, 0, 0, 0.3) !important;
}
:root[style*='--debug-enabled: 1'] [data-layout-variant] {
outline: 2px solid rgba(0, 255, 0, 0.5) !important;
}
:root[style*='--debug-enabled: 1'] [role='banner'],
:root[style*='--debug-enabled: 1'] [role='navigation'],
:root[style*='--debug-enabled: 1'] [role='main'],
:root[style*='--debug-enabled: 1'] [role='contentinfo'] {
outline: 2px solid rgba(0, 255, 0, 0.5) !important;
}
/* ===========================
BREADCRUMBS CONTAINER
Global breadcrumbs styling
=========================== */
.breadcrumbs-container {
/* Ensure breadcrumbs don't interfere with layout positioning */
position: relative;
z-index: var(--z-breadcrumbs, 10);
/* Subtle background to separate from content */
background: rgb(from var(--muted) r g b / 0.3);
border-bottom: 1px solid rgb(from var(--border) r g b / 0.5);
}
/* Hide breadcrumbs container when breadcrumbs are hidden (smart variant) */
.breadcrumbs-container:empty {
display: none;
}
/* ===========================
FRAMEWORK INTEGRATION NOTES
=========================== */
/*
* TAILWIND UTILITY GENERATION:
* These variables are automatically discovered by the DNDev Vite plugin
* and converted into Tailwind utility classes:
*
* Layout structure:
* --header-height → .h-header, .min-h-header, .pt-header
* --sidebar-width → .w-sidebar, .max-w-sidebar, .ml-sidebar
* --logo-size → .size-logo, .w-logo, .h-logo
* --main-padding → .p-main, .px-main, .py-main
* --main-max-width → .max-w-main
*
* Spacing system:
* --section-gap → .gap-section, .space-y-section
* --component-gap → .gap-component, .space-y-component
* --content-padding → .p-content, .px-content, .py-content
* --card-padding → .p-card, .px-card, .py-card
* --text-spacing → .gap-text, .space-y-text
*
* Interactive elements:
* --touch-target → .h-touch, .w-touch, .size-touch
* --icon-md → .size-icon-md, .h-icon-md, .w-icon-md
*
* Spacing:
* --layout-gap → .gap-layout, .space-x-layout, .space-y-layout
* --section-gap → .gap-section, .mb-section, .mt-section
* --content-gap → .gap-content, .space-y-content
*
* Z-index:
* --z-header → .z-header
* --z-sidebar → .z-sidebar
* --z-modal → .z-modal
*
* COMPONENT USAGE EXAMPLES:
*
* 1. Direct CSS variable:
* style={{ height: 'var(--header-height)' }}
*
* 2. Tailwind arbitrary value:
* className="h-[var(--header-height)]"
*
* 3. Generated utility class:
* className="h-header w-sidebar"
*
* 4. Auto-spacing utilities:
* className="section-gap component-gap"
*
* 5. CSS class:
* .my-component {
* padding: var(--main-padding);
* max-width: var(--main-max-width);
* }
*
* RUNTIME CUSTOMIZATION:
* Use AppProviders layoutOverrides prop for runtime CSS variable injection:
*
*
*/
/* 3. Fonts */
/* Roboto Font - Complete Framework Font with Performance Optimization */
/* ✅ CRITICAL: Essential Latin fonts for initial load (preloaded) */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/Roboto-400-latin.CNwBRw8h.woff2') format('woff2');
unicode-range: U+0000-00FF; /* Basic Latin - loads first for performance */
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/Roboto-700-latin.DZr4b_KL.woff2') format('woff2');
unicode-range: U+0000-00FF; /* Basic Latin - loads first for performance */
}
/* ✅ CRITICAL: Extended character sets load on-demand when needed */
/* These load automatically when browser encounters characters in these ranges */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/Roboto-400-latin-ext.ZYmyxeOy.woff2') format('woff2');
unicode-range:
U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/Roboto-700-latin-ext.BNPgmEQS.woff2') format('woff2');
unicode-range:
U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
/* Cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/Roboto-400-cyrillic.DAIM1_dR.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/Roboto-700-cyrillic.CzEIZVQR.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Cyrillic Extended */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/Roboto-400-cyrillic-ext.DzMWdK87.woff2') format('woff2');
unicode-range:
U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/Roboto-700-cyrillic-ext.D_fA0fHY.woff2') format('woff2');
unicode-range:
U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/Roboto-400-greek.jFM2czAU.woff2') format('woff2');
unicode-range: U+0370-03FF;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/Roboto-700-greek.DpKAje7q.woff2') format('woff2');
unicode-range: U+0370-03FF;
}
/* Greek Extended */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('data:font/woff2;base64,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') format('woff2');
unicode-range: U+1F00-1FFF;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('data:font/woff2;base64,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') format('woff2');
unicode-range: U+1F00-1FFF;
}
/* Vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/Roboto-400-vietnamese.CDDxGrUb.woff2') format('woff2');
unicode-range:
U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/Roboto-700-vietnamese.BFWtvCOj.woff2') format('woff2');
unicode-range:
U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* 4. Layout components (use layout variables for positioning) */
/* ===========================
CUSTOM THEMES
=========================== */
.dndev {
--theme-icon: 'Zap';
--theme-label: 'DoNotDev';
--theme-is-dark: true;
--theme-primary: #dc143c;
--theme-secondary: #ffd700;
--theme-accent: #ffd700;
--theme-background: #0a0a0a;
--theme-border: #2a2a2a;
--theme-destructive: #dc143c;
--background: #0a0a0a;
--foreground: #f5f5f5;
--text-color: #f5f5f5;
--primary: #dc143c;
--primary-foreground: #ffffff;
--secondary: #1a1a1a;
--secondary-foreground: #e5e5e5;
--accent: #ffd700;
--accent-foreground: #0a0a0a;
--destructive: #dc143c;
--destructive-foreground: #ffffff;
--muted: #1a1a1a;
--muted-foreground: #a3a3a3;
--border: #2a2a2a;
--input: #1a1a1a;
--ring: #dc143c;
--card: #0f0f0f;
--card-foreground: #f5f5f5;
--popover: #0f0f0f;
--popover-foreground: #f5f5f5;
/* Premium Typography Scale */
--font-size-display: 4rem;
--font-size-hero: 3.5rem;
--font-size-title: 2.5rem;
--font-size-subtitle: 1.75rem;
--font-size-body: 1.125rem;
--font-size-caption: 0.875rem;
/* Premium Spacing Scale */
--space-2xl: 48px;
--space-3xl: 72px;
--space-4xl: 96px;
--space-5xl: 144px;
--component-gap: 32px;
--section-gap: 72px;
--hero-gap: 96px;
/* Premium Color System */
--accent-light: #1a1a1a;
--accent-medium: #27494a;
--accent-dark: #03bec4;
--success: #10b981;
--success-foreground: #ffffff;
--warning: #f59e0b;
--warning-foreground: #ffffff;
--info: #3b82f6;
--info-foreground: #ffffff;
/* Premium Animation System */
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 0.15s;
--dur-normal: 0.3s;
--dur-slow: 0.5s;
--dur-hero: 1s;
/* Shadow color - automatically adapts to theme */
--shadow-color: color-mix(in oklab, var(--foreground) 35%, transparent);
}
.arctic {
--theme-icon: 'Snowflake';
--theme-label: 'Arctic';
--theme-is-dark: false;
/* 6 Core Colors - Theme Foundation */
--theme-primary: #0ea5e9;
/* ice blue */
--theme-secondary: #64748b;
/* slate grey */
--theme-accent: #0284c7;
/* deep blue */
--theme-background: #f0f9ff;
/* lightest blue */
--theme-border: #bae6fd;
/* light blue */
--theme-destructive: #dc2626;
/* red */
/* Tailwind Variables */
--background: #f0f9ff;
--foreground: #0c4a6e;
--text-color: #0c4a6e;
--primary: #0ea5e9;
--primary-foreground: #ffffff;
--secondary: #e0f2fe;
--secondary-foreground: #0c4a6e;
--accent: #0284c7;
--accent-foreground: #ffffff;
--destructive: #dc2626;
--destructive-foreground: #ffffff;
--muted: #e0f2fe;
--muted-foreground: #64748b;
--border: #bae6fd;
--input: #e0f2fe;
--ring: #0ea5e9;
--card: #ffffff;
--card-foreground: #0c4a6e;
--popover: #ffffff;
--popover-foreground: #0c4a6e;
/* Shadow color - automatically adapts to theme */
--shadow-color: color-mix(in oklab, var(--foreground) 20%, transparent);
}
.barbie {
--theme-icon: 'Heart';
--theme-label: 'Barbie';
--theme-is-dark: false;
/* 6 Core Colors - Theme Foundation */
--theme-primary: #ff1493;
/* electric barbie pink */
--theme-secondary: #fbcfe8;
/* light pink */
--theme-accent: #e879f9;
/* light purple */
--theme-background: #fdf2f8;
/* lightest pink */
--theme-border: #fbbf24;
/* sunny yellow */
--theme-destructive: #dc2626;
/* red */
/* Tailwind Variables */
--background: #fdf2f8;
--foreground: #ff1493;
--text-color: #ff1493;
--primary: #ff1493;
--primary-foreground: #ffffff;
--secondary: #fbcfe8;
--secondary-foreground: #ff1493;
--accent: #e879f9;
--accent-foreground: #ffffff;
--destructive: #dc2626;
--destructive-foreground: #ffffff;
--muted: #fbcfe8;
--muted-foreground: #ff1493;
--border: #fbbf24;
--input: #fbcfe8;
--ring: #ff1493;
--card: #ffffff;
--card-foreground: #ff1493;
--popover: #ffffff;
--popover-foreground: #ff1493;
/* Shadow color - automatically adapts to theme */
--shadow-color: color-mix(in oklab, var(--foreground) 20%, transparent);
}
.cyberpunk {
--theme-icon: 'HandMetal';
--theme-label: 'Cyberpunk';
--theme-is-dark: true;
--background: #120458;
--foreground: #00ff9f;
--text-color: #00ff9f;
--primary: #ff00ff;
--primary-foreground: #000000;
--secondary: #00ffff;
--secondary-foreground: #000000;
--accent: #fe75fe;
--accent-foreground: #000000;
--destructive: #dc2626;
--destructive-foreground: #ffffff;
--muted: #493c86;
--muted-foreground: #ffffff;
--border: #493c86;
--input: #493c86;
--ring: #fe75fe;
--card: #493c86;
--card-foreground: #ffffff;
--popover: #493c86;
--popover-foreground: #ffffff;
/* Shadow color - automatically adapts to theme */
--shadow-color: color-mix(in oklab, var(--foreground) 25%, transparent);
}
.dracula {
--theme-icon: 'Syringe';
--theme-label: 'Dracula';
--theme-is-dark: true;
/* 6 Core Colors - Theme Foundation */
--theme-primary: #bd93f9;
/* purple */
--theme-secondary: #6272a4;
/* blue grey */
--theme-accent: #ff79c6;
/* pink */
--theme-background: #282a36;
/* dark grey */
--theme-border: #44475a;
/* medium grey */
--theme-destructive: #ff5555;
/* red */
/* Tailwind Variables */
--background: #282a36;
--foreground: #f8f8f2;
--text-color: #f8f8f2;
--primary: #bd93f9;
--primary-foreground: #ffffff;
--secondary: #44475a;
--secondary-foreground: #f8f8f2;
--accent: #ff79c6;
--accent-foreground: #ffffff;
--destructive: #ff5555;
--destructive-foreground: #ffffff;
--muted: #44475a;
--muted-foreground: #6272a4;
--border: #6272a4;
--input: #44475a;
--ring: #bd93f9;
--card: #282a36;
--card-foreground: #f8f8f2;
--popover: #282a36;
--popover-foreground: #f8f8f2;
/* Shadow color - automatically adapts to theme */
--shadow-color: color-mix(in oklab, var(--foreground) 25%, transparent);
}
.forest {
--theme-icon: 'Sprout';
--theme-label: 'Forest';
--theme-is-dark: true;
/* 6 Core Colors - Theme Foundation */
--theme-primary: #d2b48c;
/* light brown */
--theme-secondary: #86efac;
/* light green */
--theme-accent: #654321;
/* dark brown */
--theme-background: #1e3a1e;
/* dark green */
--theme-border: #fbbf24;
/* sunny yellow */
--theme-destructive: #dc2626;
/* red */
/* Tailwind Variables */
--background: #1e3a1e;
--foreground: #d2b48c;
--text-color: #d2b48c;
--primary: #86efac;
--primary-foreground: #1e3a1e;
--secondary: #654321;
--secondary-foreground: #86efac;
--accent: #654321;
--accent-foreground: #86efac;
--destructive: #dc2626;
--destructive-foreground: #ffffff;
--muted: #654321;
--muted-foreground: #d2b48c;
--border: #fbbf24;
--input: #654321;
--ring: #86efac;
--card: #1e3a1e;
--card-foreground: #d2b48c;
--popover: #1e3a1e;
--popover-foreground: #d2b48c;
/* Shadow color - automatically adapts to theme */
--shadow-color: color-mix(in oklab, var(--foreground) 25%, transparent);
}
.gold {
--theme-icon: 'Gem';
--theme-label: 'Gold';
--theme-is-dark: true;
/* 6 Core Colors - Theme Foundation */
--theme-primary: #fbbf24;
/* bright gold */
--theme-secondary: #d97706;
/* amber */
--theme-accent: #f59e0b;
/* yellow gold */
--theme-background: #1c1917;
/* dark brown */
--theme-border: #44403c;
/* brown grey */
--theme-destructive: #dc2626;
/* red */
/* Tailwind Variables */
--background: #1c1917;
--foreground: #fef7cd;
--text-color: #fef7cd;
--primary: #fbbf24;
--primary-foreground: #000000;
--secondary: #292524;
--secondary-foreground: #fbbf24;
--accent: #f59e0b;
--accent-foreground: #000000;
--destructive: #dc2626;
--destructive-foreground: #ffffff;
--muted: #292524;
--muted-foreground: #d97706;
--border: #44403c;
--input: #292524;
--ring: #fbbf24;
--card: #1c1917;
--card-foreground: #fef7cd;
--popover: #1c1917;
--popover-foreground: #fef7cd;
/* Shadow color - automatically adapts to theme */
--shadow-color: color-mix(in oklab, var(--foreground) 25%, transparent);
}
.mocha {
--theme-icon: 'Coffee';
--theme-label: 'Mocha';
--theme-is-dark: true;
/* 6 Core Colors - Theme Foundation */
--theme-primary: #8b4513;
/* dark brown */
--theme-secondary: #a0522d;
/* saddle brown */
--theme-accent: #d2691e;
/* chocolate */
--theme-background: #967259;
/* coffee brown */
--theme-border: #ab8e7a;
/* light brown */
--theme-destructive: #dc2626;
/* red */
/* Tailwind Variables */
--background: #967259;
--foreground: #f5f5f5;
--text-color: #f5f5f5;
--primary: #8b4513;
--primary-foreground: #ffffff;
--secondary: #a0522d;
--secondary-foreground: #ffffff;
--accent: #d2691e;
--accent-foreground: #ffffff;
--destructive: #dc2626;
--destructive-foreground: #ffffff;
--muted: #ab8e7a;
--muted-foreground: #ffffff;
--border: #ab8e7a;
--input: #ab8e7a;
--ring: #d2691e;
--card: #ab8e7a;
--card-foreground: #ffffff;
--popover: #ab8e7a;
--popover-foreground: #ffffff;
/* Shadow color - automatically adapts to theme */
--shadow-color: color-mix(in oklab, var(--foreground) 25%, transparent);
}
.monochrome {
--theme-icon: 'CircleDot';
--theme-label: 'Monochrome';
--theme-is-dark: true;
--background: #000000;
--foreground: #ffffff;
--text-color: #ffffff;
--primary: #ffffff;
--primary-foreground: #000000;
--secondary: #1a1a1a;
--secondary-foreground: #ffffff;
--accent: #404040;
--accent-foreground: #ffffff;
--destructive: #ef4444;
--destructive-foreground: #ffffff;
--muted: #1a1a1a;
--muted-foreground: #a3a3a3;
--border: #262626;
--input: #1a1a1a;
--ring: #ffffff;
--card: #000000;
--card-foreground: #ffffff;
--popover: #000000;
--popover-foreground: #ffffff;
/* Shadow color - automatically adapts to theme */
--shadow-color: color-mix(in oklab, var(--foreground) 25%, transparent);
}
.ocean {
--theme-icon: 'Waves';
--theme-label: 'Ocean';
--theme-is-dark: true;
/* 6 Core Colors - Theme Foundation */
--theme-primary: #06b6d4;
/* cyan */
--theme-secondary: #94a3b8;
/* slate */
--theme-accent: #0891b2;
/* dark cyan */
--theme-background: #0f172a;
/* deep blue */
--theme-border: #334155;
/* blue grey */
--theme-destructive: #ef4444;
/* red */
/* Tailwind Variables */
--background: #0f172a;
--foreground: #e2e8f0;
--text-color: #e2e8f0;
--primary: #06b6d4;
--primary-foreground: #0f172a;
--secondary: #1e293b;
--secondary-foreground: #06b6d4;
--accent: #0891b2;
--accent-foreground: #ffffff;
--destructive: #ef4444;
--destructive-foreground: #ffffff;
--muted: #1e293b;
--muted-foreground: #94a3b8;
--border: #334155;
--input: #1e293b;
--ring: #06b6d4;
--card: #0f172a;
--card-foreground: #e2e8f0;
--popover: #0f172a;
--popover-foreground: #e2e8f0;
/* Shadow color - automatically adapts to theme */
--shadow-color: color-mix(in oklab, var(--foreground) 25%, transparent);
}
/* Override framework's default font to use Roboto */
:root {
--font-sans: 'Roboto', sans-serif;
--font-mono: 'Roboto Mono', monospace;
--font-family: var(--font-sans);
}
.focus-within\:group:focus-within:hover [data-marquee-track],.focus-within\:group:focus-within:focus-within [data-marquee-track] {
animation-play-state: paused;
}
@media not all and (min-width: 1024px) {
@media (max-width: 1023px) {
.max-lg\:is-collapsed.stack {
padding: 0;
overflow: hidden;
}
.max-lg\:is-collapsed.stack .stack-content,.max-lg\:is-collapsed
.stack .section-spacer {
display: none;
}
.max-lg\:is-collapsed.stack .section-number {
opacity: 1;
}
.max-lg\:is-collapsed.stack {
padding: 0;
overflow: hidden;
}
.max-lg\:is-collapsed.stack .stack-content,.max-lg\:is-collapsed
.stack .section-spacer {
display: none;
}
.max-lg\:is-collapsed.stack .section-number {
opacity: 1;
}
.max-lg\:is-collapsed.stack {
padding: 0;
overflow: hidden;
}
.max-lg\:is-collapsed.stack .stack-content,.max-lg\:is-collapsed
.stack .section-spacer {
display: none;
}
.max-lg\:is-collapsed.stack .section-number {
opacity: 1;
}
.max-lg\:is-collapsed.stack {
padding: 0;
overflow: hidden;
}
.max-lg\:is-collapsed.stack .stack-content,.max-lg\:is-collapsed
.stack .section-spacer {
display: none;
}
.max-lg\:is-collapsed.stack .section-number {
opacity: 1;
}
.max-lg\:is-collapsed.stack {
padding: 0;
overflow: hidden;
}
.max-lg\:is-collapsed.stack .stack-content,.max-lg\:is-collapsed
.stack .section-spacer {
display: none;
}
.max-lg\:is-collapsed.stack .section-number {
opacity: 1;
}
.max-lg\:is-collapsed.stack {
padding: 0;
overflow: hidden;
}
.max-lg\:is-collapsed.stack .stack-content,.max-lg\:is-collapsed
.stack .section-spacer {
display: none;
}
.max-lg\:is-collapsed.stack .section-number {
opacity: 1;
}
.max-lg\:is-collapsed.stack {
padding: 0;
overflow: hidden;
}
.max-lg\:is-collapsed.stack .stack-content,.max-lg\:is-collapsed
.stack .section-spacer {
display: none;
}
.max-lg\:is-collapsed.stack .section-number {
opacity: 1;
}
.max-lg\:is-collapsed.stack {
padding: 0;
overflow: hidden;
}
.max-lg\:is-collapsed.stack .stack-content,.max-lg\:is-collapsed
.stack .section-spacer {
display: none;
}
.max-lg\:is-collapsed.stack .section-number {
opacity: 1;
}
.max-lg\:is-collapsed.stack {
padding: 0;
overflow: hidden;
}
.max-lg\:is-collapsed.stack .stack-content,.max-lg\:is-collapsed
.stack .section-spacer {
display: none;
}
.max-lg\:is-collapsed.stack .section-number {
opacity: 1;
}
.max-lg\:is-collapsed.stack {
padding: 0;
overflow: hidden;
}
.max-lg\:is-collapsed.stack .stack-content,.max-lg\:is-collapsed
.stack .section-spacer {
display: none;
}
.max-lg\:is-collapsed.stack .section-number {
opacity: 1;
}
}
}
.file\:border-0::file-selector-button {
border-width: 0px;
}
.file\:bg-transparent::file-selector-button {
background-color: transparent;
}
.file\:text-sm::file-selector-button {
font-size: 0.875rem;
line-height: 1.25rem;
}
.file\:font-medium::file-selector-button {
font-weight: 500;
}
.placeholder\:text-muted-foreground::-moz-placeholder {
color: var(--muted-foreground);
}
.placeholder\:text-muted-foreground::placeholder {
color: var(--muted-foreground);
}
.hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-110:hover {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[0\.80\]:hover {
--tw-scale-x: 0.80;
--tw-scale-y: 0.80;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.01\]:hover {
--tw-scale-x: 1.01;
--tw-scale-y: 1.01;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.02\]:hover {
--tw-scale-x: 1.02;
--tw-scale-y: 1.02;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.03\]:hover {
--tw-scale-x: 1.03;
--tw-scale-y: 1.03;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-accent:hover {
border-color: var(--accent);
}
.hover\:border-white\/60:hover {
border-color: rgb(255 255 255 / 0.6);
}
.hover\:bg-\[rgb\(from_var\(--muted\)_r_g_b_\/_0\.5\)\]:hover {
background-color: rgb(from var(--muted) r g b / 0.5);
}
.hover\:bg-accent:hover {
background-color: var(--accent);
}
.hover\:bg-blue-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-50:hover {
--tw-bg-opacity: 1;
background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-500\/30:hover {
background-color: rgb(59 130 246 / 0.3);
}
.hover\:bg-blue-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-500\/30:hover {
background-color: rgb(107 114 128 / 0.3);
}
.hover\:bg-gray-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-50:hover {
--tw-bg-opacity: 1;
background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-500\/30:hover {
background-color: rgb(34 197 94 / 0.3);
}
.hover\:bg-muted:hover {
background-color: var(--muted);
}
.hover\:bg-purple-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(233 213 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-50:hover {
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-500\/30:hover {
background-color: rgb(239 68 68 / 0.3);
}
.hover\:bg-secondary:hover {
background-color: var(--secondary);
}
.hover\:bg-teal-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1));
}
.hover\:bg-transparent:hover {
background-color: transparent;
}
.hover\:bg-white\/30:hover {
background-color: rgb(255 255 255 / 0.3);
}
.hover\:bg-yellow-50:hover {
--tw-bg-opacity: 1;
background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.hover\:bg-yellow-500\/30:hover {
background-color: rgb(234 179 8 / 0.3);
}
.hover\:text-accent:hover {
color: var(--accent);
}
.hover\:text-accent-foreground:hover {
color: var(--accent-foreground);
}
.hover\:text-foreground:hover {
color: var(--foreground);
}
.hover\:text-gray-900:hover {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.hover\:text-muted-foreground:hover {
color: var(--muted-foreground);
}
.hover\:text-primary:hover {
color: var(--primary);
}
.hover\:underline:hover {
text-decoration-line: underline;
}
.hover\:opacity-100:hover {
opacity: 1;
}
.hover\:opacity-80:hover {
opacity: 0.8;
}
.hover\:opacity-90:hover {
opacity: 0.9;
}
.hover\:shadow:hover {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_0_20px_rgba\(0\2c 0\2c 0\2c 0\.1\)\]:hover {
--tw-shadow: 0 0 20px rgba(0,0,0,0.1);
--tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_0_30px_rgba\(0\2c 0\2c 0\2c 0\.15\)\]:hover {
--tw-shadow: 0 0 30px rgba(0,0,0,0.15);
--tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_0_40px_rgba\(0\2c 0\2c 0\2c 0\.2\)\]:hover {
--tw-shadow: 0 0 40px rgba(0,0,0,0.2);
--tw-shadow-colored: 0 0 40px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-lg:hover {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-md:hover {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-sm:hover {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:scale-100:focus {
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.focus\:border-accent:focus {
border-color: var(--accent);
}
.focus\:border-transparent:focus {
border-color: transparent;
}
.focus\:bg-accent:focus {
background-color: var(--accent);
}
.focus\:text-accent-foreground:focus {
color: var(--accent-foreground);
}
.focus\:text-foreground:focus {
color: var(--foreground);
}
.focus\:text-primary:focus {
color: var(--primary);
}
.focus\:underline:focus {
text-decoration-line: underline;
}
.focus\:shadow:focus {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-1:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-blue-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.focus\:ring-primary:focus {
--tw-ring-color: var(--primary);
}
.focus\:ring-ring:focus {
--tw-ring-color: var(--ring);
}
.focus\:ring-white\/50:focus {
--tw-ring-color: rgb(255 255 255 / 0.5);
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;
}
.focus-visible\:outline-none:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus-visible\:ring-2:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-accent:focus-visible {
--tw-ring-color: var(--accent);
}
.focus-visible\:ring-ring:focus-visible {
--tw-ring-color: var(--ring);
}
.focus-visible\:ring-offset-2:focus-visible {
--tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-background:focus-visible {
--tw-ring-offset-color: var(--background);
}
.active\:scale-95:active {
--tw-scale-x: .95;
--tw-scale-y: .95;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.98\]:active {
--tw-scale-x: 0.98;
--tw-scale-y: 0.98;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.disabled\:pointer-events-none:disabled {
pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
opacity: 0.5;
}
.group:hover .group-hover\:translate-x-1 {
--tw-translate-x: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:opacity-100 {
opacity: 1;
}
.group.info .group-\[\.info\]\:border-blue-200 {
--tw-border-opacity: 1;
border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.group.success .group-\[\.success\]\:border-green-200 {
--tw-border-opacity: 1;
border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.group.warning .group-\[\.warning\]\:border-yellow-200 {
--tw-border-opacity: 1;
border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}
.group.destructive .group-\[\.destructive\]\:text-red-300 {
--tw-text-opacity: 1;
color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.group.info .group-\[\.info\]\:text-blue-600 {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.group.success .group-\[\.success\]\:text-green-600 {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.group.warning .group-\[\.warning\]\:text-yellow-600 {
--tw-text-opacity: 1;
color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover {
background-color: var(--destructive);
}
.group.info .group-\[\.info\]\:hover\:bg-blue-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.group.success .group-\[\.success\]\:hover\:bg-green-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.group.warning .group-\[\.warning\]\:hover\:bg-yellow-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover {
color: var(--destructive-foreground);
}
.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
--tw-text-opacity: 1;
color: rgb(254 242 242 / var(--tw-text-opacity, 1));
}
.group.info .group-\[\.info\]\:hover\:text-blue-800:hover {
--tw-text-opacity: 1;
color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.group.info .group-\[\.info\]\:hover\:text-blue-900:hover {
--tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.group.success .group-\[\.success\]\:hover\:text-green-800:hover {
--tw-text-opacity: 1;
color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.group.success .group-\[\.success\]\:hover\:text-green-900:hover {
--tw-text-opacity: 1;
color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}
.group.warning .group-\[\.warning\]\:hover\:text-yellow-800:hover {
--tw-text-opacity: 1;
color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.group.warning .group-\[\.warning\]\:hover\:text-yellow-900:hover {
--tw-text-opacity: 1;
color: rgb(113 63 18 / var(--tw-text-opacity, 1));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
--tw-ring-color: var(--destructive);
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
--tw-ring-offset-color: #dc2626;
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-70 {
opacity: 0.7;
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
pointer-events: none;
}
.data-\[state\=inactive\]\:hidden[data-state="inactive"] {
display: none;
}
.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
--tw-translate-y: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
--tw-translate-x: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=right\]\:translate-x-1[data-side="right"] {
--tw-translate-x: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
--tw-translate-y: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=checked\]\:translate-x-5[data-state="checked"] {
--tw-translate-x: 1.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
--tw-translate-x: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
--tw-translate-x: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
--tw-translate-x: var(--radix-toast-swipe-end-x);
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
--tw-translate-x: var(--radix-toast-swipe-move-x);
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes accordion-up {
from {
height: var(--radix-accordion-content-height);
}
to {
height: 0;
}
}
.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
animation: accordion-up 0.2s ease-out;
}
@keyframes accordion-down {
from {
height: 0;
}
to {
height: var(--radix-accordion-content-height);
}
}
.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
animation: accordion-down 0.2s ease-out;
}
.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
background-color: var(--accent);
}
.data-\[state\=active\]\:bg-background[data-state="active"] {
background-color: var(--background);
}
.data-\[state\=active\]\:bg-primary[data-state="active"] {
background-color: var(--primary);
}
.data-\[state\=checked\]\:bg-accent[data-state="checked"] {
background-color: var(--accent);
}
.data-\[state\=checked\]\:bg-destructive[data-state="checked"] {
background-color: var(--destructive);
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
background-color: var(--primary);
}
.data-\[state\=on\]\:bg-accent[data-state="on"] {
background-color: var(--accent);
}
.data-\[state\=open\]\:bg-accent[data-state="open"] {
background-color: var(--accent);
}
.data-\[state\=open\]\:bg-secondary[data-state="open"] {
background-color: var(--secondary);
}
.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
background-color: var(--muted);
}
.data-\[state\=unchecked\]\:bg-secondary[data-state="unchecked"] {
background-color: var(--secondary);
}
.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
color: var(--accent-foreground);
}
.data-\[state\=active\]\:text-foreground[data-state="active"] {
color: var(--foreground);
}
.data-\[state\=active\]\:text-primary-foreground[data-state="active"] {
color: var(--primary-foreground);
}
.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
color: var(--primary-foreground);
}
.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
color: var(--accent-foreground);
}
.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
color: var(--accent-foreground);
}
.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
color: var(--muted-foreground);
}
.data-\[disabled\]\:opacity-\[var\(--opacity-disabled\)\][data-disabled] {
opacity: var(--opacity-disabled);
}
.data-\[state\=active\]\:shadow-sm[data-state="active"] {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
transition-property: none;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
transition-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
transition-duration: 500ms;
}
.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
animation-name: enter;
animation-duration: 150ms;
--tw-enter-opacity: initial;
--tw-enter-scale: initial;
--tw-enter-rotate: initial;
--tw-enter-translate-x: initial;
--tw-enter-translate-y: initial;
}
.data-\[state\=open\]\:animate-in[data-state="open"] {
animation-name: enter;
animation-duration: 150ms;
--tw-enter-opacity: initial;
--tw-enter-scale: initial;
--tw-enter-rotate: initial;
--tw-enter-translate-x: initial;
--tw-enter-translate-y: initial;
}
.data-\[state\=visible\]\:animate-in[data-state="visible"] {
animation-name: enter;
animation-duration: 150ms;
--tw-enter-opacity: initial;
--tw-enter-scale: initial;
--tw-enter-rotate: initial;
--tw-enter-translate-x: initial;
--tw-enter-translate-y: initial;
}
.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
animation-name: exit;
animation-duration: 150ms;
--tw-exit-opacity: initial;
--tw-exit-scale: initial;
--tw-exit-rotate: initial;
--tw-exit-translate-x: initial;
--tw-exit-translate-y: initial;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
animation-name: exit;
animation-duration: 150ms;
--tw-exit-opacity: initial;
--tw-exit-scale: initial;
--tw-exit-rotate: initial;
--tw-exit-translate-x: initial;
--tw-exit-translate-y: initial;
}
.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
animation-name: exit;
animation-duration: 150ms;
--tw-exit-opacity: initial;
--tw-exit-scale: initial;
--tw-exit-rotate: initial;
--tw-exit-translate-x: initial;
--tw-exit-translate-y: initial;
}
.data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
animation-name: exit;
animation-duration: 150ms;
--tw-exit-opacity: initial;
--tw-exit-scale: initial;
--tw-exit-rotate: initial;
--tw-exit-translate-x: initial;
--tw-exit-translate-y: initial;
}
.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
--tw-enter-opacity: 0;
}
.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
--tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
--tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-80[data-state="closed"] {
--tw-exit-opacity: 0.8;
}
.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
--tw-exit-opacity: 0;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
--tw-enter-opacity: 0;
}
.data-\[state\=visible\]\:fade-in[data-state="visible"] {
--tw-enter-opacity: 0;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
--tw-exit-scale: .95;
}
.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
--tw-enter-scale: .9;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
--tw-enter-scale: .95;
}
.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
--tw-enter-translate-x: 13rem;
}
.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
--tw-enter-translate-x: -13rem;
}
.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
--tw-exit-translate-x: 13rem;
}
.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
--tw-exit-translate-x: -13rem;
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
--tw-enter-translate-y: -0.5rem;
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
--tw-enter-translate-x: 0.5rem;
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
--tw-enter-translate-x: -0.5rem;
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
--tw-enter-translate-y: 0.5rem;
}
.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
--tw-exit-translate-y: 100%;
}
.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
--tw-exit-translate-x: -100%;
}
.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
--tw-exit-translate-x: -50%;
}
.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
--tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"] {
--tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
--tw-exit-translate-y: -100%;
}
.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
--tw-exit-translate-y: -48%;
}
.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
--tw-enter-translate-y: 100%;
}
.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
--tw-enter-translate-x: -100%;
}
.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
--tw-enter-translate-x: -50%;
}
.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
--tw-enter-translate-x: 100%;
}
.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
--tw-enter-translate-y: -100%;
}
.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
--tw-enter-translate-y: -48%;
}
.data-\[state\=open\]\:slide-in-from-top-full[data-state="open"] {
--tw-enter-translate-y: -100%;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
animation-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
animation-duration: 500ms;
transition-duration: 500ms;
}
.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.dark\:border-blue-800:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
}
.dark\:border-green-800:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));
}
.dark\:border-yellow-800:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(133 77 14 / var(--tw-border-opacity, 1));
}
.dark\:bg-blue-950:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(23 37 84 / var(--tw-bg-opacity, 1));
}
.dark\:bg-green-950:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(5 46 22 / var(--tw-bg-opacity, 1));
}
.dark\:bg-red-950\/20:is(.dark *) {
background-color: rgb(69 10 10 / 0.2);
}
.dark\:bg-yellow-950:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(66 32 6 / var(--tw-bg-opacity, 1));
}
.dark\:text-blue-100:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.dark\:text-green-100:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(220 252 231 / var(--tw-text-opacity, 1));
}
.dark\:text-red-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.dark\:text-red-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.dark\:text-yellow-100:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(254 249 195 / var(--tw-text-opacity, 1));
}
@media not all and (min-width: 1024px) {
.max-lg\:hidden {
display: none;
}
}
@media (min-width: 640px) {
.sm\:bottom-4 {
bottom: 1rem;
}
.sm\:right-4 {
right: 1rem;
}
.sm\:top-auto {
top: auto;
}
.sm\:mt-0 {
margin-top: 0px;
}
.sm\:block {
display: block;
}
.sm\:inline {
display: inline;
}
.sm\:h-6 {
height: 1.5rem;
}
.sm\:h-8 {
height: 2rem;
}
.sm\:min-h-\[4rem\] {
min-height: 4rem;
}
.sm\:w-6 {
width: 1.5rem;
}
.sm\:w-8 {
width: 2rem;
}
.sm\:w-\[400px\] {
width: 400px;
}
.sm\:max-w-sm {
max-width: 24rem;
}
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sm\:grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.sm\:flex-row {
flex-direction: row;
}
.sm\:flex-col {
flex-direction: column;
}
.sm\:justify-end {
justify-content: flex-end;
}
.sm\:justify-between {
justify-content: space-between;
}
.sm\:gap-6 {
gap: 1.5rem;
}
.sm\:gap-8 {
gap: 2rem;
}
.sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.sm\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.sm\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.sm\:p-6 {
padding: 1.5rem;
}
.sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.sm\:pt-6 {
padding-top: 1.5rem;
}
.sm\:text-left {
text-align: left;
}
.sm\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.sm\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.sm\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.sm\:text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.sm\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.sm\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"] {
--tw-enter-translate-y: 100%;
}
}
@media (min-width: 768px) {
.md\:pointer-events-none {
pointer-events: none;
}
.md\:absolute {
position: absolute;
}
.md\:left-0 {
left: 0px;
}
.md\:right-0 {
right: 0px;
}
.md\:top-0 {
top: 0px;
}
.md\:order-1 {
order: 1;
}
.md\:order-2 {
order: 2;
}
.md\:order-3 {
order: 3;
}
.md\:mb-0 {
margin-bottom: 0px;
}
.md\:block {
display: block;
}
.md\:inline {
display: inline;
}
.md\:flex {
display: flex;
}
.md\:hidden {
display: none;
}
.md\:h-8 {
height: 2rem;
}
.md\:h-full {
height: 100%;
}
.md\:min-h-\[40px\] {
min-height: 40px;
}
.md\:w-\[400px\] {
width: 400px;
}
.md\:w-\[500px\] {
width: 500px;
}
.md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
width: var(--radix-navigation-menu-viewport-width);
}
.md\:w-auto {
width: auto;
}
.md\:w-px {
width: 1px;
}
.md\:max-w-\[420px\] {
max-width: 420px;
}
.md\:translate-x-0 {
--tw-translate-x: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.md\:translate-y-12 {
--tw-translate-y: 3rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.md\:translate-y-24 {
--tw-translate-y: 6rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.md\:transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.md\:flex-row {
flex-direction: row;
}
.md\:items-center {
align-items: center;
}
.md\:justify-end {
justify-content: flex-end;
}
.md\:gap-12 {
gap: 3rem;
}
.md\:p-6 {
padding: 1.5rem;
}
.md\:p-8 {
padding: 2rem;
}
.md\:py-0 {
padding-top: 0px;
padding-bottom: 0px;
}
.md\:text-left {
text-align: left;
}
.md\:text-right {
text-align: right;
}
.md\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.md\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.md\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.md\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.md\:text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.md\:text-7xl {
font-size: 4.5rem;
line-height: 1;
}
.md\:text-8xl {
font-size: 6rem;
line-height: 1;
}
.md\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.md\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.md\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
}
@media (min-width: 1024px) {
.lg\:col-span-1 {
grid-column: span 1 / span 1;
}
.lg\:col-span-2 {
grid-column: span 2 / span 2;
}
.lg\:col-span-3 {
grid-column: span 3 / span 3;
}
.lg\:mt-0 {
margin-top: 0px;
}
.lg\:block {
display: block;
}
.lg\:hidden {
display: none;
}
.lg\:min-h-\[5rem\] {
min-height: 5rem;
}
.lg\:w-1\/2 {
width: 50%;
}
.lg\:w-\[500px\] {
width: 500px;
}
.lg\:w-\[600px\] {
width: 600px;
}
.lg\:grid-cols-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lg\:grid-cols-\[\.75fr_1fr\] {
grid-template-columns: .75fr 1fr;
}
.lg\:flex-row {
flex-direction: row;
}
.lg\:gap-16 {
gap: 4rem;
}
.lg\:gap-8 {
gap: 2rem;
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.lg\:pt-8 {
padding-top: 2rem;
}
.lg\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.lg\:text-5xl {
font-size: 3rem;
line-height: 1;
}
}
@media (min-width: 1280px) {
.xl\:grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.xl\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.xl\:text-5xl {
font-size: 3rem;
line-height: 1;
}
}
@media (min-width: 1536px) {
.\32xl\:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.\32xl\:grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
.\[\&\+div\]\:text-xs+div {
font-size: 0.75rem;
line-height: 1rem;
}
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
padding-right: 0px;
}
.\[\&\>svg\]\:block>svg {
display: block;
}
.\[\&\>svg\]\:hidden>svg {
display: none;
}
.\[\&\>svg\~\*\]\:pl-7>svg~* {
padding-left: 1.75rem;
}
.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
border-bottom-width: 0px;
}
.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
font-size: 0.75rem;
line-height: 1rem;
}
.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
font-weight: 500;
}
.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
color: var(--muted-foreground);
}
.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
padding-top: 0px;
}
.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
height: 1.25rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
width: 1.25rem;
}
.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
height: 3rem;
}
.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
height: 1.25rem;
}
.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
width: 1.25rem;
}
.\[\&_p\]\:leading-relaxed p {
line-height: 1.625;
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child {
border-width: 0px;
}
.\[\&_tr\]\:border-b tr {
border-bottom-width: 1px;
}