tyler/route-commerce
1
0
Fork 1
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

polish: consolidate typography to next/font variables, add atelier utility classes
Deploy to route.crispygoat.com / deploy (push) Successful in 4m33s
Details

Browse Source 
- Remove Google Fonts @import from 4 components (SiteHeader, LandingPageWrapper,
  TestimonialsAndCTA, FeaturesAndStats) — eliminate render-blocking external
  request and font flash
- Replace all unloaded Cormorant Garamond / Playfair Display / DM Sans /
  Plus Jakarta Sans references with the existing next/font variables
  (Fraunces, Manrope, Fragment_Mono) — visual coherence with the design system
- Update 9 pages (blog, brands, changelog, maintenance, protected-example,
  roadmap, security, waitlist, WaitlistForm) to use the loaded Fraunces
- Fix dead --font-geist / --font-jetbrains-mono references in
  admin-design-system.css (now point to --font-manrope / --font-fragment-mono
  which are actually loaded)
- Add atelier-pill, atelier-numerals, atelier-fineprint, atelier-canvas-soft
  utility classes; .atelier-input:focus-visible refined ring
- Add .ha-field-textarea, .ha-scroll, .ha-skeleton to admin design system
- Extend prefers-reduced-motion guard to atelier-enter/stagger/shimmer
- Apply atelier-fineprint to login/not-found/error pages for consistency
- No structural changes; build passes, 0 type errors
This commit is contained in:
Tyler
2026-06-16 23:50:16 -06:00
parent 4ebbc6dacf
commit c8fa2e8b52
19 changed files with 259 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/blog/page.tsx
+3 -3
View File
@@ -130,7 +130,7 @@ export default function BlogPage() {
{/* Hero */} {/* Hero */}
<section className="py-12 sm:py-16 md:py-20"> <section className="py-12 sm:py-16 md:py-20">
<div className="max-w-4xl mx-auto px-4 sm:px-6 text-center"> <div className="max-w-4xl mx-auto px-4 sm:px-6 text-center">
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}> <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
Blog & Resources Blog & Resources
</h1> </h1>
<p className="text-lg sm:text-xl text-[#6b8f71]"> <p className="text-lg sm:text-xl text-[#6b8f71]">
@@ -151,7 +151,7 @@ export default function BlogPage() {
<span className="inline-block w-fit px-3 py-1 bg-[#c97a3e]/10 text-[#c97a3e] text-sm font-medium rounded-full mb-4"> <span className="inline-block w-fit px-3 py-1 bg-[#c97a3e]/10 text-[#c97a3e] text-sm font-medium rounded-full mb-4">
Featured Featured
</span> </span>
<h2 className="text-3xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}> <h2 className="text-3xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
Getting Started with Route Commerce Getting Started with Route Commerce
</h2> </h2>
<p className="text-[#666] mb-6"> <p className="text-[#666] mb-6">
@@ -234,7 +234,7 @@ export default function BlogPage() {
{/* Newsletter */} {/* Newsletter */}
<section className="py-20 bg-gradient-to-br from-[#1a4d2e] to-[#2d6a4f]"> <section className="py-20 bg-gradient-to-br from-[#1a4d2e] to-[#2d6a4f]">
<div className="max-w-2xl mx-auto px-6 text-center"> <div className="max-w-2xl mx-auto px-6 text-center">
<h2 className="text-3xl font-bold text-white mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}> <h2 className="text-3xl font-bold text-white mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
Stay in the Loop Stay in the Loop
</h2> </h2>
<p className="text-[#faf8f5]/80 mb-8"> <p className="text-[#faf8f5]/80 mb-8">
src/app/brands/page.tsx
+1 -1
View File
@@ -224,7 +224,7 @@ export default function BrandsPage() {
<style jsx>{` <style jsx>{`
.brands-page { .brands-page {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-family: var(--font-manrope);
background: #ffffff; background: #ffffff;
min-height: 100vh; min-height: 100vh;
} }
src/app/changelog/page.tsx
+1 -1
View File
@@ -132,7 +132,7 @@ export default function ChangelogPage() {
<main className="max-w-4xl mx-auto px-6 py-16"> <main className="max-w-4xl mx-auto px-6 py-16">
{/* Hero */} {/* Hero */}
<div className="text-center mb-16"> <div className="text-center mb-16">
<h1 className="text-5xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}> <h1 className="text-5xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
Changelog Changelog
</h1> </h1>
<p className="text-xl text-[#6b8f71] max-w-2xl mx-auto"> <p className="text-xl text-[#6b8f71] max-w-2xl mx-auto">
src/app/error.tsx
+1 -4
View File
@@ -50,10 +50,7 @@ export default function ErrorPage({
{error.message && ( {error.message && (
<details className="mt-6 text-left"> <details className="mt-6 text-left">
<summary <summary className="atelier-fineprint cursor-pointer hover:text-stone-900 transition-colors">
className="text-[10px] tracking-[0.18em] uppercase text-stone-500 hover:text-stone-700 cursor-pointer transition-colors"
style={{ fontFamily: "var(--font-fragment-mono)" }}
>
Error details Error details
</summary> </summary>
<div className="mt-3 rounded-lg border border-stone-200 bg-white/70 backdrop-blur-sm p-3.5 text-xs font-mono text-stone-700 break-words"> <div className="mt-3 rounded-lg border border-stone-200 bg-white/70 backdrop-blur-sm p-3.5 text-xs font-mono text-stone-700 break-words">
src/app/globals.css
+83
View File
@@ -228,6 +228,17 @@ select:-webkit-autofill:focus {
@keyframes transition-shimmer { @keyframes transition-shimmer {
0%, 100% { transform: translateX(0); } 0%, 100% { transform: translateX(0); }
} }
/* Atelier modal + stagger animations also respect reduced-motion */
.atelier-enter,
.atelier-backdrop,
.atelier-stagger > *,
.atelier-cta .atelier-cta-shimmer {
animation: none !important;
}
.atelier-stagger > * {
opacity: 1 !important;
transform: none !important;
}
} }
/* Light mode placeholder (used by storefront) */ /* Light mode placeholder (used by storefront) */
@@ -1083,3 +1094,75 @@ select:-webkit-autofill:focus {
color: #991B1B; color: #991B1B;
} }
.atelier-error svg { flex-shrink: 0; margin-top: 1px; } .atelier-error svg { flex-shrink: 0; margin-top: 1px; }
/* ─── Polish utilities — "Atelier des Récoltes" additions ─────── */
/* Tabular numerals for prices, quantities, dates */
.atelier-numerals {
font-family: var(--font-fraunces);
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: -0.015em;
}
/* Inline editorial pill — for tags, badges, status chips */
.atelier-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 8px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(28, 25, 23, 0.08);
border-radius: 999px;
font-family: var(--font-fragment-mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #1C1917;
white-space: nowrap;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.atelier-pill:hover {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(34, 78, 47, 0.25);
}
.atelier-pill .atelier-pill-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: #16A34A;
box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
}
.atelier-pill.is-gold .atelier-pill-dot {
background: #CA8A04;
box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.18);
}
.atelier-pill.is-muted .atelier-pill-dot {
background: #A8A29E;
box-shadow: none;
}
/* Refined focus ring for atelier inputs (replaces default browser ring) */
.atelier-input:focus-visible {
outline: none;
box-shadow: 0 1px 0 0 #224E2F;
}
/* Small caps editorial small-text — for footnote, fine print */
.atelier-fineprint {
font-family: var(--font-fragment-mono);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #786B53;
line-height: 1.5;
}
/* Soft cream canvas (lighter than atelier-canvas) — for sub-pages */
.atelier-canvas-soft {
background-color: #FDFBF6;
background-image:
radial-gradient(ellipse 60% 40% at 50% 0%, rgba(180, 155, 100, 0.06) 0%, transparent 60%);
position: relative;
}
src/app/login/LoginClient.tsx
+1 -1
View File
@@ -218,7 +218,7 @@ export default function LoginClient({ error }: LoginClientProps) {
</div> </div>
</div> </div>
<p className="text-center text-[11px] text-stone-500 mt-6 tracking-wide" style={{ fontFamily: "var(--font-fragment-mono)" }}> <p className="atelier-fineprint text-center mt-6">
Protected by Neon Auth · Encrypted at rest Protected by Neon Auth · Encrypted at rest
</p> </p>
</div> </div>
src/app/maintenance/page.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export default function MaintenancePage() {
</div> </div>
{/* Heading */} {/* Heading */}
<h1 className="text-4xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}> <h1 className="text-4xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
Under Maintenance Under Maintenance
</h1> </h1>
<p className="text-lg text-[#6b8f71] mb-6"> <p className="text-lg text-[#6b8f71] mb-6">
src/app/not-found.tsx
+2 -2
View File
@@ -70,9 +70,9 @@ export default function NotFound() {
))} ))}
</div> </div>
<p className="text-center text-[11px] text-stone-500 mt-10 tracking-wide" style={{ fontFamily: "var(--font-fragment-mono)" }}> <p className="atelier-fineprint text-center mt-10">
Lost? Reach us at{" "} Lost? Reach us at{" "}
<a href="mailto:support@routecommerce.com" className="text-[#14532D] hover:underline"> <a href="mailto:support@routecommerce.com" className="text-[#14532D] hover:underline normal-case tracking-normal">
support@routecommerce.com support@routecommerce.com
</a> </a>
</p> </p>
src/app/protected-example/page.tsx
+1 -1
View File
@@ -51,7 +51,7 @@ export default async function ProtectedExamplePage() {
<header> <header>
<h1 <h1
className="text-3xl font-semibold tracking-tight text-stone-900" className="text-3xl font-semibold tracking-tight text-stone-900"
style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }} style={{ fontFamily: "var(--font-fraunces)" }}
> >
Protected example Protected example
</h1> </h1>
src/app/roadmap/page.tsx
+2 -2
View File
@@ -79,7 +79,7 @@ export default function RoadmapPage() {
{/* Hero */} {/* Hero */}
<section className="bg-gradient-to-b from-white to-[#faf8f5] py-12 sm:py-16 md:py-20"> <section className="bg-gradient-to-b from-white to-[#faf8f5] py-12 sm:py-16 md:py-20">
<div className="max-w-4xl mx-auto px-4 sm:px-6 text-center"> <div className="max-w-4xl mx-auto px-4 sm:px-6 text-center">
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}> <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
Product Roadmap Product Roadmap
</h1> </h1>
<p className="text-lg sm:text-xl text-[#6b8f71] max-w-2xl mx-auto"> <p className="text-lg sm:text-xl text-[#6b8f71] max-w-2xl mx-auto">
@@ -189,7 +189,7 @@ export default function RoadmapPage() {
<section id="suggest" className="py-16 bg-white border-t border-[#e5e5e5]"> <section id="suggest" className="py-16 bg-white border-t border-[#e5e5e5]">
<div className="max-w-2xl mx-auto px-6"> <div className="max-w-2xl mx-auto px-6">
<div className="text-center mb-8"> <div className="text-center mb-8">
<h2 className="text-3xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}> <h2 className="text-3xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "var(--font-fraunces)" }}>
Suggest a Feature Suggest a Feature
</h2> </h2>
<p className="text-[#666]">Have an idea? We&apos;d love to hear it. Share your suggestion and vote on others.</p> <p className="text-[#666]">Have an idea? We&apos;d love to hear it. Share your suggestion and vote on others.</p>
src/app/security/page.tsx
+5 -5
View File
@@ -110,7 +110,7 @@ export default function SecurityPage() {
{/* Hero */} {/* Hero */}
<section className="py-20"> <section className="py-20">
<div className="max-w-4xl mx-auto px-6 text-center"> <div className="max-w-4xl mx-auto px-6 text-center">
<h1 className="text-5xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}> <h1 className="text-5xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
Your Data is Safe with Us Your Data is Safe with Us
</h1> </h1>
<p className="text-xl text-[#6b8f71] max-w-2xl mx-auto"> <p className="text-xl text-[#6b8f71] max-w-2xl mx-auto">
@@ -122,7 +122,7 @@ export default function SecurityPage() {
{/* Security Features */} {/* Security Features */}
<section className="py-16"> <section className="py-16">
<div className="max-w-6xl mx-auto px-6"> <div className="max-w-6xl mx-auto px-6">
<h2 className="text-3xl font-bold text-[#1a1a1a] mb-12 text-center" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}> <h2 className="text-3xl font-bold text-[#1a1a1a] mb-12 text-center" style={{ fontFamily: "var(--font-fraunces)" }}>
Enterprise-Grade Security Enterprise-Grade Security
</h2> </h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -144,7 +144,7 @@ export default function SecurityPage() {
<div className="max-w-4xl mx-auto px-6"> <div className="max-w-4xl mx-auto px-6">
<div className="grid md:grid-cols-2 gap-12 items-center"> <div className="grid md:grid-cols-2 gap-12 items-center">
<div> <div>
<h2 className="text-3xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}> <h2 className="text-3xl font-bold text-[#1a1a1a] mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
Built on Trusted Infrastructure Built on Trusted Infrastructure
</h2> </h2>
<p className="text-[#666] mb-6"> <p className="text-[#666] mb-6">
@@ -219,7 +219,7 @@ export default function SecurityPage() {
{/* Privacy Compliance */} {/* Privacy Compliance */}
<section className="py-16"> <section className="py-16">
<div className="max-w-4xl mx-auto px-6"> <div className="max-w-4xl mx-auto px-6">
<h2 className="text-3xl font-bold text-[#1a1a1a] mb-8 text-center" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}> <h2 className="text-3xl font-bold text-[#1a1a1a] mb-8 text-center" style={{ fontFamily: "var(--font-fraunces)" }}>
Privacy Compliance Privacy Compliance
</h2> </h2>
<div className="grid md:grid-cols-2 gap-6"> <div className="grid md:grid-cols-2 gap-6">
@@ -242,7 +242,7 @@ export default function SecurityPage() {
{/* Report Vulnerability */} {/* Report Vulnerability */}
<section className="py-16 bg-[#1a4d2e] text-white"> <section className="py-16 bg-[#1a4d2e] text-white">
<div className="max-w-2xl mx-auto px-6 text-center"> <div className="max-w-2xl mx-auto px-6 text-center">
<h2 className="text-3xl font-bold mb-4" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}> <h2 className="text-3xl font-bold mb-4" style={{ fontFamily: "var(--font-fraunces)" }}>
Found a Security Issue? Found a Security Issue?
</h2> </h2>
<p className="text-white/80 mb-6"> <p className="text-white/80 mb-6">
src/app/waitlist/page.tsx
+4 -4
View File
@@ -23,7 +23,7 @@ export default function WaitlistPage() {
<path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /> <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg> </svg>
</div> </div>
<span className="text-xl font-bold text-[#1a1a1a] tracking-tight" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>Route Commerce</span> <span className="text-xl font-bold text-[#1a1a1a] tracking-tight" style={{ fontFamily: "var(--font-fraunces)" }}>Route Commerce</span>
</Link> </Link>
</div> </div>
</header> </header>
@@ -37,7 +37,7 @@ export default function WaitlistPage() {
<span className="w-2 h-2 bg-[#c97a3e] rounded-full animate-pulse" /> <span className="w-2 h-2 bg-[#c97a3e] rounded-full animate-pulse" />
<span className="text-sm font-medium text-[#c97a3e]">Early Access</span> <span className="text-sm font-medium text-[#c97a3e]">Early Access</span>
</div> </div>
<h1 className="text-5xl sm:text-6xl font-bold text-[#1a1a1a] leading-tight mb-6" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}> <h1 className="text-5xl sm:text-6xl font-bold text-[#1a1a1a] leading-tight mb-6" style={{ fontFamily: "var(--font-fraunces)" }}>
Join 500+ farms on the waitlist Join 500+ farms on the waitlist
</h1> </h1>
<p className="text-xl text-[#6b8f71] mb-8 leading-relaxed"> <p className="text-xl text-[#6b8f71] mb-8 leading-relaxed">
@@ -76,7 +76,7 @@ export default function WaitlistPage() {
{/* Right - Form */} {/* Right - Form */}
<div> <div>
<div className="bg-white rounded-3xl p-8 sm:p-10 shadow-xl border border-[#e5e5e5]"> <div className="bg-white rounded-3xl p-8 sm:p-10 shadow-xl border border-[#e5e5e5]">
<h2 className="text-2xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}> <h2 className="text-2xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "var(--font-fraunces)" }}>
Reserve Your Spot Reserve Your Spot
</h2> </h2>
<p className="text-[#888] mb-6">No credit card required. We&apos;ll notify you when it&apos;s your turn.</p> <p className="text-[#888] mb-6">No credit card required. We&apos;ll notify you when it&apos;s your turn.</p>
@@ -89,7 +89,7 @@ export default function WaitlistPage() {
{/* FAQ Section */} {/* FAQ Section */}
<section className="border-t border-[#e5e5e5] bg-white"> <section className="border-t border-[#e5e5e5] bg-white">
<div className="max-w-3xl mx-auto px-6 py-16"> <div className="max-w-3xl mx-auto px-6 py-16">
<h2 className="text-3xl font-bold text-[#1a1a1a] mb-8 text-center" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}> <h2 className="text-3xl font-bold text-[#1a1a1a] mb-8 text-center" style={{ fontFamily: "var(--font-fraunces)" }}>
Frequently Asked Questions Frequently Asked Questions
</h2> </h2>
<div className="space-y-4"> <div className="space-y-4">
src/components/landing/FeaturesAndStats.tsx
+10 -12
View File
@@ -231,22 +231,20 @@ export default function FeaturesAndStats() {
return ( return (
<div <div
style={{ style={{
fontFamily: "'Plus Jakarta Sans', sans-serif", fontFamily: "var(--font-manrope)",
background: "#faf8f5", background: "#faf8f5",
color: "#1a1a1a", color: "#1a1a1a",
minHeight: "100vh", minHeight: "100vh",
}} }}
> >
<style jsx>{` <style jsx>{`
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
:global(body) { :global(body) {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.section-label { .section-label {
font-family: "Plus Jakarta Sans", sans-serif; font-family: var(--font-manrope);
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.15em; letter-spacing: 0.15em;
@@ -256,7 +254,7 @@ export default function FeaturesAndStats() {
} }
.section-title { .section-title {
font-family: "Cormorant Garamond", serif; font-family: var(--font-fraunces);
font-size: clamp(2rem, 5vw, 3rem); font-size: clamp(2rem, 5vw, 3rem);
font-weight: 600; font-weight: 600;
color: #1a4d2e; color: #1a4d2e;
@@ -265,7 +263,7 @@ export default function FeaturesAndStats() {
} }
.section-subtitle { .section-subtitle {
font-family: "Plus Jakarta Sans", sans-serif; font-family: var(--font-manrope);
font-size: 1.125rem; font-size: 1.125rem;
color: #4a4a4a; color: #4a4a4a;
line-height: 1.6; line-height: 1.6;
@@ -304,7 +302,7 @@ export default function FeaturesAndStats() {
} }
.feature-title { .feature-title {
font-family: "Cormorant Garamond", serif; font-family: var(--font-fraunces);
font-size: 1.375rem; font-size: 1.375rem;
font-weight: 600; font-weight: 600;
color: #1a4d2e; color: #1a4d2e;
@@ -326,7 +324,7 @@ export default function FeaturesAndStats() {
} }
.stat-number { .stat-number {
font-family: "Cormorant Garamond", serif; font-family: var(--font-fraunces);
font-size: clamp(2.5rem, 5vw, 4rem); font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700; font-weight: 700;
color: #1a4d2e; color: #1a4d2e;
@@ -570,7 +568,7 @@ export default function FeaturesAndStats() {
<span <span
style={{ style={{
display: "block", display: "block",
fontFamily: "'Plus Jakarta Sans', sans-serif", fontFamily: "var(--font-manrope)",
fontSize: "0.75rem", fontSize: "0.75rem",
fontWeight: 600, fontWeight: 600,
letterSpacing: "0.15em", letterSpacing: "0.15em",
@@ -583,7 +581,7 @@ export default function FeaturesAndStats() {
</span> </span>
<h2 <h2
style={{ style={{
fontFamily: "'Cormorant Garamond', serif", fontFamily: "var(--font-fraunces)",
fontSize: "clamp(2rem, 4vw, 2.75rem)", fontSize: "clamp(2rem, 4vw, 2.75rem)",
fontWeight: 600, fontWeight: 600,
color: "#faf8f5", color: "#faf8f5",
@@ -620,7 +618,7 @@ export default function FeaturesAndStats() {
> >
<div <div
style={{ style={{
fontFamily: "'Cormorant Garamond', serif", fontFamily: "var(--font-fraunces)",
fontSize: "clamp(2.25rem, 4.5vw, 3.75rem)", fontSize: "clamp(2.25rem, 4.5vw, 3.75rem)",
fontWeight: 700, fontWeight: 700,
color: "#faf8f5", color: "#faf8f5",
@@ -660,7 +658,7 @@ export default function FeaturesAndStats() {
</div> </div>
<p <p
style={{ style={{
fontFamily: "'Plus Jakarta Sans', sans-serif", fontFamily: "var(--font-manrope)",
fontSize: "0.875rem", fontSize: "0.875rem",
fontWeight: 500, fontWeight: 500,
color: "#6b8f71", color: "#6b8f71",
src/components/landing/HeroSection.tsx
+16 -16
View File
@@ -310,7 +310,7 @@ export default function HeroSection() {
<h1 <h1
className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-bold leading-[0.9] tracking-tighter" className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-bold leading-[0.9] tracking-tighter"
style={{ style={{
fontFamily: "'Playfair Display', 'Georgia', serif", fontFamily: "var(--font-fraunces)",
color: "#1a1a1a", color: "#1a1a1a",
}} }}
> >
@@ -323,7 +323,7 @@ export default function HeroSection() {
<p <p
className="hero-reveal hero-subtitle text-lg sm:text-xl md:text-2xl max-w-xl leading-relaxed" className="hero-reveal hero-subtitle text-lg sm:text-xl md:text-2xl max-w-xl leading-relaxed"
style={{ style={{
fontFamily: "'DM Sans', sans-serif", fontFamily: "var(--font-manrope)",
color: "#4a6d56", color: "#4a6d56",
fontWeight: 400, fontWeight: 400,
}} }}
@@ -393,7 +393,7 @@ export default function HeroSection() {
<div <div
className="text-2xl sm:text-3xl lg:text-4xl font-bold" className="text-2xl sm:text-3xl lg:text-4xl font-bold"
style={{ style={{
fontFamily: "'Playfair Display', serif", fontFamily: "var(--font-fraunces)",
color: "#1a4d2e", color: "#1a4d2e",
}} }}
> >
@@ -611,7 +611,7 @@ export default function HeroSection() {
<div className="mb-8 reveal-scale"> <div className="mb-8 reveal-scale">
<span <span
className="inline-block text-xs font-bold tracking-[0.3em] uppercase" className="inline-block text-xs font-bold tracking-[0.3em] uppercase"
style={{ color: "#c97a3e", fontFamily: "'DM Sans', sans-serif" }} style={{ color: "#c97a3e", fontFamily: "var(--font-manrope)" }}
> >
The Challenge The Challenge
</span> </span>
@@ -621,7 +621,7 @@ export default function HeroSection() {
<h2 <h2
className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-8" className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-8"
style={{ style={{
fontFamily: "'Playfair Display', serif", fontFamily: "var(--font-fraunces)",
color: "#faf8f5", color: "#faf8f5",
}} }}
> >
@@ -636,7 +636,7 @@ export default function HeroSection() {
className="text-xl max-w-2xl mx-auto" className="text-xl max-w-2xl mx-auto"
style={{ style={{
color: "#86868b", color: "#86868b",
fontFamily: "'DM Sans', sans-serif", fontFamily: "var(--font-manrope)",
lineHeight: 1.7, lineHeight: 1.7,
}} }}
> >
@@ -669,14 +669,14 @@ export default function HeroSection() {
<div className="reveal-scale text-center mb-20"> <div className="reveal-scale text-center mb-20">
<span <span
className="inline-block text-xs font-bold tracking-[0.2em] uppercase mb-6" className="inline-block text-xs font-bold tracking-[0.2em] uppercase mb-6"
style={{ color: "#6b8f71", fontFamily: "'DM Sans', sans-serif" }} style={{ color: "#6b8f71", fontFamily: "var(--font-manrope)" }}
> >
Platform Features Platform Features
</span> </span>
<h2 <h2
className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight" className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight"
style={{ style={{
fontFamily: "'Playfair Display', serif", fontFamily: "var(--font-fraunces)",
color: "#1a4d2e", color: "#1a4d2e",
}} }}
> >
@@ -792,7 +792,7 @@ export default function HeroSection() {
<h3 <h3
className="text-2xl font-bold mb-4" className="text-2xl font-bold mb-4"
style={{ style={{
fontFamily: "'Playfair Display', serif", fontFamily: "var(--font-fraunces)",
color: "#1a4d2e", color: "#1a4d2e",
}} }}
> >
@@ -802,7 +802,7 @@ export default function HeroSection() {
className="text-base leading-relaxed" className="text-base leading-relaxed"
style={{ style={{
color: "#555", color: "#555",
fontFamily: "'DM Sans', sans-serif", fontFamily: "var(--font-manrope)",
}} }}
> >
{feature.description} {feature.description}
@@ -845,7 +845,7 @@ export default function HeroSection() {
<div className="text-center mb-16 reveal-scale"> <div className="text-center mb-16 reveal-scale">
<span <span
className="inline-block text-xs font-bold tracking-[0.2em] uppercase" className="inline-block text-xs font-bold tracking-[0.2em] uppercase"
style={{ color: "#c97a3e", fontFamily: "'DM Sans', sans-serif" }} style={{ color: "#c97a3e", fontFamily: "var(--font-manrope)" }}
> >
Our Impact Our Impact
</span> </span>
@@ -863,7 +863,7 @@ export default function HeroSection() {
<div <div
className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-4" className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-4"
style={{ style={{
fontFamily: "'Playfair Display', serif", fontFamily: "var(--font-fraunces)",
color: "#faf8f5", color: "#faf8f5",
lineHeight: 1, lineHeight: 1,
}} }}
@@ -874,7 +874,7 @@ export default function HeroSection() {
</div> </div>
<p <p
className="text-base font-medium" className="text-base font-medium"
style={{ color: "#6b8f71", fontFamily: "'DM Sans', sans-serif" }} style={{ color: "#6b8f71", fontFamily: "var(--font-manrope)" }}
> >
{stat.label} {stat.label}
</p> </p>
@@ -914,7 +914,7 @@ export default function HeroSection() {
style={{ style={{
color: "#c97a3e", color: "#c97a3e",
background: "rgba(201, 122, 62, 0.1)", background: "rgba(201, 122, 62, 0.1)",
fontFamily: "'DM Sans', sans-serif", fontFamily: "var(--font-manrope)",
}} }}
> >
Get Started Today Get Started Today
@@ -926,7 +926,7 @@ export default function HeroSection() {
<h2 <h2
className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight mb-8" className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight mb-8"
style={{ style={{
fontFamily: "'Playfair Display', serif", fontFamily: "var(--font-fraunces)",
color: "#1a4d2e", color: "#1a4d2e",
}} }}
> >
@@ -941,7 +941,7 @@ export default function HeroSection() {
className="text-xl mb-12 max-w-xl mx-auto" className="text-xl mb-12 max-w-xl mx-auto"
style={{ style={{
color: "#555", color: "#555",
fontFamily: "'DM Sans', sans-serif", fontFamily: "var(--font-manrope)",
}} }}
> >
Join hundreds of farms already using Route Commerce to deliver fresher produce faster. Join hundreds of farms already using Route Commerce to deliver fresher produce faster.
src/components/landing/LandingPageWrapper.tsx
+13 -17
View File
@@ -55,7 +55,7 @@ export function Header({ className = "" }: HeaderProps) {
<span <span
className="text-xl font-semibold tracking-tight" className="text-xl font-semibold tracking-tight"
style={{ style={{
fontFamily: "'Cormorant Garamond', Georgia, serif", fontFamily: "var(--font-fraunces)",
color: "#1a1a1a", color: "#1a1a1a",
}} }}
> >
@@ -71,7 +71,7 @@ export function Header({ className = "" }: HeaderProps) {
href={link.href} href={link.href}
className="text-sm font-medium transition-colors hover:opacity-70" className="text-sm font-medium transition-colors hover:opacity-70"
style={{ style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", fontFamily: "var(--font-manrope)",
color: "#1a1a1a", color: "#1a1a1a",
}} }}
> >
@@ -86,7 +86,7 @@ export function Header({ className = "" }: HeaderProps) {
href="/login" href="/login"
className="text-sm font-medium transition-opacity hover:opacity-70" className="text-sm font-medium transition-opacity hover:opacity-70"
style={{ style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", fontFamily: "var(--font-manrope)",
color: "#1a4d2e", color: "#1a4d2e",
}} }}
> >
@@ -96,7 +96,7 @@ export function Header({ className = "" }: HeaderProps) {
href="/admin" href="/admin"
className="px-5 py-2.5 rounded-full text-sm font-semibold transition-all hover:opacity-90 active:scale-95" className="px-5 py-2.5 rounded-full text-sm font-semibold transition-all hover:opacity-90 active:scale-95"
style={{ style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", fontFamily: "var(--font-manrope)",
background: "rgba(26, 77, 46, 0.9)", background: "rgba(26, 77, 46, 0.9)",
backdropFilter: "blur(10px)", backdropFilter: "blur(10px)",
WebkitBackdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)",
@@ -160,7 +160,7 @@ export function Header({ className = "" }: HeaderProps) {
href={link.href} href={link.href}
className="px-4 py-3 text-base font-medium rounded-lg transition-colors hover:bg-[#6b8f71]/10" className="px-4 py-3 text-base font-medium rounded-lg transition-colors hover:bg-[#6b8f71]/10"
style={{ style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", fontFamily: "var(--font-manrope)",
color: "#1a1a1a", color: "#1a1a1a",
}} }}
onClick={() => setMobileMenuOpen(false)} onClick={() => setMobileMenuOpen(false)}
@@ -176,7 +176,7 @@ export function Header({ className = "" }: HeaderProps) {
href="/login" href="/login"
className="py-3 text-base font-medium" className="py-3 text-base font-medium"
style={{ style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", fontFamily: "var(--font-manrope)",
color: "#1a4d2e", color: "#1a4d2e",
}} }}
> >
@@ -186,7 +186,7 @@ export function Header({ className = "" }: HeaderProps) {
href="/admin" href="/admin"
className="py-3 rounded-full text-base font-semibold text-center" className="py-3 rounded-full text-base font-semibold text-center"
style={{ style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", fontFamily: "var(--font-manrope)",
background: "rgba(26, 77, 46, 0.9)", background: "rgba(26, 77, 46, 0.9)",
backdropFilter: "blur(10px)", backdropFilter: "blur(10px)",
border: "1px solid rgba(255, 255, 255, 0.2)", border: "1px solid rgba(255, 255, 255, 0.2)",
@@ -252,7 +252,7 @@ export function Footer({ className = "" }: FooterProps) {
<span <span
className="text-sm font-medium tracking-tight" className="text-sm font-medium tracking-tight"
style={{ style={{
fontFamily: "'Cormorant Garamond', Georgia, serif", fontFamily: "var(--font-fraunces)",
color: "#1a1a1a", color: "#1a1a1a",
}} }}
> >
@@ -262,7 +262,7 @@ export function Footer({ className = "" }: FooterProps) {
<span <span
className="text-xs mt-1" className="text-xs mt-1"
style={{ style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", fontFamily: "var(--font-manrope)",
color: "#9a9590", color: "#9a9590",
}} }}
> >
@@ -278,7 +278,7 @@ export function Footer({ className = "" }: FooterProps) {
href={link.href} href={link.href}
className="text-xs font-medium uppercase tracking-wider transition-colors hover:text-[#1a4d2e]" className="text-xs font-medium uppercase tracking-wider transition-colors hover:text-[#1a4d2e]"
style={{ style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", fontFamily: "var(--font-manrope)",
color: "#6b8f71", color: "#6b8f71",
letterSpacing: "0.08em", letterSpacing: "0.08em",
}} }}
@@ -292,7 +292,7 @@ export function Footer({ className = "" }: FooterProps) {
<span <span
className="text-xs" className="text-xs"
style={{ style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", fontFamily: "var(--font-manrope)",
color: "#b5b0a8", color: "#b5b0a8",
}} }}
> >
@@ -319,15 +319,11 @@ interface WrapperProps {
export function LandingPageWrapper({ children, className = "" }: WrapperProps) { export function LandingPageWrapper({ children, className = "" }: WrapperProps) {
return ( return (
<> <>
{/* Google Fonts Import */} {/* Fonts loaded via next/font in app/layout.tsx — no external @import needed */}
<style jsx global>{`
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");
`}</style>
<div <div
className={`min-h-screen flex flex-col ${className}`} className={`min-h-screen flex flex-col ${className}`}
style={{ style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", fontFamily: "var(--font-manrope)",
scrollBehavior: "smooth", scrollBehavior: "smooth",
}} }}
> >
src/components/landing/TestimonialsAndCTA.tsx
+6 -8
View File
@@ -59,7 +59,7 @@ export default function TestimonialsAndCTA() {
<section <section
style={{ style={{
background: "linear-gradient(180deg, #faf8f5 0%, #f5f2ed 100%)", background: "linear-gradient(180deg, #faf8f5 0%, #f5f2ed 100%)",
fontFamily: "'Plus Jakarta Sans', sans-serif", fontFamily: "var(--font-manrope)",
}} }}
> >
{/* Decorative botanical accent */} {/* Decorative botanical accent */}
@@ -132,7 +132,7 @@ export default function TestimonialsAndCTA() {
</span> </span>
<h2 <h2
style={{ style={{
fontFamily: "'Cormorant Garamond', serif", fontFamily: "var(--font-fraunces)",
fontSize: "clamp(2.5rem, 5vw, 3.5rem)", fontSize: "clamp(2.5rem, 5vw, 3.5rem)",
fontWeight: 600, fontWeight: 600,
lineHeight: 1.1, lineHeight: 1.1,
@@ -193,7 +193,7 @@ export default function TestimonialsAndCTA() {
top: "-8px", top: "-8px",
right: "20px", right: "20px",
fontSize: "80px", fontSize: "80px",
fontFamily: "'Cormorant Garamond', serif", fontFamily: "var(--font-fraunces)",
color: "rgba(26, 77, 46, 0.06)", color: "rgba(26, 77, 46, 0.06)",
lineHeight: 1, lineHeight: 1,
pointerEvents: "none", pointerEvents: "none",
@@ -295,7 +295,7 @@ export default function TestimonialsAndCTA() {
<div key={i} style={{ textAlign: "center" }}> <div key={i} style={{ textAlign: "center" }}>
<div <div
style={{ style={{
fontFamily: "'Cormorant Garamond', serif", fontFamily: "var(--font-fraunces)",
fontSize: "2.5rem", fontSize: "2.5rem",
fontWeight: 600, fontWeight: 600,
color: "#1a4d2e", color: "#1a4d2e",
@@ -326,7 +326,7 @@ export default function TestimonialsAndCTA() {
background: "linear-gradient(180deg, #f5f2ed 0%, #faf8f5 50%, #faf8f5 100%)", background: "linear-gradient(180deg, #f5f2ed 0%, #faf8f5 50%, #faf8f5 100%)",
position: "relative", position: "relative",
overflow: "hidden", overflow: "hidden",
fontFamily: "'Plus Jakarta Sans', sans-serif", fontFamily: "var(--font-manrope)",
}} }}
> >
{/* Decorative gradient orbs */} {/* Decorative gradient orbs */}
@@ -422,7 +422,7 @@ export default function TestimonialsAndCTA() {
{/* Headline */} {/* Headline */}
<h2 <h2
style={{ style={{
fontFamily: "'Cormorant Garamond', serif", fontFamily: "var(--font-fraunces)",
fontSize: "clamp(2.75rem, 6vw, 4rem)", fontSize: "clamp(2.75rem, 6vw, 4rem)",
fontWeight: 600, fontWeight: 600,
lineHeight: 1.1, lineHeight: 1.1,
@@ -626,8 +626,6 @@ export default function TestimonialsAndCTA() {
</section> </section>
<style jsx>{` <style jsx>{`
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
@keyframes fadeInUp { @keyframes fadeInUp {
from { from {
opacity: 0; opacity: 0;
src/components/layout/SiteHeader.tsx
+6 -11
View File
@@ -47,13 +47,8 @@ export default function SiteHeader() {
borderColor: "rgba(107, 143, 113, 0.15)", borderColor: "rgba(107, 143, 113, 0.15)",
}} }}
> >
{/* Google Fonts */}
<style jsx global>{`
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");
`}</style>
<div className="mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8 py-3 sm:py-4"> <div className="mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
{/* Logo */} {/* Logo — uses Fraunces (loaded via next/font) for a refined serif wordmark */}
<Link href="/" className="flex items-center gap-2.5 group"> <Link href="/" className="flex items-center gap-2.5 group">
<div <div
className="w-9 h-9 rounded-full flex items-center justify-center transition-transform group-hover:scale-105" className="w-9 h-9 rounded-full flex items-center justify-center transition-transform group-hover:scale-105"
@@ -66,7 +61,7 @@ export default function SiteHeader() {
<span <span
className="text-lg sm:text-xl font-semibold tracking-tight" className="text-lg sm:text-xl font-semibold tracking-tight"
style={{ style={{
fontFamily: "'Cormorant Garamond', Georgia, serif", fontFamily: "var(--font-fraunces)",
color: "#1a1a1a", color: "#1a1a1a",
}} }}
> >
@@ -74,7 +69,7 @@ export default function SiteHeader() {
</span> </span>
</Link> </Link>
{/* Navigation */} {/* Navigation — uses Manrope (loaded via next/font) for consistent small caps */}
<nav className="flex items-center gap-5 sm:gap-6"> <nav className="flex items-center gap-5 sm:gap-6">
{/* Brand quick links */} {/* Brand quick links */}
{(!isAdminRoute || isStorefrontRoute) && ( {(!isAdminRoute || isStorefrontRoute) && (
@@ -83,7 +78,7 @@ export default function SiteHeader() {
href="/tuxedo" href="/tuxedo"
className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70" className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
style={{ style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", fontFamily: "var(--font-manrope)",
color: "#6b8f71", color: "#6b8f71",
letterSpacing: "0.06em", letterSpacing: "0.06em",
}} }}
@@ -94,7 +89,7 @@ export default function SiteHeader() {
href="/indian-river-direct" href="/indian-river-direct"
className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70" className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
style={{ style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", fontFamily: "var(--font-manrope)",
color: "#6b8f71", color: "#6b8f71",
letterSpacing: "0.06em", letterSpacing: "0.06em",
}} }}
@@ -110,7 +105,7 @@ export default function SiteHeader() {
href="/admin" href="/admin"
className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70" className="text-xs sm:text-sm font-medium uppercase tracking-wider transition-colors hover:opacity-70"
style={{ style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", fontFamily: "var(--font-manrope)",
color: "#6b8f71", color: "#6b8f71",
letterSpacing: "0.06em", letterSpacing: "0.06em",
}} }}
src/components/marketing/WaitlistForm.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ export default function WaitlistForm({ className = "", onSuccess }: WaitlistForm
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg> </svg>
</div> </div>
<h3 className="text-2xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}> <h3 className="text-2xl font-bold text-[#1a1a1a] mb-2" style={{ fontFamily: "var(--font-fraunces)" }}>
You&apos;re on the list! You&apos;re on the list!
</h3> </h3>
<p className="text-[#6b8f71]"> <p className="text-[#6b8f71]">
src/styles/admin-design-system.css
+102 -29
View File
@@ -381,10 +381,10 @@
font-feature-settings: "ss01", "ss02"; font-feature-settings: "ss01", "ss02";
} }
.font-sans-ui { .font-sans-ui {
font-family: var(--font-geist), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-family: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
} }
.font-mono-ui { .font-mono-ui {
font-family: var(--font-jetbrains-mono), ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-family: var(--font-fragment-mono), ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-feature-settings: "ss01", "tnum"; font-feature-settings: "ss01", "tnum";
} }
@@ -406,7 +406,7 @@
/* Eyebrow — small caps tracking label for editorial headers */ /* Eyebrow — small caps tracking label for editorial headers */
.ha-eyebrow { .ha-eyebrow {
font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif; font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
font-size: 0.625rem; /* 10px */ font-size: 0.625rem; /* 10px */
font-weight: 600; font-weight: 600;
letter-spacing: 0.18em; letter-spacing: 0.18em;
@@ -416,7 +416,7 @@
/* Tabular numerals for prices/dates */ /* Tabular numerals for prices/dates */
.ha-num { .ha-num {
font-family: var(--font-jetbrains-mono), ui-monospace, monospace; font-family: var(--font-fragment-mono), ui-monospace, monospace;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
font-feature-settings: "tnum", "ss01"; font-feature-settings: "tnum", "ss01";
} }
@@ -465,7 +465,7 @@
height: 2.25rem; /* 36px */ height: 2.25rem; /* 36px */
padding: 0 0.75rem; padding: 0 0.75rem;
font-size: 0.875rem; /* 14px */ font-size: 0.875rem; /* 14px */
font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif; font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
color: var(--admin-text-primary); color: var(--admin-text-primary);
background: rgba(0, 0, 0, 0.02); background: rgba(0, 0, 0, 0.02);
border: 1px solid var(--admin-border); border: 1px solid var(--admin-border);
@@ -488,11 +488,84 @@
opacity: 0.7; opacity: 0.7;
} }
.ha-field-input-mono { .ha-field-input-mono {
font-family: var(--font-jetbrains-mono), ui-monospace, monospace; font-family: var(--font-fragment-mono), ui-monospace, monospace;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
font-size: 0.8125rem; font-size: 0.8125rem;
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.ha-field-textarea {
width: 100%;
min-height: 4.5rem;
padding: 0.625rem 0.75rem;
font-size: 0.875rem;
font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
line-height: 1.5;
color: var(--admin-text-primary);
background: rgba(0, 0, 0, 0.02);
border: 1px solid var(--admin-border);
border-radius: 0.5rem;
outline: none;
resize: vertical;
transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ha-field-textarea:hover {
border-color: rgba(22, 163, 74, 0.4);
background: rgba(22, 163, 74, 0.015);
}
.ha-field-textarea:focus,
.ha-field-textarea:focus-visible {
border-color: var(--admin-accent);
background: #ffffff;
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
.ha-field-textarea::placeholder {
color: var(--admin-text-muted);
opacity: 0.7;
}
/* Subtle scrollbar inside admin scroll containers */
.ha-scroll {
scrollbar-width: thin;
scrollbar-color: var(--admin-border) transparent;
}
.ha-scroll::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.ha-scroll::-webkit-scrollbar-track {
background: transparent;
}
.ha-scroll::-webkit-scrollbar-thumb {
background: var(--admin-border);
border-radius: 3px;
}
.ha-scroll::-webkit-scrollbar-thumb:hover {
background: var(--admin-text-muted);
}
/* Skeleton placeholder — soft pulse for loading rows in admin tables */
.ha-skeleton {
display: block;
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.04) 0%,
rgba(0, 0, 0, 0.07) 50%,
rgba(0, 0, 0, 0.04) 100%
);
background-size: 200% 100%;
animation: ha-skeleton-pulse 1.4s ease-in-out infinite;
border-radius: 0.375rem;
}
@keyframes ha-skeleton-pulse {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
.ha-skeleton {
animation: none;
background: rgba(0, 0, 0, 0.05);
}
}
/* Segmented control for status (replaces giant buttons) */ /* Segmented control for status (replaces giant buttons) */
.ha-segment { .ha-segment {
@@ -580,7 +653,7 @@
min-width: 1.125rem; min-width: 1.125rem;
height: 1.125rem; height: 1.125rem;
padding: 0 0.25rem; padding: 0 0.25rem;
font-family: var(--font-jetbrains-mono), monospace; font-family: var(--font-fragment-mono), monospace;
font-size: 0.625rem; font-size: 0.625rem;
font-weight: 600; font-weight: 600;
color: var(--admin-text-secondary); color: var(--admin-text-secondary);
@@ -599,7 +672,7 @@
padding: 0 1rem; padding: 0 1rem;
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 600; font-weight: 600;
font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif; font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
color: #ffffff; color: #ffffff;
background: linear-gradient(180deg, #16a34a 0%, #15803d 100%); background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
border: 1px solid #14532d; border: 1px solid #14532d;
@@ -639,7 +712,7 @@
padding: 0 0.75rem; padding: 0 0.75rem;
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 600; font-weight: 600;
font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif; font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
color: var(--admin-text-secondary); color: var(--admin-text-secondary);
background: transparent; background: transparent;
border: 1px solid transparent; border: 1px solid transparent;
@@ -701,7 +774,7 @@
height: 2.25rem; height: 2.25rem;
padding: 0 0.75rem 0 2.25rem; padding: 0 0.75rem 0 2.25rem;
font-size: 0.8125rem; font-size: 0.8125rem;
font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif; font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
color: var(--admin-text-primary); color: var(--admin-text-primary);
background: rgba(0, 0, 0, 0.02); background: rgba(0, 0, 0, 0.02);
border: 1px solid var(--admin-border); border: 1px solid var(--admin-border);
@@ -764,7 +837,7 @@
border-color: var(--admin-accent); border-color: var(--admin-accent);
} }
.ha-picker-chip-count { .ha-picker-chip-count {
font-family: var(--font-jetbrains-mono), monospace; font-family: var(--font-fragment-mono), monospace;
font-size: 0.625rem; font-size: 0.625rem;
font-weight: 600; font-weight: 600;
padding: 0.0625rem 0.3rem; padding: 0.0625rem 0.3rem;
@@ -898,7 +971,7 @@
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.ha-product-card-price { .ha-product-card-price {
font-family: var(--font-jetbrains-mono), monospace; font-family: var(--font-fragment-mono), monospace;
font-size: 0.6875rem; font-size: 0.6875rem;
font-weight: 600; font-weight: 600;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
@@ -1061,7 +1134,7 @@
border-bottom: none; border-bottom: none;
} }
.ha-row-num { .ha-row-num {
font-family: var(--font-jetbrains-mono), monospace; font-family: var(--font-fragment-mono), monospace;
font-size: 0.625rem; font-size: 0.625rem;
color: var(--admin-text-muted); color: var(--admin-text-muted);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
@@ -1103,7 +1176,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
font-family: var(--font-geist), sans-serif; font-family: var(--font-manrope), sans-serif;
font-size: 0.625rem; font-size: 0.625rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.18em; letter-spacing: 0.18em;
@@ -1135,7 +1208,7 @@
font-weight: 500; font-weight: 500;
} }
.ha-calendar-title-year { .ha-calendar-title-year {
font-family: var(--font-jetbrains-mono), monospace; font-family: var(--font-fragment-mono), monospace;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
color: var(--admin-text-muted); color: var(--admin-text-muted);
@@ -1179,7 +1252,7 @@
padding: 0 0.75rem; padding: 0 0.75rem;
background: var(--admin-text-primary); background: var(--admin-text-primary);
color: var(--admin-bg); color: var(--admin-bg);
font-family: var(--font-geist), sans-serif; font-family: var(--font-manrope), sans-serif;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
@@ -1201,7 +1274,7 @@
} }
.ha-calendar-dow-cell { .ha-calendar-dow-cell {
padding: 0.625rem 0.75rem; padding: 0.625rem 0.75rem;
font-family: var(--font-geist), sans-serif; font-family: var(--font-manrope), sans-serif;
font-size: 0.5625rem; font-size: 0.5625rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.16em; letter-spacing: 0.16em;
@@ -1272,7 +1345,7 @@
} }
.ha-calendar-daynum { .ha-calendar-daynum {
font-family: var(--font-jetbrains-mono), monospace; font-family: var(--font-fragment-mono), monospace;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
color: var(--admin-text-secondary); color: var(--admin-text-secondary);
@@ -1317,7 +1390,7 @@
width: 100%; width: 100%;
min-width: 0; min-width: 0;
color: var(--admin-text-primary); color: var(--admin-text-primary);
font-family: var(--font-geist), sans-serif; font-family: var(--font-manrope), sans-serif;
} }
.ha-calendar-event:hover { .ha-calendar-event:hover {
background: rgba(22, 163, 74, 0.14); background: rgba(22, 163, 74, 0.14);
@@ -1343,7 +1416,7 @@
background: rgba(0, 0, 0, 0.06); background: rgba(0, 0, 0, 0.06);
} }
.ha-calendar-event-time { .ha-calendar-event-time {
font-family: var(--font-jetbrains-mono), monospace; font-family: var(--font-fragment-mono), monospace;
font-size: 0.5625rem; font-size: 0.5625rem;
font-weight: 600; font-weight: 600;
color: var(--admin-text-secondary); color: var(--admin-text-secondary);
@@ -1365,7 +1438,7 @@
font-size: 0.625rem; font-size: 0.625rem;
color: var(--admin-text-muted); color: var(--admin-text-muted);
font-weight: 600; font-weight: 600;
font-family: var(--font-jetbrains-mono), monospace; font-family: var(--font-fragment-mono), monospace;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
padding: 0.125rem 0.25rem; padding: 0.125rem 0.25rem;
text-align: left; text-align: left;
@@ -1431,7 +1504,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
font-family: var(--font-geist), sans-serif; font-family: var(--font-manrope), sans-serif;
font-size: 0.625rem; font-size: 0.625rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.14em; letter-spacing: 0.14em;
@@ -1474,7 +1547,7 @@
color: var(--admin-text-muted); color: var(--admin-text-muted);
} }
.ha-event-popover-field-value { .ha-event-popover-field-value {
font-family: var(--font-jetbrains-mono), monospace; font-family: var(--font-fragment-mono), monospace;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
color: var(--admin-text-primary); color: var(--admin-text-primary);
@@ -1498,7 +1571,7 @@
padding: 0 0.625rem; padding: 0 0.625rem;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
font-family: var(--font-geist), sans-serif; font-family: var(--font-manrope), sans-serif;
background: #ffffff; background: #ffffff;
color: var(--admin-text-primary); color: var(--admin-text-primary);
border: 1px solid var(--admin-border); border: 1px solid var(--admin-border);
@@ -1569,7 +1642,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
font-family: var(--font-geist), sans-serif; font-family: var(--font-manrope), sans-serif;
font-size: 0.625rem; font-size: 0.625rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.18em; letter-spacing: 0.18em;
@@ -1688,7 +1761,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-family: var(--font-jetbrains-mono), monospace; font-family: var(--font-fragment-mono), monospace;
font-size: 0.6875rem; font-size: 0.6875rem;
font-weight: 700; font-weight: 700;
color: var(--admin-accent-text); color: var(--admin-accent-text);
@@ -1721,7 +1794,7 @@
padding-top: 0.125rem; padding-top: 0.125rem;
} }
.ha-route-stop-time { .ha-route-stop-time {
font-family: var(--font-jetbrains-mono), monospace; font-family: var(--font-fragment-mono), monospace;
font-size: 0.6875rem; font-size: 0.6875rem;
font-weight: 600; font-weight: 600;
color: var(--admin-text-muted); color: var(--admin-text-muted);
@@ -1778,7 +1851,7 @@
padding: 0 0.5rem; padding: 0 0.5rem;
font-size: 0.6875rem; font-size: 0.6875rem;
font-weight: 600; font-weight: 600;
font-family: var(--font-geist), sans-serif; font-family: var(--font-manrope), sans-serif;
background: transparent; background: transparent;
color: var(--admin-text-secondary); color: var(--admin-text-secondary);
border: 1px solid var(--admin-border); border: 1px solid var(--admin-border);
@@ -1844,7 +1917,7 @@
padding: 0 0.75rem; padding: 0 0.75rem;
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 600; font-weight: 600;
font-family: var(--font-geist), sans-serif; font-family: var(--font-manrope), sans-serif;
color: var(--admin-text-secondary); color: var(--admin-text-secondary);
background: transparent; background: transparent;
border: none; border: none;