naser/libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

redone 12.2 and update the header and footer colors to #2D3624

Browse Source
This commit is contained in:
Naser Mansour
2026-01-04 01:54:20 +02:00
parent b2ff6df18e
commit 1796bdb51e
7 changed files with 144 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+75 -67
View File
@@ -28,39 +28,45 @@
--font-size-4xl: 2.5rem; /* 40px - H1 */
/* ==========================================================================
LIBRA Brand Palette - Olive Green (Story 12.2)
LIBRA Brand Palette - Dark Charcoal & Warm Gold (Story 12.2)
========================================================================== */
/* Primary Olive Green Palette */
--color-primary: #8AB357; /* Olive Green - primary brand color */
--color-primary-hover: #7AA347; /* Darker Olive - hover states */
--color-primary-dark: #6A9337; /* Dark Olive - active/pressed states */
--color-primary-light: #B5D88A; /* Bright Olive - highlights */
/* Primary Dark Forest Green Palette */
--color-primary: #2D3624; /* Dark Forest Green - Header/Footer backgrounds */
--color-primary-light: #3D4634; /* Lighter Forest Green - Primary hover state */
/* Secondary/Accent Colors */
--color-accent: #A5C87A; /* Light Olive - secondary accent */
--color-accent-light: #C5D9A5; /* Pale Olive - subtle backgrounds */
/* 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 */
/* Neutrals (unchanged) */
--color-background: #E8E4DC; /* Off-White - light backgrounds */
--color-body: #1A1A1A; /* Deep Black - body text color */
/* 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-content: #A5C87A; /* Light Olive */
--color-accent-foreground: #1A1A1A; /* Deep Black - text on accent backgrounds */
/* Brand Color Aliases (used in blade templates) */
--color-off-white: #E8E4DC; /* Off-White */
--color-warm-gray: var(--color-accent); /* Maps to Light Olive */
--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 Olive Green */
--color-gold: var(--color-accent); /* Maps to Light Olive */
--color-gold-light: var(--color-accent-light); /* Maps to Pale Olive */
--color-cream: var(--color-background); /* Maps to Off-White */
--color-charcoal: var(--color-primary); /* Maps to Olive Green */
--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 AC7 */
/* Status Colors - unchanged per AC6 */
--color-success: #27AE60;
--color-danger: #E74C3C;
--color-warning: #F39C12;
@@ -87,12 +93,12 @@
/* ==========================================================================
Logo Badge Styling (Story 12.2)
Creates "seal/stamp" effect for logo on olive green backgrounds
Creates "seal/stamp" effect for logo on Dark Charcoal backgrounds
========================================================================== */
.logo-badge {
border: 2px solid var(--color-body);
box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5);
border: 2px solid var(--color-text);
box-shadow: 4px 4px 6px rgba(45, 54, 36, 0.5);
}
/* ==========================================================================
@@ -118,13 +124,13 @@ select[data-flux-control],
@apply border-body/30 rounded-md transition-colors text-body;
}
/* Focus states - Warm Gray border with subtle ring */
/* 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-accent ring-2 ring-accent/20;
@apply outline-hidden border-cta ring-2 ring-cta/20;
}
/* Textarea minimum height */
@@ -132,16 +138,16 @@ textarea[data-flux-control] {
@apply min-h-[120px] resize-y;
}
/* Checkbox styling - Light Olive accent when checked */
/* 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-accent focus:ring-accent focus:ring-offset-0;
@apply w-5 h-5 rounded border-body/30 text-cta focus:ring-cta focus:ring-offset-0;
}
/* Radio styling - Light Olive accent when selected */
/* 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-accent focus:ring-accent focus:ring-offset-0;
@apply w-5 h-5 border-body/30 text-cta focus:ring-cta focus:ring-offset-0;
}
/* Error state styling for Flux fields */
@@ -183,36 +189,38 @@ input[type="radio"][data-flux-control] {
@apply size-4;
} */
/* Prose Brand styling for blog posts - Olive Green palette (Story 12.2) */
/* Prose Brand styling for blog posts - Dark Charcoal & Warm Gold (AC5, AC8) */
.prose-brand {
--tw-prose-headings: var(--color-body); /* Deep Black */
--tw-prose-links: var(--color-primary); /* Olive Green */
--tw-prose-bold: var(--color-body); /* Deep Black */
--tw-prose-body: var(--color-body); /* Deep Black */
--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-primary-hover); /* Darker Olive */
color: var(--color-cta-hover); /* Darker Gold (AC5) */
}
/* Backward compatibility alias for prose-navy */
.prose-navy {
--tw-prose-headings: var(--color-body);
--tw-prose-links: var(--color-primary);
--tw-prose-bold: var(--color-body);
--tw-prose-body: var(--color-body);
--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-primary-hover);
color: var(--color-cta-hover);
}
/* Dynamic Font Selection based on language */
@@ -257,18 +265,18 @@ small, .text-sm {
Button Styling System (Story 9.4)
========================================================================== */
/* Primary button - Olive Green background with Off-White text */
/* Primary button - Warm Gold background with White text (AC3) */
.btn-primary {
@apply bg-primary text-off-white rounded-md px-6 py-3 font-semibold transition-colors;
@apply hover:bg-primary-hover;
@apply focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2;
@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 - Outlined with Light Olive border, Deep Black text */
/* Secondary button - Dark Charcoal border, Dark text (AC3) */
.btn-secondary {
@apply bg-transparent border-2 border-accent text-body rounded-md px-6 py-3 font-semibold transition-colors;
@apply hover:bg-accent hover:text-body;
@apply focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2;
@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 */
@@ -354,10 +362,10 @@ button.btn-danger:disabled {
Form Styling System (Story 9.5)
========================================================================== */
/* Input field styling */
/* Input field styling - Warm Gold focus (AC4) */
.input-field {
@apply w-full border border-body/30 rounded-md px-4 py-3
focus:border-accent focus:ring-2 focus:ring-accent/20
focus:border-cta focus:ring-2 focus:ring-cta/20
transition-colors outline-none bg-white;
}
@@ -388,31 +396,31 @@ button.btn-danger:disabled {
@apply text-sm text-danger mt-1;
}
/* Textarea specific styling */
/* Textarea specific styling - Warm Gold focus (AC4) */
.textarea-field {
@apply w-full border border-body/30 rounded-md px-4 py-3
focus:border-accent focus:ring-2 focus:ring-accent/20
focus:border-cta focus:ring-2 focus:ring-cta/20
transition-colors outline-none bg-white
min-h-[120px] resize-y;
}
/* Select dropdown styling */
/* Select dropdown styling - Warm Gold focus (AC4) */
.select-field {
@apply w-full border border-body/30 rounded-md px-4 py-3
focus:border-accent focus:ring-2 focus:ring-accent/20
focus:border-cta focus:ring-2 focus:ring-cta/20
transition-colors outline-none bg-white;
}
/* Custom checkbox styling */
/* Custom checkbox styling - Warm Gold (AC4) */
.checkbox-custom {
@apply w-5 h-5 rounded border-body/30 text-accent
focus:ring-accent focus:ring-offset-0;
@apply w-5 h-5 rounded border-body/30 text-cta
focus:ring-cta focus:ring-offset-0;
}
/* Custom radio styling */
/* Custom radio styling - Warm Gold (AC4) */
.radio-custom {
@apply w-5 h-5 border-body/30 text-accent
focus:ring-accent focus:ring-offset-0;
@apply w-5 h-5 border-body/30 text-cta
focus:ring-cta focus:ring-offset-0;
}
/* Checkbox/Radio with error state */
@@ -852,12 +860,12 @@ img, video, iframe {
WCAG 2.1 AA Compliance
========================================================================== */
/* Focus styles - visible Light Olive outline for keyboard navigation */
/* Focus styles - visible Warm Gold outline for keyboard navigation (AC4) */
:focus-visible {
@apply outline-2 outline-offset-2 outline-accent;
@apply outline-2 outline-offset-2 outline-cta;
}
/* Skip link - hidden until focused, then appears at top-start */
/* 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