fix: apply designer agent improvements to src/index.css
This commit is contained in:
parent
52efef8786
commit
535cedd30b
115
src/index.css
115
src/index.css
|
|
@ -2,73 +2,102 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap');
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
|
*, *::before, *::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@apply bg-white text-gray-800 font-sans;
|
font-family: 'Inter', system-ui, sans-serif;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #1a1a1a;
|
||||||
|
overflow-x: hidden;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4 {
|
:focus-visible {
|
||||||
font-family: 'Playfair Display', Georgia, serif;
|
outline: 2px solid #c9a84c;
|
||||||
|
outline-offset: 3px;
|
||||||
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer components {
|
@layer components {
|
||||||
.section-title {
|
|
||||||
@apply text-3xl md:text-4xl font-bold text-marine-900 mb-4;
|
|
||||||
font-family: 'Playfair Display', Georgia, serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-subtitle {
|
|
||||||
@apply text-gold-600 uppercase tracking-widest text-sm font-semibold mb-2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
@apply inline-flex items-center gap-2 bg-gold-500 hover:bg-gold-600 text-white font-semibold py-3 px-7 rounded-sm transition-all duration-300 shadow-md hover:shadow-lg active:scale-95;
|
@apply inline-flex items-center justify-center gap-2
|
||||||
|
bg-gold-500 text-white font-semibold
|
||||||
|
px-8 py-4 rounded-sm text-sm tracking-wide uppercase
|
||||||
|
hover:bg-gold-600 active:bg-gold-700
|
||||||
|
transition-all duration-200
|
||||||
|
shadow-md hover:shadow-lg
|
||||||
|
focus-visible:ring-2 focus-visible:ring-gold-400 focus-visible:ring-offset-2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
@apply inline-flex items-center gap-2 border-2 border-white text-white hover:bg-white hover:text-marine-900 font-semibold py-3 px-7 rounded-sm transition-all duration-300;
|
@apply inline-flex items-center justify-center gap-2
|
||||||
|
border-2 border-white text-white font-semibold
|
||||||
|
px-8 py-4 rounded-sm text-sm tracking-wide uppercase
|
||||||
|
hover:bg-white hover:text-marine-900
|
||||||
|
transition-all duration-200
|
||||||
|
focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost {
|
||||||
|
@apply inline-flex items-center justify-center gap-2
|
||||||
|
text-gold-500 font-semibold
|
||||||
|
px-4 py-2 rounded-sm text-sm tracking-wide uppercase
|
||||||
|
hover:text-gold-400
|
||||||
|
transition-colors duration-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
@apply font-serif text-3xl md:text-4xl lg:text-5xl font-bold text-marine-900 leading-tight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-subtitle {
|
||||||
|
@apply text-gray-500 text-lg mt-4 leading-relaxed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
@apply bg-white rounded-sm shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden;
|
@apply bg-white rounded-lg shadow-md hover:shadow-xl
|
||||||
|
transition-all duration-300 border border-gray-100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.divider {
|
.tricolore-bar {
|
||||||
@apply w-16 h-1 bg-gold-500 mx-auto my-4;
|
background: linear-gradient(to right, #002395 33.33%, #ffffff 33.33%, #ffffff 66.66%, #ED2939 66.66%);
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@layer utilities {
|
|
||||||
.text-shadow {
|
|
||||||
text-shadow: 0 2px 8px rgba(0,0,0,0.45);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-overlay {
|
|
||||||
background: linear-gradient(180deg, rgba(16, 42, 67, 0.80) 0%, rgba(16, 42, 67, 0.65) 100%);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scrollbar */
|
/* Scrollbar */
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar { width: 6px; }
|
||||||
width: 8px;
|
::-webkit-scrollbar-track { background: #f1f1f1; }
|
||||||
}
|
::-webkit-scrollbar-thumb { background: #4A5C3F; border-radius: 3px; }
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-thumb:hover { background: #1C2B1A; }
|
||||||
background: #f0f4f8;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: #486581;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #334e68;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Smooth anchor offset for fixed header */
|
/* Skip link for accessibility */
|
||||||
section[id] {
|
.skip-link {
|
||||||
scroll-margin-top: 72px;
|
position: absolute;
|
||||||
|
top: -100%;
|
||||||
|
left: 1rem;
|
||||||
|
z-index: 9999;
|
||||||
|
background: #c9a84c;
|
||||||
|
color: #fff;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 0 0 4px 4px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: top 0.2s;
|
||||||
|
}
|
||||||
|
.skip-link:focus {
|
||||||
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue