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

complete story 12.2

Browse Source
This commit is contained in:
Naser Mansour
2026-01-04 00:30:52 +02:00
parent e0c47fcb54
commit c855b7b159
2 changed files with 102 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+50 -33
View File
@@ -28,30 +28,37 @@
--font-size-4xl: 2.5rem; /* 40px - H1 */
/* ==========================================================================
NEW LIBRA Brand Palette (Story 10.1)
LIBRA Brand Palette - Olive Green (Story 12.2)
========================================================================== */
/* Primary Brand Colors */
--color-primary: #4A4A42; /* Charcoal - primary backgrounds, text */
--color-accent: #C9C4BA; /* Warm Gray - secondary backgrounds, accents */
--color-accent-light: #E8E4DC; /* Off-White - light backgrounds */
--color-background: #E8E4DC; /* Off-White - light backgrounds */
--color-text: #1A1A1A; /* Deep Black - logo artwork, headlines */
/* 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 */
/* Secondary/Accent Colors */
--color-accent: #A5C87A; /* Light Olive - secondary accent */
--color-accent-light: #C5D9A5; /* Pale Olive - subtle backgrounds */
/* Neutrals (unchanged) */
--color-background: #E8E4DC; /* Off-White - light backgrounds */
--color-text: #1A1A1A; /* Deep Black - text color */
/* Semantic Aliases - used by components */
--color-accent-content: #C9C4BA; /* Warm Gray */
--color-accent-foreground: #4A4A42; /* Charcoal */
--color-accent-content: #A5C87A; /* Light Olive */
--color-accent-foreground: #1A1A1A; /* Deep Black - text on accent backgrounds */
/* New Brand Color Aliases (used in blade templates) */
--color-off-white: var(--color-accent-light); /* #E8E4DC */
--color-warm-gray: var(--color-accent); /* #C9C4BA */
/* Brand Color Aliases (used in blade templates) */
--color-off-white: #E8E4DC; /* Off-White */
--color-warm-gray: var(--color-accent); /* Maps to Light Olive */
/* Backward Compatibility Aliases (legacy class names) */
--color-navy: var(--color-primary); /* Maps to Charcoal */
--color-gold: var(--color-accent); /* Maps to Warm Gray */
--color-gold-light: var(--color-accent-light); /* Maps to Off-White */
--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 Charcoal #4A4A42 (fixed from --color-text) */
--color-charcoal: var(--color-primary); /* Maps to Olive Green */
/* Status Colors - unchanged per AC7 */
--color-success: #27AE60;
@@ -78,6 +85,16 @@
}
}
/* ==========================================================================
Logo Badge Styling (Story 12.2)
Creates "seal/stamp" effect for logo on olive green backgrounds
========================================================================== */
.logo-badge {
border: 2px solid var(--color-text);
box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5);
}
/* ==========================================================================
Flux UI Form Component Styling (Story 9.5)
========================================================================== */
@@ -166,11 +183,11 @@ input[type="radio"][data-flux-control] {
@apply size-4;
} */
/* Prose Brand styling for blog posts (formerly prose-navy) */
/* Prose Brand styling for blog posts - Olive Green palette (Story 12.2) */
.prose-brand {
--tw-prose-headings: var(--color-primary); /* Charcoal */
--tw-prose-links: var(--color-accent); /* Warm Gray */
--tw-prose-bold: var(--color-primary); /* Charcoal */
--tw-prose-headings: var(--color-text); /* Deep Black */
--tw-prose-links: var(--color-primary); /* Olive Green */
--tw-prose-bold: var(--color-text); /* Deep Black */
--tw-prose-body: var(--color-text); /* Deep Black */
}
@@ -179,14 +196,14 @@ input[type="radio"][data-flux-control] {
}
.prose-brand a:hover {
color: var(--color-primary);
color: var(--color-primary-hover); /* Darker Olive */
}
/* Backward compatibility alias for prose-navy */
.prose-navy {
--tw-prose-headings: var(--color-primary);
--tw-prose-links: var(--color-accent);
--tw-prose-bold: var(--color-primary);
--tw-prose-headings: var(--color-text);
--tw-prose-links: var(--color-primary);
--tw-prose-bold: var(--color-text);
--tw-prose-body: var(--color-text);
}
@@ -195,7 +212,7 @@ input[type="radio"][data-flux-control] {
}
.prose-navy a:hover {
color: var(--color-primary);
color: var(--color-primary-hover);
}
/* Dynamic Font Selection based on language */
@@ -240,17 +257,17 @@ small, .text-sm {
Button Styling System (Story 9.4)
========================================================================== */
/* Primary button - Charcoal background with Off-White text */
/* Primary button - Olive Green background with Off-White text */
.btn-primary {
@apply bg-primary text-accent-light rounded-md px-6 py-3 font-semibold transition-colors;
@apply hover:bg-primary/90;
@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;
}
/* Secondary button - Outlined with Warm Gray border, Charcoal text */
/* Secondary button - Outlined with Light Olive border, Deep Black text */
.btn-secondary {
@apply bg-transparent border-2 border-accent text-primary rounded-md px-6 py-3 font-semibold transition-colors;
@apply hover:bg-accent hover:text-primary;
@apply bg-transparent border-2 border-accent text-text rounded-md px-6 py-3 font-semibold transition-colors;
@apply hover:bg-accent hover:text-text;
@apply focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2;
}
@@ -834,7 +851,7 @@ img, video, iframe {
WCAG 2.1 AA Compliance
========================================================================== */
/* Focus styles - visible Warm Gray outline for keyboard navigation */
/* Focus styles - visible Light Olive outline for keyboard navigation */
:focus-visible {
@apply outline-2 outline-offset-2 outline-accent;
}
@@ -842,7 +859,7 @@ img, video, iframe {
/* Skip link - hidden until focused, then appears at top-start */
.skip-link {
@apply sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4
focus:bg-accent focus:text-primary focus:px-4 focus:py-2 focus:rounded-md
focus:bg-primary focus:text-off-white focus:px-4 focus:py-2 focus:rounded-md
focus:font-semibold focus:z-[100];
}