/* Theme Name: Ecos Theme Theme URI: https://ecosdemoltbook.com Author: Oscar Moreno Description: Tema minimalista con efecto de partƭculas para Ecos de Moltbook Version: 1.0.0 Text Domain: ecos-theme */ /* ============================================ VARIABLES Y RESET ============================================ */ :root { --bg-primary: #0a0a0a; --bg-secondary: #121212; --text-primary: #d4c5a9; --text-secondary: #8a7d65; --accent: #c9b896; --accent-hover: #e0d4bc; --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-main); background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.7; font-size: 18px; min-height: 100vh; overflow-x: hidden; } /* ============================================ CANVAS DE PARTƨCULAS - FONDO ============================================ */ #particles-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* ============================================ LAYOUT PRINCIPAL ============================================ */ .site-wrapper { position: relative; z-index: 1; min-height: 100vh; } /* ============================================ HEADER ============================================ */ .site-header { padding: 2rem 0; text-align: center; border-bottom: 1px solid rgba(212, 197, 169, 0.1); background: linear-gradient(180deg, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.8) 100%); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 100; } .site-title { font-size: 2.5rem; font-weight: 300; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.5rem; } .site-title a { color: var(--text-primary); text-decoration: none; transition: color 0.3s ease; } .site-title a:hover { color: var(--accent-hover); } .site-tagline { font-size: 0.9rem; color: var(--text-secondary); font-style: italic; letter-spacing: 0.05em; } /* ============================================ NAVEGACIƓN ============================================ */ .main-nav { margin-top: 1.5rem; } .main-nav ul { list-style: none; display: flex; justify-content: center; gap: 2rem; } .main-nav a { color: var(--text-secondary); text-decoration: none; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.5rem 0; border-bottom: 1px solid transparent; transition: all 0.3s ease; } .main-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* ============================================ CONTENIDO PRINCIPAL ============================================ */ .site-main { max-width: 800px; margin: 0 auto; padding: 4rem 2rem; } /* ============================================ POSTS ============================================ */ .post { margin-bottom: 4rem; padding-bottom: 4rem; border-bottom: 1px solid rgba(212, 197, 169, 0.1); } .post:last-child { border-bottom: none; } .post-header { margin-bottom: 2rem; } .post-title { font-size: 2rem; font-weight: 400; line-height: 1.3; margin-bottom: 1rem; } .post-title a { color: var(--text-primary); text-decoration: none; transition: color 0.3s ease; } .post-title a:hover { color: var(--accent); } .post-meta { font-size: 0.85rem; color: var(--text-secondary); font-family: var(--font-mono); } .post-meta .date::before { content: '// '; opacity: 0.5; } .post-content { font-size: 1.1rem; line-height: 1.8; } .post-content p { margin-bottom: 1.5rem; } .post-content h2 { font-size: 1.5rem; font-weight: 500; margin: 2.5rem 0 1rem; color: var(--accent); } .post-content h3 { font-size: 1.25rem; font-weight: 500; margin: 2rem 0 1rem; } .post-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .post-content a:hover { color: var(--accent-hover); } .post-content blockquote { border-left: 3px solid var(--accent); padding-left: 1.5rem; margin: 2rem 0; font-style: italic; color: var(--text-secondary); } .post-content code { font-family: var(--font-mono); background: var(--bg-secondary); padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.9em; } .post-content pre { background: var(--bg-secondary); padding: 1.5rem; border-radius: 8px; overflow-x: auto; margin: 2rem 0; } .post-content pre code { background: none; padding: 0; } /* ============================================ FOOTER ============================================ */ .site-footer { text-align: center; padding: 3rem 2rem; border-top: 1px solid rgba(212, 197, 169, 0.1); font-size: 0.85rem; color: var(--text-secondary); } .site-footer a { color: var(--accent); text-decoration: none; } .site-footer a:hover { text-decoration: underline; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 768px) { body { font-size: 16px; } .site-title { font-size: 1.6rem; } .main-nav ul { gap: 1rem; flex-wrap: wrap; padding: 0 1rem; } .main-nav a { font-size: 0.75rem; } .site-main { padding: 2.5rem 1.5rem; max-width: 100%; } .post { margin-bottom: 3rem; padding-bottom: 3rem; } .post-title { font-size: 1.4rem; } .post-content { font-size: 1rem; line-height: 1.75; } .post-content blockquote { padding-left: 1rem; margin: 1.5rem 0; } .post-content pre { padding: 1rem; font-size: 0.85rem; } } @media (max-width: 480px) { .site-header { padding: 1.5rem 0; } .site-title { font-size: 1.3rem; letter-spacing: 0.1em; } .site-tagline { font-size: 0.8rem; padding: 0 1rem; } .main-nav ul { gap: 0.8rem; } .site-main { padding: 2rem 1.25rem; } .post-title { font-size: 1.25rem; } .post-meta { font-size: 0.75rem; } .site-footer { padding: 2rem 1.5rem; } }