/* ============================================================ THEMES.CSS — 5 variantes visuales para 60 sitios Cada tema cambia: tipografía, header, hero, cards, footer Se activa con clase en : theme-classic, theme-modern, etc. Colores dinámicos vienen de CSS custom properties: --color-primario y --color-secundario (set inline por template) ============================================================ */ /* ===== VARIABLES BASE (overridden por cada tema) ===== */ body { --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --color-primario: #C41E1E; --color-secundario: #1A1A1A; --header-bg: #FFFFFF; --header-text: #1A1A1A; --header-border: var(--color-primario); --card-radius: 8px; --card-shadow: 0 2px 8px rgba(0,0,0,0.08); --card-border: none; --section-accent: var(--color-primario); } /* Override font-family para todo el body */ body { font-family: var(--font-body); } h1, h2, h3, h4, h5, h6, .hero-title, .section-title, .article-title, .card-title, .logo, .category-title { font-family: var(--font-heading); } /* ============================================================ THEME 1: CLASSIC — Periódico tradicional Serif, formal, líneas limpias, sin sombras ============================================================ */ .theme-classic { --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Source Serif 4', Georgia, serif; --card-radius: 0; --card-shadow: none; --card-border: 1px solid #E0E0E0; } /* Classic: Header con línea fina superior */ .theme-classic .site-header { border-bottom: 1px solid #E0E0E0; border-top: 4px solid var(--color-primario); box-shadow: none; } .theme-classic .logo { font-family: 'Playfair Display', Georgia, serif; font-size: 1.7rem; letter-spacing: -1px; } .theme-classic .nav-link { font-family: var(--font-body); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 1px; font-weight: 600; } /* Classic: Hero más contenido, texto elegante */ .theme-classic .hero { max-height: 420px; } .theme-classic .hero-title { font-size: 2.8rem; font-weight: 800; font-style: italic; line-height: 1.1; } .theme-classic .hero-badge { border-radius: 0; font-family: var(--font-body); letter-spacing: 2px; } /* Classic: Cards sin sombra, con borde inferior */ .theme-classic .news-card { border-radius: 0; box-shadow: none; border-bottom: 2px solid #E0E0E0; background: transparent; } .theme-classic .news-card:hover { transform: none; box-shadow: none; border-bottom-color: var(--color-primario); } .theme-classic .card-image-link { border-radius: 0; } .theme-classic .card-badge { border-radius: 0; font-family: var(--font-body); letter-spacing: 1.5px; } .theme-classic .card-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; font-weight: 700; } /* Classic: Section titles con línea inferior */ .theme-classic .section-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.6rem; padding-left: 0; padding-bottom: 12px; border-bottom: 2px solid var(--color-primario); } .theme-classic .section-title::before { display: none; } /* Classic: Footer elegante */ .theme-classic .site-footer { background: #1A1A1A; } .theme-classic .footer-brand .logo { font-family: 'Playfair Display', Georgia, serif; } .theme-classic .footer-cats h4, .theme-classic .footer-contact h4 { font-family: var(--font-body); letter-spacing: 2px; } /* ============================================================ THEME 2: MODERN — Limpio, actual (default/base) Inter, sombras suaves, esquinas redondeadas ============================================================ */ .theme-modern { --font-heading: 'Inter', -apple-system, sans-serif; --font-body: 'Inter', -apple-system, sans-serif; --card-radius: 8px; --card-shadow: 0 2px 8px rgba(0,0,0,0.08); --card-border: none; } /* Modern es el diseño base, no necesita muchos overrides */ .theme-modern .site-header { border-bottom: 3px solid var(--color-primario); } /* ============================================================ THEME 3: BOLD — Oscuro, contrastante, impactante Oswald + Roboto, dark header, tipografía grande ============================================================ */ .theme-bold { --font-heading: 'Oswald', Impact, sans-serif; --font-body: 'Roboto', -apple-system, sans-serif; --card-radius: 2px; --card-shadow: 0 2px 6px rgba(0,0,0,0.15); --card-border: none; } /* Bold: Header oscuro */ .theme-bold .site-header { background: var(--color-secundario); border-bottom: 4px solid var(--color-primario); } .theme-bold .logo { font-family: 'Oswald', Impact, sans-serif; font-size: 1.6rem; text-transform: uppercase; letter-spacing: 2px; } .theme-bold .logo-clave, .theme-bold .logo-nacional { color: #FFFFFF; } .theme-bold .logo-nacional { color: var(--color-primario); } .theme-bold .nav-link { color: rgba(255,255,255,0.8); font-family: 'Roboto', sans-serif; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.5px; } .theme-bold .nav-link:hover { color: #FFFFFF; background: rgba(255,255,255,0.1); } .theme-bold .search-form { background: rgba(255,255,255,0.1); } .theme-bold .search-form input { color: #FFFFFF; } .theme-bold .search-form input::placeholder { color: rgba(255,255,255,0.5); } .theme-bold .search-form button { color: rgba(255,255,255,0.7); } .theme-bold .hamburger span { background: #FFFFFF; } /* Bold: Hero grande y oscuro */ .theme-bold .hero { max-height: 560px; } .theme-bold .hero-img { opacity: 0.5; } .theme-bold .hero-title { font-family: 'Oswald', Impact, sans-serif; font-size: 3rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .theme-bold .hero-badge { border-radius: 2px; text-transform: uppercase; letter-spacing: 2px; font-family: 'Roboto', sans-serif; } /* Bold: Cards con esquinas afiladas */ .theme-bold .news-card { border-radius: 2px; } .theme-bold .news-card:hover { transform: translateY(-2px); } .theme-bold .card-image-link { border-radius: 2px 2px 0 0; } .theme-bold .card-badge { border-radius: 2px; letter-spacing: 1px; } .theme-bold .card-title { font-family: 'Oswald', Impact, sans-serif; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.25; } /* Bold: Section titles uppercase con línea gruesa */ .theme-bold .section-title { font-family: 'Oswald', Impact, sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: 1.3rem; padding-left: 0; padding-bottom: 12px; border-bottom: 4px solid var(--color-primario); } .theme-bold .section-title::before { display: none; } /* Bold: Footer oscuro */ .theme-bold .site-footer { background: #0D0D0D; } .theme-bold .footer-brand .logo { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 2px; } /* ============================================================ THEME 4: MAGAZINE — Colorido, visual, image-forward DM Sans + DM Serif Display, overlay cards ============================================================ */ .theme-magazine { --font-heading: 'DM Serif Display', Georgia, serif; --font-body: 'DM Sans', -apple-system, sans-serif; --card-radius: 12px; --card-shadow: 0 4px 20px rgba(0,0,0,0.06); --card-border: none; } /* Magazine: Header con barra de acento superior */ .theme-magazine .site-header { border-bottom: none; border-top: 5px solid var(--color-primario); box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .theme-magazine .logo { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.6rem; letter-spacing: -0.5px; } .theme-magazine .nav-link { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 0.88rem; border-radius: 20px; } /* Magazine: Hero con gradiente colorido */ .theme-magazine .hero { max-height: 480px; } .theme-magazine .hero-overlay { background: linear-gradient(transparent 20%, rgba(0,0,0,0.75)); } .theme-magazine .hero-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 2.6rem; font-weight: 400; } .theme-magazine .hero-badge { border-radius: 20px; padding: 6px 18px; font-family: 'DM Sans', sans-serif; } /* Magazine: Cards grandes y redondeadas */ .theme-magazine .news-card { border-radius: 12px; overflow: hidden; } .theme-magazine .news-card:hover { transform: translateY(-6px); box-shadow: 0 8px 30px rgba(0,0,0,0.12); } .theme-magazine .card-image-link { aspect-ratio: 16/9; } .theme-magazine .card-badge { border-radius: 20px; padding: 4px 14px; font-family: 'DM Sans', sans-serif; } .theme-magazine .card-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.1rem; font-weight: 400; } .theme-magazine .card-body { padding: 20px; } /* Magazine: Section titles con bloque de color */ .theme-magazine .section-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.6rem; font-weight: 400; padding-left: 16px; } .theme-magazine .section-title::before { width: 5px; border-radius: 3px; } /* Magazine: Footer con color de acento */ .theme-magazine .site-footer { background: var(--color-secundario); } .theme-magazine .footer-brand .logo { font-family: 'DM Serif Display', Georgia, serif; } /* Magazine: Grid primera fila 2 columnas grandes */ .theme-magazine .news-grid { grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .theme-magazine .news-grid { grid-template-columns: repeat(2, 1fr); } .theme-magazine .news-grid .news-card:first-child { grid-column: 1 / -1; } .theme-magazine .news-grid .news-card:first-child .card-image-link { aspect-ratio: 21/9; } .theme-magazine .news-grid .news-card:first-child .card-title { font-size: 1.5rem; } } /* ============================================================ THEME 5: MINIMAL — Ultra-limpio, elegante, espacioso Libre Baskerville + Lato, sin decoraciones ============================================================ */ .theme-minimal { --font-heading: 'Libre Baskerville', Georgia, serif; --font-body: 'Lato', -apple-system, sans-serif; --card-radius: 0; --card-shadow: none; --card-border: none; } /* Minimal: Header ultra-limpio */ .theme-minimal .site-header { border-bottom: 1px solid #E8E8E8; border-top: none; box-shadow: none; } .theme-minimal .header-inner { height: 72px; } .theme-minimal .logo { font-family: 'Libre Baskerville', Georgia, serif; font-size: 1.3rem; font-weight: 700; letter-spacing: 0; } .theme-minimal .nav-link { font-family: 'Lato', sans-serif; font-size: 0.82rem; font-weight: 400; letter-spacing: 0.5px; text-transform: uppercase; color: #666; border-radius: 0; padding: 8px 12px; } .theme-minimal .nav-link:hover { background: transparent; color: var(--color-primario); } .theme-minimal .search-form { background: transparent; border: 1px solid #E0E0E0; border-radius: 2px; } /* Minimal: Hero contenido, texto grande sin mucho efecto */ .theme-minimal .hero { max-height: 400px; } .theme-minimal .hero-img { opacity: 0.6; } .theme-minimal .hero-overlay { padding: 80px 48px 48px; } .theme-minimal .hero-title { font-family: 'Libre Baskerville', Georgia, serif; font-size: 2.2rem; font-weight: 700; line-height: 1.2; } .theme-minimal .hero-badge { background: transparent; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.6); border-radius: 0; font-family: 'Lato', sans-serif; font-weight: 400; letter-spacing: 2px; font-size: 0.7rem; } /* Minimal: Cards limpias, solo tipografía */ .theme-minimal .news-card { box-shadow: none; border-radius: 0; background: transparent; } .theme-minimal .news-card:hover { transform: none; box-shadow: none; } .theme-minimal .card-image-link { aspect-ratio: 3/2; } .theme-minimal .card-badge { background: transparent; color: var(--color-primario); border: 1px solid var(--color-primario); border-radius: 0; font-family: 'Lato', sans-serif; font-size: 0.7rem; font-weight: 400; letter-spacing: 1.5px; } .theme-minimal .card-title { font-family: 'Libre Baskerville', Georgia, serif; font-size: 1rem; font-weight: 700; line-height: 1.4; } .theme-minimal .card-excerpt { font-family: 'Lato', sans-serif; font-size: 0.88rem; color: #888; } .theme-minimal .card-body { padding: 16px 0; } /* Minimal: Section titles simples */ .theme-minimal .section-title { font-family: 'Lato', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 3px; font-weight: 400; color: #999; padding-left: 0; margin-bottom: 32px; } .theme-minimal .section-title::before { display: none; } /* Minimal: News grid más abierto */ .theme-minimal .news-grid { gap: 32px; } /* Minimal: Footer limpio */ .theme-minimal .site-footer { background: #FAFAFA; color: #1A1A1A; border-top: 1px solid #E8E8E8; } .theme-minimal .footer-brand .logo-clave { color: #1A1A1A; } .theme-minimal .footer-tagline { color: #888; } .theme-minimal .footer-cats h4, .theme-minimal .footer-contact h4 { color: #888; } .theme-minimal .footer-links a { color: #555; } .theme-minimal .footer-links a:hover { color: var(--color-primario); } .theme-minimal .footer-contact p { color: #555; } .theme-minimal .footer-bottom { border-top: 1px solid #E0E0E0; } .theme-minimal .footer-bottom p { color: #999; } /* Minimal: Latest section más padding */ .theme-minimal .latest-section { padding: 64px 0; } /* ============================================================ ARTICLE PAGE — Theme overrides ============================================================ */ /* Classic article */ .theme-classic .article-title { font-family: 'Playfair Display', Georgia, serif; font-style: italic; } .theme-classic .article-content { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.1rem; line-height: 1.8; } .theme-classic .article-badge { border-radius: 0; } /* Bold article */ .theme-bold .article-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; } .theme-bold .article-content { font-family: 'Roboto', sans-serif; line-height: 1.75; } .theme-bold .article-badge { border-radius: 2px; } /* Magazine article */ .theme-magazine .article-title { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; } .theme-magazine .article-content { font-family: 'DM Sans', sans-serif; line-height: 1.8; } .theme-magazine .article-badge { border-radius: 20px; } /* Minimal article */ .theme-minimal .article-title { font-family: 'Libre Baskerville', Georgia, serif; } .theme-minimal .article-content { font-family: 'Lato', sans-serif; line-height: 1.85; color: #333; } .theme-minimal .article-badge { background: transparent; color: var(--color-primario); border: 1px solid var(--color-primario); border-radius: 0; } .theme-minimal .share-btn { border-radius: 0; } /* ============================================================ RESPONSIVE — Theme-specific adjustments ============================================================ */ @media (max-width: 768px) { .theme-classic .hero-title { font-size: 1.8rem; } .theme-bold .hero-title { font-size: 1.8rem; } .theme-magazine .hero-title { font-size: 1.8rem; } .theme-minimal .hero-title { font-size: 1.6rem; } .theme-magazine .news-grid { grid-template-columns: 1fr; } .theme-magazine .news-grid .news-card:first-child .card-image-link { aspect-ratio: 16/9; } .theme-magazine .news-grid .news-card:first-child .card-title { font-size: 1.1rem; } }