253 lines
6.5 KiB
CSS
253 lines
6.5 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';
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@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 */
|
|
|
|
/* Primary Brand Colors */
|
|
--color-navy: #0A1F44;
|
|
--color-gold: #D4AF37;
|
|
|
|
/* Supporting Colors */
|
|
--color-gold-light: #F4E4B8;
|
|
--color-cream: #F9F7F4;
|
|
--color-charcoal: #2C3E50;
|
|
|
|
/* Status Colors */
|
|
--color-success: #27AE60;
|
|
--color-danger: #E74C3C;
|
|
--color-warning: #F39C12;
|
|
|
|
/* Semantic Aliases - used by components */
|
|
--color-primary: var(--color-navy);
|
|
--color-accent: var(--color-gold);
|
|
--color-accent-content: var(--color-gold);
|
|
--color-accent-foreground: var(--color-navy);
|
|
--color-background: var(--color-cream);
|
|
--color-text: var(--color-charcoal);
|
|
}
|
|
|
|
@layer theme {
|
|
.dark {
|
|
--color-accent: var(--color-white);
|
|
--color-accent-content: var(--color-white);
|
|
--color-accent-foreground: var(--color-neutral-800);
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--color-gray-200, currentColor);
|
|
}
|
|
}
|
|
|
|
[data-flux-field]:not(ui-radio, ui-checkbox) {
|
|
@apply grid gap-2;
|
|
}
|
|
|
|
[data-flux-label] {
|
|
@apply !mb-0 !leading-tight;
|
|
}
|
|
|
|
input:focus[data-flux-control],
|
|
textarea:focus[data-flux-control],
|
|
select:focus[data-flux-control] {
|
|
@apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
|
|
}
|
|
|
|
/* \[:where(&)\]:size-4 {
|
|
@apply size-4;
|
|
} */
|
|
|
|
/* Prose Navy styling for blog posts */
|
|
.prose-navy {
|
|
--tw-prose-headings: var(--color-navy);
|
|
--tw-prose-links: var(--color-gold);
|
|
--tw-prose-bold: var(--color-navy);
|
|
--tw-prose-body: var(--color-charcoal);
|
|
}
|
|
|
|
.prose-navy a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.prose-navy a:hover {
|
|
color: var(--color-gold-light);
|
|
}
|
|
|
|
/* 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 - Gold background with Navy text */
|
|
.btn-primary {
|
|
@apply bg-gold text-navy rounded-md px-6 py-3 font-semibold transition-colors;
|
|
@apply hover:bg-gold-light;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-gold focus:ring-offset-2;
|
|
}
|
|
|
|
/* Secondary button - Outlined with Gold border */
|
|
.btn-secondary {
|
|
@apply bg-transparent border-2 border-gold text-gold rounded-md px-6 py-3 font-semibold transition-colors;
|
|
@apply hover:bg-gold hover:text-navy;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-gold 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-r-none;
|
|
}
|
|
|
|
.btn-group > .btn-primary:last-child,
|
|
.btn-group > .btn-secondary:last-child,
|
|
.btn-group > .btn-danger:last-child {
|
|
@apply rounded-l-none;
|
|
}
|
|
|
|
/* RTL support for button groups */
|
|
[dir="rtl"] .btn-group > .btn-primary:first-child,
|
|
[dir="rtl"] .btn-group > .btn-secondary:first-child,
|
|
[dir="rtl"] .btn-group > .btn-danger:first-child {
|
|
@apply rounded-l-none rounded-r-md;
|
|
}
|
|
|
|
[dir="rtl"] .btn-group > .btn-primary:last-child,
|
|
[dir="rtl"] .btn-group > .btn-secondary:last-child,
|
|
[dir="rtl"] .btn-group > .btn-danger:last-child {
|
|
@apply rounded-r-none rounded-l-md;
|
|
}
|
|
|
|
/* RTL support for icon buttons */
|
|
[dir="rtl"] .btn-icon-left {
|
|
@apply flex-row-reverse;
|
|
}
|
|
|
|
[dir="rtl"] .btn-icon-right {
|
|
@apply flex-row;
|
|
}
|