oimwiodev/New-Optic
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

Compare commits

base: oimwiodev:b77883a16c571ba46e6323a0205e9e167dc3eaf0
Branches Tags
oimwiodev:main oimwiodev:3D oimwiodev:3D-scrap
oimwiodev:v1.0.0
...
compare: oimwiodev:ebec21f1ac1d4177207adc8b302555b1ab87bce5
Branches Tags
oimwiodev:main oimwiodev:3D oimwiodev:3D-scrap
oimwiodev:v1.0.0

3 Commits
b77883a16c ... ebec21f1ac

Author SHA1 Message Date
oimwiodev
ebec21f1ac Merge 3D typography preview into main 2026-05-16 22:39:55 +01:00
oimwiodev
539437b824 Use New York style display headings 2026-05-16 22:15:29 +01:00
oimwiodev
6549b03d9a Use SF Pro style font stack 2026-05-16 21:52:38 +01:00
4 changed files with 13 additions and 5 deletions
Expand all files Collapse all files

2
CHANGELOG.md
View File

@@ -6,6 +6,8 @@ All notable changes to the New Optic website will be documented in this file.
### Changed ### 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. - 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. - 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. - Kept the language switcher visible in the mobile top navigation bar.

8
app/globals.css
View File

@@ -6,6 +6,8 @@
color-scheme: light; color-scheme: light;
--bg: #f6f5f2; --bg: #f6f5f2;
--ink: #111317; --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, url('/assets/New-optic-BG-mobile.webp') center top / cover scroll,
linear-gradient(180deg, #fbfaf8 0%, #f6f5f2 42%, #ffffff 100%); linear-gradient(180deg, #fbfaf8 0%, #f6f5f2 42%, #ffffff 100%);
color: var(--ink); color: var(--ink);
font-family: var(--font-sans), system-ui, sans-serif; font-family: var(--font-sans);
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
@@ -67,6 +69,10 @@ body[dir="rtl"] {
font-family: var(--font-arabic), system-ui, sans-serif; font-family: var(--font-arabic), system-ui, sans-serif;
} }
body:not([dir="rtl"]) :where(h1, h2) {
font-family: var(--font-display);
}
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;

5
app/layout.tsx
View File

@@ -1,10 +1,9 @@
import type { Metadata } from "next"; 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 "./globals.css";
import { business } from "@/config/business"; import { business } from "@/config/business";
import { fr } from "@/messages/fr"; 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" }); const arabic = Noto_Kufi_Arabic({ subsets: ["arabic"], variable: "--font-arabic", display: "swap" });
export const metadata: Metadata = { export const metadata: Metadata = {
@@ -28,7 +27,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
return ( return (
<html lang="fr" className={`${inter.variable} ${arabic.variable} scroll-smooth`}> <html lang="fr" className={`${arabic.variable} scroll-smooth`}>
<body> <body>
{children} {children}
</body> </body>

3
tailwind.config.ts
View File

@@ -11,7 +11,8 @@ const config: Config = {
optical: "#315f8f" optical: "#315f8f"
}, },
fontFamily: { 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"] arabic: ["var(--font-arabic)", "system-ui", "sans-serif"]
}, },
boxShadow: { boxShadow: {