1008 lines
26 KiB
CSS
1008 lines
26 KiB
CSS
/* Google Fonts - Cairo (Arabic) and Montserrat (English) */
|
|
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&family=Montserrat:wght@300;400;600;700&display=swap');
|
|
|
|
@import 'tailwindcss';
|
|
@import '../../vendor/livewire/flux/dist/flux.css';
|
|
|
|
@source '../views';
|
|
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
|
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
|
|
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';
|
|
|
|
@theme {
|
|
/* Font definitions - to be updated in typography story */
|
|
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
--font-arabic: 'Cairo', 'Tajawal', ui-sans-serif, system-ui, sans-serif;
|
|
--font-english: 'Montserrat', 'Lato', ui-sans-serif, system-ui, sans-serif;
|
|
|
|
/* Font Size Scale */
|
|
--font-size-xs: 0.75rem; /* 12px */
|
|
--font-size-sm: 0.875rem; /* 14px - Small text */
|
|
--font-size-base: 1rem; /* 16px - Body text */
|
|
--font-size-lg: 1.125rem; /* 18px */
|
|
--font-size-xl: 1.25rem; /* 20px */
|
|
--font-size-2xl: 1.5rem; /* 24px - H3 */
|
|
--font-size-3xl: 2rem; /* 32px - H2 */
|
|
--font-size-4xl: 2.5rem; /* 40px - H1 */
|
|
|
|
/* ==========================================================================
|
|
LIBRA Brand Palette - Dark Charcoal & Warm Gold (Story 12.2)
|
|
========================================================================== */
|
|
|
|
/* Primary Dark Forest Green Palette */
|
|
--color-primary: #2D3624; /* Dark Forest Green - Header/Footer backgrounds */
|
|
--color-primary-light: #3D4634; /* Lighter Forest Green - Primary hover state */
|
|
|
|
/* CTA Warm Gold */
|
|
--color-cta: #A68966; /* Warm Gold - CTA buttons, links, accents */
|
|
--color-cta-hover: #8A7555; /* Darker Gold - Button hover state */
|
|
--color-cta-light: #C4A882; /* Light Gold - Light CTA accent */
|
|
|
|
/* Active Olive Green */
|
|
--color-active: #4A5D23; /* Olive Green - Active states, language toggle */
|
|
--color-active-hover: #5A7030; /* Olive Hover - Active state hover */
|
|
|
|
/* Neutrals */
|
|
--color-background: #F4F1EA; /* Warm Cream - Main page background */
|
|
--color-text: #2D322A; /* Forest Green - Headings, body text */
|
|
--color-card: #FFFFFF; /* Pure White - Card backgrounds */
|
|
|
|
/* For text on dark backgrounds */
|
|
--color-off-white: #F4F1EA; /* Warm Cream */
|
|
|
|
/* Semantic Aliases - used by components */
|
|
--color-accent: var(--color-cta); /* Maps to Warm Gold */
|
|
--color-accent-content: var(--color-cta); /* Maps to Warm Gold */
|
|
--color-accent-foreground: var(--color-text); /* Forest Green - text on accent backgrounds */
|
|
--color-body: var(--color-text); /* Maps to Forest Green for body text */
|
|
|
|
/* Backward Compatibility Aliases (legacy class names) */
|
|
--color-navy: var(--color-primary); /* Maps to Dark Charcoal */
|
|
--color-gold: var(--color-cta); /* Maps to Warm Gold */
|
|
--color-gold-light: var(--color-cta-light); /* Maps to Light Gold */
|
|
--color-cream: var(--color-background); /* Maps to Warm Cream */
|
|
--color-charcoal: var(--color-primary); /* Maps to Dark Charcoal */
|
|
--color-warm-gray: var(--color-cta); /* Maps to Warm Gold */
|
|
|
|
/* Status Colors - unchanged per AC6 */
|
|
--color-success: #27AE60;
|
|
--color-danger: #E74C3C;
|
|
--color-warning: #F39C12;
|
|
}
|
|
|
|
@layer base {
|
|
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--color-gray-200, currentColor);
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Flux UI Light Mode Overrides
|
|
Ensure proper text visibility after dark mode removal
|
|
========================================================================== */
|
|
|
|
/* Flux Headings - ensure dark text */
|
|
[data-flux-heading] {
|
|
color: rgb(24 24 27) !important;
|
|
}
|
|
|
|
/* Flux Text/Subheading - ensure readable gray */
|
|
[data-flux-text],
|
|
[data-flux-subheading] {
|
|
color: rgb(113 113 122) !important;
|
|
}
|
|
|
|
/* Navlist group headings */
|
|
[data-flux-navlist-group] > div:first-child {
|
|
color: rgb(113 113 122) !important;
|
|
}
|
|
|
|
/* Navlist items */
|
|
[data-flux-navlist-item] {
|
|
color: rgb(63 63 70) !important;
|
|
}
|
|
|
|
[data-flux-navlist-item]:hover {
|
|
color: rgb(24 24 27) !important;
|
|
background-color: rgb(244 244 245) !important;
|
|
}
|
|
|
|
[data-flux-navlist-item][data-current="true"],
|
|
[data-flux-navlist-item][aria-current="page"] {
|
|
color: rgb(24 24 27) !important;
|
|
background-color: rgb(244 244 245) !important;
|
|
}
|
|
|
|
/* Flux Menu items */
|
|
[data-flux-menu-item] {
|
|
color: rgb(63 63 70) !important;
|
|
}
|
|
|
|
[data-flux-menu-item]:hover {
|
|
color: rgb(24 24 27) !important;
|
|
background-color: rgb(244 244 245) !important;
|
|
}
|
|
|
|
/* Flux Modal content */
|
|
[data-flux-modal] > dialog {
|
|
background-color: rgb(255 255 255) !important;
|
|
color: rgb(24 24 27) !important;
|
|
}
|
|
|
|
/* Flux Dropdown/Select */
|
|
[data-flux-menu],
|
|
[data-flux-listbox] {
|
|
background-color: rgb(255 255 255) !important;
|
|
border-color: rgb(228 228 231) !important;
|
|
}
|
|
|
|
/* Flux Profile text */
|
|
[data-flux-profile] span {
|
|
color: rgb(63 63 70) !important;
|
|
}
|
|
|
|
/* Flux Badge - ensure text is visible */
|
|
[data-flux-badge] {
|
|
color: rgb(255 255 255) !important;
|
|
}
|
|
|
|
/* Flux Badge variants with proper contrast */
|
|
[data-flux-badge][data-variant="outline"] {
|
|
color: rgb(63 63 70) !important;
|
|
}
|
|
|
|
/* Flux Callout text */
|
|
[data-flux-callout],
|
|
[data-flux-callout] * {
|
|
color: rgb(63 63 70) !important;
|
|
}
|
|
|
|
[data-flux-callout-heading] {
|
|
color: rgb(24 24 27) !important;
|
|
}
|
|
|
|
/* Flux Table cells */
|
|
[data-flux-table] td,
|
|
[data-flux-table] th {
|
|
color: rgb(63 63 70) !important;
|
|
}
|
|
|
|
[data-flux-table] th {
|
|
color: rgb(24 24 27) !important;
|
|
}
|
|
|
|
/* Flux Card content */
|
|
[data-flux-card] {
|
|
background-color: rgb(255 255 255) !important;
|
|
color: rgb(63 63 70) !important;
|
|
}
|
|
|
|
/* Flux Separator */
|
|
[data-flux-separator] {
|
|
background-color: rgb(228 228 231) !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Logo Badge Styling (Story 12.2)
|
|
Creates "seal/stamp" effect for logo on Dark Charcoal backgrounds
|
|
========================================================================== */
|
|
|
|
.logo-badge {
|
|
border: 2px solid var(--color-text);
|
|
box-shadow: 4px 4px 6px rgba(45, 54, 36, 0.5);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Flux UI Form Component Styling (Story 9.5)
|
|
========================================================================== */
|
|
|
|
/* Field wrapper - grid layout with gap */
|
|
[data-flux-field]:not(ui-radio, ui-checkbox) {
|
|
@apply grid gap-2;
|
|
}
|
|
|
|
/* Label styling - semibold weight per specs */
|
|
[data-flux-label] {
|
|
@apply !mb-0 !leading-tight font-semibold text-body;
|
|
}
|
|
|
|
/* Input, Textarea, Select base styling */
|
|
input[data-flux-control],
|
|
textarea[data-flux-control],
|
|
[data-flux-control] input,
|
|
select[data-flux-control],
|
|
[data-flux-select-button] {
|
|
@apply border-body/30 rounded-md transition-colors text-body;
|
|
}
|
|
|
|
/* Focus states - Warm Gold border with subtle ring (AC4) */
|
|
input:focus[data-flux-control],
|
|
textarea:focus[data-flux-control],
|
|
select:focus[data-flux-control],
|
|
[data-flux-control] input:focus,
|
|
[data-flux-select-button]:focus {
|
|
@apply outline-hidden border-cta ring-2 ring-cta/20;
|
|
}
|
|
|
|
/* Textarea minimum height */
|
|
textarea[data-flux-control] {
|
|
@apply min-h-[120px] resize-y;
|
|
}
|
|
|
|
/* Checkbox styling - Warm Gold accent when checked (AC4) */
|
|
[data-flux-checkbox] input[type="checkbox"],
|
|
input[type="checkbox"][data-flux-control] {
|
|
@apply w-5 h-5 rounded border-body/30 text-cta focus:ring-cta focus:ring-offset-0;
|
|
}
|
|
|
|
/* Radio styling - Warm Gold accent when selected (AC4) */
|
|
[data-flux-radio] input[type="radio"],
|
|
input[type="radio"][data-flux-control] {
|
|
@apply w-5 h-5 border-body/30 text-cta focus:ring-cta focus:ring-offset-0;
|
|
}
|
|
|
|
/* Error state styling for Flux fields */
|
|
[data-flux-field]:has([data-flux-error]) input[data-flux-control],
|
|
[data-flux-field]:has([data-flux-error]) textarea[data-flux-control],
|
|
[data-flux-field]:has([data-flux-error]) select[data-flux-control],
|
|
[data-flux-field]:has([data-flux-error]) [data-flux-select-button] {
|
|
@apply border-danger;
|
|
}
|
|
|
|
[data-flux-field]:has([data-flux-error]) input:focus[data-flux-control],
|
|
[data-flux-field]:has([data-flux-error]) textarea:focus[data-flux-control],
|
|
[data-flux-field]:has([data-flux-error]) select:focus[data-flux-control],
|
|
[data-flux-field]:has([data-flux-error]) [data-flux-select-button]:focus {
|
|
@apply border-danger ring-danger/20;
|
|
}
|
|
|
|
/* Error message styling */
|
|
[data-flux-error] {
|
|
@apply text-sm text-danger mt-1;
|
|
}
|
|
|
|
/* RTL support for Flux components */
|
|
[dir="rtl"] [data-flux-label] {
|
|
@apply text-right;
|
|
}
|
|
|
|
[dir="rtl"] [data-flux-error] {
|
|
@apply text-right;
|
|
}
|
|
|
|
[dir="rtl"] input[data-flux-control],
|
|
[dir="rtl"] textarea[data-flux-control],
|
|
[dir="rtl"] select[data-flux-control] {
|
|
@apply text-right;
|
|
}
|
|
|
|
/* \[:where(&)\]:size-4 {
|
|
@apply size-4;
|
|
} */
|
|
|
|
/* Prose Brand styling for blog posts - Dark Charcoal & Warm Gold (AC5, AC8) */
|
|
.prose-brand {
|
|
--tw-prose-headings: var(--color-text); /* Forest Green */
|
|
--tw-prose-links: var(--color-cta); /* Warm Gold */
|
|
--tw-prose-bold: var(--color-text); /* Forest Green */
|
|
--tw-prose-body: var(--color-text); /* Forest Green */
|
|
}
|
|
|
|
.prose-brand a {
|
|
color: var(--color-cta); /* Warm Gold (AC5) */
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.prose-brand a:hover {
|
|
color: var(--color-cta-hover); /* Darker Gold (AC5) */
|
|
}
|
|
|
|
/* Backward compatibility alias for prose-navy */
|
|
.prose-navy {
|
|
--tw-prose-headings: var(--color-text);
|
|
--tw-prose-links: var(--color-cta);
|
|
--tw-prose-bold: var(--color-text);
|
|
--tw-prose-body: var(--color-text);
|
|
}
|
|
|
|
.prose-navy a {
|
|
color: var(--color-cta);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.prose-navy a:hover {
|
|
color: var(--color-cta-hover);
|
|
}
|
|
|
|
/* Dynamic Font Selection based on language */
|
|
html[lang="ar"] body {
|
|
font-family: var(--font-arabic);
|
|
}
|
|
|
|
html[lang="en"] body {
|
|
font-family: var(--font-english);
|
|
}
|
|
|
|
/* Typography Base Styles */
|
|
body {
|
|
font-size: var(--font-size-base);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
line-height: 1.3;
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--font-size-4xl);
|
|
font-weight: 700;
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--font-size-3xl);
|
|
font-weight: 600;
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--font-size-2xl);
|
|
font-weight: 600;
|
|
}
|
|
|
|
small, .text-sm {
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Button Styling System (Story 9.4)
|
|
========================================================================== */
|
|
|
|
/* Primary button - Warm Gold background with White text (AC3) */
|
|
.btn-primary {
|
|
@apply bg-cta text-white rounded-md px-6 py-3 font-semibold transition-colors;
|
|
@apply hover:bg-cta-hover;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-cta focus:ring-offset-2;
|
|
}
|
|
|
|
/* Secondary button - Dark Charcoal border, Dark text (AC3) */
|
|
.btn-secondary {
|
|
@apply bg-transparent border-2 border-primary text-text rounded-md px-6 py-3 font-semibold transition-colors;
|
|
@apply hover:bg-primary hover:text-off-white;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-cta focus:ring-offset-2;
|
|
}
|
|
|
|
/* Danger button - Red background */
|
|
.btn-danger {
|
|
@apply bg-danger text-white rounded-md px-6 py-3 font-semibold transition-colors;
|
|
@apply hover:bg-danger/90;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-danger focus:ring-offset-2;
|
|
}
|
|
|
|
/* Disabled state - applies to all button variants */
|
|
.btn-disabled,
|
|
.btn-primary:disabled,
|
|
.btn-secondary:disabled,
|
|
.btn-danger:disabled,
|
|
button.btn-primary:disabled,
|
|
button.btn-secondary:disabled,
|
|
button.btn-danger:disabled {
|
|
@apply !bg-[#CCCCCC] !text-[#666666] !cursor-not-allowed !border-transparent;
|
|
@apply hover:!bg-[#CCCCCC];
|
|
}
|
|
|
|
/* Size variants */
|
|
.btn-sm {
|
|
@apply px-4 py-2 text-sm;
|
|
}
|
|
|
|
.btn-lg {
|
|
@apply px-8 py-4 text-lg;
|
|
}
|
|
|
|
/* Full width for mobile */
|
|
.btn-full {
|
|
@apply w-full;
|
|
}
|
|
|
|
/* Loading state */
|
|
.btn-loading {
|
|
@apply relative pointer-events-none opacity-75;
|
|
}
|
|
|
|
/* Icon spacing within buttons */
|
|
.btn-icon-left {
|
|
@apply flex items-center gap-2;
|
|
}
|
|
|
|
.btn-icon-right {
|
|
@apply flex items-center gap-2 flex-row-reverse;
|
|
}
|
|
|
|
/* Button groups - adjust border-radius for grouped buttons */
|
|
.btn-group {
|
|
@apply flex;
|
|
}
|
|
|
|
.btn-group > .btn-primary:not(:first-child):not(:last-child),
|
|
.btn-group > .btn-secondary:not(:first-child):not(:last-child),
|
|
.btn-group > .btn-danger:not(:first-child):not(:last-child) {
|
|
@apply rounded-none;
|
|
}
|
|
|
|
.btn-group > .btn-primary:first-child,
|
|
.btn-group > .btn-secondary:first-child,
|
|
.btn-group > .btn-danger:first-child {
|
|
@apply rounded-e-none;
|
|
}
|
|
|
|
.btn-group > .btn-primary:last-child,
|
|
.btn-group > .btn-secondary:last-child,
|
|
.btn-group > .btn-danger:last-child {
|
|
@apply rounded-s-none;
|
|
}
|
|
|
|
/* RTL support for icon buttons */
|
|
[dir="rtl"] .btn-icon-left {
|
|
@apply flex-row-reverse;
|
|
}
|
|
|
|
[dir="rtl"] .btn-icon-right {
|
|
@apply flex-row;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Form Styling System (Story 9.5)
|
|
========================================================================== */
|
|
|
|
/* Input field styling - Warm Gold focus (AC4) */
|
|
.input-field {
|
|
@apply w-full border border-body/30 rounded-md px-4 py-3
|
|
focus:border-cta focus:ring-2 focus:ring-cta/20
|
|
transition-colors outline-none bg-white;
|
|
}
|
|
|
|
/* Input error state */
|
|
.input-error {
|
|
@apply border-danger focus:border-danger focus:ring-danger/20;
|
|
}
|
|
|
|
/* Form label styling */
|
|
.form-label {
|
|
@apply block text-sm font-semibold text-body mb-2;
|
|
}
|
|
|
|
/* Required field indicator - for manual class usage */
|
|
.form-label-required::after {
|
|
content: ' *';
|
|
@apply text-danger;
|
|
}
|
|
|
|
/* Required indicator styling for Flux labels with .required class */
|
|
[data-flux-label].required::after {
|
|
content: ' *';
|
|
@apply text-danger;
|
|
}
|
|
|
|
/* Error message styling */
|
|
.error-message {
|
|
@apply text-sm text-danger mt-1;
|
|
}
|
|
|
|
/* Textarea specific styling - Warm Gold focus (AC4) */
|
|
.textarea-field {
|
|
@apply w-full border border-body/30 rounded-md px-4 py-3
|
|
focus:border-cta focus:ring-2 focus:ring-cta/20
|
|
transition-colors outline-none bg-white
|
|
min-h-[120px] resize-y;
|
|
}
|
|
|
|
/* Select dropdown styling - Warm Gold focus (AC4) */
|
|
.select-field {
|
|
@apply w-full border border-body/30 rounded-md px-4 py-3
|
|
focus:border-cta focus:ring-2 focus:ring-cta/20
|
|
transition-colors outline-none bg-white;
|
|
}
|
|
|
|
/* Custom checkbox styling - Warm Gold (AC4) */
|
|
.checkbox-custom {
|
|
@apply w-5 h-5 rounded border-body/30 text-cta
|
|
focus:ring-cta focus:ring-offset-0;
|
|
}
|
|
|
|
/* Custom radio styling - Warm Gold (AC4) */
|
|
.radio-custom {
|
|
@apply w-5 h-5 border-body/30 text-cta
|
|
focus:ring-cta focus:ring-offset-0;
|
|
}
|
|
|
|
/* Checkbox/Radio with error state */
|
|
.checkbox-error,
|
|
.radio-error {
|
|
@apply border-danger;
|
|
}
|
|
|
|
/* RTL support for form labels */
|
|
[dir="rtl"] .form-label {
|
|
@apply text-right;
|
|
}
|
|
|
|
/* RTL support for error messages */
|
|
[dir="rtl"] .error-message {
|
|
@apply text-right;
|
|
}
|
|
|
|
/* RTL support for form fields - use logical properties */
|
|
[dir="rtl"] .input-field,
|
|
[dir="rtl"] .textarea-field,
|
|
[dir="rtl"] .select-field {
|
|
@apply text-right;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Card & Container Styling System (Story 9.6)
|
|
========================================================================== */
|
|
|
|
/* Container max-width - 1200px centered */
|
|
.container-max {
|
|
@apply max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
/* Card shadow values */
|
|
.shadow-card {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.shadow-card-hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
RTL/LTR Layout Utilities (Story 9.8)
|
|
========================================================================== */
|
|
|
|
/* RTL-aware icon flipping - use on directional icons like chevrons, arrows */
|
|
[dir="rtl"] .flip-rtl {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
/* Force LTR for numbers, emails, code, and other content that should stay LTR */
|
|
.ltr-content {
|
|
direction: ltr;
|
|
unicode-bidi: embed;
|
|
text-align: inherit;
|
|
}
|
|
|
|
/* Inline LTR content within RTL text flow */
|
|
.ltr-inline {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Responsive Design System (Story 9.9)
|
|
Breakpoints per PRD Section 7.4:
|
|
- Mobile: < 576px (single column, stacked layouts)
|
|
- Tablet: 576px - 991px (two columns where appropriate)
|
|
- Desktop: 992px - 1199px (full layouts with sidebars)
|
|
- Large Desktop: >= 1200px (max-width container: 1200px)
|
|
========================================================================== */
|
|
|
|
/* Prevent horizontal page scroll at any viewport */
|
|
html, body {
|
|
@apply overflow-x-hidden;
|
|
}
|
|
|
|
/* Ensure images/media don't overflow */
|
|
img, video, iframe {
|
|
@apply max-w-full h-auto;
|
|
}
|
|
|
|
/* Touch-friendly targets - minimum 44px for interactive elements */
|
|
.touch-target {
|
|
@apply min-h-[44px] min-w-[44px];
|
|
}
|
|
|
|
/* Dashboard grid - responsive column layout */
|
|
.dashboard-grid {
|
|
@apply grid gap-4;
|
|
@apply grid-cols-1; /* Mobile: single column */
|
|
@apply sm:grid-cols-2; /* Tablet: 2 columns */
|
|
@apply lg:grid-cols-3; /* Desktop: 3 columns */
|
|
@apply xl:grid-cols-4; /* Large: 4 columns */
|
|
}
|
|
|
|
/* Stats grid - responsive layout for stat cards */
|
|
.stats-grid {
|
|
@apply grid gap-4;
|
|
@apply grid-cols-1; /* Mobile: single column */
|
|
@apply sm:grid-cols-2; /* Tablet: 2 columns */
|
|
@apply lg:grid-cols-4; /* Desktop: 4 columns */
|
|
}
|
|
|
|
/* Widget grid - responsive layout for dashboard widgets */
|
|
.widget-grid {
|
|
@apply grid gap-6;
|
|
@apply grid-cols-1; /* Mobile: single column */
|
|
@apply lg:grid-cols-3; /* Desktop: 3 columns */
|
|
}
|
|
|
|
/* Responsive table wrapper - horizontal scroll for tables on mobile */
|
|
.table-responsive {
|
|
@apply overflow-x-auto -mx-4 px-4;
|
|
@apply sm:mx-0 sm:px-0; /* Remove negative margin on larger screens */
|
|
}
|
|
|
|
/* Table wrapper with shadow indicator for scrollable content */
|
|
.table-scroll-wrapper {
|
|
@apply relative overflow-x-auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Form layout - responsive form field arrangement */
|
|
.form-row {
|
|
@apply flex flex-col gap-4;
|
|
@apply sm:flex-row sm:items-end;
|
|
}
|
|
|
|
/* Form actions - responsive button placement */
|
|
.form-actions {
|
|
@apply flex flex-col gap-3;
|
|
@apply sm:flex-row sm:justify-end;
|
|
}
|
|
|
|
/* Mobile-first button - full width on mobile, auto on larger screens */
|
|
.btn-responsive {
|
|
@apply w-full sm:w-auto;
|
|
}
|
|
|
|
/* Card full-width on mobile */
|
|
.card-responsive {
|
|
@apply w-full;
|
|
}
|
|
|
|
/* Collapsible content - for accordion sections on mobile */
|
|
.collapsible-content {
|
|
@apply transition-all duration-200 ease-in-out overflow-hidden;
|
|
}
|
|
|
|
/* Modal responsive - full screen on mobile, centered on desktop */
|
|
.modal-responsive {
|
|
@apply fixed inset-0 sm:inset-auto sm:relative;
|
|
@apply w-full sm:max-w-lg sm:mx-auto;
|
|
@apply h-full sm:h-auto sm:max-h-[90vh];
|
|
@apply rounded-none sm:rounded-lg;
|
|
}
|
|
|
|
/* Charts container - responsive height */
|
|
.chart-container {
|
|
@apply h-64 sm:h-72 lg:h-80;
|
|
@apply w-full;
|
|
}
|
|
|
|
/* Header actions - stack on mobile, inline on larger screens */
|
|
.header-actions {
|
|
@apply flex flex-col gap-3 w-full;
|
|
@apply sm:flex-row sm:w-auto sm:items-center;
|
|
}
|
|
|
|
/* Page header - responsive layout */
|
|
.page-header {
|
|
@apply flex flex-col gap-4;
|
|
@apply sm:flex-row sm:items-center sm:justify-between;
|
|
}
|
|
|
|
/* Filter bar - responsive layout */
|
|
.filter-bar {
|
|
@apply flex flex-col gap-4;
|
|
@apply sm:flex-row sm:items-end sm:flex-wrap;
|
|
}
|
|
|
|
/* Content section - responsive padding */
|
|
.section-responsive {
|
|
@apply px-4 py-6;
|
|
@apply sm:px-6 sm:py-8;
|
|
@apply lg:px-8;
|
|
}
|
|
|
|
/* RTL-aware responsive sidebar */
|
|
@media (max-width: 991px) {
|
|
.sidebar-responsive {
|
|
@apply fixed inset-y-0 start-0 w-64;
|
|
@apply transform -translate-x-full transition-transform duration-200;
|
|
@apply z-40;
|
|
}
|
|
.sidebar-responsive.open {
|
|
@apply translate-x-0;
|
|
}
|
|
/* RTL: sidebar comes from right */
|
|
[dir="rtl"] .sidebar-responsive {
|
|
@apply end-0 start-auto translate-x-full;
|
|
}
|
|
[dir="rtl"] .sidebar-responsive.open {
|
|
@apply translate-x-0;
|
|
}
|
|
}
|
|
|
|
/* Sidebar overlay for mobile */
|
|
.sidebar-overlay {
|
|
@apply fixed inset-0 bg-black/50 z-30;
|
|
@apply transition-opacity duration-200;
|
|
}
|
|
|
|
/* Calendar responsive - smaller cells on mobile */
|
|
.calendar-grid {
|
|
@apply grid grid-cols-7 gap-1;
|
|
}
|
|
|
|
.calendar-cell {
|
|
@apply h-10 sm:h-12;
|
|
@apply text-sm sm:text-base;
|
|
}
|
|
|
|
/* Time slot grid - responsive columns */
|
|
.time-slots-grid {
|
|
@apply grid gap-2;
|
|
@apply grid-cols-2 sm:grid-cols-3 md:grid-cols-4;
|
|
}
|
|
|
|
/* Time slot button - touch-friendly */
|
|
.time-slot-btn {
|
|
@apply p-3 min-h-[44px];
|
|
@apply text-sm sm:text-base;
|
|
}
|
|
|
|
/* Post/blog grid - responsive layout */
|
|
.posts-grid {
|
|
@apply grid gap-6;
|
|
@apply grid-cols-1;
|
|
@apply sm:grid-cols-2;
|
|
@apply lg:grid-cols-3;
|
|
}
|
|
|
|
/* Timeline/case view - responsive layout */
|
|
.timeline-container {
|
|
@apply relative;
|
|
}
|
|
|
|
.timeline-line {
|
|
@apply absolute top-0 bottom-0 w-0.5 bg-zinc-200;
|
|
@apply start-4 sm:start-6;
|
|
}
|
|
|
|
.timeline-item {
|
|
@apply relative ps-10 sm:ps-14;
|
|
@apply pb-6;
|
|
}
|
|
|
|
.timeline-dot {
|
|
@apply absolute start-2 sm:start-4;
|
|
@apply w-4 h-4 sm:w-5 sm:h-5;
|
|
@apply rounded-full bg-accent;
|
|
@apply transform -translate-x-1/2;
|
|
}
|
|
|
|
/* Empty state - responsive sizing */
|
|
.empty-state {
|
|
@apply py-8 sm:py-12;
|
|
@apply text-center;
|
|
}
|
|
|
|
.empty-state-icon {
|
|
@apply w-12 h-12 sm:w-16 sm:h-16;
|
|
@apply mx-auto mb-4;
|
|
}
|
|
|
|
/* Pagination responsive */
|
|
.pagination-responsive {
|
|
@apply flex flex-wrap justify-center gap-1;
|
|
@apply sm:gap-2;
|
|
}
|
|
|
|
/* Hide on mobile / show on desktop utilities */
|
|
.hide-mobile {
|
|
@apply hidden sm:block;
|
|
}
|
|
|
|
.show-mobile {
|
|
@apply block sm:hidden;
|
|
}
|
|
|
|
/* Stack on mobile, inline on desktop */
|
|
.stack-mobile {
|
|
@apply flex flex-col;
|
|
@apply sm:flex-row sm:items-center;
|
|
}
|
|
|
|
/* Gap utilities for responsive spacing */
|
|
.gap-responsive {
|
|
@apply gap-3 sm:gap-4 lg:gap-6;
|
|
}
|
|
|
|
/* Text size responsive */
|
|
.text-responsive-sm {
|
|
@apply text-xs sm:text-sm;
|
|
}
|
|
|
|
.text-responsive-base {
|
|
@apply text-sm sm:text-base;
|
|
}
|
|
|
|
.text-responsive-lg {
|
|
@apply text-base sm:text-lg lg:text-xl;
|
|
}
|
|
|
|
.text-responsive-xl {
|
|
@apply text-lg sm:text-xl lg:text-2xl;
|
|
}
|
|
|
|
/* Heading responsive sizes */
|
|
.heading-responsive-page {
|
|
@apply text-xl sm:text-2xl lg:text-3xl;
|
|
@apply font-bold;
|
|
}
|
|
|
|
.heading-responsive-section {
|
|
@apply text-lg sm:text-xl;
|
|
@apply font-semibold;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Animations & Micro-interactions (Story 9.11)
|
|
Subtle, professional animations under 300ms
|
|
========================================================================== */
|
|
|
|
/* Base transitions */
|
|
.transition-default {
|
|
@apply transition-all duration-150 ease-in-out;
|
|
}
|
|
|
|
.transition-slow {
|
|
@apply transition-all duration-200 ease-in-out;
|
|
}
|
|
|
|
/* Button hover transition - 150ms ease */
|
|
.btn {
|
|
@apply transition-colors duration-150;
|
|
}
|
|
|
|
/* Card lift effect - 200ms ease */
|
|
.card-hover {
|
|
@apply transition-all duration-200;
|
|
}
|
|
|
|
.card-hover:hover {
|
|
@apply -translate-y-0.5;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Link color transition */
|
|
.link-transition {
|
|
@apply transition-colors duration-150;
|
|
}
|
|
|
|
/* Skeleton loader - pulse animation */
|
|
.skeleton {
|
|
@apply animate-pulse bg-accent/30 rounded;
|
|
}
|
|
|
|
/* Toast animation classes */
|
|
.toast-enter {
|
|
@apply transform translate-x-full opacity-0;
|
|
}
|
|
|
|
.toast-enter-active {
|
|
@apply transform translate-x-0 opacity-100 transition-all duration-200;
|
|
}
|
|
|
|
/* RTL toast animation - slides from left */
|
|
[dir="rtl"] .toast-enter {
|
|
@apply -translate-x-full;
|
|
}
|
|
|
|
[dir="rtl"] .toast-enter-active {
|
|
@apply translate-x-0;
|
|
}
|
|
|
|
/* Success checkmark animation */
|
|
@keyframes checkmark {
|
|
0% { stroke-dashoffset: 100; }
|
|
100% { stroke-dashoffset: 0; }
|
|
}
|
|
|
|
.checkmark-animated path {
|
|
stroke-dasharray: 100;
|
|
animation: checkmark 0.3s ease-in-out forwards;
|
|
}
|
|
|
|
/* Error shake animation */
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-5px); }
|
|
75% { transform: translateX(5px); }
|
|
}
|
|
|
|
.shake {
|
|
animation: shake 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Modal animation classes */
|
|
.modal-enter {
|
|
@apply opacity-0 scale-95;
|
|
}
|
|
|
|
.modal-enter-active {
|
|
@apply opacity-100 scale-100 transition-all duration-200;
|
|
}
|
|
|
|
.modal-backdrop-enter {
|
|
@apply opacity-0;
|
|
}
|
|
|
|
.modal-backdrop-enter-active {
|
|
@apply opacity-100 transition-opacity duration-200;
|
|
}
|
|
|
|
/* Progress bar animation */
|
|
.progress-bar {
|
|
@apply transition-all duration-200 ease-out;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Auth Background Pattern (Story 13.3)
|
|
Subtle geometric dot pattern for auth form panels
|
|
========================================================================== */
|
|
|
|
/* Pattern overlay using pseudo-element - fixed positioning doesn't scroll */
|
|
.auth-pattern {
|
|
position: relative;
|
|
}
|
|
|
|
.auth-pattern::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: url('/images/auth-pattern.svg');
|
|
background-repeat: repeat;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Ensure content stays above pattern */
|
|
.auth-pattern > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Accessibility Styles (Story 9.10)
|
|
WCAG 2.1 AA Compliance
|
|
========================================================================== */
|
|
|
|
/* Focus styles - visible Warm Gold outline for keyboard navigation (AC4) */
|
|
:focus-visible {
|
|
@apply outline-2 outline-offset-2 outline-cta;
|
|
}
|
|
|
|
/* Skip link - hidden until focused, Dark Charcoal bg with Warm Cream text */
|
|
.skip-link {
|
|
@apply sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4
|
|
focus:bg-primary focus:text-off-white focus:px-4 focus:py-2 focus:rounded-md
|
|
focus:font-semibold focus:z-[100];
|
|
}
|
|
|
|
/* Reduced motion - respect user preference for reduced animations */
|
|
@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;
|
|
}
|
|
}
|