fix: apply designer agent improvements to src/app/globals.css
This commit is contained in:
parent
cfb6211986
commit
9347e33813
|
|
@ -4,99 +4,71 @@
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
--font-inter: 'Inter', system-ui, sans-serif;
|
--color-primary: #002395;
|
||||||
}
|
--color-secondary: #ED2939;
|
||||||
|
--color-accent: #C9A84C;
|
||||||
* {
|
--color-bg: #F8F5F0;
|
||||||
@apply border-slate-200;
|
--color-text: #1a1a2e;
|
||||||
|
--color-header-bg: #002395;
|
||||||
|
--color-header-text: #FFFFFF;
|
||||||
|
--color-footer-bg: #001a6e;
|
||||||
|
--color-footer-text: #FFFFFF;
|
||||||
|
--header-position: sticky;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
@apply scroll-smooth antialiased;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@apply bg-surface text-ink font-sans;
|
@apply bg-fr-cream text-gray-900 font-sans;
|
||||||
|
color: var(--color-text);
|
||||||
|
background-color: var(--color-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Focus ring — consistent, accessible */
|
h1, h2, h3, h4, h5, h6 {
|
||||||
:focus-visible {
|
@apply font-serif;
|
||||||
@apply outline-2 outline-offset-2 outline-brand-500 rounded-sm;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scrollbar */
|
*:focus-visible {
|
||||||
::-webkit-scrollbar { @apply w-2; }
|
@apply outline-2 outline-offset-2 outline-fr-gold;
|
||||||
::-webkit-scrollbar-track { @apply bg-surface-subtle; }
|
}
|
||||||
::-webkit-scrollbar-thumb { @apply bg-slate-300 rounded-full; }
|
|
||||||
::-webkit-scrollbar-thumb:hover { @apply bg-slate-400; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer components {
|
@layer components {
|
||||||
/* ── Buttons ─────────────────────────────────────── */
|
.skip-link {
|
||||||
.btn {
|
@apply absolute -top-full left-4 z-[9999] px-4 py-2 bg-fr-gold text-white font-semibold rounded-b-md transition-all duration-200;
|
||||||
@apply inline-flex items-center justify-center gap-2
|
}
|
||||||
font-medium rounded-xl transition-all duration-200
|
.skip-link:focus {
|
||||||
focus-visible:outline focus-visible:outline-2
|
@apply top-0;
|
||||||
focus-visible:outline-offset-2 disabled:opacity-50
|
}
|
||||||
disabled:pointer-events-none select-none;
|
|
||||||
|
.tricolor-bar {
|
||||||
|
height: 4px;
|
||||||
|
background: linear-gradient(to right, #002395 33.33%, #FFFFFF 33.33%, #FFFFFF 66.66%, #ED2939 66.66%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
@apply btn px-6 py-3 text-sm
|
@apply inline-flex items-center gap-2 px-6 py-3 bg-fr-blue text-white font-semibold rounded-md hover:bg-fr-navy transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fr-gold;
|
||||||
bg-brand-600 text-white shadow-glow-sm
|
|
||||||
hover:bg-brand-700 hover:shadow-glow
|
|
||||||
active:scale-[0.98] focus-visible:outline-brand-600;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
@apply btn px-6 py-3 text-sm
|
@apply inline-flex items-center gap-2 px-6 py-3 bg-fr-red text-white font-semibold rounded-md hover:bg-red-700 transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fr-gold;
|
||||||
bg-white text-ink border border-slate-200
|
|
||||||
shadow-card hover:bg-surface-subtle hover:border-slate-300
|
|
||||||
active:scale-[0.98] focus-visible:outline-brand-500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-ghost {
|
.btn-outline {
|
||||||
@apply btn px-4 py-2 text-sm text-ink-muted
|
@apply inline-flex items-center gap-2 px-6 py-3 border-2 border-fr-blue text-fr-blue font-semibold rounded-md hover:bg-fr-blue hover:text-white transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fr-gold;
|
||||||
hover:bg-surface-subtle hover:text-ink
|
}
|
||||||
active:scale-[0.98] focus-visible:outline-brand-500;
|
|
||||||
|
.section-title {
|
||||||
|
@apply text-3xl md:text-4xl font-serif font-bold text-fr-navy mb-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-divider {
|
||||||
|
@apply w-16 h-1 bg-fr-gold mb-6;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Cards ───────────────────────────────────────── */
|
|
||||||
.card {
|
.card {
|
||||||
@apply bg-white rounded-2xl border border-slate-100
|
@apply bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-shadow duration-300;
|
||||||
shadow-card transition-all duration-300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-hover {
|
|
||||||
@apply card hover:shadow-card-hover hover:-translate-y-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Prose / body text ───────────────────────────── */
|
|
||||||
.prose-cms {
|
|
||||||
@apply prose prose-slate max-w-none
|
|
||||||
prose-headings:font-display prose-headings:text-ink
|
|
||||||
prose-a:text-brand-600 prose-a:no-underline
|
|
||||||
hover:prose-a:underline
|
|
||||||
prose-code:bg-surface-subtle prose-code:rounded
|
|
||||||
prose-code:px-1 prose-code:py-0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Section ─────────────────────────────────────── */
|
|
||||||
.section {
|
|
||||||
@apply w-full px-4 sm:px-6 lg:px-8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-cms {
|
|
||||||
@apply max-w-6xl mx-auto;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer utilities {
|
|
||||||
.text-balance { text-wrap: balance; }
|
|
||||||
.text-pretty { text-wrap: pretty; }
|
|
||||||
.animation-delay-100 { animation-delay: 100ms; }
|
|
||||||
.animation-delay-200 { animation-delay: 200ms; }
|
|
||||||
.animation-delay-300 { animation-delay: 300ms; }
|
|
||||||
.animation-delay-400 { animation-delay: 400ms; }
|
|
||||||
.animation-delay-500 { animation-delay: 500ms; }
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue