{"id":98,"date":"2025-09-11T11:39:15","date_gmt":"2025-09-11T11:39:15","guid":{"rendered":"https:\/\/playground.mushroom-scholars.org\/wpp\/?p=98"},"modified":"2025-09-11T11:39:15","modified_gmt":"2025-09-11T11:39:15","slug":"updated-css-with-claude-inspired-by-21st-dev","status":"publish","type":"post","link":"https:\/\/playground.mushroom-scholars.org\/wpp\/2025\/09\/11\/updated-css-with-claude-inspired-by-21st-dev\/","title":{"rendered":"updated css with claude *inspired by 21st.dev*"},"content":{"rendered":"

\/* Theme Name: Generatepress Child – 21st.dev Inspired Theme URI: https:\/\/mushroom-scholars.org\/htdocs\/wp-content\/themes\/generatepress\/<\/a> Description: Modern Educational Blog Theme – 21st.dev Minimal Design Principles Author: MAT Author URI: https:\/\/mushroom-scholars.org<\/a> Template: generatepress Version: 3.0.0 License: GNU General Public License v2 or later License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html<\/a> Text Domain: generatepresschild *\/<\/p>\n

\/* ================================ 21ST.DEV INSPIRED CSS CUSTOM PROPERTIES ================================ \/ :root { \/<\/em> 21st.dev Light Mode Color System – Always Light *\/ –background: 0 0% 100%; –foreground: 240 10% 3.9%; –card: 0 0% 100%; –card-foreground: 240 10% 3.9%; –popover: 0 0% 100%; –popover-foreground: 240 10% 3.9%; –primary: 240 5.9% 10%; –primary-foreground: 0 0% 98%; –secondary: 240 4.8% 95.9%; –secondary-foreground: 240 5.9% 10%; –muted: 240 4.8% 9.9%; –muted-foreground: 240 3.8% 46.1%; –accent: 240 4.8% 95.9%; –accent-foreground: 240 5.9% 10%; –destructive: 0 84.2% 60.2%; –destructive-foreground: 0 0% 98%; –border: 240 5.9% 90%; –input: 240 5.9% 90%; –ring: 240 5.9% 10%;<\/p>\n

\/* Light mode color helpers *\/ –color-background: hsl(var(–background)); –color-foreground: hsl(var(–foreground)); –color-card: hsl(var(–card)); –color-card-foreground: hsl(var(–card-foreground)); –color-primary: hsl(var(–primary)); –color-primary-foreground: hsl(var(–primary-foreground)); –color-secondary: hsl(var(–secondary)); –color-secondary-foreground: hsl(var(–secondary-foreground)); –color-muted: hsl(var(–muted)); –color-muted-foreground: hsl(var(–muted-foreground)); –color-accent: hsl(var(–accent)); –color-accent-foreground: hsl(var(–accent-foreground)); –color-border: hsl(var(–border)); –color-input: hsl(var(–input)); –color-ring: hsl(var(–ring));<\/p>\n

\/* Enhanced gradient system for modern buttons (like your reference image) *\/ –gradient-border: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%); –gradient-subtle: linear-gradient(135deg, hsl(240 4.8% 95.9% \/ 0.5) 0%, hsl(240 4.8% 95.9% \/ 0.8) 100%);<\/p>\n

\/* 21st.dev Typography – Lightweight and readable *\/ –font-sans: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif; –font-serif: ui-serif, Georgia, Cambria, “Times New Roman”, Times, serif; –font-mono: ui-monospace, SFMono-Regular, “SF Mono”, Menlo, Monaco, Consolas, monospace;<\/p>\n

\/* 21st.dev spacing system – Minimal yet generous \/ –space-1: 0.25rem; \/<\/em> 4px \/ –space-2: 0.5rem; \/<\/em> 8px \/ –space-3: 0.75rem; \/<\/em> 12px \/ –space-4: 1rem; \/<\/em> 16px \/ –space-5: 1.25rem; \/<\/em> 20px \/ –space-6: 1.5rem; \/<\/em> 24px \/ –space-8: 2rem; \/<\/em>32px \/ –space-10: 2.5rem; \/<\/em> 40px \/ –space-12: 3rem; \/<\/em> 48px \/ –space-16: 4rem; \/<\/em> 64px \/ –space-20: 5rem; \/<\/em> 80px \/ –space-24: 6rem; \/<\/em> 96px *\/<\/p>\n

\/* 21st.dev radius system – Minimal and consistent *\/ –radius: 0.5rem; –radius-sm: 0.375rem; –radius-md: 0.5rem; –radius-lg: 0.75rem; –radius-xl: 1rem; –radius-2xl: 1.5rem;<\/p>\n

\/* Lightweight shadows *\/ –shadow-sm: 0 1px 2px 0 rgb(0 0 0 \/ 0.05); –shadow-md: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1); –shadow-lg: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1);<\/p>\n

\/* Smooth micro-interactions *\/ –transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1); –transition-colors: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1); –transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }<\/p>\n

\/* ================================ MODERN RESET & BASE STYLES ================================ *\/ *, *::before, *::after { box-sizing: border-box; }<\/p>\n