From 6549b03d9a1d6423d3e030e0123f0af031b3c98c Mon Sep 17 00:00:00 2001 From: oimwiodev Date: Sat, 16 May 2026 21:52:38 +0100 Subject: [PATCH 1/2] Use SF Pro style font stack --- CHANGELOG.md | 1 + app/globals.css | 3 ++- app/layout.tsx | 5 ++--- tailwind.config.ts | 2 +- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0856f92..9fbb08c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ All notable changes to the New Optic website will be documented in this file. ### Changed +- 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..f24536e 100644 --- a/app/globals.css +++ b/app/globals.css @@ -6,6 +6,7 @@ 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; } * { @@ -24,7 +25,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; } 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..e13d561 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -11,7 +11,7 @@ const config: Config = { optical: "#315f8f" }, fontFamily: { - sans: ["var(--font-sans)", "Inter", "system-ui", "sans-serif"], + sans: ["var(--font-sans)"], arabic: ["var(--font-arabic)", "system-ui", "sans-serif"] }, boxShadow: { From 539437b8247e62642d28ab7161627a419e743f02 Mon Sep 17 00:00:00 2001 From: oimwiodev Date: Sat, 16 May 2026 22:15:29 +0100 Subject: [PATCH 2/2] Use New York style display headings --- CHANGELOG.md | 1 + app/globals.css | 5 +++++ tailwind.config.ts | 1 + 3 files changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9fbb08c..ea5c95c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ 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. diff --git a/app/globals.css b/app/globals.css index f24536e..84e2c09 100644 --- a/app/globals.css +++ b/app/globals.css @@ -7,6 +7,7 @@ --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; } * { @@ -68,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/tailwind.config.ts b/tailwind.config.ts index e13d561..00d597a 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -12,6 +12,7 @@ const config: Config = { }, fontFamily: { sans: ["var(--font-sans)"], + display: ["var(--font-display)"], arabic: ["var(--font-arabic)", "system-ui", "sans-serif"] }, boxShadow: {