diff --git a/CHANGELOG.md b/CHANGELOG.md index 0856f92..ea5c95c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ All notable changes to the New Optic website will be documented in this file. ### Changed +- Added a New York-style display font stack for large latin headings while keeping SF-style UI text. +- Switched the latin typography to an SF Pro-style system font stack for a more Apple-like feel. - Removed the desktop liquid glass WebGL layer from navbar and CTA controls so text remains readable and glass surfaces do not show dark rendering artifacts while scrolling. - Replaced the mobile hamburger dropdown with a fast, solid menu animation without bounce or stretch effects. - Kept the language switcher visible in the mobile top navigation bar. diff --git a/app/globals.css b/app/globals.css index 25d1896..84e2c09 100644 --- a/app/globals.css +++ b/app/globals.css @@ -6,6 +6,8 @@ color-scheme: light; --bg: #f6f5f2; --ink: #111317; + --font-sans: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-display: "New York Large", "New York", "NewYork", ui-serif, Georgia, Cambria, "Times New Roman", serif; } * { @@ -24,7 +26,7 @@ body { url('/assets/New-optic-BG-mobile.webp') center top / cover scroll, linear-gradient(180deg, #fbfaf8 0%, #f6f5f2 42%, #ffffff 100%); color: var(--ink); - font-family: var(--font-sans), system-ui, sans-serif; + font-family: var(--font-sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @@ -67,6 +69,10 @@ body[dir="rtl"] { font-family: var(--font-arabic), system-ui, sans-serif; } +body:not([dir="rtl"]) :where(h1, h2) { + font-family: var(--font-display); +} + a { color: inherit; text-decoration: none; diff --git a/app/layout.tsx b/app/layout.tsx index cfeb5ed..493eafc 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,10 +1,9 @@ import type { Metadata } from "next"; -import { Inter, Noto_Kufi_Arabic } from "next/font/google"; +import { Noto_Kufi_Arabic } from "next/font/google"; import "./globals.css"; import { business } from "@/config/business"; import { fr } from "@/messages/fr"; -const inter = Inter({ subsets: ["latin"], variable: "--font-sans", display: "swap" }); const arabic = Noto_Kufi_Arabic({ subsets: ["arabic"], variable: "--font-arabic", display: "swap" }); export const metadata: Metadata = { @@ -28,7 +27,7 @@ export const metadata: Metadata = { export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { return ( - + {children} diff --git a/tailwind.config.ts b/tailwind.config.ts index e5d958a..00d597a 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -11,7 +11,8 @@ const config: Config = { optical: "#315f8f" }, fontFamily: { - sans: ["var(--font-sans)", "Inter", "system-ui", "sans-serif"], + sans: ["var(--font-sans)"], + display: ["var(--font-display)"], arabic: ["var(--font-arabic)", "system-ui", "sans-serif"] }, boxShadow: {