Matt
a1f9eca76c
Full Next.js 16 + Payload CMS 3.x agency site with: - Homepage: Hero, TrustBar, Services, Configurator wizard, Process, Selected Works, Philosophy, CTA Banner - Sub-pages: /services (3 pillars + AI Layer), /work/[slug] (case studies), /about (philosophy + story) - Configurator: 3-step wizard with AI brief generation API - i18n: Full EN/FR bilingual with next-intl - Design system: Cormorant Garamond + Inter, celestial blue palette, glassmorphism nav, Framer Motion animations - Payload CMS collections: Projects, Services, Submissions, Media Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
63 lines
1.4 KiB
CSS
63 lines
1.4 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@theme {
|
|
--color-primary: #5BA4D9;
|
|
--color-primary-dark: #006494;
|
|
--color-primary-light: #8EC5E8;
|
|
--color-navy: #1C2B3A;
|
|
--color-teal: #2EC4A0;
|
|
--color-surface: #f8f9fa;
|
|
--color-surface-low: #f3f4f5;
|
|
--color-surface-high: #ffffff;
|
|
--color-on-surface: #191c1d;
|
|
--color-outline: #72787e;
|
|
--color-outline-variant: #c2c7ce;
|
|
|
|
--font-serif: 'Cormorant Garamond', Georgia, serif;
|
|
--font-sans: 'Inter', system-ui, sans-serif;
|
|
|
|
--shadow-subtle: 0 20px 40px rgba(25, 28, 29, 0.06);
|
|
--shadow-card: 0 4px 16px rgba(25, 28, 29, 0.04);
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
color: var(--color-on-surface);
|
|
background-color: var(--color-surface);
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
font-family: var(--font-serif);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-gradient {
|
|
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.label-md {
|
|
font-size: 0.6875rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
font-weight: 500;
|
|
}
|
|
}
|