feat: Implement initial website structure with core pages, layout, and reusable UI components, alongside ESLint configuration and SEO setup.
This commit is contained in:
@@ -6,6 +6,50 @@
|
||||
|
||||
@import "tailwindcss";
|
||||
|
||||
/* ── Tailwind v4 Theme ───────────────────────────────── */
|
||||
|
||||
@theme {
|
||||
/* Colors */
|
||||
--color-primary: #000000;
|
||||
--color-secondary: #FFFFFF;
|
||||
--color-accent: #d6d6d6;
|
||||
--color-neutral: #F5F5F5;
|
||||
--color-background: #FFFFFF;
|
||||
--color-foreground: #000000;
|
||||
--color-muted: #B0B0B0;
|
||||
--color-muted-foreground: #ffffff;
|
||||
--color-border: #E0E0E0;
|
||||
--color-success: #4CAF50;
|
||||
--color-warning: #FF9800;
|
||||
--color-error: #F44336;
|
||||
|
||||
/* Fonts */
|
||||
--font-heading: 'Inter', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
|
||||
/* Typography Scale – override Tailwind defaults to match design tokens */
|
||||
--text-xl: 1.5rem;
|
||||
--text-xl--line-height: 2rem;
|
||||
--text-2xl: 1.75rem;
|
||||
--text-2xl--line-height: 2.25rem;
|
||||
--text-3xl: 2rem;
|
||||
--text-3xl--line-height: 2.5rem;
|
||||
--text-4xl: 2.5rem;
|
||||
--text-4xl--line-height: 2.75rem;
|
||||
--text-5xl: 3rem;
|
||||
--text-5xl--line-height: 1.1;
|
||||
--text-6xl: 3.75rem;
|
||||
--text-6xl--line-height: 1.1;
|
||||
}
|
||||
|
||||
/* ── Font Override (connect next/font to CSS vars) ──── */
|
||||
/* --font-inter is injected by next/font/google on <html> */
|
||||
|
||||
html {
|
||||
--font-heading: var(--font-inter, 'Inter', sans-serif);
|
||||
--font-body: var(--font-inter, 'Inter', sans-serif);
|
||||
}
|
||||
|
||||
/* ── Base Resets ───────────────────────────────────── */
|
||||
|
||||
*, *::before, *::after {
|
||||
@@ -39,14 +83,10 @@ h1, h2, h3, h4, h5, h6 {
|
||||
/* ── Links ───────────────────────────────────────── */
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ── Images ──────────────────────────────────────── */
|
||||
|
||||
img, video, svg {
|
||||
@@ -68,3 +108,15 @@ img, video, svg {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-background);
|
||||
}
|
||||
|
||||
/* ── Reduced Motion ─────────────────────────────── */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user