polish: consolidate typography to next/font variables, add atelier utility classes
Deploy to route.crispygoat.com / deploy (push) Successful in 4m33s
Deploy to route.crispygoat.com / deploy (push) Successful in 4m33s
- 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
@@ -381,10 +381,10 @@
|
||||
font-feature-settings: "ss01", "ss02";
|
||||
}
|
||||
.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-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";
|
||||
}
|
||||
|
||||
@@ -406,7 +406,7 @@
|
||||
|
||||
/* Eyebrow — small caps tracking label for editorial headers */
|
||||
.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-weight: 600;
|
||||
letter-spacing: 0.18em;
|
||||
@@ -416,7 +416,7 @@
|
||||
|
||||
/* Tabular numerals for prices/dates */
|
||||
.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-feature-settings: "tnum", "ss01";
|
||||
}
|
||||
@@ -465,7 +465,7 @@
|
||||
height: 2.25rem; /* 36px */
|
||||
padding: 0 0.75rem;
|
||||
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);
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border: 1px solid var(--admin-border);
|
||||
@@ -488,11 +488,84 @@
|
||||
opacity: 0.7;
|
||||
}
|
||||
.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-size: 0.8125rem;
|
||||
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) */
|
||||
.ha-segment {
|
||||
@@ -580,7 +653,7 @@
|
||||
min-width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
padding: 0 0.25rem;
|
||||
font-family: var(--font-jetbrains-mono), monospace;
|
||||
font-family: var(--font-fragment-mono), monospace;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
color: var(--admin-text-secondary);
|
||||
@@ -599,7 +672,7 @@
|
||||
padding: 0 1rem;
|
||||
font-size: 0.8125rem;
|
||||
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;
|
||||
background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
|
||||
border: 1px solid #14532d;
|
||||
@@ -639,7 +712,7 @@
|
||||
padding: 0 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
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);
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
@@ -701,7 +774,7 @@
|
||||
height: 2.25rem;
|
||||
padding: 0 0.75rem 0 2.25rem;
|
||||
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);
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border: 1px solid var(--admin-border);
|
||||
@@ -764,7 +837,7 @@
|
||||
border-color: var(--admin-accent);
|
||||
}
|
||||
.ha-picker-chip-count {
|
||||
font-family: var(--font-jetbrains-mono), monospace;
|
||||
font-family: var(--font-fragment-mono), monospace;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
padding: 0.0625rem 0.3rem;
|
||||
@@ -898,7 +971,7 @@
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.ha-product-card-price {
|
||||
font-family: var(--font-jetbrains-mono), monospace;
|
||||
font-family: var(--font-fragment-mono), monospace;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
@@ -1061,7 +1134,7 @@
|
||||
border-bottom: none;
|
||||
}
|
||||
.ha-row-num {
|
||||
font-family: var(--font-jetbrains-mono), monospace;
|
||||
font-family: var(--font-fragment-mono), monospace;
|
||||
font-size: 0.625rem;
|
||||
color: var(--admin-text-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
@@ -1103,7 +1176,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-family: var(--font-geist), sans-serif;
|
||||
font-family: var(--font-manrope), sans-serif;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.18em;
|
||||
@@ -1135,7 +1208,7 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
.ha-calendar-title-year {
|
||||
font-family: var(--font-jetbrains-mono), monospace;
|
||||
font-family: var(--font-fragment-mono), monospace;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--admin-text-muted);
|
||||
@@ -1179,7 +1252,7 @@
|
||||
padding: 0 0.75rem;
|
||||
background: var(--admin-text-primary);
|
||||
color: var(--admin-bg);
|
||||
font-family: var(--font-geist), sans-serif;
|
||||
font-family: var(--font-manrope), sans-serif;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
@@ -1201,7 +1274,7 @@
|
||||
}
|
||||
.ha-calendar-dow-cell {
|
||||
padding: 0.625rem 0.75rem;
|
||||
font-family: var(--font-geist), sans-serif;
|
||||
font-family: var(--font-manrope), sans-serif;
|
||||
font-size: 0.5625rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.16em;
|
||||
@@ -1272,7 +1345,7 @@
|
||||
}
|
||||
|
||||
.ha-calendar-daynum {
|
||||
font-family: var(--font-jetbrains-mono), monospace;
|
||||
font-family: var(--font-fragment-mono), monospace;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--admin-text-secondary);
|
||||
@@ -1317,7 +1390,7 @@
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
color: var(--admin-text-primary);
|
||||
font-family: var(--font-geist), sans-serif;
|
||||
font-family: var(--font-manrope), sans-serif;
|
||||
}
|
||||
.ha-calendar-event:hover {
|
||||
background: rgba(22, 163, 74, 0.14);
|
||||
@@ -1343,7 +1416,7 @@
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.ha-calendar-event-time {
|
||||
font-family: var(--font-jetbrains-mono), monospace;
|
||||
font-family: var(--font-fragment-mono), monospace;
|
||||
font-size: 0.5625rem;
|
||||
font-weight: 600;
|
||||
color: var(--admin-text-secondary);
|
||||
@@ -1365,7 +1438,7 @@
|
||||
font-size: 0.625rem;
|
||||
color: var(--admin-text-muted);
|
||||
font-weight: 600;
|
||||
font-family: var(--font-jetbrains-mono), monospace;
|
||||
font-family: var(--font-fragment-mono), monospace;
|
||||
font-variant-numeric: tabular-nums;
|
||||
padding: 0.125rem 0.25rem;
|
||||
text-align: left;
|
||||
@@ -1431,7 +1504,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-family: var(--font-geist), sans-serif;
|
||||
font-family: var(--font-manrope), sans-serif;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
@@ -1474,7 +1547,7 @@
|
||||
color: var(--admin-text-muted);
|
||||
}
|
||||
.ha-event-popover-field-value {
|
||||
font-family: var(--font-jetbrains-mono), monospace;
|
||||
font-family: var(--font-fragment-mono), monospace;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--admin-text-primary);
|
||||
@@ -1498,7 +1571,7 @@
|
||||
padding: 0 0.625rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-geist), sans-serif;
|
||||
font-family: var(--font-manrope), sans-serif;
|
||||
background: #ffffff;
|
||||
color: var(--admin-text-primary);
|
||||
border: 1px solid var(--admin-border);
|
||||
@@ -1569,7 +1642,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-family: var(--font-geist), sans-serif;
|
||||
font-family: var(--font-manrope), sans-serif;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.18em;
|
||||
@@ -1688,7 +1761,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-jetbrains-mono), monospace;
|
||||
font-family: var(--font-fragment-mono), monospace;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
color: var(--admin-accent-text);
|
||||
@@ -1721,7 +1794,7 @@
|
||||
padding-top: 0.125rem;
|
||||
}
|
||||
.ha-route-stop-time {
|
||||
font-family: var(--font-jetbrains-mono), monospace;
|
||||
font-family: var(--font-fragment-mono), monospace;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
color: var(--admin-text-muted);
|
||||
@@ -1778,7 +1851,7 @@
|
||||
padding: 0 0.5rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-geist), sans-serif;
|
||||
font-family: var(--font-manrope), sans-serif;
|
||||
background: transparent;
|
||||
color: var(--admin-text-secondary);
|
||||
border: 1px solid var(--admin-border);
|
||||
@@ -1844,7 +1917,7 @@
|
||||
padding: 0 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-geist), sans-serif;
|
||||
font-family: var(--font-manrope), sans-serif;
|
||||
color: var(--admin-text-secondary);
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
||||
Reference in New Issue
Block a user