143 lines
3.6 KiB
CSS
143 lines
3.6 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);
|
|
}
|