diff --git a/app/globals.css b/app/globals.css index fc48b58..0b49321 100644 --- a/app/globals.css +++ b/app/globals.css @@ -168,6 +168,18 @@ html[lang="ar"] { font-family: var(--font-dubai), sans-serif; } +/* Eyebrow / overline label. Latin gets uppercase + tracking; Arabic keeps + normal case and spacing so joined letterforms are not broken. */ +.eyebrow { + text-transform: uppercase; + letter-spacing: 0.14em; +} + +html[lang="ar"] .eyebrow { + text-transform: none; + letter-spacing: normal; +} + @layer base { * { @apply border-border; diff --git a/tailwind.config.ts b/tailwind.config.ts index 697dd75..1661a25 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -74,6 +74,23 @@ const config: Config = { ring: "hsl(var(--sidebar-ring))", }, }, + fontFamily: { + sans: ["var(--font-museo)", "Arial", "Helvetica", "sans-serif"], + latin: ["var(--font-museo)", "Arial", "Helvetica", "sans-serif"], + arabic: ["var(--font-dubai)", "Tahoma", "Arial", "sans-serif"], + }, + fontSize: { + display: ["clamp(2.75rem, 8vw, 5.5rem)", { lineHeight: "0.95", letterSpacing: "-0.03em", fontWeight: "900" }], + h1: ["clamp(2.25rem, 5vw, 3.5rem)", { lineHeight: "1.05", letterSpacing: "-0.02em", fontWeight: "700" }], + h2: ["clamp(1.75rem, 3.5vw, 2.5rem)", { lineHeight: "1.1", letterSpacing: "-0.015em", fontWeight: "700" }], + h3: ["1.375rem", { lineHeight: "1.2", letterSpacing: "-0.01em", fontWeight: "700" }], + title: ["1.125rem", { lineHeight: "1.3", fontWeight: "500" }], + "body-lg": ["1.125rem", { lineHeight: "1.7", fontWeight: "400" }], + body: ["1rem", { lineHeight: "1.7", fontWeight: "400" }], + small: ["0.875rem", { lineHeight: "1.6" }], + caption: ["0.8125rem", { lineHeight: "1.5", fontWeight: "500" }], + overline: ["0.75rem", { lineHeight: "1.4", letterSpacing: "0.14em", fontWeight: "500" }], + }, borderRadius: { sm: "var(--radius-nested)", md: "var(--radius-nested)", @@ -106,6 +123,8 @@ const config: Config = { }, spacing: { section: "var(--section-space)", + "section-sm": "3rem", + "section-lg": "8rem", content: "var(--content-space)", }, backdropBlur: {